@seafile/seafile-editor 1.0.85-beta → 1.0.85-beta2

package/dist/editors/simple-slate-editor/index.js

@@ -20,6 +20,7 @@ const isMacOS = (0, _common.isMac)();
 const SimpleSlateEditor = _ref => {
   let {
     isInline,
+    focusNodePath,
     value,
     editorApi,
     onSave,
@@ -52,9 +53,21 @@ const SimpleSlateEditor = _ref => {
     const eventBus = _eventBus.default.getInstance();
     eventBus.dispatch('change');
   }, [editor, onContentChanged]);
-  const focusFirstNode = (0, _react.useCallback)(editor => {
+  const focusNode = (0, _react.useCallback)((editor, focusNodePath) => {
     const [firstNode] = editor.children;
     if (!firstNode) return;
+    if (focusNodePath) {
+      const customFocusNodePath = (0, _core.getNode)(editor, focusNodePath);
+      if (customFocusNodePath) {
+        const startOfFirstNode = _slate.Editor.start(editor, focusNodePath);
+        const range = {
+          anchor: startOfFirstNode,
+          focus: startOfFirstNode
+        };
+        (0, _core.focusEditor)(editor, range);
+        return;
+      }
+    }
     const [firstNodeFirstChild] = firstNode.children;
     if (firstNodeFirstChild) {
       const startOfFirstNode = _slate.Editor.start(editor, [0, 0]);
@@ -90,7 +103,7 @@ const SimpleSlateEditor = _ref => {
     });
     const timer = setTimeout(() => {
       editor.forceNormalize = false;
-      focusFirstNode(editor);
+      focusNode(editor, focusNodePath);
     }, 300);
     return () => {
       editor.forceNormalize = false;
@@ -113,9 +126,9 @@ const SimpleSlateEditor = _ref => {
   const onEditorClick = (0, _react.useCallback)(() => {
     const value = editor.children;
     if (value.length === 1 && _slate.Node.string(value[0]).length === 0) {
-      focusFirstNode(editor);
+      focusNode(editor);
     }
-  }, [editor, focusFirstNode]);
+  }, [editor, focusNode]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-simple-slate-editor-container"
   }, /*#__PURE__*/_react.default.createElement(ToolbarComponent, {

package/dist/extension/core/queries/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isTextNode = exports.isStartPoint = exports.isSelectionAtBlockStart = exports.isSelectionAtBlockEnd = exports.isRangeAcrossBlocks = exports.isLastNode = exports.isLastChild = exports.isFirstNode = exports.isFirstChild = exports.isEndPoint = exports.isBlockTextEmptyAfterSelection = exports.isBlockAboveEmpty = exports.isAncestorEmpty = exports.getSelectedNodeEntryByTypes = exports.getSelectedNodeEntryByType = exports.getSelectedNodeByTypes = exports.getSelectedNodeByType = exports.getSelectedElems = exports.getQueryOptions = exports.getPreviousPath = exports.getPrevNode = exports.getParentNode = exports.getNodes = exports.getNodeType = exports.getNodeEntries = exports.getNode = exports.getNextSiblingNodes = exports.getNextNode = exports.getLastChildPath = exports.getLastChild = exports.getInlineNodes = exports.getEditorString = exports.getDeepInlineChildren = exports.getCommonNode = exports.getChildren = exports.getAboveNode = exports.getAboveBlockNode = exports.findPath = exports.findNode = exports.findDescendant = void 0;
+exports.isTextNode = exports.isStartPoint = exports.isSelectionAtBlockStart = exports.isSelectionAtBlockEnd = exports.isRangeAcrossBlocks = exports.isLastNode = exports.isLastChild = exports.isFirstNode = exports.isFirstChild = exports.isEndPoint = exports.isBlockTextEmptyAfterSelection = exports.isBlockAboveEmpty = exports.isAncestorEmpty = exports.getSelectedNodeEntryByTypes = exports.getSelectedNodeEntryByType = exports.getSelectedNodeByTypes = exports.getSelectedNodeByType = exports.getSelectedElems = exports.getQueryOptions = exports.getPreviousPath = exports.getPrevNode = exports.getParentNode = exports.getNodes = exports.getNodeType = exports.getNodePathById = exports.getNodeEntries = exports.getNode = exports.getNextSiblingNodes = exports.getNextNode = exports.getLastChildPath = exports.getLastChild = exports.getInlineNodes = exports.getEditorString = exports.getDeepInlineChildren = exports.getCommonNode = exports.getChildren = exports.getAboveNode = exports.getAboveBlockNode = exports.findPath = exports.findNode = exports.findDescendant = void 0;
 var _slate = require("slate");
 var _slateReact = require("slate-react");
 var _slugid = _interopRequireDefault(require("slugid"));
@@ -476,4 +476,20 @@ const getInlineNodes = node => {
   });
   return result.flat();
 };
-exports.getInlineNodes = getInlineNodes;
+exports.getInlineNodes = getInlineNodes;
+const getNodePathById = function (rootNode, nodeId) {
+  let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  if (rootNode.id === nodeId) return path;
+  const {
+    children = []
+  } = rootNode;
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+    path.push(i);
+    const nodePath = getNodePathById(child, nodeId, path);
+    if (nodePath) return nodePath;
+    path.pop();
+  }
+  return null;
+};
+exports.getNodePathById = getNodePathById;

package/dist/extension/index.js

@@ -40,6 +40,12 @@ Object.defineProperty(exports, "createSlateEditor", {
     return _editor.createSlateEditor;
   }
 });
+Object.defineProperty(exports, "getNodePathById", {
+  enumerable: true,
+  get: function () {
+    return _core.getNodePathById;
+  }
+});
 Object.defineProperty(exports, "inlineEditor", {
   enumerable: true,
   get: function () {

package/dist/extension/plugins/link/render-elem/index.js

@@ -28,9 +28,6 @@ const renderLink = (_ref, editor) => {
     left: 0
   });
   const isReadonly = (0, _slateReact.useReadOnly)();
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const isLinkActive = (0, _react.useMemo)(() => (0, _helper.isLinkType)(editor), [editor.selection]);
   const onClosePopover = (0, _react.useCallback)(e => {
     unregisterClickEvent();
     setIsShowPopover(false);
@@ -80,7 +77,7 @@ const renderLink = (_ref, editor) => {
   }, attributes), /*#__PURE__*/_react.default.createElement("a", {
     href: element.url,
     onClick: onHrefClick
-  }, children)), isLinkActive && isShowPopover && /*#__PURE__*/_react.default.createElement(_linkPopover.default, {
+  }, children)), isShowPopover && /*#__PURE__*/_react.default.createElement(_linkPopover.default, {
     popoverPosition: popoverPosition,
     linkUrl: element.url,
     editor: editor,

package/dist/extension/plugins/link/render-elem/link-popover.js

@@ -14,6 +14,7 @@ var _helper = require("../helper");
 var _common = require("../../../../utils/common");
 var _eventTypes = require("../../../../constants/event-types");
 var _constants = require("../../../../constants");
+require("./style.css");
 const LinkPopover = _ref => {
   let {
     linkUrl,

package/dist/extension/plugins/link/render-elem/style.css

@@ -59,4 +59,4 @@
 
 .sf-link-op-icon:hover {
   background: #f2f2f2;
-}
+}

package/dist/pages/longtext-inline-editor/ClickOutside/index.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+/**
+ * Detecting outside click on a react component is surprisingly hard.
+ * A general approach is to have a global click handler on the document
+ * which checks if the click target is inside the editor container or
+ * not using editorContainer.contains(e.target). This approach works well
+ * until portals are used for editors. Portals render children into a DOM
+ * node that exists outside the DOM hierarchy of the parent component so
+ * editorContainer.contains(e.target) does not work. Here are some examples
+ * of the DOM structure with different types of editors
+ *
+ *
+ * SimpleEditor for example Texbox (No Portals)
+ *   <div react-data-grid>..<div>
+ *   <div portal-created-by-the-grid-for-editors>
+ *      <div editor-container>
+ *        <div simple-editor>..</div>
+ *      </div>
+ *   <div>
+ *
+ * ComplexEditor for example Modals (using Portals)
+ *   <div react-data-grid>..<div>
+ *   <div portal-created-by-the-grid-for-editors>
+ *      <div editor-container>
+ *        // Nothing here
+ *      </div>
+ *   <div>
+ *   <div portal-created-by-the-editor>
+ *     <div complex-editor>..</div>
+ *   </div>
+ *
+ *
+ * One approach to detect outside click is to use event bubbling through
+ * portals. An event fired from inside a portal will propagate to ancestors
+ * in the containing React tree, even if those elements are not ancestors
+ * in the DOM tree. This means a click handler can be attached on the document
+ * and on the editor container. The editor container can set a flag to notify
+ * that the click was inside the editor and the document click handler can use
+ * this flag to call onClickOutside. This approach however has a few caveats
+ * - Click handler on the document is set using document.addEventListener
+ * - Click handler on the editor container is set using onClick prop
+ *
+ * This means if a child component inside the editor calls e.stopPropagation
+ * then the click handler on the editor container will not be called whereas
+ * document click handler will be called.
+ * https://github.com/facebook/react/issues/12518
+ *
+ * To solve this issue onClickCapture event is used.
+ */
+
+class ClickOutside extends _react.default.Component {
+  constructor() {
+    super(...arguments);
+    (0, _defineProperty2.default)(this, "isClickedInside", false);
+    (0, _defineProperty2.default)(this, "handleDocumentClick", e => {
+      if (this.isClickedInside) {
+        this.isClickedInside = false;
+        return;
+      }
+      this.props.onClickOutside(e);
+    });
+    (0, _defineProperty2.default)(this, "handleMouseDown", () => {
+      this.isClickedInside = true;
+    });
+  }
+  componentDidMount() {
+    document.addEventListener('mousedown', this.handleDocumentClick);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleDocumentClick);
+  }
+  render() {
+    return /*#__PURE__*/_react.default.cloneElement(_react.default.Children.only(this.props.children), {
+      onMouseDownCapture: this.handleMouseDown
+    });
+  }
+}
+var _default = exports.default = ClickOutside;

package/dist/pages/longtext-inline-editor/editor.js

@@ -0,0 +1,135 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _simpleEditor = _interopRequireDefault(require("../simple-editor"));
+var _getPreviewContent = _interopRequireDefault(require("../../utils/get-preview-content"));
+var _markdownPreview = _interopRequireDefault(require("../markdown-preview"));
+var _longtextEditorDialog = _interopRequireDefault(require("../longtext-editor-dialog"));
+require("./index.css");
+const Editor = _ref => {
+  let {
+    lang,
+    headerName,
+    value: propsValue,
+    isWindowsWechat,
+    focusNodePath,
+    autoSave = true,
+    saveDelay = 60000,
+    isCheckBrowser = false,
+    editorApi,
+    onSaveEditorValue,
+    onEditorValueChanged
+  } = _ref;
+  const editorContainerRef = (0, _react.useRef)(null);
+  const editorRef = (0, _react.useRef)(null);
+  const [style, setStyle] = (0, _react.useState)({});
+  const [isValueChanged, setValueChanged] = (0, _react.useState)(false);
+  const [showExpandEditor, setShowExpandEditor] = (0, _react.useState)(false);
+  const [value, setValue] = (0, _react.useState)(typeof propsValue === 'string' ? {
+    text: propsValue
+  } : propsValue);
+  const saveValue = (0, _react.useCallback)(function (value) {
+    let save = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    setValueChanged(true);
+    setValue(value);
+    onEditorValueChanged && onEditorValueChanged(value);
+    if (!save) return;
+    onSaveEditorValue && onSaveEditorValue(value);
+    setValueChanged(false);
+  }, [onSaveEditorValue, onEditorValueChanged]);
+  const handelAutoSave = (0, _react.useCallback)(() => {
+    if (!isValueChanged) return;
+    saveValue(value, true);
+  }, [isValueChanged, value, saveValue]);
+  const onContentChanged = (0, _react.useCallback)(() => {
+    // delay to update editor's content
+    setTimeout(() => {
+      var _editorRef$current, _editorRef$current2;
+      // update parent's component cache value
+      const markdownString = (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.getValue();
+      const slateNodes = (_editorRef$current2 = editorRef.current) === null || _editorRef$current2 === void 0 ? void 0 : _editorRef$current2.getSlateValue();
+      const {
+        previewText,
+        images,
+        links,
+        checklist
+      } = (0, _getPreviewContent.default)(slateNodes, false);
+      const value = {
+        text: markdownString,
+        preview: previewText,
+        images: images,
+        links: links,
+        checklist
+      };
+      saveValue(value);
+    }, 0);
+  }, [saveValue]);
+  const openEditorDialog = (0, _react.useCallback)(() => {
+    const {
+      height
+    } = editorContainerRef.current.getBoundingClientRect();
+    setStyle({
+      height
+    });
+    setShowExpandEditor(true);
+  }, [editorContainerRef]);
+  const onCloseEditorDialog = (0, _react.useCallback)(value => {
+    value && saveValue(value);
+    setStyle({});
+    setShowExpandEditor(false);
+  }, [saveValue]);
+  (0, _react.useEffect)(() => {
+    let timer = null;
+    if (autoSave) {
+      timer = setTimeout(() => {
+        handelAutoSave();
+      }, saveDelay);
+    }
+    return () => {
+      timer && clearTimeout(timer);
+    };
+  }, [autoSave, saveDelay, handelAutoSave]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-long-text-inline-editor-container",
+    style: style,
+    ref: editorContainerRef
+  }, !showExpandEditor && !isWindowsWechat ? /*#__PURE__*/_react.default.createElement(_simpleEditor.default, {
+    isInline: true,
+    focusNodePath: focusNodePath,
+    ref: editorRef,
+    value: value.text,
+    onSave: handelAutoSave,
+    editorApi: editorApi,
+    onContentChanged: onContentChanged,
+    onExpandEditorToggle: openEditorDialog
+  }) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-simple-slate-editor-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-slate-editor-toolbar"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-slate-editor-content"
+  }, /*#__PURE__*/_react.default.createElement(_markdownPreview.default, {
+    isWindowsWechat: isWindowsWechat,
+    value: value.text,
+    isShowOutline: false
+  })))), showExpandEditor && /*#__PURE__*/_react.default.createElement(_longtextEditorDialog.default, {
+    lang: lang,
+    readOnly: false,
+    headerName: headerName,
+    value: value.text,
+    autoSave: autoSave,
+    saveDelay: saveDelay,
+    isCheckBrowser: isCheckBrowser,
+    editorApi: editorApi,
+    onSaveEditorValue: saveValue,
+    onEditorValueChanged: saveValue,
+    onCloseEditorDialog: onCloseEditorDialog
+  }));
+};
+var _default = exports.default = Editor;

package/dist/pages/longtext-inline-editor/formatter/index.css

@@ -0,0 +1,31 @@
+.longtext-preview-container {
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  overflow: auto;
+}
+
+.longtext-preview-container .sf-slate-viewer-scroll-container {
+  overflow-y: auto;
+  height: fit-content;
+  padding: 0;
+  background: #fff;
+}
+
+.longtext-preview-container .sf-slate-viewer-article-container {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+}
+
+.longtext-preview-container .sf-slate-viewer-article-container .article {
+  padding: 0;
+  height: auto;
+  min-height: 100% !important;
+  border: 0;
+  color: #212529;
+}
+
+.longtext-preview-container .article :first-child {
+  margin-top: 0;
+}

package/dist/pages/longtext-inline-editor/formatter/index.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _loading = _interopRequireDefault(require("../../../containers/loading"));
+var _slateConvert = require("../../../slate-convert");
+var _slateViewer = _interopRequireDefault(require("../../../editors/slate-viewer"));
+require("./index.css");
+// Windows old Wechat (3.0 or earlier) inner core is chrome 53 and don't support ECMA6, can't use seafile-editor markdownViewer
+// Windows new Wechat (lastest version 3.3.5) support seafile-editor markdownViewer
+// so use dangerouslySetInnerHTML to preview
+class Formatter extends _react.default.PureComponent {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "convertMarkdown", mdFile => {
+      _slateConvert.processor.process(mdFile).then(result => {
+        let innerHtml = String(result).replace(/<a /ig, '<a target="_blank" tabindex="-1"');
+        this.setState({
+          innerHtml
+        });
+      });
+    });
+    this.state = {
+      innerHtml: null
+    };
+  }
+  componentDidMount() {
+    const {
+      isWindowsWechat,
+      value
+    } = this.props;
+    if (isWindowsWechat) {
+      this.convertMarkdown(value);
+    }
+  }
+  render() {
+    const {
+      isWindowsWechat,
+      value,
+      isShowOutline
+    } = this.props;
+    const {
+      innerHtml
+    } = this.state;
+    if (isWindowsWechat && innerHtml === null) {
+      return /*#__PURE__*/_react.default.createElement(_loading.default, null);
+    }
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "longtext-preview-container"
+    }, isWindowsWechat && /*#__PURE__*/_react.default.createElement("div", {
+      className: "article",
+      dangerouslySetInnerHTML: {
+        __html: this.state.innerHtml
+      }
+    }), !isWindowsWechat && /*#__PURE__*/_react.default.createElement(_slateViewer.default, {
+      value: value,
+      isShowOutline: isShowOutline
+    }));
+  }
+}
+var _default = exports.default = Formatter;

package/dist/pages/longtext-inline-editor/index.js

@@ -7,132 +7,108 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _simpleEditor = _interopRequireDefault(require("../simple-editor"));
-var _getPreviewContent = _interopRequireDefault(require("../../utils/get-preview-content"));
+var _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _ClickOutside = _interopRequireDefault(require("./ClickOutside"));
+var _formatter = _interopRequireDefault(require("./formatter"));
+var _editor = _interopRequireDefault(require("./editor"));
+var _slateConvert = require("../../slate-convert");
 var _getBrowserInfo = _interopRequireDefault(require("../../utils/get-browser-Info"));
-var _markdownPreview = _interopRequireDefault(require("../markdown-preview"));
-var _longtextEditorDialog = _interopRequireDefault(require("../longtext-editor-dialog"));
-require("./index.css");
-const LongTextInlineEditor = _ref => {
+var _extension = require("../../extension");
+const LongTextInlineEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
+    autoSave,
+    isCheckBrowser,
+    saveDelay,
+    value,
     lang,
     headerName,
-    value: propsValue,
-    autoSave = true,
-    saveDelay = 60000,
-    isCheckBrowser = false,
-    editorApi,
+    onPreviewClick,
     onSaveEditorValue,
-    onEditorValueChanged
+    editorApi
   } = _ref;
-  const editorContainerRef = (0, _react.useRef)(null);
-  const editorRef = (0, _react.useRef)(null);
-  const [style, setStyle] = (0, _react.useState)({});
-  const [isValueChanged, setValueChanged] = (0, _react.useState)(false);
-  const [showExpandEditor, setShowExpandEditor] = (0, _react.useState)(false);
-  const [value, setValue] = (0, _react.useState)(typeof propsValue === 'string' ? {
-    text: propsValue
-  } : propsValue);
+  const [isShowEditor, setShowEditor] = (0, _react.useState)(false);
+  const valueRef = (0, _react.useRef)(typeof value === 'string' ? {
+    text: value
+  } : value);
+  const longTextValueChangedRef = (0, _react.useRef)(false);
+  const [focusNodePath, setFocusNodePath] = (0, _react.useState)([0, 0]);
   const {
     isWindowsWechat
   } = (0, _react.useMemo)(() => {
     return (0, _getBrowserInfo.default)(isCheckBrowser);
   }, [isCheckBrowser]);
-  const saveValue = (0, _react.useCallback)(function (value) {
-    let save = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    setValueChanged(true);
-    setValue(value);
-    onEditorValueChanged && onEditorValueChanged(value);
-    if (!save) return;
-    onSaveEditorValue && onSaveEditorValue(value);
-    setValueChanged(false);
-  }, [onSaveEditorValue, onEditorValueChanged]);
-  const handelAutoSave = (0, _react.useCallback)(() => {
-    if (!isValueChanged) return;
-    saveValue(value, true);
-  }, [isValueChanged, value, saveValue]);
-  const onContentChanged = (0, _react.useCallback)(() => {
-    // delay to update editor's content
-    setTimeout(() => {
-      var _editorRef$current, _editorRef$current2;
-      // update parent's component cache value
-      const markdownString = (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.getValue();
-      const slateNodes = (_editorRef$current2 = editorRef.current) === null || _editorRef$current2 === void 0 ? void 0 : _editorRef$current2.getSlateValue();
-      const {
-        previewText,
-        images,
-        links,
-        checklist
-      } = (0, _getPreviewContent.default)(slateNodes, false);
-      const value = {
-        text: markdownString,
-        preview: previewText,
-        images: images,
-        links: links,
-        checklist
-      };
-      saveValue(value);
-    }, 0);
-  }, [saveValue]);
-  const openEditorDialog = (0, _react.useCallback)(() => {
-    const {
-      height
-    } = editorContainerRef.current.getBoundingClientRect();
-    setStyle({
-      height
-    });
-    setShowExpandEditor(true);
-  }, [editorContainerRef]);
-  const onCloseEditorDialog = (0, _react.useCallback)(value => {
-    value && saveValue(value);
-    setStyle({});
-    setShowExpandEditor(false);
-  }, [saveValue]);
-  (0, _react.useEffect)(() => {
-    let timer = null;
-    if (autoSave) {
-      timer = setTimeout(() => {
-        handelAutoSave();
-      }, saveDelay);
+  const openEditor = (0, _react.useCallback)(function () {
+    let focusNodePath = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [0, 0];
+    setFocusNodePath(focusNodePath);
+    setShowEditor(true);
+  }, []);
+  const closeEditor = (0, _react.useCallback)(() => {
+    if (longTextValueChangedRef.current) {
+      onSaveEditorValue(valueRef.current);
     }
-    return () => {
-      timer && clearTimeout(timer);
+    setShowEditor(false);
+  }, [longTextValueChangedRef, valueRef, onSaveEditorValue]);
+  const getAttributeNode = (0, _react.useCallback)(function (node, attribute) {
+    let deep = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 4;
+    if (!node || !node.getAttribute) return null;
+    if (deep === -1) return null;
+    if (node.getAttribute(attribute)) return node.getAttribute(attribute);
+    if (node.parentNode) return getAttributeNode(node.parentNode, attribute, deep--);
+  }, []);
+  const previewClick = (0, _react.useCallback)((event, richValue) => {
+    if (event.target.nodeName === 'A') return;
+    const nodeId = getAttributeNode(event.target, 'data-id');
+    onPreviewClick && onPreviewClick();
+    openEditor((0, _extension.getNodePathById)({
+      children: richValue
+    }, nodeId));
+  }, [onPreviewClick, openEditor, getAttributeNode]);
+  const onEditorValueChanged = (0, _react.useCallback)(value => {
+    valueRef.current = value;
+    longTextValueChangedRef.current = true;
+  }, []);
+  const onHotKey = (0, _react.useCallback)(event => {
+    const keyCode = event.keyCode;
+    const isModP = (0, _isHotkey.default)('mod+p', event);
+    if (keyCode === 27 || isModP) {
+      event.preventDefault();
+      !isModP && event.stopPropagation();
+      closeEditor();
+      return;
+    }
+  }, [closeEditor]);
+  (0, _react.useImperativeHandle)(ref, () => {
+    return {
+      openEditor: openEditor,
+      closeEditor: closeEditor
     };
-  }, [autoSave, saveDelay, handelAutoSave]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "sf-long-text-inline-editor-container",
-    style: style,
-    ref: editorContainerRef
-  }, !showExpandEditor && !isWindowsWechat ? /*#__PURE__*/_react.default.createElement(_simpleEditor.default, {
-    isInline: true,
-    ref: editorRef,
-    value: value.text,
-    onSave: handelAutoSave,
-    editorApi: editorApi,
-    onContentChanged: onContentChanged,
-    onExpandEditorToggle: openEditorDialog
-  }) : /*#__PURE__*/_react.default.createElement("div", {
-    className: "sf-simple-slate-editor-container"
+  }, [openEditor, closeEditor]);
+  if (!isShowEditor) {
+    const richValue = (0, _slateConvert.mdStringToSlate)(valueRef.current.text);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "sf-long-text-inline-editor-container preview",
+      onClick: event => previewClick(event, richValue)
+    }, /*#__PURE__*/_react.default.createElement(_formatter.default, {
+      value: isWindowsWechat ? valueRef.current : richValue
+    }));
+  }
+  return /*#__PURE__*/_react.default.createElement(_ClickOutside.default, {
+    onClickOutside: closeEditor
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "sf-slate-editor-toolbar"
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "sf-slate-editor-content"
-  }, /*#__PURE__*/_react.default.createElement(_markdownPreview.default, {
-    isWindowsWechat: isWindowsWechat,
-    value: value.text,
-    isShowOutline: false
-  })))), showExpandEditor && /*#__PURE__*/_react.default.createElement(_longtextEditorDialog.default, {
+    className: "w-100",
+    onKeyDown: onHotKey
+  }, /*#__PURE__*/_react.default.createElement(_editor.default, {
     lang: lang,
-    readOnly: false,
+    isWindowsWechat: isWindowsWechat,
     headerName: headerName,
-    value: value.text,
+    focusNodePath: focusNodePath,
+    value: valueRef.current.text,
     autoSave: autoSave,
     saveDelay: saveDelay,
     isCheckBrowser: isCheckBrowser,
     editorApi: editorApi,
-    onSaveEditorValue: saveValue,
-    onEditorValueChanged: saveValue,
-    onCloseEditorDialog: onCloseEditorDialog
-  }));
-};
+    onSaveEditorValue: onSaveEditorValue,
+    onEditorValueChanged: onEditorValueChanged
+  })));
+});
 var _default = exports.default = LongTextInlineEditor;

package/dist/pages/markdown-preview/index.js

@@ -26,8 +26,7 @@ class MarkdownPreview extends _react.default.PureComponent {
       });
     });
     this.state = {
-      innerHtml: null,
-      richValue: null
+      innerHtml: null
     };
   }
   componentDidMount() {
@@ -37,27 +36,20 @@ class MarkdownPreview extends _react.default.PureComponent {
     } = this.props;
     if (isWindowsWechat) {
       this.convertMarkdown(value);
-    } else {
-      const richValue = (0, _slateConvert.mdStringToSlate)(value);
-      this.setState({
-        richValue
-      });
-      this.props.beforeRenderCallback && this.props.beforeRenderCallback(richValue);
     }
   }
   render() {
     const {
       isWindowsWechat,
+      value,
       isShowOutline
     } = this.props;
     const {
-      innerHtml,
-      richValue
+      innerHtml
     } = this.state;
     if (isWindowsWechat && innerHtml === null) {
       return /*#__PURE__*/_react.default.createElement(_loading.default, null);
     }
-    if (!isWindowsWechat && !richValue) return null;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "longtext-preview-container"
     }, isWindowsWechat && /*#__PURE__*/_react.default.createElement("div", {
@@ -66,7 +58,7 @@ class MarkdownPreview extends _react.default.PureComponent {
         __html: this.state.innerHtml
       }
     }), !isWindowsWechat && /*#__PURE__*/_react.default.createElement(_slateViewer.default, {
-      value: richValue,
+      value: (0, _slateConvert.mdStringToSlate)(value),
       isShowOutline: isShowOutline
     }));
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-editor",
-  "version": "1.0.85beta",
+  "version": "1.0.85beta2",
   "description": "",
   "main": "dist/index.js",
   "scripts": {