@seafile/seafile-editor 0.3.76

package/dist/editor/rich-markdown-editor.js

@@ -0,0 +1,580 @@
+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 from 'react';
+import ToolBar from '../components/toolbar';
+import { withTranslation } from 'react-i18next';
+import { renderNode, renderLeaf, EditorUtils, decorationNode } from './editor-utils/common-editor-utils';
+import { createEditor, Node, Editor, Range } from 'slate';
+import { withHistory } from 'slate-history';
+import { serialize } from '../utils/slate2markdown/index';
+import { Editable, withReact, Slate, ReactEditor } from '@seafile/slate-react';
+import { isRangeCollapsed } from './editor-utils/range-utils';
+import ModalPortal from '../components/modal-portal';
+import TextLinkHoverMenu from './editor-component/textlink-hovermenu';
+import ContextMenu from '../components/context-menu';
+import withBlock from './controller/block-element-controller';
+import withInline from './controller/inline-element-controller';
+import withVoid from './controller/void-element-controller';
+import withMarkdownShortcut from './controller/shortcut-controller';
+import normalizeNode from './controller/normalize-controller';
+import Plugin from './editor-plugin';
+import TableUtils from '../editor/editor-utils/block-element-utils/table-utils';
+import UserHelpDialog from '../components/user-help';
+import CommentDialog from '../components/comment-dialog';
+import SidePanel from '../components/side-panel';
+import toaster from '../components/toast';
+import '../css/richeditor/right-panel.css';
+import '../css/richeditor/side-panel.css';
+import '../css/richeditor/navbar-imgbutton.css';
+import '../css/richeditor/textlink-hovermenu.css';
+import '../css/richeditor/comments-list.css';
+import '../css/richeditor/image.css';
+import '../css/richeditor/link.css';
+import '../css/richeditor/tree-view.css';
+
+var SimpleEditor = /*#__PURE__*/function (_React$Component) {
+  _inherits(SimpleEditor, _React$Component);
+
+  var _super = _createSuper(SimpleEditor);
+
+  function SimpleEditor(props) {
+    var _this;
+
+    _classCallCheck(this, SimpleEditor);
+
+    _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.setBtnPosition = function () {
+      if (!_this.state.showCommentBtn) {
+        return;
+      }
+
+      if (_this.timmer) return;
+      _this.timmer = setTimeout(function () {
+        var selection = _this.editor.selection;
+
+        if (!selection || Range.isCollapsed(selection)) {
+          var _style = _this.refs.commentbtn.style;
+          _style.top = '-1000px';
+          clearTimeout(_this.timmer);
+          _this.timmer = null;
+          return;
+        }
+
+        var focusNodePath = selection.anchor.path.slice();
+        focusNodePath.pop();
+
+        var focusNode = _this.getDomNodeByPath(focusNodePath);
+
+        var style = _this.refs.commentbtn.style;
+        style.right = '40px';
+
+        if (focusNode) {
+          style.top = "".concat(focusNode.offsetTop, "px");
+        } else {
+          style.top = '-1000px';
+        }
+
+        clearTimeout(_this.timmer);
+        _this.timmer = null;
+      }, 40);
+    };
+
+    _this.initialSidePanel = function () {
+      var mainPanelWidth = _this.getCookie('md-editor-main-panel-width');
+
+      if (mainPanelWidth) _this.setState({
+        mainPanelWidth: mainPanelWidth * 1
+      });
+
+      var isShowSidePanel = _this.getCookie('md-editor-show-side-panel');
+
+      if (isShowSidePanel === 'true') {
+        _this.setState({
+          isShowSidePanel: true
+        });
+      } else if (isShowSidePanel === 'false') {
+        _this.setState({
+          isShowSidePanel: false
+        });
+      }
+    };
+
+    _this.scrollToNode = function (node) {
+      var editor = document.querySelector('.editor-component');
+      var element = editor.childNodes[node.path[0]];
+
+      _this.refs.editorContainer.scrollTo(0, element.offsetTop);
+
+      window.location.hash = encodeURI(node.children[0].text);
+      Editor.select(_this.editor, node.path);
+    };
+
+    _this.showHelpDialog = function () {
+      _this.setState({
+        isShowSidePanel: false,
+        isShowHelpDialog: true
+      });
+    };
+
+    _this.hideHelpDialog = function () {
+      _this.setState({
+        isShowHelpDialog: false
+      });
+    };
+
+    _this.insertRepoImage = function (event) {
+      event.preventDefault();
+      if (_this.props.readOnly) return;
+      _this.props.openDialogs && _this.props.openDialogs('insert_repo_image');
+    };
+
+    _this.onResizeMouseUp = function (event) {
+      if (_this.state.resizeFlag) {
+        _this.setState({
+          resizeFlag: false
+        });
+      }
+
+      _this.setCookie('md-editor-main-panel-width', _this.state.mainPanelWidth);
+    };
+
+    _this.onResizeMouseDown = function (event) {
+      _this.setState({
+        resizeFlag: true
+      });
+    };
+
+    _this.onResizeMouseMove = function (event) {
+      var mainPanelWidth = _this.state.mainPanelWidth + event.nativeEvent.movementX / event.view.innerWidth * 100;
+
+      if (mainPanelWidth >= 82 || mainPanelWidth <= 30) {
+        _this.setState({
+          resizeFlag: false
+        });
+
+        return;
+      }
+
+      _this.setState({
+        mainPanelWidth: mainPanelWidth
+      });
+    };
+
+    _this.toggleSidePanel = function () {
+      if (_this.state.isShowSidePanel) {
+        _this.setState({
+          isShowSidePanel: false
+        });
+
+        _this.setCookie('md-editor-show-side-panel', 'false');
+      } else {
+        _this.setState({
+          isShowSidePanel: true
+        });
+
+        _this.setCookie('md-editor-show-side-panel', 'true');
+      }
+
+      _this.setState({
+        isShowHelpDialog: false
+      });
+    };
+
+    _this.handleCommentOpen = function () {
+      _this.setState({
+        mainPanelWidth: 70,
+        isShowHelpDialog: false
+      });
+    };
+
+    _this.setCookie = function (key, value) {
+      document.cookie = key + '=' + value + '; ';
+    };
+
+    _this.onSave = function (event) {
+      _this.props.onSave();
+    };
+
+    _this.insertRepoFile = function () {
+      if (_this.props.readOnly) return;
+      _this.editorSelection = window.editor.selection;
+      _this.props.openDialogs && _this.props.openDialogs('insert_file');
+    };
+
+    _this.onCommentAdded = function () {
+      _this.toggleCommentDialog();
+
+      _this.setState({
+        relistComment: _this.state.relistComment + 1
+      });
+    };
+
+    _this.toggleCommentBtn = function (value) {
+      _this.setState({
+        showCommentBtn: value
+      });
+    };
+
+    _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.foucsEditor = function () {
+      _this.editorRef.firstChild.focus();
+    };
+
+    _this.onToggleLinkDialog = function () {
+      _this.setState({
+        isShowLinkDialog: !_this.state.isShowLinkDialog
+      });
+    };
+
+    _this.onToggleFormulaDialog = function () {
+      _this.setState({
+        isShowFormulaDialog: !_this.state.isShowFormulaDialog
+      });
+    };
+
+    _this.onToggleImageDialog = function () {
+      _this.setState({
+        isShowImageDialog: !_this.state.isShowImageDialog
+      });
+    };
+
+    _this.getCookie = function (key) {
+      var name = key + '=';
+      var ca = document.cookie.split(';');
+
+      for (var i = 0; i < ca.length; i++) {
+        var c = ca[i].trim();
+
+        if (c.indexOf(name) === 0) {
+          return c.substring(name.length, c.length);
+        }
+      }
+
+      return '';
+    };
+
+    _this.addComment = function (e) {
+      e.stopPropagation();
+
+      _this.getQuote();
+
+      _this.toggleCommentDialog();
+    };
+
+    _this.scrollToQuote = function (path) {
+      if (!path) return;
+      var editor = _this.editor;
+      var node = editor.children[path[0]];
+      var element = ReactEditor.toDOMNode(editor, node);
+
+      _this.refs.editorContainer.scrollTo(0, element.offsetTop);
+
+      Editor.select(_this.editor, path);
+    };
+
+    _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.addLink = function (fileName, url, isImage) {
+      if (isImage) {
+        _this.editorUtils.insertImage({
+          url: url,
+          selection: _this.editorSelection
+        });
+
+        return;
+      }
+
+      _this.editorUtils.insertLink({
+        text: fileName,
+        url: url,
+        selection: _this.editorSelection
+      });
+    };
+
+    _this.editor = normalizeNode(withMarkdownShortcut(withVoid(withBlock(withInline(withHistory(withReact(createEditor())))))));
+    _this.editor.editorApi = props.editorApi;
+    _this.editor.onSave = props.onSave;
+    window.editor = _this.editor;
+    _this.editorUtils = new EditorUtils(_this.editor);
+    _this.tableUtils = new TableUtils(_this.editor);
+    _this.plugin = new Plugin(_this.editor);
+    _this.editorRef = null;
+    _this.timmer = null;
+    _this.contextMenuPosition = {};
+    _this.state = {
+      value: props.value,
+      leftNavMode: 'files',
+      mainPanelWidth: 80,
+      resizeFlag: false,
+      isShowHelpDialog: false,
+      isShowSidePanel: false,
+      isShowLinkDialog: false,
+      isShowImageDialog: false,
+      isShowFormulaDialog: false,
+      isShowContextMenu: false,
+      showCommentBtn: false,
+      showCommentDialog: false,
+      commentPosition: null,
+      relistComment: 0
+    };
+    return _this;
+  }
+
+  _createClass(SimpleEditor, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error) {
+      this.props.resetRichValue();
+      console.log(error);
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      window.richMarkdownEditor = this; // notify current user if others are also editing this file
+
+      var editingUsers = this.props.collabUsers.filter(function (ele) {
+        return ele.is_editing === true && ele.myself === undefined;
+      });
+
+      if (editingUsers.length > 0) {
+        toaster.danger('Another user is editing this file!', {
+          duration: 3
+        });
+      }
+
+      var userAgent = navigator.userAgent.toLowerCase();
+
+      if (userAgent.indexOf('chrome') === -1) {
+        toaster.warning(this.props.t('Editing_files_in_this_browser_can_lead_to_slight_display_problems'), {
+          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: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      if (this.props.issues !== nextProps.issues && nextProps.issues.issue_list.length > 0 && !this.state.isShowSidePanel) {
+        this.setState({
+          isShowSidePanel: true
+        }, function () {
+          window.openMarkdownHint && window.openMarkdownHint();
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$state = this.state,
+          value = _this$state.value,
+          isShowLinkDialog = _this$state.isShowLinkDialog,
+          isShowImageDialog = _this$state.isShowImageDialog,
+          isShowFormulaDialog = _this$state.isShowFormulaDialog;
+      var _this$props = this.props,
+          t = _this$props.t,
+          mode = _this$props.mode,
+          editorApi = _this$props.editorApi;
+      var _this$state2 = this.state,
+          mainPanelWidth = _this$state2.mainPanelWidth,
+          isShowHelpDialog = _this$state2.isShowHelpDialog,
+          isShowSidePanel = _this$state2.isShowSidePanel;
+      var onResizeMove = this.state.resizeFlag ? this.onResizeMouseMove : null;
+      var mainPanelClass = "seafile-editor-main-panel d-flex align-self-end ".concat(!isShowSidePanel && !isShowHelpDialog ? 'seafile-editor-all-panel' : '');
+      var mainPanelStyle = {
+        width: isShowSidePanel ? mainPanelWidth + '%' : '100%'
+      };
+      var editor = this.editor,
+          foucsEditor = this.foucsEditor;
+      var toolbarStatus = this.editorUtils.getToolbarStatus();
+      var readOnly = this.props.readOnly;
+      var selectionCollapsed = isRangeCollapsed(editor.selection);
+      return /*#__PURE__*/React.createElement("div", {
+        className: "seafile-editor-module seafile-editor"
+      }, /*#__PURE__*/React.createElement(Slate, {
+        editor: this.editor,
+        value: value,
+        onChange: this.onChange
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "seafile-rich-editor-topbar"
+      }, /*#__PURE__*/React.createElement(ToolBar, {
+        onToggleLinkDialog: this.onToggleLinkDialog,
+        onToggleImageDialog: this.onToggleImageDialog,
+        onToggleFormulaDialog: this.onToggleFormulaDialog,
+        toolbarStatus: toolbarStatus,
+        toggleSidePanel: this.toggleSidePanel,
+        insertRepoFile: this.insertRepoFile,
+        isShowLinkDialog: isShowLinkDialog,
+        isShowImageDialog: isShowImageDialog,
+        isShowSidePanel: isShowSidePanel,
+        hasSidePanel: true,
+        mode: mode,
+        readOnly: readOnly,
+        isShowFormulaDialog: isShowFormulaDialog
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "seafile-editor-main d-flex",
+        onMouseMove: onResizeMove,
+        onMouseUp: this.onResizeMouseUp
+      }, /*#__PURE__*/React.createElement("div", {
+        className: mainPanelClass,
+        style: mainPanelStyle
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "editor-container align-self-start",
+        ref: "editorContainer"
+      }, /*#__PURE__*/React.createElement("div", {
+        ref: function ref(_ref) {
+          return _this2.editorRef = _ref;
+        },
+        onClick: value.length === 2 && value[0].type === 'paragraph' && Node.text(value[0].children[0]).length === 0 ? foucsEditor : null,
+        className: "editor article"
+      }, /*#__PURE__*/React.createElement(Editable, {
+        renderElement: function renderElement(props) {
+          return renderNode(props, editor, readOnly);
+        },
+        className: 'editor-component',
+        renderLeaf: renderLeaf,
+        onContextMenu: this.onContextMenu,
+        onCopy: function onCopy(event) {
+          _this2.plugin.onCopy(event, editor);
+        },
+        onCut: function onCut(event) {
+          return _this2.plugin.onCut(event);
+        },
+        autoFocus: true,
+        onKeyDown: this.plugin.onKeyDown,
+        decorate: decorationNode,
+        onSelect: this.setBtnPosition
+      }), this.state.showCommentBtn && /*#__PURE__*/React.createElement("i", {
+        className: "iconfont icon-plus-square seafile-viewer-comment-btn",
+        ref: "commentbtn",
+        onMouseDown: this.addComment
+      })), toolbarStatus.isLinkActive && selectionCollapsed ? /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement(TextLinkHoverMenu, {
+        onToggleLinkDialog: this.onToggleLinkDialog,
+        editorUtils: this.editorUtils
+      })) : null, this.state.isShowContextMenu && /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement(ContextMenu, {
+        tableUtils: this.tableUtils,
+        contextMenuPosition: this.contextMenuPosition
+      })))), !isShowHelpDialog && isShowSidePanel && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "seafile-editor-resize",
+        style: {
+          right: 100 - mainPanelWidth + '%'
+        },
+        onMouseDown: this.onResizeMouseDown
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "seafile-editor-side-panel align-self-start",
+        style: {
+          width: 100 - mainPanelWidth + '%'
+        }
+      }, /*#__PURE__*/React.createElement(SidePanel, {
+        editor: this,
+        document: value,
+        issues: this.props.issues,
+        scrollToNode: this.scrollToNode,
+        scrollToQuote: this.scrollToQuote,
+        t: this.props.t,
+        editorApi: editorApi,
+        toggleCommentBtn: this.toggleCommentBtn,
+        relistComment: this.state.relistComment,
+        relatedFiles: this.props.relatedFiles,
+        fileTagList: this.props.fileTagList,
+        openDialogs: this.props.openDialogs,
+        fileInfo: this.props.fileInfo,
+        participants: this.props.participants,
+        onParticipantsChange: this.props.onParticipantsChange
+      }))), isShowHelpDialog && /*#__PURE__*/React.createElement(UserHelpDialog, {
+        userHelp: t('userHelp', {
+          returnObjects: true
+        }),
+        hideHelpDialog: this.hideHelpDialog
+      }), this.state.showCommentDialog && /*#__PURE__*/React.createElement(CommentDialog, {
+        editorApi: editorApi,
+        t: t,
+        quote: this.quote,
+        scrollToQuote: this.scrollToQuote,
+        commentPosition: this.state.commentPosition,
+        onCommentAdded: this.onCommentAdded,
+        toggleCommentDialog: this.toggleCommentDialog
+      }))));
+    }
+  }]);
+
+  return SimpleEditor;
+}(React.Component);
+
+export default withTranslation('seafile-editor')(SimpleEditor);