haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-01 15:09:14 +00:00
Code Issues Releases Wiki Activity

Markdown editor update (#4604)

Browse Source 
* update markdown editor

* update markdown editor

* delete cdoc files
This commit is contained in:
songjiaqi1
2020-06-30 21:10:47 +08:00
committed by GitHub
parent 73c9e967c1
commit bd5cf9e579
23 changed files with 1385 additions and 1103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/markdown-view/comment-dialog.js
View File

@@ -6,7 +6,7 @@ import { gettext } from '../../utils/constants';
import '../../css/markdown-viewer/comment-dialog.css';
const propTypes = {
editorUtilities: PropTypes.object.isRequired,
editorApi: PropTypes.object.isRequired,
quote: PropTypes.string.isRequired,
commentPosition: PropTypes.object.isRequired,
onCommentAdded: PropTypes.func.isRequired,
@@ -38,7 +38,7 @@ class CommentDialog extends React.Component {
position: this.props.commentPosition,
};
let detailJSON = JSON.stringify(detail);
this.props.editorUtilities.postComment(comment, detailJSON).then((res) => {
this.props.editorApi.postComment(comment, detailJSON).then((res) => {
this.props.onCommentAdded();
});
}
@@ -68,7 +68,7 @@ class CommentDialog extends React.Component {
render() {
return (
<div className="comment-dialog">
<div>{this.props.editorUtilities.name}</div>
<div>{this.props.editorApi.name}</div>
<blockquote className="comment-dialog-quote">
<div dangerouslySetInnerHTML={{ __html: this.state.quote}}></div>
</blockquote>

22
frontend/src/components/markdown-view/history-list.js
View File

@@ -8,7 +8,7 @@ import { gettext } from '../../utils/constants';
import '../../css/markdown-viewer/history-viewer.css';
const propTypes = {
editorUtilities: PropTypes.object.isRequired,
editorApi: PropTypes.object.isRequired,
showDiffViewer: PropTypes.func.isRequired,
setDiffViewerContent: PropTypes.func.isRequired,
reloadDiffContent: PropTypes.func.isRequired,
@@ -29,24 +29,24 @@ class HistoryList extends React.Component {
}
componentDidMount() {
this.props.editorUtilities.listFileHistoryRecords(1, this.perPage).then((res) => {
this.props.editorApi.listFileHistoryRecords(1, this.perPage).then((res) => {
this.setState({
historyList: res.data.data,
totalReversionCount: res.data.total_count
});
if (res.data.data.length > 1) {
axios.all([
this.props.editorUtilities.getFileHistoryVersion(res.data.data[0].commit_id, res.data.data[0].path),
this.props.editorUtilities.getFileHistoryVersion(res.data.data[1].commit_id, res.data.data[1].path)
this.props.editorApi.getFileHistoryVersion(res.data.data[0].commit_id, res.data.data[0].path),
this.props.editorApi.getFileHistoryVersion(res.data.data[1].commit_id, res.data.data[1].path)
]).then(axios.spread((res1, res2) => {
axios.all([this.props.editorUtilities.getFileContent(res1.data), this.props.editorUtilities.getFileContent(res2.data)]).then(axios.spread((content1,content2) => {
axios.all([this.props.editorApi.getFileContent(res1.data), this.props.editorApi.getFileContent(res2.data)]).then(axios.spread((content1,content2) => {
this.props.showDiffViewer();
this.props.setDiffViewerContent(content1.data, content2.data);
}));
}));
} else {
this.props.editorUtilities.getFileHistoryVersion(res.data.data[0].commit_id, res.data.data[0].path).then((res) => {
this.props.editorUtilities.getFileContent(res.data).then((content) => {
this.props.editorApi.getFileHistoryVersion(res.data.data[0].commit_id, res.data.data[0].path).then((res) => {
this.props.editorApi.getFileContent(res.data).then((content) => {
this.props.showDiffViewer();
this.props.setDiffViewerContent(content.data, '');
});
@@ -62,10 +62,10 @@ class HistoryList extends React.Component {
activeItem: key,
});
axios.all([
this.props.editorUtilities.getFileHistoryVersion(currentItem.commit_id, currentItem.path),
this.props.editorUtilities.getFileHistoryVersion(preItem.commit_id, preItem.path)
this.props.editorApi.getFileHistoryVersion(currentItem.commit_id, currentItem.path),
this.props.editorApi.getFileHistoryVersion(preItem.commit_id, preItem.path)
]).then(axios.spread((res1, res2) => {
axios.all([this.props.editorUtilities.getFileContent(res1.data), this.props.editorUtilities.getFileContent(res2.data)]).then(axios.spread((content1,content2) => {
axios.all([this.props.editorApi.getFileContent(res1.data), this.props.editorApi.getFileContent(res2.data)]).then(axios.spread((content1,content2) => {
this.props.showDiffViewer();
this.props.setDiffViewerContent(content1.data, content2.data);
}));
@@ -84,7 +84,7 @@ class HistoryList extends React.Component {
currentPage: currentPage,
loading : true
});
this.props.editorUtilities.listFileHistoryRecords(currentPage, this.perPage).then((res) => {
this.props.editorApi.listFileHistoryRecords(currentPage, this.perPage).then((res) => {
let currentHistoryList = Object.assign([], this.state.historyList);
this.setState({
historyList: [...currentHistoryList, ...res.data.data],

93
frontend/src/components/toolbar/cdoc-editor-topbar.js
View File

@@ -1,93 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { gettext, canGenerateShareLink } from '../../utils/constants';
import { IconButton, ButtonGroup, CollabUsersButton } from '@seafile/seafile-editor/dist/components/topbarcomponent/editorToolBar';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Tooltip } from 'reactstrap';
import FileInfo from '@seafile/seafile-editor/dist/components/topbarcomponent/file-info';
class MoreMenu extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
tooltipOpen: false,
dropdownOpen: false
};
}
tooltipToggle = () => {
this.setState({ tooltipOpen: !this.state.tooltipOpen });
}
dropdownToggle = () => {
this.setState({ dropdownOpen: !this.state.dropdownOpen });
}
render() {
return (
<Dropdown isOpen={this.state.dropdownOpen} toggle={this.dropdownToggle} direction="down" className="mx-lg-1">
<DropdownToggle id="moreButton">
<i className="fa fa-ellipsis-v" />
<Tooltip toggle={this.tooltipToggle} delay={{ show: 0, hide: 0 }} target="moreButton" placement='bottom' isOpen={this.state.tooltipOpen}>{gettext('More')}
</Tooltip>
</DropdownToggle>
<DropdownMenu className="drop-list" right={true}>
<DropdownItem onMouseDown={this.props.openDialogs.bind(this, 'help')}>{gettext('Help')}</DropdownItem>
</DropdownMenu>
</Dropdown>
);
}
}
class CDOCTopbar extends React.Component {
constructor(props) {
super(props);
}
render() {
let { contentChanged, saving } = this.props;
return (
<div className="sf-md-viewer-topbar">
<div className="sf-md-viewer-topbar-first d-flex justify-content-between">
<FileInfo
toggleStar={this.props.toggleStar}
editorUtilities={this.props.editorUtilities}
fileInfo={this.props.fileInfo}
showDraftSaved={this.props.showDraftSaved}
/>
<div className="topbar-btn-container">
{this.props.collabUsers.length > 0 && <CollabUsersButton className={'collab-users-dropdown'}
users={this.props.collabUsers} id={'usersButton'} />}
<ButtonGroup>
{canGenerateShareLink &&
<IconButton id={'shareBtn'} text={gettext('Share')} icon={'fa fa-share-alt'}
onMouseDown={this.props.toggleShareLinkDialog} />
}
<IconButton text={gettext('Back to parent directory')} id={'parentDirectory'}
icon={'fa fa-folder-open'} onMouseDown={this.props.backToParentDirectory} />
{
this.props.showFileHistory && <IconButton id={'historyButton'}
text={gettext('File History')} onMouseDown={this.props.toggleHistory} icon={'fa fa-history'} />
}
{saving ?
<button type={'button'} className={'btn btn-icon btn-secondary btn-active'}>
<i className={'fa fa-spin fa-spinner'} /></button>
:
<IconButton text={gettext('Save')} id={'saveButton'} icon={'fa fa-save'} disabled={!contentChanged}
onMouseDown={this.props.onSave} isActive={contentChanged} />
}
</ButtonGroup>
<MoreMenu
openDialogs={this.props.openDialogs}
/>
</div>
</div>
</div>
);
}
}
export default CDOCTopbar;

20
frontend/src/components/toolbar/markdown-viewer-toolbar.js
View File

@@ -1,9 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';
import { gettext, canGenerateShareLink, isPro, mediaUrl, canLockUnlockFile } from '../../utils/constants';
import { IconButton, ButtonGroup, CollabUsersButton } from '@seafile/seafile-editor/dist/components/topbarcomponent/editorToolBar';
import { IconButton, ButtonGroup, CollabUsersButton } from '@seafile/seafile-editor/dist/components/topbar-component/editor-toolbar';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Tooltip } from 'reactstrap';
import FileInfo from '@seafile/seafile-editor/dist/components/topbarcomponent/file-info';
import FileInfo from '@seafile/seafile-editor/dist/components/topbar-component/file-info';
const { seafileCollabServer } = window.app.config;
@@ -11,7 +11,7 @@ const propTypes = {
isDocs: PropTypes.bool.isRequired,
hasDraft: PropTypes.bool.isRequired,
isDraft: PropTypes.bool.isRequired,
editorUtilities: PropTypes.object.isRequired,
editorApi: PropTypes.object.isRequired,
collabUsers: PropTypes.array.isRequired,
fileInfo: PropTypes.object.isRequired,
toggleShareLinkDialog: PropTypes.func.isRequired,
@@ -111,7 +111,7 @@ class MarkdownViewerToolbar extends React.Component {
<div className="sf-md-viewer-topbar-first d-flex justify-content-between">
<FileInfo
toggleStar={this.props.toggleStar}
editorUtilities={this.props.editorUtilities}
editorApi={this.props.editorApi}
fileInfo={this.props.fileInfo}
showDraftSaved={this.props.showDraftSaved}
isLocked={isLocked}
@@ -122,7 +122,7 @@ class MarkdownViewerToolbar extends React.Component {
{(this.props.hasDraft && !this.props.isDraft) &&
<div className='seafile-btn-view-review'>
<div className='tag tag-green'>{gettext('This file is in draft stage.')}
<a className="ml-2" onMouseDown={this.props.editorUtilities.goDraftPage}>{gettext('View Draft')}</a></div>
<a className="ml-2" onMouseDown={this.props.editorApi.goDraftPage}>{gettext('View Draft')}</a></div>
</div>
}
<div className="topbar-btn-container">
@@ -133,10 +133,10 @@ class MarkdownViewerToolbar extends React.Component {
{this.props.isDraft &&
<div>
<button type="button" className="btn btn-success seafile-btn-add-review"
onMouseDown={this.props.editorUtilities.goDraftPage}>{gettext('Start review')}</button>
onMouseDown={this.props.editorApi.goDraftPage}>{gettext('Start review')}</button>
{canPublishDraft &&
<button type="button" className="btn btn-success seafile-btn-add-review"
onMouseDown={this.props.editorUtilities.publishDraftFile}>{gettext('Publish')}</button>
onMouseDown={this.props.editorApi.publishDraftFile}>{gettext('Publish')}</button>
}
</div>
}
@@ -184,7 +184,7 @@ class MarkdownViewerToolbar extends React.Component {
<div className="sf-md-viewer-topbar-first-narrow d-flex justify-content-between">
<FileInfo
toggleStar={this.props.toggleStar}
editorUtilities={this.props.editorUtilities}
editorApi={this.props.editorApi}
fileInfo={this.props.fileInfo}
showDraftSaved={this.props.showDraftSaved}
/>
@@ -217,7 +217,7 @@ class MarkdownViewerToolbar extends React.Component {
return (
<div className="sf-md-viewer-topbar">
<div className="sf-md-viewer-topbar-first d-flex justify-content-between">
<FileInfo toggleStar={this.props.toggleStar} editorUtilities={this.props.editorUtilities}
<FileInfo toggleStar={this.props.toggleStar} editorApi={this.props.editorApi}
fileInfo={this.props.fileInfo}/>
<div className="topbar-btn-container">
{(seafileCollabServer && this.props.collabUsers.length > 0) &&
@@ -245,7 +245,7 @@ class MarkdownViewerToolbar extends React.Component {
</div>
</div>
<div className="sf-md-viewer-topbar-first-narrow d-flex justify-content-between">
<FileInfo toggleStar={this.props.toggleStar} editorUtilities={this.props.editorUtilities}
<FileInfo toggleStar={this.props.toggleStar} editorApi={this.props.editorApi}
fileInfo={this.props.fileInfo}/>
<div className="topbar-btn-container">
<ButtonGroup>

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

@@ -183,10 +183,8 @@ class WikiMarkdownViewer extends React.Component {
}
modifyValueBeforeRender = (value) => {
let nodes = value.document.nodes;
let newNodes = Utils.changeMarkdownNodes(nodes, this.changeInlineNode);
value.document.nodes = newNodes;
return value;
let newNodes = Utils.changeMarkdownNodes(value, this.changeInlineNode);
return newNodes;
}
renderMarkdown = () => {