From d50f7a0af61dff0da5206c6565ab95f5abf0779c Mon Sep 17 00:00:00 2001 From: shanshuirenjia <978987373@qq.com> Date: Fri, 20 May 2022 16:26:53 +0800 Subject: [PATCH] optimize seafile-editor --- .../css/markdown-viewer/markdown-editor.css | 7 + .../markdown-editor/css/comments-list.css | 139 ++++++++++ .../markdown-editor/css/detail-list-view.css | 105 +++++++ .../pages/markdown-editor/css/rich-editor.css | 125 +++++++++ .../pages/markdown-editor/css/side-panel.css | 89 ++++++ frontend/src/pages/markdown-editor/index.js | 47 +--- .../rich-editor/comment-item.js | 151 ++++++++++ .../rich-editor/comment-panel.js | 243 ++++++++++++++++ .../rich-editor/detail-list-view.js | 97 +++++++ .../markdown-editor/rich-editor/index.js | 127 +++++++++ .../markdown-editor/rich-editor/side-panel.js | 101 +++++++ .../markdown-editor/seafile-editor/index.js | 262 ++++++++++++++++++ 12 files changed, 1449 insertions(+), 44 deletions(-) create mode 100644 frontend/src/pages/markdown-editor/css/comments-list.css create mode 100644 frontend/src/pages/markdown-editor/css/detail-list-view.css create mode 100644 frontend/src/pages/markdown-editor/css/rich-editor.css create mode 100644 frontend/src/pages/markdown-editor/css/side-panel.css create mode 100644 frontend/src/pages/markdown-editor/rich-editor/comment-item.js create mode 100644 frontend/src/pages/markdown-editor/rich-editor/comment-panel.js create mode 100644 frontend/src/pages/markdown-editor/rich-editor/detail-list-view.js create mode 100644 frontend/src/pages/markdown-editor/rich-editor/index.js create mode 100644 frontend/src/pages/markdown-editor/rich-editor/side-panel.js create mode 100644 frontend/src/pages/markdown-editor/seafile-editor/index.js diff --git a/frontend/src/css/markdown-viewer/markdown-editor.css b/frontend/src/css/markdown-viewer/markdown-editor.css index 77b673fba7..d6e4d845e6 100644 --- a/frontend/src/css/markdown-viewer/markdown-editor.css +++ b/frontend/src/css/markdown-viewer/markdown-editor.css @@ -1,3 +1,10 @@ +#root { + display: flex; + flex-direction: column; + min-height: 0; + min-width: 0; +} + .seafile-md-viewer { height: 100%; flex-direction: row; diff --git a/frontend/src/pages/markdown-editor/css/comments-list.css b/frontend/src/pages/markdown-editor/css/comments-list.css new file mode 100644 index 0000000000..c7b57bd578 --- /dev/null +++ b/frontend/src/pages/markdown-editor/css/comments-list.css @@ -0,0 +1,139 @@ +.seafile-comment { + display: flex; + flex-direction: column; + height: 100%; +} +.seafile-comment-list { + overflow-y: auto; +} +.seafile-comment-list .comment-vacant { + padding: 1em; + text-align: center; +} +.seafile-comment-item { + padding: 15px 10px; + margin-bottom: 0; +} +.seafile-comment-item .seafile-comment-info { + padding-bottom: 0.5em; + height: 3em; + display: flex; + justify-content: flex-start; +} +.seafile-comment-item .seafile-comment-info .reviewer-info { + padding-left: 10px; + max-width: 75%; +} +.seafile-comment-item .seafile-comment-info .review-time { + font-size: 10px; + color: #777; +} +.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown { + margin-left: auto; +} +.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown button { + border: none; + box-shadow: none; + background-color: #fff; +} +.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown .seafile-comment-dropdown-btn { + color: #999; + background-color: transparent; +} +.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown:hover .seafile-comment-dropdown-btn { + color: #555; +} +.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown button:hover, +.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown button:focus { + border: none; + box-shadow: none; + background-color: #eee; +} +.seafile-comment-item .seafile-comment-content { + margin-left: 42px; + padding: 5px 10px; + border-radius: 4px; + background: #fff; +} +.seafile-comment-item .seafile-comment-content p { + word-break: break-all; +} +.seafile-comment-item blockquote { + cursor: pointer; +} +.seafile-comment-item .seafile-comment-content ol, +.seafile-comment-item .seafile-comment-content ul, +.seafile-comment-item .seafile-comment-content li { + margin-left: 10px; +} +.seafile-comment-item .seafile-comment-content table, +.seafile-comment-item .seafile-comment-content th, +.seafile-comment-item .seafile-comment-content td { + border: 1px solid #333; +} +.seafile-comment-item-resolved { + background-color: #e6ffed; +} +.seafile-comment-footer { + padding: 10px 10px; + border-top: 1px solid #e5e5e5; + display: flex; + flex-direction: column; + min-height: 150px; + max-height: 300px; +} +.seafile-comment-footer .add-comment-input, +.seafile-edit-comment .edit-comment-input { + border: 1px solid #e6e6dd; + padding: 5px; + min-height: 90px; + border-radius: 5px; + background-color: #fff; + width: 100%; +} +.seafile-comment-footer .add-comment-input { + border-bottom: none; + border-radius: 5px 5px 0 0; +} +.seafile-comment-footer .add-comment-input:focus { + outline: none; +} +.seafile-comment-footer .comment-submit-container { + border: 1px solid #e6e6dd; + border-top: none; + border-radius: 0 0 5px 5px; + padding: 5px; + background: #fff; + text-align: right; + position: relative; +} +.seafile-comment-footer .comment-submit-container::before { + border-top: 1px solid #e6e6dd; + content: ''; + position: absolute; + left: 5px; + right: 5px; + top: 0; +} +.seafile-comment-footer .submit-comment { + height: 28px; +} +.seafile-edit-comment .comment-btn { + height: 28px; +} + +.seafile-viewer-comment-btn { + position: absolute; + top: 0; + right: 5000px; + border: 1px solid rgba(0, 40, 100, 0.12); + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + border-radius: 3px; + background-color: #fff; + padding: 5px; +} +.seafile-viewer-comment-btn:hover { + cursor: pointer; + background-color: #eee; +} + diff --git a/frontend/src/pages/markdown-editor/css/detail-list-view.css b/frontend/src/pages/markdown-editor/css/detail-list-view.css new file mode 100644 index 0000000000..419c9d210c --- /dev/null +++ b/frontend/src/pages/markdown-editor/css/detail-list-view.css @@ -0,0 +1,105 @@ +.dirent-table-container tr { + border: none; +} + +.dirent-table-container th, +.dirent-table-container td { + padding: 5px 3px; + border: none; +} + +.dirent-table-container th { + font-size: 13px; + text-align: left; + font-weight: normal; + color: #9c9c9c; +} + +.dirent-table-container td { + font-size: 14px; + color: #333; + word-break: break-all; +} + +.dirent-table-container .file-tag-container th { + vertical-align: top; + list-style: none; +} + +.dirent-table-container .file-tag-container .tag-list { + list-style: none; +} + +.file-tag-list li { + display: flex; + align-items: center; + max-width: 180px; +} + +.file-tag-list .file-tag-item { + margin: .25rem 0; + padding: 0 .5rem; + width: max-content; + cursor: pointer; + background-color: #eee; + border-radius: 1rem; +} + +.file-tag-list .file-tag-item .file-tag { + width: 12px; + height: 12px; + position: relative; + display: inline-block; + width: 1rem; + height: 1rem; + border-radius: 50%; +} + +.file-tag-list .tag-name { + display: inline-block; + margin-left: 5px; + width: 80px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + +.file-related-files th { + vertical-align: top; +} + +.file-related-files td i { + padding: 0; +} + +.file-related-files td ul { + list-style: none; + max-height: 100px; + overflow-y: scroll; + white-space: nowrap; + overflow-x: hidden; + text-overflow: ellipsis; +} + +.file-related-files td ul li { + margin-bottom: 5px; +} + +.file-related-files ul li a, +.list-related-file-table tr td a { + color: #333; +} + +.list-related-file-body { + min-height: 200px; + max-height: 500px; + overflow-y: scroll; +} + +.detail-container .tab-content { + height: calc(100% - 73px); +} + +.detail-container .nav-item .nav-link, .detail-container .nav-item .nav-link i { + margin: 0 auto; +} diff --git a/frontend/src/pages/markdown-editor/css/rich-editor.css b/frontend/src/pages/markdown-editor/css/rich-editor.css new file mode 100644 index 0000000000..eef631e802 --- /dev/null +++ b/frontend/src/pages/markdown-editor/css/rich-editor.css @@ -0,0 +1,125 @@ +.seafile-markdown-editor { + flex: 1; + display: flex; + flex-direction: column; + min-height: 0; + min-width: 0; +} + +.seafile-markdown-editor .markdown-editor-toolbar { + display: flex; + justify-content: space-between; + align-items: center; + position: relative; + border-bottom: 1px solid #e5e5e5; + background-color: #fff; + user-select: none; + box-shadow: 0 3px 2px -2px rgba(200,200,200,.15); + z-index: 3; +} + +.seafile-markdown-editor .markdown-editor-toolbar .editor-btn-group { + height: 100%; + padding: 5px 0 5px 5px; + font-size: 0.75rem; + border-right: 1px solid #e5e5e5; + color: #555555; +} + +.seafile-markdown-editor .markdown-editor-content { + flex: 1; + display: flex; + min-height: 0; + min-width: 0; + overflow: hidden; +} + +.seafile-markdown-editor .markdown-editor-content .markdown-editor-wrapper { + flex: 1; + display: flex; + position: relative; + overflow-x: hidden; + min-height: 0; + min-width: 0; + background-color: #fafaf9; +} + +.seafile-markdown-editor .markdown-editor-content .markdown-help-wrapper { + width: 0; + display: flex; + overflow: hidden; + min-width: 0; + min-height: 0; +} + +.seafile-markdown-editor .markdown-editor-content .markdown-help-wrapper.show { + width: 300px; + background-color: #fff; + border-left: 1px solid #e6e6dd; + position: relative; +} + + +.seafile-markdown-editor .markdown-editor-content .markdown-help-wrapper .file-info { + flex: 1; + display: flex; + min-width: 0; + min-height: 0; +} + +.seafile-markdown-editor .markdown-editor-content .markdown-help-wrapper .help-info { + flex: 1; + display: flex; + min-width: 0; + min-height: 0; +} + +.seafile-markdown-editor ::-webkit-scrollbar{ + width: 8px; + height: 8px; +} + +.seafile-markdown-editor ::-webkit-scrollbar-button { + display: none; +} + +.seafile-markdown-editor ::-webkit-scrollbar-thumb { + background-color: rgb(206, 206, 212); + border-radius: 10px; +} + +@media (max-width: 991.8px) { + .seafile-editor { + min-width: calc(100% - 40px); + } + + .seafile-editor-main-panel { + width: calc(100% - 200px); + } + + .seafile-editor-side-panel { + min-width: 200px; + } + + .editor-container { + width: 100%; + } + + .editor-container .editor { + margin: 20px !important; + padding: 20px 30px; + } +} + +@media (max-width: 768px) { + .editor-container .editor { + margin: 0 !important; + padding: 10px 15px; + border: 0; + } +} + +.full-screen .editor-container .article { + margin: 20px auto; + max-width: 950px; +} diff --git a/frontend/src/pages/markdown-editor/css/side-panel.css b/frontend/src/pages/markdown-editor/css/side-panel.css new file mode 100644 index 0000000000..756ec875b0 --- /dev/null +++ b/frontend/src/pages/markdown-editor/css/side-panel.css @@ -0,0 +1,89 @@ +.seafile-markdown-editor .markdown-help-wrapper .side-panel { + flex: 1; + display: flex; + flex-direction: column; + background-color: #f5f5f5; + user-select: none; +} + +.seafile-markdown-editor .side-panel .nav { + padding: 10px 0; + min-width: 125px; + border-bottom: 1px solid #eee; + height: 36px; + flex-wrap: nowrap; +} + +.seafile-markdown-editor .side-panel .nav .nav-item { + padding: 0 0.75rem; +} + +.seafile-markdown-editor .side-panel .nav .nav-link { + padding: 0 0.75rem; + transition: 0.3s color; + margin-right: 0; +} + +.seafile-markdown-editor .side-panel .nav-link { + color: #888; +} + +.seafile-markdown-editor .side-panel .nav .nav-link.active { + color: #f19645; + border-bottom: 0; +} + +.seafile-markdown-editor .side-panel .nav .iconfont { + font-weight: 700; + font-size: 0.875rem; +} + +.seafile-markdown-editor .side-panel-content { + font-size: 0.937rem; + overflow: hidden; +} + +.seafile-markdown-editor .side-panel-content:hover { + overflow: auto; +} + +.image-view { + width: 200px; + height: 150px; + position: absolute; + background-color: #fff; + z-index: 1004; + box-shadow: 0 0 10px #aaa; + border-radius: 3px; + line-height: 150px; + overflow: hidden; + font-size: 0; + text-align: center; +} + +.image-view img { + max-width: 100%; + max-height: 100%; +} + +.image-view i { + width: 100%; + height: 100%; + text-align: center; + line-height: 150px; + font-size: 30px; + color: #eb8205; + -moz-animation: rotate 1.5s ease infinite; + -webkit-animation: rotate 1.5s ease infinite; + animation: rotate 1.5s ease infinite; +} + +@keyframes rotate { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} diff --git a/frontend/src/pages/markdown-editor/index.js b/frontend/src/pages/markdown-editor/index.js index d63f8e58c2..ed5e5f5f16 100644 --- a/frontend/src/pages/markdown-editor/index.js +++ b/frontend/src/pages/markdown-editor/index.js @@ -1,8 +1,6 @@ import React, { Fragment } from 'react'; import io from 'socket.io-client'; -import { SeafileEditor } from '@seafile/seafile-editor/dist/editor/editor.js'; -import { serialize, deserialize } from '@seafile/seafile-editor/dist/utils/slate2markdown'; -import 'whatwg-fetch'; +import { serialize, deserialize } from '@seafile/seafile-editor'; import { Utils } from '../../utils/utils'; import { seafileAPI } from '../../utils/seafile-api'; import { gettext, isDocs, mediaUrl } from '../../utils/constants'; @@ -10,9 +8,8 @@ import toaster from '../../components/toast'; import ShareDialog from '../../components/dialog/share-dialog'; import InsertFileDialog from '../../components/dialog/insert-file-dialog'; import LocalDraftDialog from '../../components/dialog/local-draft-dialog'; -import EditFileTagDialog from '../../components/dialog/edit-filetag-dialog'; -import FileParticipantDialog from '../../components/dialog/file-participant-dialog'; import HeaderToolbar from './header-toolbar'; +import SeafileEditor from './seafile-editor'; import editorApi from './editor-api'; import '../../css/markdown-viewer/markdown-editor.css'; @@ -24,7 +21,6 @@ const { siteRoot, serviceUrl, seafileCollabServer } = window.app.config; const userInfo = window.app.userInfo; const IMAGE_SUFFIXES = ['png', 'PNG', 'jpg', 'JPG', 'jpeg', 'JPEG', 'gif', 'GIF']; - class MarkdownEditor extends React.Component { constructor(props) { @@ -50,8 +46,6 @@ class MarkdownEditor extends React.Component { showMarkdownEditorDialog: false, showShareLinkDialog: false, showInsertFileDialog: false, - showEditFileTagDialog: false, - showFileParticipantDialog: false, showDraftSaved: false, collabUsers: userInfo ? [{user: userInfo, is_editing: false}] : [], @@ -166,8 +160,6 @@ class MarkdownEditor extends React.Component { showMarkdownEditorDialog: false, showShareLinkDialog: false, showInsertFileDialog: false, - showEditFileTagDialog: false, - showFileParticipantDialog: false, }); } @@ -249,18 +241,6 @@ class MarkdownEditor extends React.Component { showInsertFileDialog: true, }); break; - case 'file_tags': - this.setState({ - showEditFileTagDialog: true, - showMarkdownEditorDialog: true, - }); - break; - case 'add-participant': - this.setState({ - showMarkdownEditorDialog: true, - showFileParticipantDialog: true, - }); - break; default: return; } @@ -494,7 +474,6 @@ class MarkdownEditor extends React.Component { showFileHistory={this.state.isShowHistory ? false : true } toggleHistory={this.toggleHistory} readOnly={this.state.readOnly} - mode={this.state.mode} editorMode={this.state.editorMode} contentChanged={this.state.contentChanged} saving={this.state.saving} @@ -510,8 +489,6 @@ class MarkdownEditor extends React.Component { editorApi={editorApi} collabUsers={this.state.collabUsers} setFileInfoMtime={this.setFileInfoMtime} - toggleStar={this.toggleStar} - showFileHistory={true} setEditorMode={this.setEditorMode} setContent={this.setContent} draftID={draftID} @@ -530,8 +507,8 @@ class MarkdownEditor extends React.Component { onContentChanged={this.onContentChanged} onSaving={this.onSaving} contentChanged={this.state.contentChanged} - saving={this.state.saving} fileTagList={this.state.fileTagList} + onFileTagChanged={this.onFileTagChanged} participants={this.state.participants} onParticipantsChange={this.onParticipantsChange} markdownLint={fileName.toLowerCase() !== 'index.md'} @@ -565,24 +542,6 @@ class MarkdownEditor extends React.Component { repoEncrypted={false} /> } - {this.state.showEditFileTagDialog && - - } - {this.state.showFileParticipantDialog && - - } )} diff --git a/frontend/src/pages/markdown-editor/rich-editor/comment-item.js b/frontend/src/pages/markdown-editor/rich-editor/comment-item.js new file mode 100644 index 0000000000..107a640305 --- /dev/null +++ b/frontend/src/pages/markdown-editor/rich-editor/comment-item.js @@ -0,0 +1,151 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { processor } from '@seafile/seafile-editor/dist/utils/seafile-markdown2html'; +import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'; +import { gettext } from '../../../utils/constants'; + +const userInfo = window.app.userInfo; +const username = userInfo.username; + +const commentItemPropTypes = { + time: PropTypes.string.isRequired, + item: PropTypes.object.isRequired, + deleteComment: PropTypes.func.isRequired, + resolveComment: PropTypes.func.isRequired, + showResolvedComment: PropTypes.bool.isRequired, + editComment: PropTypes.func.isRequired, + scrollToQuote: PropTypes.func.isRequired, +}; + +class CommentItem extends React.Component { + + constructor(props) { + super(props); + this.state = { + dropdownOpen: false, + html: '', + newComment: this.props.item.comment, + editable: false, + quote: '', + position: null, + }; + } + + toggleDropDownMenu = () => { + this.setState({dropdownOpen: !this.state.dropdownOpen}); + } + + convertComment = (item) => { + processor.process(item.comment).then((result) => { + let html = String(result); + this.setState({ + html: html + }); + }); + if (item.detail) { + const detail = JSON.parse(item.detail); + processor.process(detail.quote).then((result) => { + let quote = String(result); + this.setState({ + quote: quote, + position: detail.position, + }); + }); + } + } + + toggleEditComment = () => { + this.setState({editable: !this.state.editable}); + } + + updateComment = (event) => { + const newComment = this.state.newComment; + if (this.props.item.comment !== newComment) { + this.props.editComment(event.target.id, newComment); + } + this.toggleEditComment(); + } + + handleCommentChange = (event) => { + this.setState({newComment: event.target.value}); + } + + onScrollToQuote = () => { + const { position } = this.state; + this.props.scrollToQuote(position); + } + + componentWillMount() { + this.convertComment(this.props.item); + } + + componentWillReceiveProps(nextProps) { + this.convertComment(nextProps.item); + } + + render() { + const item = this.props.item; + if (item.resolved && !this.props.showResolvedComment) { + return null; + } + if (this.state.editable) { + return( +
  • +
    + +
    +
    {item.user_name}
    +
    {this.props.time}
    +
    +
    +
    + + {' '} + +
    +
    • + ); + } + return ( +
  • +
    + +
    +
    {item.user_name}
    +
    {this.props.time}
    +
    + + + + + + {(item.user_email === username) && + {gettext('Delete')}} + {(item.user_email === username) && + {gettext('Edit')} + } + {!item.resolved && + {gettext('Mark as resolved')} + } + + +
    + {item.detail && +
    +
    +
    + } +
    +
    • + ); + } +} + +CommentItem.propTypes = commentItemPropTypes; + +export default CommentItem; diff --git a/frontend/src/pages/markdown-editor/rich-editor/comment-panel.js b/frontend/src/pages/markdown-editor/rich-editor/comment-panel.js new file mode 100644 index 0000000000..c61cf0a429 --- /dev/null +++ b/frontend/src/pages/markdown-editor/rich-editor/comment-panel.js @@ -0,0 +1,243 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import moment from 'moment'; +import { Button } from 'reactstrap'; +import { MentionsInput, Mention } from 'react-mentions'; +import { EditorBuilder } from '@seafile/seafile-editor'; +import { gettext } from '../../../utils/constants'; +import { Utils } from '../../../utils/utils'; +import { seafileAPI } from '../../../utils/seafile-api'; +import toaster from '../../../components/toast'; +import ParticipantsList from '../../../components/file-view/participants-list'; +import CommentItem from './comment-item'; + +import { defaultStyle, defaultMentionStyle } from '../../../css/react-mentions-default-style'; + +import '../css/comments-list.css'; + +const { repoID, filePath } = window.app.pageOptions; +const userInfo = window.app.userInfo; +const username = userInfo.username; + +const CommentPanelPropTypes = { + relistComment: PropTypes.number, + participants: PropTypes.array, + onParticipantsChange: PropTypes.func, +}; + +class CommentPanel extends React.Component { + + constructor(props) { + super(props); + this.state = { + commentsList: [], + showResolvedComment: true, + participants: null, + relatedUsers: null, + comment: '', + }; + this.toBeAddedParticipant = []; + } + + listComments = (isScroll) => { + seafileAPI.listComments(repoID, filePath).then((res) => { + this.setState({commentsList: res.data.comments}); + if (isScroll) { + let that = this; + setTimeout(() => { + that.commentsListRef.scrollTo(0, 10000); + }, 100); + } + }).catch(error => { + let errMessage = Utils.getErrorMsg(error); + toaster.danger(errMessage); + }); + } + + listRepoRelatedUsers = () => { + seafileAPI.listRepoRelatedUsers(repoID).then((res) => { + let users = res.data.user_list.map((item) => { + return { id: item.email, display: item.name}; + }); + this.setState({ relatedUsers: users }); + }); + } + + handleCommentChange = (event) => { + this.setState({ comment: event.target.value }); + } + + addComment = () => { + if (!this.state.comment.trim()) return; + console.log(filePath, repoID); + seafileAPI.postComment(repoID, filePath, this.state.comment.trim()).then(() => { + this.listComments(true); + }).catch(err => { + toaster.danger(Utils.getErrorMsg(err)); + }); + this.setState({ comment: '' }); + } + + onSubmit = () => { + this.addParticipant(username); + console.log(username); + if (this.toBeAddedParticipant.length === 0) { + this.addComment(); + } else { + seafileAPI.addFileParticipants(repoID, filePath, this.toBeAddedParticipant).then((res) => { + this.onParticipantsChange(repoID, filePath); + this.toBeAddedParticipant = []; + this.addComment(); + }).catch((err) => { + toaster.danger(Utils.getErrorMsg(err)); + }); + } + } + + resolveComment = (event) => { + seafileAPI.updateComment(repoID, event.target.id, 'true').then(() => { + this.listComments(); + }).catch(error => { + let errMessage = Utils.getErrorMsg(error); + toaster.danger(errMessage); + }); + } + + deleteComment = (event) => { + seafileAPI.deleteComment(repoID, event.target.id).then(() => { + this.listComments(); + }).catch(error => { + let errMessage = Utils.getErrorMsg(error); + toaster.danger(errMessage); + }); + } + + editComment = (commentID, newComment) => { + seafileAPI.updateComment(repoID, commentID, null, null, newComment).then((res) => { + this.listComments(); + }).catch(error => { + let errMessage = Utils.getErrorMsg(error); + toaster.danger(errMessage); + }); + } + + onParticipantsChange = () => { + if (this.props.onParticipantsChange) { + this.props.onParticipantsChange(); + } else { + this.getParticipants(); + } + } + + getParticipants = () => { + if (this.props.participants) { + this.setState({ participants: this.props.participants }); + } else { + seafileAPI.listFileParticipants(repoID, filePath).then((res) => { + this.setState({ participants: res.data.participant_list }); + }); + } + } + + checkParticipant = (email) => { + return this.state.participants.map((participant) => {return participant.email;}).includes(email); + } + + addParticipant = (email) => { + if (this.checkParticipant(email)) return; + this.toBeAddedParticipant.push(email); + } + + renderUserSuggestion = (entry, search, highlightedDisplay, index, focused) => { + return
    {highlightedDisplay}
    ; + } + + componentDidMount() { + this.listComments(); + this.getParticipants(); + this.listRepoRelatedUsers(); + } + + componentWillReceiveProps(nextProps) { + if (this.props.relistComment !== nextProps.relistComment) { + this.listComments(true); + } + if (this.props.participants !== nextProps.participants) { + this.setState({ participants: nextProps.participants }); + } + } + + scrollToQuote = (path) => { + const editorRef = EditorBuilder.getEditorRef(); + editorRef.scrollToQuote(path); + } + + setCommentsListRef = (ref) => { + this.commentsListRef = ref; + } + + render() { + const { participants, commentsList } = this.state; + return ( +
    +
    + {commentsList.length > 0 ? ( +
      + {commentsList.map((item, index = 0, arr) => { + let oldTime = (new Date(item.created_at)).getTime(); + let time = moment(oldTime).format('YYYY-MM-DD HH:mm'); + return ( + + ); + })} +
    ) : +

    {gettext('No comment yet.')}

    + } +
    +
    + {participants && + + } + + `@${display}`} + data={this.state.relatedUsers} + renderSuggestion={this.renderUserSuggestion} + style={defaultMentionStyle} + onAdd={(id, display) => {this.addParticipant(id);}} + appendSpaceOnAdd={true} + /> + +
    + +
    +
    +
    + ); + } +} + +CommentPanel.propTypes = CommentPanelPropTypes; + +export default CommentPanel; \ No newline at end of file diff --git a/frontend/src/pages/markdown-editor/rich-editor/detail-list-view.js b/frontend/src/pages/markdown-editor/rich-editor/detail-list-view.js new file mode 100644 index 0000000000..2a0fa4c91c --- /dev/null +++ b/frontend/src/pages/markdown-editor/rich-editor/detail-list-view.js @@ -0,0 +1,97 @@ +import React, { Fragment } from 'react'; +import PropTypes from 'prop-types'; +import moment from 'moment'; +import { gettext } from '../../../utils/constants'; +import { Utils } from '../../../utils/utils'; +import EditFileTagDialog from '../../../components/dialog/edit-filetag-dialog'; +import ParticipantsList from '../../../components/file-view/participants-list'; + +import '../../../css/dirent-detail.css'; +import '../css/detail-list-view.css'; + +const { repoID, filePath } = window.app.pageOptions; + +const propTypes = { + fileInfo: PropTypes.object.isRequired, + fileTagList: PropTypes.array.isRequired, + participants: PropTypes.array.isRequired, + onFileTagChanged: PropTypes.func.isRequired, + onParticipantsChange: PropTypes.func.isRequired, +}; + +class DetailListView extends React.Component { + + constructor(props) { + super(props); + this.state = { + isEditFileTagShow: false + }; + } + + onEditFileTagToggle = () => { + this.setState({isEditFileTagShow: !this.state.isEditFileTagShow}); + } + + render() { + const { fileTagList, participants, fileInfo } = this.props; + return ( + +
    + + + + + + + + + + + + + + + + + +
    {gettext('Size')}{Utils.bytesToSize(fileInfo.size)}
    {gettext('Location')}{filePath}
    {gettext('Last Update')}{moment(fileInfo.mtime * 1000).fromNow()}
    {gettext('Tags')} +
      + {fileTagList.map((fileTag) => { + return ( +
    • + + {fileTag.tag_name} +
      • + ); + })} +
    + +
    {gettext('Participants')} + {participants && + + } +
    +
    + {this.state.isEditFileTagShow && + + } +     + ); + } +} + +DetailListView.propTypes = propTypes; + +export default DetailListView; diff --git a/frontend/src/pages/markdown-editor/rich-editor/index.js b/frontend/src/pages/markdown-editor/rich-editor/index.js new file mode 100644 index 0000000000..4e1410efde --- /dev/null +++ b/frontend/src/pages/markdown-editor/rich-editor/index.js @@ -0,0 +1,127 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Toolbar, MarkdownEditor, UserHelp } from '@seafile/seafile-editor'; +import EditorBuilder from '@seafile/seafile-editor/dist/editor/editor-builder'; +import SidePanel from './side-panel'; + +import '../css/rich-editor.css'; + +const propTypes = { + scriptSource: PropTypes.string, + markdownContent: PropTypes.string, + value: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), + issues: PropTypes.object, + fileInfo: PropTypes.object, + readOnly: PropTypes.bool, + editorApi: PropTypes.object, + collabUsers: PropTypes.array, + onSave: PropTypes.func.isRequired, + onChange: PropTypes.func.isRequired, + resetRichValue: PropTypes.func, + fileTagList: PropTypes.array, + onFileTagChanged: PropTypes.func, + participants: PropTypes.array, + onParticipantsChange: PropTypes.func, +}; + +class RichEditor extends React.Component { + + constructor(props) { + super(props); + this.state = { + isShowSidePanel: false, + isShowHelpPanel: false, + isSupportComment: false, + relistComment: 0, + }; + window.richMarkdownEditor = this; + } + + toggleSidePanel = () => { + this.setState({ + isShowSidePanel: !this.state.isShowSidePanel, + isShowHelpPanel: false, + }); + } + + showHelpDialog = () => { + this.setState({isShowSidePanel: false, isShowHelpPanel: true}); + }; + + hideHelpDialog = () => { + this.setState({isShowHelpPanel: false}); + }; + + toggleCommentBtn = (isSupport = false) => { + this.setState({isSupportComment: isSupport}); + } + + onAddComment = () => { + this.setState({relistComment: this.state.relistComment + 1}); + } + + insertRepoFile = () => { + if (this.props.readOnly) return; + this.props.openDialogs && this.props.openDialogs('insert_file'); + } + + addLink = (fileName, url, isImage) => { + const editorRef = EditorBuilder.getEditorRef(); + editorRef.addLink(fileName, url, isImage); + } + + render() { + const hasSidePanel = true; + const { isShowSidePanel, isShowHelpPanel } = this.state; + const { value } = this.props; + + const isShowHelpWrapper = isShowSidePanel || isShowHelpPanel; + const helpWrapperStyle = isShowHelpPanel ? {width: '350px'} : {}; + + return ( +
    +
    + +
    +
    +
    + +
    +
    + {isShowSidePanel && ( + + )} + {isShowHelpPanel && } +
    +
    +
    + ); + } +} + +RichEditor.propTypes = propTypes; + + +export default RichEditor; diff --git a/frontend/src/pages/markdown-editor/rich-editor/side-panel.js b/frontend/src/pages/markdown-editor/rich-editor/side-panel.js new file mode 100644 index 0000000000..7d4fff9539 --- /dev/null +++ b/frontend/src/pages/markdown-editor/rich-editor/side-panel.js @@ -0,0 +1,101 @@ +/* eslint-disable jsx-a11y/anchor-is-valid */ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Outline as OutlineView } from '@seafile/seafile-editor'; +import DetailListView from './detail-list-view'; +import CommentPanel from './comment-panel'; + +import '../css/side-panel.css'; + +const propTypes = { + document: PropTypes.array, + fileInfo: PropTypes.object.isRequired, + relistComment: PropTypes.number, + fileTagList: PropTypes.array, + onFileTagChanged: PropTypes.func.isRequired, + participants: PropTypes.array, + onParticipantsChange: PropTypes.func.isRequired, + toggleCommentBtn: PropTypes.func.isRequired, +}; + +class SidePanel extends React.PureComponent { + + state = { + navItem: 'outline' + } + + onOutlineClick = (event) => { + event.preventDefault(); + this.props.toggleCommentBtn(false); + this.setState({navItem: 'outline'}); + } + + onDetailClick = (event) => { + event.preventDefault(); + this.props.toggleCommentBtn(false); + this.setState({navItem: 'detail'}); + } + + onCommentsPanelClick = (event) => { + event.preventDefault(); + this.props.toggleCommentBtn(true); + this.setState({navItem: 'commentsPanel'}); + } + + render() { + var outlineActive = ''; + var commentsPanel = ''; + var detailList = ''; + if (this.state.navItem === 'outline') { + outlineActive = 'active'; + } else if (this.state.navItem === 'commentsPanel') { + commentsPanel = 'active'; + } else if (this.state.navItem === 'detail') { + detailList = 'active'; + } + + return ( +
    +
      +
    • + +
      • +
    • + +
      • +
    • + + + +
      • +
    +
    + {this.state.navItem === 'outline' && + + } + {this.state.navItem === 'commentsPanel' && + + } + {this.state.navItem === 'detail' && + + } +
    +
    + ); + } + +} + +SidePanel.propTypes = propTypes; + +export default SidePanel; diff --git a/frontend/src/pages/markdown-editor/seafile-editor/index.js b/frontend/src/pages/markdown-editor/seafile-editor/index.js new file mode 100644 index 0000000000..1a181491e1 --- /dev/null +++ b/frontend/src/pages/markdown-editor/seafile-editor/index.js @@ -0,0 +1,262 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { deserialize, serialize, PlainMarkdownEditor } from '@seafile/seafile-editor'; +import toaster from '../../../components/toast'; +import { gettext } from '../../../utils/constants'; +import RichEditor from '../rich-editor'; + +const propTypes = { + mode: PropTypes.string, + editorMode: PropTypes.string, + readOnly: PropTypes.bool, + isDraft: PropTypes.bool, + scriptSource: PropTypes.string, + markdownContent: PropTypes.string, + editorApi: PropTypes.object.isRequired, + collaUsers: PropTypes.array, + onContentChanged: PropTypes.func.isRequired, + onSaving: PropTypes.func.isRequired, + saving: PropTypes.bool, + fileTagList: PropTypes.array, + onFileTagChanged: PropTypes.func.isRequired, + participants: PropTypes.array.isRequired, + onParticipantsChange: PropTypes.func.isRequired, + markdownLint: PropTypes.bool, + setFileInfoMtime: PropTypes.func.isRequired, + setEditorMode: PropTypes.func, + autoSaveDraft: PropTypes.func, + setDraftValue: PropTypes.func, + clearTimer: PropTypes.func, + deleteDraft: PropTypes.func, + contentChanged: PropTypes.bool, + openDialogs: PropTypes.func, +}; + +class SeafileEditor extends React.Component { + + constructor(props) { + super(props); + const { mode, markdownContent, isDraft } = this.props; + const isEditMode = mode === 'editor' || isDraft; + const richValue = isEditMode ? deserialize(markdownContent) : deserialize(''); + this.state = { + initialPlainValue: '', + currentContent: markdownContent, + richValue: richValue, + issues: { issue_list: []} + }; + this.lastModifyTime = null; + this.autoSave = false; + this.isParticipant = false; + window.seafileEditor = this; + } + + componentWillMount() { + if (this.props.editorMode === 'rich') { + const document = this.state.richValue; + const firstNode = document[0]; + /** + * if the markdown content is empty, the rich value contains + * only a paragraph which contains a empty text node + * + */ + if (document.length === 1 && + firstNode.type === 'paragraph' && + firstNode.children.length === 1 && + Text.isText(firstNode.children[0]) && + firstNode.children[0].text.length === 0) { + let headerContent = this.props.fileInfo.name.slice(0, this.props.fileInfo.name.lastIndexOf('.')); + const header = { + type: 'header_one', + children: [{text: headerContent, marks: []}] + }; + document.push(header); + document.shift(); + + this.setState({richValue: document}); + } + } + } + + componentDidMount() { + window.addEventListener('beforeunload', this.onUnload); + + // notify current user if others are also editing this file + const { collabUsers } = this.props; + const editingUsers = collabUsers.filter(ele => ele.is_editing === true && ele.myself === undefined); + if (editingUsers.length > 0) { + const message = gettext('Another user is editing this file!'); + toaster.danger(message, {duration: 3}); + } + + } + + componentWillUnmount() { + window.removeEventListener('beforeunload', this.onUnload); + } + + onUnload = (event) => { + if (!this.props.contentChanged) return; + const confirmationMessage = 'Leave this page? The system may not save your changes.'; + this.props.clearTimer(); + this.props.deleteDraft && this.props.deleteDraft(); + event.returnValue = confirmationMessage; + return confirmationMessage; + }; + + switchToPlainTextEditor = () => { + // TODO: performance, change to do serialize in async way + if (this.props.editorMode === 'rich') { + const value = this.state.richValue; + const str = serialize(value); + this.props.setEditorMode('plain'); + this.setState({ + initialPlainValue: str, + currentContent: str + }); + } + if (this.props.collabServer) { + this.props.emitSwitchEditor(false); + } + }; + + switchToRichTextEditor = () => { + // TODO: performance, change to do deserialize in async way + this.setState({richValue: deserialize(this.state.currentContent)}); + this.props.setEditorMode('rich'); + + if (this.props.collabServer) { + this.props.emitSwitchEditor(false); + } + }; + + saveContent = (str) => { + this.props.onSaving(true); + this.props.editorApi.saveContent(str).then(() => { + this.props.onSaving(false); + this.props.onContentChanged(false); + // remove markdown lint temporarily + // if (this.props.markdownLint) { + // const slateValue = this.state.richValue; + // this.props.editorApi.markdownLint(JSON.stringify(slateValue)).then((res) => { + // this.setState({ + // issues: res.data + // }); + // }); + // } + this.lastModifyTime = new Date(); + const message = gettext('File Saved'); + toaster.success(message, {duration: 2,}); + + this.props.editorApi.getFileInfo().then((res) => { + this.props.setFileInfoMtime(res.data); + }); + + this.addParticipants(); + }, () => { + this.props.onSaving(false); + const message = gettext('File failed to save'); + toaster.danger(message, {duration: 2}); + }); + }; + + onRichEditorSave = () => { + if (this.props.isSaving) return; + const value = this.state.richValue; + const str = serialize(value); + this.saveContent(str); + this.props.clearTimer(); + this.props.deleteDraft && this.props.deleteDraft(); + } + + onPlainEditorSave = () => { + if (this.props.isSaving) return; + const str = this.state.currentContent; + this.saveContent(str); + this.props.clearTimer(); + this.props.deleteDraft && this.props.deleteDraft(); + } + + resetRichValue = () => { + const value = this.state.richValue; + this.setState({ richValue: value }); + } + + onChange = (value, operations) => { + if (this.props.editorMode === 'rich') { + this.setState({richValue: value,}); + this.props.setDraftValue('rich', this.state.richValue); + const ops = operations.filter(o => { + return o.type !== 'set_selection' && o.type !== 'set_value'; + }); + if (ops.length !== 0) { + this.props.onContentChanged(true); + if (this.autoSave) this.props.autoSaveDraft(); + } + } else { + this.setState({currentContent: value}); + this.props.onContentChanged(true); + this.props.setDraftValue('rich', this.state.richValue); + this.props.autoSaveDraft(); + } + }; + + addParticipants = () => { + if (this.isParticipant || !window.showParticipants) return; + const { userName, addFileParticipants } = this.props.editorApi; + const { participants } = this.props; + if (participants && participants.length !== 0) { + this.isParticipant = participants.every((participant) => { + return participant.email === userName; + }); + if (this.isParticipant) return; + } + let emails = [userName]; + addFileParticipants(emails).then((res) => { + this.isParticipant = true; + this.props.onParticipantsChange(); + }); + } + + render() { + + if (this.props.editorMode === 'rich') { + return ( + + ); + } + + return ( + + ); + } +} + +SeafileEditor.propTypes = propTypes; + +export default SeafileEditor;