diff --git a/frontend/src/css/markdown-viewer/markdown-editor.css b/frontend/src/css/markdown-viewer/markdown-editor.css index b5b77c4a3d..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; @@ -172,3 +179,58 @@ .seafile-editor-side-panel .seafile-comment { width: 100%; } + +/* toolbar */ +.topbar-file-info { + display: inline-block; + margin-left: 8px; + /* + only select file info text + */ + user-select: text; +} +.topbar-file-info .file-title { + font-size: 1.2rem; + font-weight: bold; + display: flex; + align-items: center; +} + +.topbar-file-info .file-title .iconfont { + font-size: 0.875rem; +} + +.topbar-file-info .file-title .file-star, +.topbar-file-info .file-title .file-internal-link { + font-size: 0.875rem; + cursor: pointer; + margin-left: 0.5rem; + vertical-align: text-bottom; + color: #999; +} + +.topbar-file-info .file-title .file-internal-link { + font-size: 12px; + font-weight: 700; +} + +.topbar-file-info .file-title .file-internal-link:hover { + color: #333; +} + +.topbar-file-info .file-title .file-star .star { + color: #999; +} + +.topbar-file-info .file-state { + font-size: 0.8125rem; +} + +.topbar-file-info .file-state .file-modifier-name { + margin-right: 0.5rem; +} + +.topbar-file-info .file-state .file-modifier-savedraft { + margin-left: 0.5rem; + color: #888; +} 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/header-toolbar/button-item.js b/frontend/src/pages/markdown-editor/header-toolbar/button-item.js index cbe8b5aea5..c6ad10cdf0 100644 --- a/frontend/src/pages/markdown-editor/header-toolbar/button-item.js +++ b/frontend/src/pages/markdown-editor/header-toolbar/button-item.js @@ -21,11 +21,15 @@ class ButtonItem extends React.Component { constructor(props) { super(props); - this.state = { tooltipOpen: false, isFreezed: false, }; + this.timer = null; + } + + componentWillUnmount() { + this.timer && clearTimeout(this.timer); } toggle = () => { diff --git a/frontend/src/pages/markdown-editor/header-toolbar/file-info.js b/frontend/src/pages/markdown-editor/header-toolbar/file-info.js new file mode 100644 index 0000000000..77de93b01f --- /dev/null +++ b/frontend/src/pages/markdown-editor/header-toolbar/file-info.js @@ -0,0 +1,50 @@ +import React from 'react'; +import moment from 'moment'; +import { gettext } from '../../../utils/constants'; +import InternalLinkDialog from '../../../components/dialog/internal-link-dialog'; + +const { repoID, filePath } = window.app.pageOptions; + +class FileInfo extends React.PureComponent { + + render() { + const { fileInfo, isPro, isLocked, mediaUrl } = this.props; + const starTitle = fileInfo.starred ? gettext('unstar') : gettext('star'); + const starIconClass = `iconfont ${fileInfo.starred ? 'icon-star1 star' : 'icon-star2'}`; + const modifyTime = moment(fileInfo.mtime * 1000).format('YYYY-MM-DD HH:mm'); + + const lockedText = gettext('locked'); + return ( +
+
+
+ {fileInfo.name} + + + + + {(isPro && isLocked) && ( + {lockedText} + )} +
+
+ {fileInfo.lastModifier} + {modifyTime} + {this.props.showDraftSaved && ( + {gettext('Local draft saved')} + )} +
+
+
+ ); + } +} + +export default FileInfo; diff --git a/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js b/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js index bb6c16bfb8..86e8f15256 100644 --- a/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js +++ b/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js @@ -1,11 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; -import FileInfo from '@seafile/seafile-editor/dist/components/topbar-component/file-info'; import { gettext, canGenerateShareLink, isPro, mediaUrl, canLockUnlockFile } from '../../../utils/constants'; import ButtonGroup from './button-group'; import ButtonItem from './button-item'; import CollabUsersButton from './collab-users-button'; import MoreMenu from './more-menu'; +import FileInfo from './file-info'; const { seafileCollabServer } = window.app.config; const { canDownloadFile } = window.app.pageOptions; diff --git a/frontend/src/pages/markdown-editor/index.js b/frontend/src/pages/markdown-editor/index.js index c80f29bdcd..ed5e5f5f16 100644 --- a/frontend/src/pages/markdown-editor/index.js +++ b/frontend/src/pages/markdown-editor/index.js @@ -1,20 +1,15 @@ 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'; import toaster from '../../components/toast'; -import ModalPortal from '../../components/modal-portal'; 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 InsertRepoImageDialog from '../../components/dialog/insert-repo-image-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'; @@ -26,15 +21,10 @@ 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) { super(props); - this.timer = null; - this.localDraft = ''; - this.autoSave = false; - this.draftRichValue = ''; - this.draftPlainValue = ''; this.state = { markdownContent: '', loading: true, @@ -56,8 +46,6 @@ class MarkdownEditor extends React.Component { showMarkdownEditorDialog: false, showShareLinkDialog: false, showInsertFileDialog: false, - showInsertRepoImageDialog: false, - showFileParticipantDialog: false, showDraftSaved: false, collabUsers: userInfo ? [{user: userInfo, is_editing: false}] : [], @@ -69,10 +57,15 @@ class MarkdownEditor extends React.Component { isLocked: isLocked, lockedByMe: lockedByMe, fileTagList: [], - showEditFileTagDialog: false, participants: [], }; + this.timer = null; + this.localDraft = ''; + this.autoSave = false; + this.draftRichValue = ''; + this.draftPlainValue = ''; + if (this.state.collabServer) { const socket = io(this.state.collabServer); this.socket = socket; @@ -167,16 +160,11 @@ class MarkdownEditor extends React.Component { showMarkdownEditorDialog: false, showShareLinkDialog: false, showInsertFileDialog: false, - showInsertRepoImageDialog: false, - showEditFileTagDialog: false, - showFileParticipantDialog: false, }); } - setEditorMode = (type) => { - this.setState({ - editorMode: type - }); + setEditorMode = (editorMode) => { // rich | plain + this.setState({editorMode: editorMode}); } setDraftValue = (type, value) => { @@ -200,9 +188,7 @@ class MarkdownEditor extends React.Component { let draft = localStorage.getItem(draftKey); let that = this; if (draft) { - that.setState({ - localDraftDialog: true, - }); + that.setState({localDraftDialog: true}); that.localDraft = draft; localStorage.removeItem(draftKey); } @@ -230,9 +216,7 @@ class MarkdownEditor extends React.Component { } closeDraftDialog = () => { - this.setState({ - localDraftDialog: false - }); + this.setState({localDraftDialog: false}); } clearTimer = () => { @@ -241,8 +225,7 @@ class MarkdownEditor extends React.Component { } openDialogs = (option) => { - switch(option) - { + switch (option) { case 'help': window.richMarkdownEditor.showHelpDialog(); break; @@ -258,24 +241,6 @@ class MarkdownEditor extends React.Component { showInsertFileDialog: true, }); break; - case 'insert_repo_image': - this.setState({ - showMarkdownEditorDialog: true, - showInsertRepoImageDialog: true, - }); - break; - case 'file_tags': - this.setState({ - showEditFileTagDialog: true, - showMarkdownEditorDialog: true, - }); - break; - case 'add-participant': - this.setState({ - showMarkdownEditorDialog: true, - showFileParticipantDialog: true, - }); - break; default: return; } @@ -391,26 +356,25 @@ class MarkdownEditor extends React.Component { } setFileInfoMtime = (fileInfo) => { - this.setState({ - fileInfo: Object.assign({}, this.state.fileInfo, { mtime: fileInfo.mtime, id: fileInfo.id, lastModifier: fileInfo.last_modifier_name }) - }); + const { fileInfo: oldFileInfo } = this.state; + const newFileInfo = Object.assign({}, oldFileInfo, { mtime: fileInfo.mtime, id: fileInfo.id, lastModifier: fileInfo.last_modifier_name }); + this.setState({fileInfo: newFileInfo}); }; toggleStar = () => { - let starrd = this.state.fileInfo.starred; - if (starrd) { + const { fileInfo } = this.state; + const { starred } = fileInfo; + const newFileInfo = Object.assign({}, fileInfo, {starred: !starred}); + if (starred) { editorApi.unstarItem().then((response) => { - this.setState({ - fileInfo: Object.assign({}, this.state.fileInfo, {starred: !starrd}) - }); - }); - } else if (!starrd) { - editorApi.starItem().then((response) => { - this.setState({ - fileInfo: Object.assign({}, this.state.fileInfo, {starred: !starrd}) - }); + this.setState({fileInfo: newFileInfo}); }); + return; } + + editorApi.starItem().then((response) => { + this.setState({fileInfo: newFileInfo}); + }); } autoSaveDraft = () => { @@ -418,39 +382,39 @@ class MarkdownEditor extends React.Component { if (that.timer) { return; } - else { - that.timer = setTimeout(() => { - let str = ''; - if (this.state.editorMode == 'rich') { - let value = this.draftRichValue; - str = serialize(value); - } - else if (this.state.editorMode == 'plain') { - str = this.draftPlainValue; - } - let draftKey = editorApi.getDraftKey(); - localStorage.setItem(draftKey, str); + that.timer = setTimeout(() => { + let str = ''; + if (this.state.editorMode == 'rich') { + let value = this.draftRichValue; + str = serialize(value); + } + else if (this.state.editorMode == 'plain') { + str = this.draftPlainValue; + } + let draftKey = editorApi.getDraftKey(); + localStorage.setItem(draftKey, str); + that.setState({ + showDraftSaved: true + }); + setTimeout(() => { that.setState({ - showDraftSaved: true + showDraftSaved: false }); - setTimeout(() => { - that.setState({ - showDraftSaved: false - }); - }, 3000); - that.timer = null; - }, 60000); - } + }, 3000); + that.timer = null; + }, 60000); } openParentDirectory = () => { window.location.href = editorApi.getParentDectionaryUrl(); } - onEdit = (mode) => { - if (mode === 'rich') { + onEdit = (editorMode) => { + if (editorMode === 'rich') { window.seafileEditor.switchToRichTextEditor(); - } else if (mode === 'plain') { + return + } + if (editorMode === 'plain') { window.seafileEditor.switchToPlainTextEditor(); } } @@ -459,21 +423,6 @@ class MarkdownEditor extends React.Component { this.openDialogs('share_link'); } - onCommentAdded = () => { - this.toggleCancel(); - } - - addComment = (e) => { - e.stopPropagation(); - this.openDialogs('comment'); - } - - scrollToNode = (node) => { - let url = new URL(window.location.href); - url.set('hash', 'user-content-' + node.text); - window.location.href = url.toString(); - } - toggleHistory = () => { window.location.href = siteRoot + 'repo/file_revisions/' + repoID + '/?p=' + Utils.encodePath(filePath); } @@ -499,151 +448,104 @@ class MarkdownEditor extends React.Component { } render() { - let component; if (this.state.loading) { return (
); - } else if (this.state.mode === 'editor') { - component = ( - - - - - ); - - return ( - - {this.state.localDraftDialog ? - - - - : null} - {component} - {this.state.showMarkdownEditorDialog && ( - - {this.state.showInsertFileDialog && - - - - } - {this.state.showInsertRepoImageDialog && - - - - } - {this.state.showShareLinkDialog && - - - - } - {this.state.showEditFileTagDialog && - - - - } - {this.state.showFileParticipantDialog && - - - - } - - )} - - ); } + + return ( + + + + {this.state.localDraftDialog && + + } + {this.state.showMarkdownEditorDialog && ( + + {this.state.showInsertFileDialog && + + } + {this.state.showShareLinkDialog && + + } + + )} + + ); } } diff --git a/frontend/src/pages/markdown-editor/rich-markdown-editor/comment-item.js b/frontend/src/pages/markdown-editor/rich-markdown-editor/comment-item.js new file mode 100644 index 0000000000..52f4e1b5cf --- /dev/null +++ b/frontend/src/pages/markdown-editor/rich-markdown-editor/comment-item.js @@ -0,0 +1,151 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { processor } from '@seafile/seafile-editor'; +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-markdown-editor/comment-panel.js b/frontend/src/pages/markdown-editor/rich-markdown-editor/comment-panel.js new file mode 100644 index 0000000000..c61cf0a429 --- /dev/null +++ b/frontend/src/pages/markdown-editor/rich-markdown-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-markdown-editor/detail-list-view.js b/frontend/src/pages/markdown-editor/rich-markdown-editor/detail-list-view.js new file mode 100644 index 0000000000..2a0fa4c91c --- /dev/null +++ b/frontend/src/pages/markdown-editor/rich-markdown-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-markdown-editor/index.js b/frontend/src/pages/markdown-editor/rich-markdown-editor/index.js new file mode 100644 index 0000000000..1843a54e0e --- /dev/null +++ b/frontend/src/pages/markdown-editor/rich-markdown-editor/index.js @@ -0,0 +1,126 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { EditorBuilder, Toolbar, MarkdownEditor, UserHelp } from '@seafile/seafile-editor'; +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, + onSave: PropTypes.func.isRequired, + onChange: PropTypes.func.isRequired, + resetRichValue: PropTypes.func, + fileTagList: PropTypes.array, + onFileTagChanged: PropTypes.func, + participants: PropTypes.array, + onParticipantsChange: PropTypes.func, + openDialogs: PropTypes.func, +}; + +class RichMarkdownEditor 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 && } +
    +
    +
    + ); + } +} + +RichMarkdownEditor.propTypes = propTypes; + + +export default RichMarkdownEditor; diff --git a/frontend/src/pages/markdown-editor/rich-markdown-editor/side-panel.js b/frontend/src/pages/markdown-editor/rich-markdown-editor/side-panel.js new file mode 100644 index 0000000000..7d4fff9539 --- /dev/null +++ b/frontend/src/pages/markdown-editor/rich-markdown-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..9976188bc9 --- /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 RichMarkdownEditor from '../rich-markdown-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;