Markdown editor update (#4604)

* update markdown editor

* update markdown editor

* delete cdoc files

frontend/src/components/toolbar/cdoc-editor-topbar.js

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

frontend/src/components/toolbar/markdown-viewer-toolbar.js

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