mirror of
https://github.com/haiwen/seahub.git
synced 2025-07-13 15:05:30 +00:00
optimize seafile-editor
This commit is contained in:
shanshuirenjia
parent
ce334a0d9c
commit
d50f7a0af6
@ -1,3 +1,10 @@
|
||||
#root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.seafile-md-viewer {
|
||||
height: 100%;
|
||||
flex-direction: row;
|
||||
|
||||
139
frontend/src/pages/markdown-editor/css/comments-list.css
Normal file
139
frontend/src/pages/markdown-editor/css/comments-list.css
Normal file
@ -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;
|
||||
}
|
||||
|
||||
105
frontend/src/pages/markdown-editor/css/detail-list-view.css
Normal file
105
frontend/src/pages/markdown-editor/css/detail-list-view.css
Normal file
@ -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;
|
||||
}
|
||||
125
frontend/src/pages/markdown-editor/css/rich-editor.css
Normal file
125
frontend/src/pages/markdown-editor/css/rich-editor.css
Normal file
@ -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;
|
||||
}
|
||||
89
frontend/src/pages/markdown-editor/css/side-panel.css
Normal file
89
frontend/src/pages/markdown-editor/css/side-panel.css
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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 &&
|
||||
<EditFileTagDialog
|
||||
repoID={repoID}
|
||||
filePath={filePath}
|
||||
fileTagList={this.state.fileTagList}
|
||||
toggleCancel={this.toggleCancel}
|
||||
onFileTagChanged={this.onFileTagChanged}
|
||||
/>
|
||||
}
|
||||
{this.state.showFileParticipantDialog &&
|
||||
<FileParticipantDialog
|
||||
repoID={repoID}
|
||||
filePath={filePath}
|
||||
toggleFileParticipantDialog={this.toggleCancel}
|
||||
fileParticipantList={this.state.participants}
|
||||
onParticipantsChange={this.onParticipantsChange}
|
||||
/>
|
||||
}
|
||||
</React.Fragment>
|
||||
)}
|
||||
</Fragment>
|
||||
|
||||
151
frontend/src/pages/markdown-editor/rich-editor/comment-item.js
Normal file
151
frontend/src/pages/markdown-editor/rich-editor/comment-item.js
Normal file
@ -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(
|
||||
<li className="seafile-comment-item" id={item.id}>
|
||||
<div className="seafile-comment-info">
|
||||
<img className="avatar" src={item.avatar_url} alt=""/>
|
||||
<div className="reviewer-info">
|
||||
<div className="reviewer-name ellipsis">{item.user_name}</div>
|
||||
<div className="review-time">{this.props.time}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="seafile-edit-comment">
|
||||
<textarea className="edit-comment-input" value={this.state.newComment} onChange={this.handleCommentChange} clos="100" rows="3" warp="virtual"></textarea>
|
||||
<Button className="comment-btn" color="primary" size="sm" onClick={this.updateComment} id={item.id}>{gettext('Update')}</Button>{' '}
|
||||
<Button className="comment-btn" color="secondary" size="sm" onClick={this.toggleEditComment}>{gettext('Cancel')}</Button>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<li className={item.resolved ? 'seafile-comment-item seafile-comment-item-resolved'
|
||||
: 'seafile-comment-item'} id={item.id}>
|
||||
<div className="seafile-comment-info">
|
||||
<img className="avatar" src={item.avatar_url} alt=""/>
|
||||
<div className="reviewer-info">
|
||||
<div className="reviewer-name ellipsis">{item.user_name}</div>
|
||||
<div className="review-time">{this.props.time}</div>
|
||||
</div>
|
||||
<Dropdown isOpen={this.state.dropdownOpen} size="sm"
|
||||
className="seafile-comment-dropdown" toggle={this.toggleDropDownMenu}>
|
||||
<DropdownToggle className="seafile-comment-dropdown-btn">
|
||||
<i className="fas fa-ellipsis-v"></i>
|
||||
</DropdownToggle>
|
||||
<DropdownMenu>
|
||||
{(item.user_email === username) &&
|
||||
<DropdownItem onClick={this.props.deleteComment} className="delete-comment"
|
||||
id={item.id}>{gettext('Delete')}</DropdownItem>}
|
||||
{(item.user_email === username) &&
|
||||
<DropdownItem onClick={this.toggleEditComment}
|
||||
className="edit-comment" id={item.id}>{gettext('Edit')}</DropdownItem>
|
||||
}
|
||||
{!item.resolved &&
|
||||
<DropdownItem onClick={this.props.resolveComment} className="seafile-comment-resolved"
|
||||
id={item.id}>{gettext('Mark as resolved')}</DropdownItem>
|
||||
}
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
{item.detail &&
|
||||
<blockquote className="seafile-comment-content">
|
||||
<div onClick={this.onScrollToQuote} dangerouslySetInnerHTML={{ __html: this.state.quote }}></div>
|
||||
</blockquote>
|
||||
}
|
||||
<div className="seafile-comment-content" dangerouslySetInnerHTML={{ __html: this.state.html }}></div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CommentItem.propTypes = commentItemPropTypes;
|
||||
|
||||
export default CommentItem;
|
||||
243
frontend/src/pages/markdown-editor/rich-editor/comment-panel.js
Normal file
243
frontend/src/pages/markdown-editor/rich-editor/comment-panel.js
Normal file
@ -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 <div className={`user ${focused ? 'focused' : ''}`}>{highlightedDisplay}</div>;
|
||||
}
|
||||
|
||||
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 (
|
||||
<div className="seafile-comment">
|
||||
<div className="flex-fill o-auto" ref={this.setCommentsListRef}>
|
||||
{commentsList.length > 0 ? (
|
||||
<ul className="seafile-comment-list">
|
||||
{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 (
|
||||
<CommentItem
|
||||
key={item.id}
|
||||
item={item}
|
||||
time={time}
|
||||
deleteComment={this.deleteComment}
|
||||
resolveComment={this.resolveComment}
|
||||
editComment={this.editComment}
|
||||
showResolvedComment={this.state.showResolvedComment}
|
||||
scrollToQuote={this.scrollToQuote}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</ul>) :
|
||||
<p className="text-center my-4">{gettext('No comment yet.')}</p>
|
||||
}
|
||||
</div>
|
||||
<div className="seafile-comment-footer flex-shrink-0">
|
||||
{participants &&
|
||||
<ParticipantsList
|
||||
onParticipantsChange={this.onParticipantsChange}
|
||||
participants={participants}
|
||||
repoID={repoID}
|
||||
filePath={filePath}
|
||||
showIconTip={true}
|
||||
/>
|
||||
}
|
||||
<MentionsInput
|
||||
value={this.state.comment}
|
||||
onChange={this.handleCommentChange}
|
||||
placeholder={gettext('Add a comment...')}
|
||||
style={defaultStyle}
|
||||
>
|
||||
<Mention
|
||||
trigger="@"
|
||||
displayTransform={(username, display) => `@${display}`}
|
||||
data={this.state.relatedUsers}
|
||||
renderSuggestion={this.renderUserSuggestion}
|
||||
style={defaultMentionStyle}
|
||||
onAdd={(id, display) => {this.addParticipant(id);}}
|
||||
appendSpaceOnAdd={true}
|
||||
/>
|
||||
</MentionsInput>
|
||||
<div className="comment-submit-container">
|
||||
<Button className="submit-comment" color="primary" size="sm" onClick={this.onSubmit}>{gettext('Submit')}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CommentPanel.propTypes = CommentPanelPropTypes;
|
||||
|
||||
export default CommentPanel;
|
||||
@ -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 (
|
||||
<Fragment>
|
||||
<div className="dirent-table-container p-2">
|
||||
<table className="table-thead-hidden">
|
||||
<thead>
|
||||
<tr><th width="35%"></th><th width="65%"></th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><th>{gettext('Size')}</th><td>{Utils.bytesToSize(fileInfo.size)}</td></tr>
|
||||
<tr><th>{gettext('Location')}</th><td>{filePath}</td></tr>
|
||||
<tr><th>{gettext('Last Update')}</th><td>{moment(fileInfo.mtime * 1000).fromNow()}</td></tr>
|
||||
<tr className="file-tag-container">
|
||||
<th>{gettext('Tags')}</th>
|
||||
<td>
|
||||
<ul className="file-tag-list">
|
||||
{fileTagList.map((fileTag) => {
|
||||
return (
|
||||
<li key={fileTag.id} className="file-tag-item">
|
||||
<span className="file-tag" style={{backgroundColor: fileTag.tag_color}}></span>
|
||||
<span className="tag-name" title={fileTag.tag_name}>{fileTag.tag_name}</span>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
<i className='fa fa-pencil-alt attr-action-icon' onClick={this.onEditFileTagToggle}></i>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="file-participants">
|
||||
<th>{gettext('Participants')}</th>
|
||||
<td>
|
||||
{participants &&
|
||||
<ParticipantsList
|
||||
repoID={repoID}
|
||||
filePath={filePath}
|
||||
participants={participants}
|
||||
showIconTip={true}
|
||||
onParticipantsChange={this.props.onParticipantsChange}
|
||||
/>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{this.state.isEditFileTagShow &&
|
||||
<EditFileTagDialog
|
||||
repoID={repoID}
|
||||
filePath={filePath}
|
||||
fileTagList={fileTagList}
|
||||
toggleCancel={this.onEditFileTagToggle}
|
||||
onFileTagChanged={this.props.onFileTagChanged}
|
||||
/>
|
||||
}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
DetailListView.propTypes = propTypes;
|
||||
|
||||
export default DetailListView;
|
||||
127
frontend/src/pages/markdown-editor/rich-editor/index.js
Normal file
127
frontend/src/pages/markdown-editor/rich-editor/index.js
Normal file
@ -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 (
|
||||
<div className='seafile-markdown-editor'>
|
||||
<div className='markdown-editor-toolbar'>
|
||||
<Toolbar
|
||||
hasSidePanel={hasSidePanel}
|
||||
isShowSidePanel={isShowSidePanel}
|
||||
toggleSidePanel={this.toggleSidePanel}
|
||||
insertRepoFile={this.insertRepoFile}
|
||||
/>
|
||||
</div>
|
||||
<div className='markdown-editor-content'>
|
||||
<div className={`markdown-editor-wrapper ${isShowHelpWrapper ? '' : 'full-screen'}`}>
|
||||
<MarkdownEditor
|
||||
scriptSource={this.props.scriptSource}
|
||||
value={value}
|
||||
editor={this.editor}
|
||||
onChange={this.props.onChange}
|
||||
resetRichValue={this.props.resetRichValue}
|
||||
isSupportComment={this.state.isSupportComment}
|
||||
onAddComment={this.onAddComment}
|
||||
/>
|
||||
</div>
|
||||
<div className={`markdown-help-wrapper ${isShowHelpWrapper ? 'show' : ''}`} style={helpWrapperStyle}>
|
||||
{isShowSidePanel && (
|
||||
<SidePanel
|
||||
document={value}
|
||||
fileInfo={this.props.fileInfo}
|
||||
relistComment={this.state.relistComment}
|
||||
fileTagList={this.props.fileTagList}
|
||||
onFileTagChanged={this.props.onFileTagChanged}
|
||||
participants={this.props.participants}
|
||||
onParticipantsChange={this.props.onParticipantsChange}
|
||||
toggleCommentBtn={this.toggleCommentBtn}
|
||||
/>
|
||||
)}
|
||||
{isShowHelpPanel && <UserHelp hideHelpDialog={this.hideHelpDialog} />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
RichEditor.propTypes = propTypes;
|
||||
|
||||
|
||||
export default RichEditor;
|
||||
101
frontend/src/pages/markdown-editor/rich-editor/side-panel.js
Normal file
101
frontend/src/pages/markdown-editor/rich-editor/side-panel.js
Normal file
@ -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 (
|
||||
<div className="side-panel d-flex flex-column">
|
||||
<ul className="flex-shrink-0 nav justify-content-around bg-white">
|
||||
<li className="nav-item">
|
||||
<a className={'nav-link ' + outlineActive} href="" onClick={this.onOutlineClick}><i className="iconfont icon-list-ul"/></a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className={'nav-link ' + detailList} href="" onClick={this.onDetailClick}><i className={'iconfont icon-info-circle'}/></a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className={'nav-link ' + commentsPanel} href="" onClick={this.onCommentsPanelClick}>
|
||||
<i className={'iconfont icon-comment'}/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="side-panel-content flex-fill">
|
||||
{this.state.navItem === 'outline' &&
|
||||
<OutlineView document={this.props.document} />
|
||||
}
|
||||
{this.state.navItem === 'commentsPanel' &&
|
||||
<CommentPanel
|
||||
relistComment={this.props.relistComment}
|
||||
participants={this.props.participants}
|
||||
onParticipantsChange={this.props.onParticipantsChange}
|
||||
/>
|
||||
}
|
||||
{this.state.navItem === 'detail' &&
|
||||
<DetailListView
|
||||
fileInfo={this.props.fileInfo}
|
||||
fileTagList={this.props.fileTagList}
|
||||
participants={this.props.participants}
|
||||
onFileTagChanged={this.props.onFileTagChanged}
|
||||
onParticipantsChange={this.props.onParticipantsChange}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
SidePanel.propTypes = propTypes;
|
||||
|
||||
export default SidePanel;
|
||||
262
frontend/src/pages/markdown-editor/seafile-editor/index.js
Normal file
262
frontend/src/pages/markdown-editor/seafile-editor/index.js
Normal file
@ -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 (
|
||||
<RichEditor
|
||||
scriptSource={this.props.scriptSource}
|
||||
readOnly={this.props.readOnly}
|
||||
value={this.state.richValue}
|
||||
editorApi={this.props.editorApi}
|
||||
fileInfo={this.props.fileInfo}
|
||||
collaUsers={this.props.collaUsers}
|
||||
onChange={this.onChange}
|
||||
onSave={this.onRichEditorSave}
|
||||
resetRichValue={this.resetRichValue}
|
||||
fileTagList={this.props.fileTagList}
|
||||
onFileTagChanged={this.props.onFileTagChanged}
|
||||
participants={this.props.participants}
|
||||
onParticipantsChange={this.props.onParticipantsChange}
|
||||
openDialogs={this.props.openDialogs}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<PlainMarkdownEditor
|
||||
scriptSource={this.props.scriptSource}
|
||||
editorApi={this.props.editorApi}
|
||||
initialValue={this.state.initialPlainValue}
|
||||
currentContent={this.state.currentContent}
|
||||
contentChanged={this.props.contentChanged}
|
||||
fileInfo={this.props.fileInfo}
|
||||
collabUsers={this.props.collabUsers}
|
||||
onSave={this.onPlainEditorSave}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SeafileEditor.propTypes = propTypes;
|
||||
|
||||
export default SeafileEditor;
|
||||
Loading…
Reference in New Issue
Block a user