@seafile/seafile-editor 0.3.99 → 0.3.100

package/dist/editor/controller/inline-element-controller.js

@@ -2,6 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import { Editor, Range } from 'slate';
 import generateLinkElement from '../element-model/link';
 import generateImageElement from '../element-model/image';
+import EditorBuilder from '../editor-builder';
 
 var withInline = function withInline(editor) {
   var exec = editor.exec,
@@ -102,8 +103,11 @@ var withInline = function withInline(editor) {
         break;
 
       case 'insert_data':
-        if (data.types.includes('Files') && data.files[0].type.includes('image') && window.editor.editorApi.uploadLocalImage) {
-          window.editor.editorApi.uploadLocalImage(command.data.files[0]).then(function (res) {
+        var _EditorBuilder$getEdi = EditorBuilder.getEditor(),
+            editorApi = _EditorBuilder$getEdi.editorApi;
+
+        if (data.types.includes('Files') && data.files[0].type.includes('image') && editorApi.uploadLocalImage) {
+          editorApi.uploadLocalImage(command.data.files[0]).then(function (res) {
             var img = generateImageElement({
               data: {
                 src: res

package/dist/editor/editor-builder.js

@@ -0,0 +1,107 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import { createEditor } from 'slate';
+import { withHistory } from 'slate-history';
+import { withReact } from '@seafile/slate-react';
+import withInline from './controller/inline-element-controller';
+import withBlock from './controller/block-element-controller';
+import withVoid from './controller/void-element-controller';
+import withMarkdownShortcut from './controller/shortcut-controller';
+import normalizeNode from './controller/normalize-controller';
+import { EditorUtils } from './editor-utils/common-editor-utils';
+import TableUtils from './editor-utils/block-element-utils/table-utils';
+import Plugin from './editor-plugin';
+
+var EditorBuilder = /*#__PURE__*/function () {
+  function EditorBuilder() {
+    _classCallCheck(this, EditorBuilder);
+
+    this.editor = null;
+    this.plugin = null;
+    this.tableUtils = null;
+    this.editorUtils = null;
+  }
+
+  _createClass(EditorBuilder, null, [{
+    key: "getEditor",
+    value: function getEditor(options) {
+      if (this.editor && options) {
+        if (options && options.onSave) {
+          this.editor.onSave = options.onSave;
+        }
+
+        if (options && options.editorApi) {
+          this.editor.editorApi = options.editorApi;
+        }
+      }
+
+      if (this.editor) return this.editor;
+      this.editor = normalizeNode(withMarkdownShortcut(withVoid(withBlock(withInline(withHistory(withReact(createEditor())))))));
+
+      if (options && options.onSave) {
+        this.editor.onSave = options.onSave;
+      }
+
+      if (options && options.editorApi) {
+        this.editor.editorApi = options.editorApi;
+      }
+
+      return this.editor;
+    }
+  }, {
+    key: "getSlateEditor",
+    value: function getSlateEditor() {
+      if (this.editor) this.editor = null;
+      this.editor = withInline(withVoid(withReact(createEditor())));
+      return this.editor;
+    }
+  }, {
+    key: "resetEditor",
+    value: function resetEditor() {
+      this.editor = null;
+      this.plugin = null;
+      this.editorUtils = null;
+      this.tableUtils = null;
+    }
+  }, {
+    key: "getEditorRef",
+    value: function getEditorRef() {
+      var editorRef = window.abcdef_editor;
+      return editorRef;
+    }
+  }, {
+    key: "getToolbarRef",
+    value: function getToolbarRef() {
+      var toolbarRef = window.abcdef_editorToolbar;
+      return toolbarRef;
+    }
+  }, {
+    key: "getEditorUtils",
+    value: function getEditorUtils() {
+      if (this.editorUtils) return this.editorUtils;
+      if (!this.editor) this.getEditor();
+      this.editorUtils = new EditorUtils(this.editor);
+      return this.editorUtils;
+    }
+  }, {
+    key: "getTableUtils",
+    value: function getTableUtils() {
+      if (this.tableUtils) return this.tableUtils;
+      if (!this.editor) this.getEditor();
+      this.tableUtils = new TableUtils(this.editor);
+      return this.tableUtils;
+    }
+  }, {
+    key: "getPlugin",
+    value: function getPlugin() {
+      if (this.plugin) return this.plugin;
+      if (!this.editor) this.getEditor();
+      this.plugin = new Plugin(this.editor);
+      return this.plugin;
+    }
+  }]);
+
+  return EditorBuilder;
+}();
+
+export default EditorBuilder;

package/dist/editor/editor-component/formula.js

@@ -3,7 +3,8 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
-import '../../css/richeditor/formula.css';
+import '../../assets/css/formula.css';
+import EditorBuilder from '../editor-builder';
 
 var Formula = /*#__PURE__*/function (_React$Component) {
   _inherits(Formula, _React$Component);
@@ -22,7 +23,8 @@ var Formula = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _this.toggleFormulaEditor = function () {
-      window.richMarkdownEditor.onToggleFormulaDialog();
+      var toolbarRef = EditorBuilder.getToolbarRef();
+      toolbarRef.onToggleFormulaDialog();
     };
 
     _this.renderFormula = function () {

package/dist/editor/editor-component/image.js

@@ -8,6 +8,7 @@ import { withTranslation } from 'react-i18next';
 import Lightbox from '@seafile/react-image-lightbox';
 import { Utils } from '../../utils/utils';
 import InlineElementUtils from '../editor-utils/inline-element-utils';
+import EditorBuilder from '../editor-builder';
 import '@seafile/react-image-lightbox/style.css';
 
 var Image = /*#__PURE__*/function (_React$Component) {
@@ -100,7 +101,8 @@ var Image = /*#__PURE__*/function (_React$Component) {
       isResizing: false,
       isShowBigImage: false
     };
-    _this.inlineElementUtils = new InlineElementUtils(window.editor);
+    var editor = EditorBuilder.getEditor();
+    _this.inlineElementUtils = new InlineElementUtils(editor);
     return _this;
   }
 
@@ -128,10 +130,11 @@ var Image = /*#__PURE__*/function (_React$Component) {
       var src = data.src;
 
       if (/^\.\.\/*/.test(src) || /^\.\/*/.test(src)) {
-        var _window$editor$editor = window.editor.editorApi,
-            filePath = _window$editor$editor.filePath,
-            serviceUrl = _window$editor$editor.serviceUrl,
-            repoID = _window$editor$editor.repoID;
+        var editor = EditorBuilder.getEditor();
+        var _editor$editorApi = editor.editorApi,
+            filePath = _editor$editorApi.filePath,
+            serviceUrl = _editor$editorApi.serviceUrl,
+            repoID = _editor$editorApi.repoID;
         var originalPath = filePath.slice(0, filePath.lastIndexOf('/')) + '/' + src;
         src = serviceUrl + '/lib/' + repoID + '/file/' + Utils.pathNormalize(originalPath) + '?raw=1';
       }
@@ -221,7 +224,8 @@ var ImagePreviewer = /*#__PURE__*/function (_React$Component2) {
       });
     };
 
-    _this2.images = _this2.getImageNodes(window.editor.children);
+    var editor = EditorBuilder.getEditor();
+    _this2.images = _this2.getImageNodes(editor.children);
     _this2.state = {
       imageIndex: _this2.images.findIndex(function (item) {
         return item === props.imageUrl;

package/dist/editor/editor-component/table.js

@@ -4,7 +4,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import ReactDOM from 'react-dom';
-import '../../css/richeditor/table.css';
+import '../../assets/css/table.css';
 
 var TableContainer = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(TableContainer, _React$PureComponent);

package/dist/editor/editor-plugin.js

@@ -7,6 +7,7 @@ import CodeUtils from './editor-utils/block-element-utils/code-utils';
 import TableUtils from './editor-utils/block-element-utils/table-utils';
 import setEventTransfer from './custom/set-event-transfer';
 import { SfEditor } from '../editor/custom/custom';
+import EditorBuilder from './editor-builder';
 
 var Plugin = function Plugin(_editor) {
   var _this = this;
@@ -143,7 +144,8 @@ var Plugin = function Plugin(_editor) {
       byKey: true
     })(event)) {
       event.preventDefault();
-      window.richMarkdownEditor.onToggleFormulaDialog();
+      var toolbarRef = EditorBuilder.getToolbarRef();
+      toolbarRef.onToggleFormulaDialog();
       return;
     } // compate chrome: in chrome press backspace would not exec delete_backward command
 

package/dist/editor/editor.js

@@ -4,8 +4,6 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import SimpleEditor from './simple-editor';
-import SeafileEditor from './seafile-editor';
-import LoadScript from './load-script';
 
 var SimpleEditorWithErrorBoundary = /*#__PURE__*/function (_React$Component) {
   _inherits(SimpleEditorWithErrorBoundary, _React$Component);
@@ -34,33 +32,4 @@ var SimpleEditorWithErrorBoundary = /*#__PURE__*/function (_React$Component) {
   return SimpleEditorWithErrorBoundary;
 }(React.Component);
 
-var SeafileEditorWithErrorBundary = /*#__PURE__*/function (_React$Component2) {
-  _inherits(SeafileEditorWithErrorBundary, _React$Component2);
-
-  var _super2 = _createSuper(SeafileEditorWithErrorBundary);
-
-  function SeafileEditorWithErrorBundary() {
-    _classCallCheck(this, SeafileEditorWithErrorBundary);
-
-    return _super2.apply(this, arguments);
-  }
-
-  _createClass(SeafileEditorWithErrorBundary, [{
-    key: "componentDidCatch",
-    value: function componentDidCatch(error) {
-      console.error(error);
-      this.forceUpdate();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/React.createElement(LoadScript, {
-        scriptSource: this.props.scriptSource
-      }, /*#__PURE__*/React.createElement(SeafileEditor, this.props));
-    }
-  }]);
-
-  return SeafileEditorWithErrorBundary;
-}(React.Component);
-
-export { SimpleEditorWithErrorBoundary as SimpleEditor, SeafileEditorWithErrorBundary as SeafileEditor };
+export { SimpleEditorWithErrorBoundary as SimpleEditor };

package/dist/editor/index.js

@@ -0,0 +1,97 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import MarkdownEditor from "./markdown-editor";
+import SimpleEditor from "./simple-editor";
+import PlainMarkdownEditor from "./plain-markdown-editor";
+import LoadScript from './load-script';
+import EditorBuilder from "./editor-builder";
+
+var SimpleEditorWithErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(SimpleEditorWithErrorBoundary, _React$Component);
+
+  var _super = _createSuper(SimpleEditorWithErrorBoundary);
+
+  function SimpleEditorWithErrorBoundary() {
+    _classCallCheck(this, SimpleEditorWithErrorBoundary);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(SimpleEditorWithErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error) {
+      console.error(error);
+      this.forceUpdate();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(SimpleEditor, this.props);
+    }
+  }]);
+
+  return SimpleEditorWithErrorBoundary;
+}(React.Component);
+
+var MarkdownEditorWithErrorBoundary = /*#__PURE__*/function (_React$Component2) {
+  _inherits(MarkdownEditorWithErrorBoundary, _React$Component2);
+
+  var _super2 = _createSuper(MarkdownEditorWithErrorBoundary);
+
+  function MarkdownEditorWithErrorBoundary() {
+    _classCallCheck(this, MarkdownEditorWithErrorBoundary);
+
+    return _super2.apply(this, arguments);
+  }
+
+  _createClass(MarkdownEditorWithErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error) {
+      console.error(error);
+      this.forceUpdate();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(LoadScript, {
+        scriptSource: this.props.scriptSource
+      }, /*#__PURE__*/React.createElement(MarkdownEditor, this.props));
+    }
+  }]);
+
+  return MarkdownEditorWithErrorBoundary;
+}(React.Component);
+
+var PlainMarkdownEditorWithErrorBoundary = /*#__PURE__*/function (_React$Component3) {
+  _inherits(PlainMarkdownEditorWithErrorBoundary, _React$Component3);
+
+  var _super3 = _createSuper(PlainMarkdownEditorWithErrorBoundary);
+
+  function PlainMarkdownEditorWithErrorBoundary() {
+    _classCallCheck(this, PlainMarkdownEditorWithErrorBoundary);
+
+    return _super3.apply(this, arguments);
+  }
+
+  _createClass(PlainMarkdownEditorWithErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error) {
+      console.error(error);
+      this.forceUpdate();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(LoadScript, {
+        scriptSource: this.props.scriptSource
+      }, /*#__PURE__*/React.createElement(PlainMarkdownEditor, this.props));
+    }
+  }]);
+
+  return PlainMarkdownEditorWithErrorBoundary;
+}(React.Component);
+
+export { EditorBuilder, MarkdownEditorWithErrorBoundary as MarkdownEditor, SimpleEditorWithErrorBoundary as SimpleEditor, PlainMarkdownEditorWithErrorBoundary as PlainMarkdownEditor };

package/dist/editor/markdown-editor.js

@@ -0,0 +1,323 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Fragment } from 'react';
+import { withTranslation } from 'react-i18next';
+import { renderNode, renderLeaf, decorationNode } from './editor-utils/common-editor-utils';
+import { Node, Editor, Range } from 'slate';
+import { Editable, Slate, ReactEditor } from '@seafile/slate-react';
+import toaster from '../components/toast';
+import ModalPortal from '../components/modal-portal';
+import ContextMenu from '../components/context-menu';
+import CommentDialog from '../components/comment-dialog';
+import { serialize } from '../utils/slate2markdown/index';
+import TextLinkHoverMenu from './editor-component/textlink-hovermenu';
+import { isRangeCollapsed } from './editor-utils/range-utils';
+import EditorBuilder from './editor-builder';
+import '../assets/css/navbar-imgbutton.css';
+import '../assets/css/textlink-hovermenu.css';
+import '../assets/css/image.css';
+import '../assets/css/link.css';
+import '../assets/css/tree-view.css';
+
+var MarkdownEditor = /*#__PURE__*/function (_React$Component) {
+  _inherits(MarkdownEditor, _React$Component);
+
+  var _super = _createSuper(MarkdownEditor);
+
+  function MarkdownEditor(props) {
+    var _this;
+
+    _classCallCheck(this, MarkdownEditor);
+
+    _this = _super.call(this, props);
+
+    _this.getDomNodeByPath = function (path) {
+      var node,
+          parent = document.querySelector('.editor-component');
+
+      while (typeof path[0] === 'number' && parent) {
+        node = parent.children[path[0]];
+        path.shift();
+        parent = node;
+      }
+
+      return node;
+    };
+
+    _this.updateCommentBtnPosition = function () {
+      if (!_this.props.isSupportComment) return;
+      if (_this.timer) return;
+      _this.timer = setTimeout(function () {
+        var selection = _this.editor.selection;
+
+        if (!selection || Range.isCollapsed(selection)) {
+          var _style = _this.commentRef.style;
+          _style.top = '-1000px';
+          clearTimeout(_this.timer);
+          _this.timer = null;
+          return;
+        }
+
+        var focusNodePath = selection.anchor.path.slice();
+        focusNodePath.pop();
+
+        var focusNode = _this.getDomNodeByPath(focusNodePath);
+
+        var style = _this.commentRef.style;
+        style.right = '40px';
+
+        if (focusNode) {
+          style.top = "".concat(focusNode.offsetTop, "px");
+        } else {
+          style.top = '-1000px';
+        }
+
+        clearTimeout(_this.timer);
+        _this.timer = null;
+      }, 40);
+    };
+
+    _this.onCommentAdded = function () {
+      _this.toggleCommentDialog();
+
+      _this.props.onAddComment && _this.props.onAddComment();
+    };
+
+    _this.addComment = function (e) {
+      e.stopPropagation();
+
+      _this.getQuote();
+
+      _this.toggleCommentDialog();
+    };
+
+    _this.toggleCommentDialog = function () {
+      _this.setState({
+        showCommentDialog: !_this.state.showCommentDialog
+      });
+    };
+
+    _this.getQuote = function () {
+      _this.quote = serialize(Editor.fragment(_this.editor, _this.editor.selection));
+
+      _this.setState({
+        commentPosition: _this.editor.selection.anchor.path
+      });
+    };
+
+    _this.onChange = function (value) {
+      _this.setState({
+        value: value
+      }); // hide context menu when content change
+
+
+      if (_this.state.isShowContextMenu === true) {
+        _this.setState({
+          isShowContextMenu: false
+        });
+
+        _this.contextMenuPosition = {};
+      }
+
+      _this.props.onChange(value, _this.editor.operations);
+    };
+
+    _this.onFocusEditor = function () {
+      var value = _this.state.value;
+
+      if (value.length === 2 && value[0].type === 'paragraph' && Node.text(value[0].children[0]).length === 0) {
+        _this.editorRef.firstChild.focus();
+      }
+    };
+
+    _this.addLink = function (fileName, url, isImage) {
+      var selection = _this.editor.selection;
+
+      if (isImage) {
+        _this.editorUtils.insertImage({
+          url: url,
+          selection: selection
+        });
+
+        return;
+      }
+
+      _this.editorUtils.insertLink({
+        text: fileName,
+        url: url,
+        selection: selection
+      });
+    };
+
+    _this.scrollToQuote = function (path) {
+      if (!path) return;
+      var editor = _this.editor;
+      var node = editor.children[path[0]];
+      var element = ReactEditor.toDOMNode(editor, node);
+
+      _this.editorContainerRef.scrollTo(0, element.offsetTop);
+
+      Editor.select(_this.editor, path);
+    };
+
+    _this.scrollToNode = function (node) {
+      var editor = document.querySelector('.editor-component');
+      var element = editor.childNodes[node.path[0]];
+
+      _this.editorContainerRef.scrollTo(0, element.offsetTop);
+
+      window.location.hash = encodeURI(node.children[0].text);
+      Editor.select(_this.editor, node.path);
+    };
+
+    _this.onCopy = function (event) {
+      _this.plugin.onCopy(event, _this.editor);
+    };
+
+    _this.onCut = function (event) {
+      _this.plugin.onCut(event);
+    };
+
+    _this.onKeyDown = function (event) {
+      _this.plugin.onKeyDown(event);
+    };
+
+    _this.onContextMenu = function (event) {
+      if (_this.tableUtils.isInTable()) {
+        event.preventDefault();
+        _this.contextMenuPosition = {
+          left: event.clientX,
+          top: event.clientY
+        };
+
+        _this.setState({
+          isShowContextMenu: !_this.state.isShowContextMenu
+        });
+      }
+    };
+
+    _this.setCommentRef = function (ref) {
+      _this.commentRef = ref;
+    };
+
+    _this.setEditorRef = function (ref) {
+      _this.editorRef = ref;
+    };
+
+    _this.setEditorContainerRef = function (ref) {
+      _this.editorContainerRef = ref;
+    };
+
+    _this.state = {
+      value: props.value,
+      isShowContextMenu: false,
+      showCommentDialog: false,
+      commentPosition: null
+    };
+    _this.editor = EditorBuilder.getEditor(props);
+    _this.plugin = EditorBuilder.getPlugin();
+    _this.tableUtils = EditorBuilder.getTableUtils();
+    _this.editorUtils = EditorBuilder.getEditorUtils();
+    _this.contextMenuPosition = {};
+    return _this;
+  }
+
+  _createClass(MarkdownEditor, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error) {
+      this.props.resetRichValue();
+      console.log(error);
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      window.abcdef_editor = this;
+      var t = this.props.t;
+      var userAgent = navigator.userAgent.toLowerCase();
+
+      if (userAgent.indexOf('chrome') === -1) {
+        var message = t('Editing_files_in_this_browser_can_lead_to_slight_display_problems');
+        toaster.warning(message, {
+          duration: 4
+        });
+      } // get first text node of the document and focus at the start of the text node
+
+
+      var _Array$from$ = _slicedToArray(Array.from(Node.texts(this.editor.children[0]))[0], 2),
+          textPath = _Array$from$[1];
+
+      textPath.unshift(0);
+      Editor.select(this.editor, {
+        path: textPath,
+        offset: 0
+      });
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      EditorBuilder.resetEditor();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var editor = this.editor;
+      var _this$state = this.state,
+          value = _this$state.value,
+          commentPosition = _this$state.commentPosition;
+      var addCommentClass = 'iconfont icon-plus-square seafile-viewer-comment-btn'; // link detail message
+
+      var toolbarStatus = this.editorUtils.getToolbarStatus();
+      var selectionCollapsed = isRangeCollapsed(editor.selection);
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Slate, {
+        editor: this.editor,
+        value: value,
+        onChange: this.onChange
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "editor-container align-self-start",
+        ref: this.setEditorContainerRef
+      }, /*#__PURE__*/React.createElement("div", {
+        ref: this.setEditorRef,
+        onClick: this.onFocusEditor,
+        className: "editor article"
+      }, /*#__PURE__*/React.createElement(Editable, {
+        autoFocus: true,
+        className: "editor-component",
+        renderElement: function renderElement(props) {
+          return renderNode(props, editor);
+        },
+        renderLeaf: renderLeaf,
+        decorate: decorationNode,
+        onCut: this.onCut,
+        onCopy: this.onCopy,
+        onKeyDown: this.onKeyDown,
+        onSelect: this.updateCommentBtnPosition,
+        onContextMenu: this.onContextMenu
+      }), /*#__PURE__*/React.createElement("i", {
+        className: addCommentClass,
+        ref: this.setCommentRef,
+        onMouseDown: this.addComment
+      })))), /*#__PURE__*/React.createElement(Fragment, null, toolbarStatus.isLinkActive && selectionCollapsed && /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement(TextLinkHoverMenu, {
+        onToggleLinkDialog: this.onToggleLinkDialog,
+        editorUtils: this.editorUtils
+      })), this.state.isShowContextMenu && /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement(ContextMenu, {
+        tableUtils: this.tableUtils,
+        contextMenuPosition: this.contextMenuPosition
+      })), this.state.showCommentDialog && /*#__PURE__*/React.createElement(CommentDialog, {
+        quote: this.quote,
+        editorApi: this.editor.editorApi,
+        commentPosition: commentPosition,
+        onCommentAdded: this.onCommentAdded,
+        toggleCommentDialog: this.toggleCommentDialog
+      })));
+    }
+  }]);
+
+  return MarkdownEditor;
+}(React.Component);
+
+export default withTranslation('seafile-editor', {
+  withRef: true
+})(MarkdownEditor);