@seafile/seafile-editor 1.0.85-beta3 → 1.0.85-beta5

package/dist/editors/inline-editor/index.js

@@ -0,0 +1,160 @@
+"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 _slateReact = require("slate-react");
+var _slate = require("slate");
+var _extension = require("../../extension");
+var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
+var _eventHandler = _interopRequireDefault(require("../../utils/event-handler"));
+var _withPropsEditor = _interopRequireDefault(require("./with-props-editor"));
+var _core = require("../../extension/core");
+var _common = require("../../utils/common");
+require("./style.css");
+const isMacOS = (0, _common.isMac)();
+const InlineEditor = _ref => {
+  let {
+    showTitle,
+    focusNodePath,
+    value,
+    editorApi,
+    onSave,
+    columns,
+    onContentChanged,
+    isSupportFormula,
+    onExpandEditorToggle
+  } = _ref;
+  const [slateValue, setSlateValue] = (0, _react.useState)(value);
+  const editor = (0, _react.useMemo)(() => {
+    if (showTitle) return (0, _withPropsEditor.default)(_extension.inlineEditor, {
+      editorApi,
+      onSave,
+      columns
+    });
+    return (0, _extension.createSlateEditor)();
+  }, [columns, editorApi, onSave, showTitle]);
+  const eventProxy = (0, _react.useMemo)(() => {
+    return new _eventHandler.default(editor);
+  }, [editor]);
+  const decorate = (0, _extension.useHighlight)(editor);
+  const onChange = (0, _react.useCallback)(value => {
+    setSlateValue(value);
+    if (editor.forceNormalize) return;
+    const operations = editor.operations;
+    const modifyOps = operations.filter(o => o.type !== 'set_selection');
+    if (modifyOps.length > 0) {
+      onContentChanged && onContentChanged(value);
+    }
+    const eventBus = _eventBus.default.getInstance();
+    eventBus.dispatch('change');
+  }, [editor, onContentChanged]);
+  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]);
+      const range = {
+        anchor: startOfFirstNode,
+        focus: startOfFirstNode
+      };
+      (0, _core.focusEditor)(editor, range);
+    }
+  }, []);
+
+  // const focusEndNode = useCallback((editor) => {
+  //   const lastChildIndex = editor.children.length - 1;
+  //   if (lastChildIndex < 0) return;
+  //   const lastNode = editor.children[lastChildIndex];
+  //   if (!lastNode) return;
+  //   const [lastNodeFirstChild] = lastNode.children;
+  //   if (lastNodeFirstChild) {
+  //     const endOfFirstNode = Editor.end(editor, [lastChildIndex, 0]);
+  //     const range = {
+  //       anchor: endOfFirstNode,
+  //       focus: endOfFirstNode,
+  //     };
+  //     focusEditor(editor, range);
+  //   }
+  // }, []);
+
+  // useMount: focus editor
+  (0, _react.useEffect)(() => {
+    editor.forceNormalize = true;
+    _slate.Editor.normalize(editor, {
+      force: true
+    });
+    const timer = setTimeout(() => {
+      editor.forceNormalize = false;
+      focusNode(editor, focusNodePath);
+    }, 300);
+    return () => {
+      editor.forceNormalize = false;
+      clearTimeout(timer);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // willUnmount
+  (0, _react.useEffect)(() => {
+    return () => {
+      editor.selection = null;
+      editor.history = {
+        redos: [],
+        undos: []
+      };
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onEditorClick = (0, _react.useCallback)(() => {
+    const value = editor.children;
+    if (value.length === 1 && _slate.Node.string(value[0]).length === 0) {
+      focusNode(editor);
+    }
+  }, [editor, focusNode]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-simple-slate-editor-container"
+  }, showTitle && /*#__PURE__*/_react.default.createElement(_extension.InlineToolbar, {
+    editor: editor,
+    isSupportFormula: isSupportFormula,
+    isSupportColumn: !!columns,
+    onExpandEditorToggle: onExpandEditorToggle
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-slate-editor-content",
+    onClick: onEditorClick
+  }, /*#__PURE__*/_react.default.createElement(_slateReact.Slate, {
+    editor: editor,
+    initialValue: slateValue,
+    onChange: onChange
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-slate-scroll-container ".concat(isMacOS ? '' : 'isWin')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-slate-article-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "article"
+  }, /*#__PURE__*/_react.default.createElement(_extension.SetNodeToDecorations, null), /*#__PURE__*/_react.default.createElement(_slateReact.Editable, {
+    decorate: decorate,
+    renderElement: _extension.renderElement,
+    renderLeaf: _extension.renderLeaf,
+    onKeyDown: eventProxy.onKeyDown,
+    onCopy: eventProxy.onCopy
+  })))))));
+};
+var _default = exports.default = InlineEditor;

package/dist/editors/inline-editor/style.css

@@ -0,0 +1,87 @@
+.sf-simple-slate-editor-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+}
+
+.sf-simple-slate-editor-container .sf-slate-editor-toolbar {
+  display: flex;
+  justify-content: flex-start;
+  height: 44px;
+  align-items: center;
+  padding: 0 10px;
+  background-color: #fff;
+  user-select: none;
+  border-bottom: 1px solid #e5e6e8;
+  position: relative;
+  z-index: 102;
+}
+
+.sf-simple-slate-editor-container .sf-slate-editor-content {
+  width: 100%;
+  height: calc(100% - 44px);
+  display: flex;
+  background: #f5f5f5;
+  position: relative;
+  min-height: 0;
+}
+
+.sf-simple-slate-editor-container .sf-slate-scroll-container {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+
+.sf-simple-slate-editor-container .sf-slate-scroll-container.isWin::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.sf-simple-slate-editor-container .sf-slate-scroll-container.isWin::-webkit-scrollbar-button {
+  display: none;
+}
+
+.sf-simple-slate-editor-container .sf-slate-scroll-container.isWin::-webkit-scrollbar-thumb {
+  background-color: rgb(206, 206, 212);
+  border-radius: 10px;
+}
+
+/* .sf-simple-slate-editor-container .sf-slate-article-container {
+  flex: 1;
+  position: relative;
+  max-width: 950px;
+  min-width: 400px;
+  margin: 0 auto;
+  padding-top: 20px;
+  padding-bottom: 20px;
+} */
+
+.sf-simple-slate-editor-container .sf-slate-article-container {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+
+.sf-simple-slate-editor-container .sf-slate-editor-content .article {
+  margin: 0;
+  padding: 10px;
+  border: none;
+  background-color: #fff;
+  min-height: 100%;
+  color: #212529;
+}
+
+.sf-simple-slate-editor-container .sf-slate-editor-content .article h1,
+.sf-simple-slate-editor-container .sf-slate-editor-content .article h2,
+.sf-simple-slate-editor-container .sf-slate-editor-content .article h3,
+.sf-simple-slate-editor-container .sf-slate-editor-content .article h4,
+.sf-simple-slate-editor-container .sf-slate-editor-content .article h5,
+.sf-simple-slate-editor-container .sf-slate-editor-content .article h6 {
+  color: #212529;
+}
+
+.sf-simple-slate-editor-container .sf-slate-editor-content .article div:first-child {
+  outline: none;
+}

package/dist/editors/inline-editor/with-props-editor.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const withPropsEditor = function (editor) {
+  let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let newEditor = editor;
+  if (props.editorApi) {
+    newEditor.api = props.editorApi;
+  }
+  if (props.onSave) {
+    newEditor.onSave = props.onSave;
+  }
+  if (props.columns) {
+    newEditor.columns = props.columns;
+  }
+  return newEditor;
+};
+var _default = exports.default = withPropsEditor;

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

@@ -19,28 +19,23 @@ require("./style.css");
 const isMacOS = (0, _common.isMac)();
 const SimpleSlateEditor = _ref => {
   let {
-    isInline,
     focusNodePath,
     value,
     editorApi,
     onSave,
     columns,
     onContentChanged,
-    isSupportFormula,
-    onExpandEditorToggle
+    isSupportFormula
   } = _ref;
   const [slateValue, setSlateValue] = (0, _react.useState)(value);
-  const editor = (0, _react.useMemo)(() => (0, _withPropsEditor.default)(isInline ? _extension.inlineEditor : _extension.baseEditor, {
+  const editor = (0, _react.useMemo)(() => (0, _withPropsEditor.default)(_extension.baseEditor, {
     editorApi,
     onSave,
     columns
-  }), [columns, editorApi, onSave, isInline]);
+  }), [columns, editorApi, onSave]);
   const eventProxy = (0, _react.useMemo)(() => {
     return new _eventHandler.default(editor);
   }, [editor]);
-  const ToolbarComponent = (0, _react.useMemo)(() => {
-    return isInline ? _extension.InlineToolbar : _extension.Toolbar;
-  }, [isInline]);
   const decorate = (0, _extension.useHighlight)(editor);
   const onChange = (0, _react.useCallback)(value => {
     setSlateValue(value);
@@ -131,11 +126,10 @@ const SimpleSlateEditor = _ref => {
   }, [editor, focusNode]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-simple-slate-editor-container"
-  }, /*#__PURE__*/_react.default.createElement(ToolbarComponent, {
+  }, /*#__PURE__*/_react.default.createElement(_extension.Toolbar, {
     editor: editor,
     isSupportFormula: isSupportFormula,
-    isSupportColumn: !!columns,
-    onExpandEditorToggle: onExpandEditorToggle
+    isSupportColumn: !!columns
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-slate-editor-content",
     onClick: onEditorClick
@@ -157,7 +151,4 @@ const SimpleSlateEditor = _ref => {
     onCopy: eventProxy.onCopy
   })))))));
 };
-SimpleSlateEditor.defaultProps = {
-  isInline: false
-};
 var _default = exports.default = SimpleSlateEditor;

package/dist/extension/editor.js

@@ -16,13 +16,17 @@ const baseEditor = exports.baseEditor = _plugins.default.reduce((editor, pluginI
   }
   return editor;
 }, (0, _slateHistory.withHistory)((0, _slateReact.withReact)((0, _slate.createEditor)())));
-const inlineEditor = exports.inlineEditor = _plugins.default.reduce((editor, pluginItem) => {
-  const withPlugin = pluginItem.editorPlugin;
-  if (withPlugin) {
-    return withPlugin(editor);
-  }
+const inlineEditor = () => {
+  const editor = _plugins.default.reduce((editor, pluginItem) => {
+    const withPlugin = pluginItem.editorPlugin;
+    if (withPlugin) {
+      return withPlugin(editor);
+    }
+    return editor;
+  }, (0, _slateHistory.withHistory)((0, _slateReact.withReact)((0, _slate.createEditor)())));
   return editor;
-}, (0, _slateHistory.withHistory)((0, _slateReact.withReact)((0, _slate.createEditor)())));
+};
+exports.inlineEditor = inlineEditor;
 const createSlateEditor = () => {
   const editor = _plugins.default.reduce((editor, pluginItem) => {
     const withPlugin = pluginItem.editorPlugin;

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

@@ -7,13 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _simpleEditor = _interopRequireDefault(require("../simple-editor"));
+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 {
+    showTitle,
     lang,
     headerName,
     value: propsValue,
@@ -101,6 +102,7 @@ const Editor = _ref => {
     ref: editorContainerRef
   }, !showExpandEditor && !isWindowsWechat ? /*#__PURE__*/_react.default.createElement(_simpleEditor.default, {
     isInline: true,
+    showTitle: showTitle,
     focusNodePath: focusNodePath,
     ref: editorRef,
     value: value.text,

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

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _isHotkey = _interopRequireDefault(require("is-hotkey"));
-var _ClickOutside = _interopRequireDefault(require("./ClickOutside"));
+var _clickOutside = _interopRequireDefault(require("./click-outside"));
 var _formatter = _interopRequireDefault(require("./formatter"));
 var _editor = _interopRequireDefault(require("./editor"));
 var _slateConvert = require("../../slate-convert");
@@ -83,21 +83,18 @@ const LongTextInlineEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) =>
       closeEditor: closeEditor
     };
   }, [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, {
+  const onClick = (0, _react.useCallback)(() => {
+    if (isShowEditor) return;
+    setShowEditor(true);
+  }, [isShowEditor]);
+  return /*#__PURE__*/_react.default.createElement(_clickOutside.default, {
     onClickOutside: closeEditor
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "w-100",
-    onKeyDown: onHotKey
+    onKeyDown: onHotKey,
+    onClick: onClick
   }, /*#__PURE__*/_react.default.createElement(_editor.default, {
+    showTitle: isShowEditor,
     lang: lang,
     isWindowsWechat: isWindowsWechat,
     headerName: headerName,

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

@@ -0,0 +1,65 @@
+"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 _loading = _interopRequireDefault(require("../../containers/loading"));
+var _slateConvert = require("../../slate-convert");
+var _useMathjax = _interopRequireDefault(require("../../hooks/use-mathjax"));
+var _inlineEditor = _interopRequireDefault(require("../../editors/inline-editor"));
+const SimpleEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    isFetching,
+    value,
+    editorApi,
+    mathJaxSource,
+    onSave: propsOnSave,
+    onContentChanged: propsOnContentChanged,
+    ...otherProps
+  } = _ref;
+  const [richValue, setRichValue] = (0, _react.useState)([]);
+  const [isLoading, setIsLoading] = (0, _react.useState)(true);
+  const {
+    isLoadingMathJax
+  } = (0, _useMathjax.default)(mathJaxSource);
+  (0, _react.useImperativeHandle)(ref, () => {
+    return {
+      getValue: () => {
+        const mdStringValue = (0, _slateConvert.slateToMdString)(richValue);
+        return mdStringValue;
+      },
+      getSlateValue: () => {
+        return richValue;
+      }
+    };
+  }, [richValue]);
+  (0, _react.useEffect)(() => {
+    if (!isFetching) {
+      const richValue = (0, _slateConvert.mdStringToSlate)(value);
+      setRichValue(richValue);
+      setIsLoading(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFetching]);
+  const onContentChanged = (0, _react.useCallback)(content => {
+    setRichValue(content);
+    propsOnContentChanged && propsOnContentChanged();
+  }, [propsOnContentChanged]);
+  const props = {
+    isSupportFormula: !!mathJaxSource,
+    value: richValue,
+    editorApi: editorApi,
+    onSave: propsOnSave,
+    onContentChanged: onContentChanged,
+    ...otherProps
+  };
+  if (isFetching || isLoading || isLoadingMathJax) {
+    return /*#__PURE__*/_react.default.createElement(_loading.default, null);
+  }
+  return /*#__PURE__*/_react.default.createElement(_inlineEditor.default, props);
+});
+var _default = exports.default = SimpleEditor;

package/dist/pages/simple-editor.js

@@ -13,7 +13,6 @@ var _useMathjax = _interopRequireDefault(require("../hooks/use-mathjax"));
 var _simpleSlateEditor = _interopRequireDefault(require("../editors/simple-slate-editor"));
 const SimpleEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
-    isInline,
     isFetching,
     value,
     editorApi,
@@ -51,7 +50,6 @@ const SimpleEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     propsOnContentChanged && propsOnContentChanged();
   }, [propsOnContentChanged]);
   const props = {
-    isInline,
     isSupportFormula: !!mathJaxSource,
     value: richValue,
     editorApi: editorApi,

package/package.json

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