@seafile/seafile-editor 0.3.97 → 0.3.100

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);

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

@@ -8,6 +8,7 @@ import toaster from '../components/toast';
 import isHotkey from 'is-hotkey';
 import { withTranslation } from 'react-i18next';
 import Prism from 'prismjs';
+import '../assets/editor/plain-editor.css';
 
 var className = require('classnames');
 
@@ -17,10 +18,10 @@ require('codemirror/lib/codemirror.css');
 
 require('codemirror/mode/markdown/markdown');
 
-require('../css/plaineditor/markdown-editor.css');
-
 require('prismjs/themes/prism.css');
 
+require('../assets/css/markdown-editor.css');
+
 var CodeMirror = /*#__PURE__*/function (_React$Component) {
   _inherits(CodeMirror, _React$Component);
 
@@ -286,9 +287,9 @@ var PlainMarkdownEditor = /*#__PURE__*/function (_React$Component2) {
     key: "render",
     value: function render() {
       return /*#__PURE__*/React.createElement("div", {
-        className: "seafile-editor-module seafile-editor"
+        className: "plain-editor seafile-editor-module"
       }, /*#__PURE__*/React.createElement("div", {
-        className: "seafile-editor-main plain-editor-main d-flex"
+        className: "plain-editor-main d-flex"
       }, /*#__PURE__*/React.createElement("div", {
         className: "plain-editor-left-panel",
         onKeyDown: this.onHotKey,