haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-19 10:26:17 +00:00
Code Issues Releases Wiki Activity

Merge pull request #5818 from haiwen/update-seafile-editor

Browse Source 
Update seafile editor
This commit is contained in:
杨顺强
2023-12-11 09:37:44 +08:00
committed by GitHub
parent 0eb819f576 8c03e230bb
commit d308380115
49 changed files with 12925 additions and 5893 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/components/dialog/terms-editor-dialog.js
View File

@@ -13,6 +13,14 @@ const propTypes = {
class TermsEditorDialog extends React.Component {
constructor(props) {
super(props);
this.state = {
isValueChanged: false,
};
this.editorRef = React.createRef();
}
static defaultProps = {
title: gettext('Terms'),
};
@@ -22,20 +30,20 @@ class TermsEditorDialog extends React.Component {
};
toggle = () => {
if (this.isContentChanged()) {
const { isValueChanged } = this.state;
if (isValueChanged) {
let currentContent = this.getCurrentContent();
this.props.onCommit(currentContent);
}
this.props.onCloseEditorDialog();
};
isContentChanged = () => {
return this.simpleEditor.hasContentChange();
onContentChanged = () => {
return this.setState({isValueChanged: true});
};
getCurrentContent = () => {
let markdownContent = this.simpleEditor.getMarkdown();
return markdownContent;
return this.editorRef.current.getValue();
};
setSimpleEditorRef = (editor) => {
@@ -58,8 +66,9 @@ class TermsEditorDialog extends React.Component {
<ModalHeader className="conditions-editor-dialog-title" toggle={this.toggle}>{title}</ModalHeader>
<ModalBody className={'conditions-editor-dialog-main'}>
<SimpleEditor
onRef={this.setSimpleEditorRef.bind(this)}
ref={this.editorRef}
value={content || ''}
onContentChanged={this.onContentChanged}
/>
</ModalBody>
</Modal>

15
frontend/src/components/file-content-view/markdown.js
View File

@@ -9,14 +9,13 @@ const { fileContent } = window.app.pageOptions;
class FileContent extends React.Component {
render() {
return (
<div className="file-view-content flex-1 o-auto">
<div className="md-content">
<MarkdownViewer
markdownContent={fileContent}
showTOC={false}
scriptSource={mediaUrl + 'js/mathjax/tex-svg.js'}
/>
</div>
<div className="file-view-content md-content">
<MarkdownViewer
isFetching={false}
value={fileContent}
isShowOutline={false}
mathJaxSource={mediaUrl + 'js/mathjax/tex-svg.js'}
/>
</div>
);
}

300
frontend/src/components/index-viewer.js
View File

@@ -1,300 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { repoID, slug, serviceURL, isPublicWiki } from '../utils/constants';
import { Utils } from '../utils/utils';
import { deserialize } from '@seafile/seafile-editor';
import'../css/index-viewer.css';
const viewerPropTypes = {
indexContent: PropTypes.string.isRequired,
onLinkClick: PropTypes.func.isRequired,
};
class TreeNode {
constructor({ name, href, parentNode }) {
this.name = name;
this.href = href;
this.parentNode = parentNode || null;
this.children = [];
}
setParent(parentNode) {
this.parentNode = parentNode;
}
addChildren(nodeList) {
nodeList.forEach((node) => {
node.setParent(this);
});
this.children = nodeList;
}
}
class IndexContentViewer extends React.Component {
constructor(props) {
super(props);
this.links = [];
this.treeRoot = new TreeNode({ name: '', href: '' });
this.state = {
currentPath: '',
};
}
UNSAFE_componentWillMount() {
this.getRootNode();
}
componentDidMount() {
this.bindClickEvent();
}
UNSAFE_componentWillReceiveProps() {
this.removeClickEvent();
}
componentDidUpdate() {
this.bindClickEvent();
}
componentWillUnmount() {
this.removeClickEvent();
}
bindClickEvent = () => {
const contentClass = 'wiki-nav-content';
this.links = document.querySelectorAll(`.${contentClass} a`);
this.links.forEach(link => {
link.addEventListener('click', this.onLinkClick);
});
};
removeClickEvent = () => {
this.links.forEach(link => {
link.removeEventListener('click', this.onLinkClick);
});
};
onLinkClick = (event) => {
event.preventDefault();
const currentPath = event.target.getAttribute('data-path');
if (currentPath === this.state.currentPath) {
return;
} else if (currentPath) {
this.setState({ currentPath: currentPath });
}
const link = this.getLink(event.target);
if (link) this.props.onLinkClick(link);
};
getLink = (node) => {
const tagName = node.tagName;
if (!tagName || tagName === 'HTML') return;
if (tagName === 'A') {
return node.href;
} else {
return this.getLink(node.parentNode);
}
};
changeInlineNode = (item) => {
if (item.type == 'link' || item.type === 'image') {
let url;
// change image url
if (item.type == 'image' && isPublicWiki) {
url = item.data.src;
const re = new RegExp(serviceURL + '/lib/' + repoID +'/file.*raw=1');
// different repo
if (!re.test(url)) {
return;
}
// get image path
let index = url.indexOf('/file');
let index2 = url.indexOf('?');
const imagePath = url.substring(index + 5, index2);
// replace url
item.data.src = serviceURL + '/view-image-via-public-wiki/?slug=' + slug + '&path=' + imagePath;
}
else if (item.type == 'link') {
url = item.data.href;
/* eslint-disable */
let expression = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/
/* eslint-enable */
let re = new RegExp(expression);
// Solving relative paths
if (!re.test(url)) {
item.data.href = serviceURL + '/published/' + slug + '/' + url;
}
// change file url
else if (Utils.isInternalMarkdownLink(url, repoID)) {
let path = Utils.getPathFromInternalMarkdownLink(url, repoID);
// replace url
item.data.href = serviceURL + '/published/' + slug + path;
}
// change dir url
else if (Utils.isInternalDirLink(url, repoID)) {
let path = Utils.getPathFromInternalDirLink(url, repoID);
// replace url
item.data.href = serviceURL + '/published/' + slug + path;
}
}
}
return item;
};
getRootNode = () => {
let value = deserialize(this.props.indexContent);
const newNodes = Utils.changeMarkdownNodes(value, this.changeInlineNode);
newNodes.forEach((node) => {
if (node.type === 'unordered_list' || node.type === 'ordered_list') {
let treeRoot = this.transSlateToTree(node.children, this.treeRoot);
this.setNodePath(treeRoot, '/');
this.treeRoot = treeRoot;
}
});
};
setNodePath = (node, parentNodePath) => {
let name = node.name;
let path = parentNodePath === '/' ? parentNodePath + name : parentNodePath + '/' + name;
node.path = path;
if (node.children.length > 0) {
node.children.forEach(child => {
this.setNodePath(child, path);
});
}
};
// slateNodes is list items of an unordered list or ordered list, translate them to treeNode and add to parentTreeNode
transSlateToTree = (slateNodes, parentTreeNode) => {
let treeNodes = slateNodes.map((slateNode) => {
// item has children(unordered list)
if (slateNode.children.length === 2 && (slateNode.children[1].type === 'unordered_list' || slateNode.children[1].type === 'ordered_list')) {
// slateNode.nodes[0] is paragraph, create TreeNode, set name and href
const paragraphNode = slateNode.children[0];
const treeNode = this.transParagraph(paragraphNode);
// slateNode.nodes[1] is list, set it as TreeNode's children
const listNode = slateNode.children[1];
// Add sub list items to the tree node
return this.transSlateToTree(listNode.children, treeNode);
} else {
// item doesn't have children list
if (slateNode.children[0] && (slateNode.children[0].type === 'paragraph')) {
return this.transParagraph(slateNode.children[0]);
} else {
// list item contain table/code_block/blockqupta
return new TreeNode({ name: '', href: '' });
}
}
});
parentTreeNode.addChildren(treeNodes);
return parentTreeNode;
};
// translate slate_paragraph_node to treeNode
transParagraph = (paragraphNode) => {
let treeNode;
if (paragraphNode.children[1] && paragraphNode.children[1].type === 'link') {
// paragraph node is a link node
const linkNode = paragraphNode.children[1];
const textNode = linkNode.children[0];
let name = textNode ? textNode.text : '';
treeNode = new TreeNode({ name: name, href: linkNode.data.href });
} else if (paragraphNode.children[0]) {
// paragraph first child node is a text node, then get node name
const textNode = paragraphNode.children[0];
let name = textNode.text ? textNode.text : '';
treeNode = new TreeNode({ name: name, href: '' });
} else {
treeNode = new TreeNode({ name: '', href: '' });
}
return treeNode;
};
render() {
return (
<div className="mx-4 o-hidden">
<FolderItem node={this.treeRoot} bindClickEvent={this.bindClickEvent} currentPath={this.state.currentPath}/>
</div>
);
}
}
IndexContentViewer.propTypes = viewerPropTypes;
const FolderItemPropTypes = {
node: PropTypes.object.isRequired,
bindClickEvent: PropTypes.func.isRequired,
currentPath: PropTypes.string,
};
class FolderItem extends React.Component {
constructor(props) {
super(props);
this.state = {
expanded: false
};
}
toggleExpanded = () => {
this.setState({ expanded: !this.state.expanded }, () => {
if (this.state.expanded) this.props.bindClickEvent();
});
};
renderLink = ({ href, name, path }) => {
const className = `wiki-nav-content ${path === this.props.currentPath ? 'wiki-nav-content-highlight' : ''}`;
if (href && name) {
return <div className={className}><a href={href} data-path={path} onClick={this.toggleExpanded} title={name}>{name}</a></div>;
} else if (name) {
return <div className="wiki-nav-content"><span onClick={this.toggleExpanded} title={name}>{name}</span></div>;
} else {
return null;
}
};
componentDidMount() {
if (this.props.node && !this.props.node.parentNode) {
this.setState({ expanded: true }, () => {
this.props.bindClickEvent();
});
}
}
render() {
const { node } = this.props;
if (node.children.length > 0) {
return (
<React.Fragment>
{node.parentNode &&
<React.Fragment>
<span className="switch-btn" onClick={this.toggleExpanded}>
{this.state.expanded ? <i className="fa fa-caret-down"></i> : <i className="fa fa-caret-right"></i>}
</span>
{this.renderLink(node)}
</React.Fragment>
}
{this.state.expanded && node.children.map((child, index) => {
return (
<div className="pl-4 position-relative" key={index}>
<FolderItem node={child} bindClickEvent={this.props.bindClickEvent} currentPath={this.props.currentPath}/>
</div>
);
})}
</React.Fragment>
);
} else {
return this.renderLink(node);
}
}
}
FolderItem.propTypes = FolderItemPropTypes;
export default IndexContentViewer;

143
frontend/src/components/wiki-markdown-viewer.js
View File

@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { MarkdownViewer } from '@seafile/seafile-editor';
import { gettext, repoID, slug, serviceURL, isPublicWiki, sharedToken, mediaUrl } from '../utils/constants';
import { EXTERNAL_EVENTS, EventBus, MarkdownViewer } from '@seafile/seafile-editor';
import { gettext, isPublicWiki, mediaUrl, repoID, serviceURL, sharedToken, slug } from '../utils/constants';
import Loading from './loading';
import { Utils } from '../utils/utils';
@@ -25,109 +25,30 @@ class WikiMarkdownViewer extends React.Component {
constructor(props) {
super(props);
this.state = {
activeTitleIndex: 0,
};
this.markdownContainer = React.createRef();
this.links = [];
this.titlesInfo = [];
this.scrollRef = React.createRef();
}
componentDidMount() {
// Bind event when first loaded
this.links = document.querySelectorAll(`.${contentClass} a`);
this.links.forEach(link => {
link.addEventListener('click', this.onLinkClick);
});
this.getTitlesInfo();
const eventBus = EventBus.getInstance();
this.unsubscribeLinkClick = eventBus.subscribe(EXTERNAL_EVENTS.ON_LINK_CLICK, this.onLinkClick);
}
UNSAFE_componentWillReceiveProps(nextProps) {
if (this.props.markdownContent === nextProps.markdownContent) {
return;
}
// Unbound event when updating
this.links.forEach(link => {
link.removeEventListener('click', this.onLinkClick);
});
}
componentDidUpdate() {
// Update completed, rebind event
this.links = document.querySelectorAll(`.${contentClass} a`);
this.links.forEach(link => {
link.addEventListener('click', this.onLinkClick);
});
if (this.titlesInfo.length === 0) {
this.getTitlesInfo();
}
}
componentWillUnmount() {
// Unbound events when the component is destroyed
this.links.forEach(link => {
link.removeEventListener('click', this.onLinkClick);
});
this.unsubscribeLinkClick();
}
getTitlesInfo = () => {
let titlesInfo = [];
const titleDom = document.querySelectorAll('h1[id^="user-content"]')[0];
if (titleDom) {
const id = titleDom.getAttribute('id');
let content = id && id.replace('user-content-', '');
content = content ? `${content} - ${slug}` : slug;
Utils.updateTabTitle(content);
}
let headingList = document.querySelectorAll('h2[id^="user-content"], h3[id^="user-content"]');
for (let i = 0; i < headingList.length; i++) {
titlesInfo.push(headingList[i].offsetTop);
}
this.titlesInfo = titlesInfo;
};
onLinkClick = (event) => {
event.preventDefault();
event.stopPropagation();
let link = '';
if (event.target.tagName !== 'A') {
let target = event.target.parentNode;
while (target.tagName !== 'A') {
target = target.parentNode;
}
link = target.href;
} else {
link = event.target.href;
let target = event.target;
while (!target.dataset || !target.dataset.url) {
target = target.parentNode;
}
if (!target) return;
link = target.dataset.url;
this.props.onLinkClick(link);
};
onScrollHandler = () => {
const contentScrollTop = this.markdownContainer.current.scrollTop + 180;
let titlesLength = this.titlesInfo.length;
let activeTitleIndex;
if (contentScrollTop <= this.titlesInfo[0]) {
activeTitleIndex = 0;
this.setState({activeTitleIndex: activeTitleIndex});
return;
}
if (contentScrollTop > this.titlesInfo[titlesLength - 1]) {
activeTitleIndex = this.titlesInfo.length - 1;
this.setState({activeTitleIndex: activeTitleIndex});
return;
}
for (let i = 0; i < titlesLength; i++) {
if (contentScrollTop > this.titlesInfo[i]) {
continue;
} else {
activeTitleIndex = i - 1;
break;
}
}
this.setState({activeTitleIndex: activeTitleIndex});
};
changeInlineNode = (item) => {
let url, imagePath;
@@ -149,21 +70,21 @@ class WikiMarkdownViewer extends React.Component {
}
item.data.src = serviceURL + '/view-image-via-public-wiki/?slug=' + slug + '&path=' + imagePath;
} else if (item.type == 'link') { // change link url
url = item.data.href;
url = item.url;
if (Utils.isInternalFileLink(url, repoID)) { // change file url
if (Utils.isInternalMarkdownLink(url, repoID)) {
let path = Utils.getPathFromInternalMarkdownLink(url, repoID);
// replace url
item.data.href = serviceURL + '/published/' + slug + path;
item.url = serviceURL + '/published/' + slug + path;
} else {
item.data.href = url.replace(/(.*)lib\/([-0-9a-f]{36})\/file(.*)/g, (match, p1, p2, p3) => {
item.url = url.replace(/(.*)lib\/([-0-9a-f]{36})\/file(.*)/g, (match, p1, p2, p3) => {
return `${p1}d/${sharedToken}/files/?p=${p3}&dl=1`;
});
}
} else if (Utils.isInternalDirLink(url, repoID)) { // change dir url
let path = Utils.getPathFromInternalDirLink(url, repoID);
// replace url
item.data.href = serviceURL + '/published/' + slug + path;
item.url = serviceURL + '/published/' + slug + path;
}
}
@@ -176,30 +97,16 @@ class WikiMarkdownViewer extends React.Component {
};
renderMarkdown = () => {
let isTOCShow = true;
if (this.props.isTOCShow === false) {
isTOCShow = false;
}
if (this.props.isWiki) {
return (
<MarkdownViewer
showTOC={isTOCShow}
scriptSource={mediaUrl + 'js/mathjax/tex-svg.js'}
markdownContent={this.props.markdownContent}
activeTitleIndex={this.state.activeTitleIndex}
modifyValueBeforeRender={this.modifyValueBeforeRender}
/>
);
}
const { isTOCShow = true, isWiki, markdownContent } = this.props;
const props = {
isShowOutline: isTOCShow,
mathJaxSource: `${mediaUrl}js/mathjax/tex-svg.js`,
value: markdownContent,
scrollRef: this.scrollRef,
...(isWiki && {beforeRenderCallback: this.modifyValueBeforeRender})
};
return (
<MarkdownViewer
showTOC={isTOCShow}
scriptSource={mediaUrl + 'js/mathjax/tex-svg.js'}
markdownContent={this.props.markdownContent}
activeTitleIndex={this.state.activeTitleIndex}
/>
);
return <MarkdownViewer {...props} />;
};
render() {
@@ -209,7 +116,7 @@ class WikiMarkdownViewer extends React.Component {
// In dir-column-file repoID is one of props, width is 100%; In wiki-viewer repoID is not props, width isn't 100%
let contentClassName = `${this.props.repoID ? contentClass + ' w-100' : contentClass}`;
return (
<div ref={this.markdownContainer} className="wiki-page-container" onScroll={this.onScrollHandler.bind(this)}>
<div ref={this.scrollRef} className="wiki-page-container">
<div className={contentClassName}>
{this.props.children}
{this.renderMarkdown()}

102
frontend/src/components/wiki-outline.js
View File

@@ -1,102 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
const itemPropTypes = {
activeIndex: PropTypes.number.isRequired,
item: PropTypes.object.isRequired,
handleNavItemClick: PropTypes.func.isRequired,
};
class WikiOutlineItem extends React.Component {
handleNavItemClick = () => {
var activeId = this.props.item.id;
this.props.handleNavItemClick(activeId);
};
render() {
let item = this.props.item;
let activeIndex = parseInt(this.props.activeIndex);
let levelClass = item.depth === 3 ? ' textindent-2' : '';
let activeClass = item.key === activeIndex ? ' wiki-outline-item-active' : '';
let clazz = 'wiki-outline-item'+ levelClass + activeClass;
return (
<li className={clazz} data-index={item.key} onClick={this.handleNavItemClick}>
<a href={item.id} title={item.text}>{item.text}</a>
</li>
);
}
}
WikiOutlineItem.propTypes = itemPropTypes;
const outlinePropTypes = {
navItems: PropTypes.array.isRequired,
activeId: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
]).isRequired,
handleNavItemClick: PropTypes.func.isRequired,
};
class WikiOutline extends React.Component {
constructor(props) {
super(props);
this.state = {
activeIndex : 0,
scrollTop: 0,
};
}
UNSAFE_componentWillReceiveProps(nextProps) {
let _this = this;
let activeId = nextProps.activeId;
let navItems = nextProps.navItems;
let length = navItems.length;
for (let i = 0; i < length; i++) {
let flag = false;
let item = navItems[i];
if (item.id === activeId && item.key !== _this.state.activeIndex) {
let scrollTop = 0;
if (item.key > 20) {
scrollTop = - (item.key - 20)*27 + 'px';
if (parseInt(scrollTop) > 0) { // handle scroll quickly;
scrollTop = 0;
}
}
_this.setState({
activeIndex : item.key,
scrollTop: scrollTop
});
flag = true;
}
if (flag) {
break;
}
}
}
render() {
let style = {top: this.state.scrollTop};
return (
<ul className="wiki-viewer-outline" ref="outlineContainer" style={style}>
{this.props.navItems.map(item => {
return (
<WikiOutlineItem
key={item.key}
item={item}
activeIndex={this.state.activeIndex}
handleNavItemClick={this.props.handleNavItemClick}
/>
);
})}
</ul>
);
}
}
WikiOutline.propTypes = outlinePropTypes;
export default WikiOutline;