@seafile/seafile-editor 1.0.82-alpha3 → 1.0.82-alpha5

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

@@ -29,11 +29,11 @@ const SimpleSlateEditor = _ref => {
     onExpandEditorToggle
   } = _ref;
   const [slateValue, setSlateValue] = (0, _react.useState)(value);
-  const editor = (0, _react.useMemo)(() => (0, _withPropsEditor.default)(_extension.baseEditor, {
+  const editor = (0, _react.useMemo)(() => (0, _withPropsEditor.default)(isInline ? _extension.inlineEditor : _extension.baseEditor, {
     editorApi,
     onSave,
     columns
-  }), [columns, editorApi, onSave]);
+  }), [columns, editorApi, onSave, isInline]);
   const eventProxy = (0, _react.useMemo)(() => {
     return new _eventHandler.default(editor);
   }, [editor]);

package/dist/extension/editor.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createSlateEditor = exports.baseEditor = void 0;
+exports.inlineEditor = exports.createSlateEditor = exports.baseEditor = void 0;
 var _slate = require("slate");
 var _slateHistory = require("slate-history");
 var _slateReact = require("slate-react");
@@ -16,6 +16,13 @@ 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);
+  }
+  return editor;
+}, (0, _slateHistory.withHistory)((0, _slateReact.withReact)((0, _slate.createEditor)())));
 const createSlateEditor = () => {
   const editor = _plugins.default.reduce((editor, pluginItem) => {
     const withPlugin = pluginItem.editorPlugin;

package/dist/extension/index.js

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

package/dist/extension/toolbar/inline-toolbar/index.js

@@ -72,7 +72,9 @@ const InlineToolbar = _ref => {
     onClick: onHelpIconToggle
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "iconfont icon-use-help"
-  })))), onExpandEditorToggle && /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, onExpandEditorToggle && /*#__PURE__*/_react.default.createElement(_commons.ExpandEditorMenu, commonProps)), isShowHelpModal && /*#__PURE__*/_react.default.createElement(_shortcutDialog.default, {
+  })))), onExpandEditorToggle && /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, onExpandEditorToggle && /*#__PURE__*/_react.default.createElement(_commons.ExpandEditorMenu, Object.assign({}, commonProps, {
+    onExpandEditorToggle: onExpandEditorToggle
+  }))), isShowHelpModal && /*#__PURE__*/_react.default.createElement(_shortcutDialog.default, {
     isRichEditor: isRichEditor,
     toggleShortcutDialog: onHelpIconToggle
   }));

package/dist/index.js

@@ -22,6 +22,12 @@ Object.defineProperty(exports, "EventBus", {
     return _eventBus.default;
   }
 });
+Object.defineProperty(exports, "InlineLongTextEditor", {
+  enumerable: true,
+  get: function () {
+    return _inlineLongtextEditor.default;
+  }
+});
 Object.defineProperty(exports, "LongTextEditorDialog", {
   enumerable: true,
   get: function () {
@@ -106,6 +112,7 @@ var _markdownView = _interopRequireDefault(require("./pages/markdown-view"));
 var _simpleEditor = _interopRequireDefault(require("./pages/simple-editor"));
 var _emailEditorDialog = _interopRequireDefault(require("./pages/email-editor-dialog"));
 var _longtextEditorDialog = _interopRequireDefault(require("./pages/longtext-editor-dialog"));
+var _inlineLongtextEditor = _interopRequireDefault(require("./pages/inline-longtext-editor"));
 var _markdownPreview = _interopRequireDefault(require("./pages/markdown-preview"));
 var _seatableEditor = _interopRequireDefault(require("./pages/seatable-editor"));
 var _seatableViewer = _interopRequireDefault(require("./pages/seatable-viewer"));

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

@@ -0,0 +1,60 @@
+.sf-inline-editor-container {
+  width: 100%;
+  height: 100%;
+  border: 1px solid rgba(0, 40, 100, .12);
+  border-radius: 3px;
+  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+}
+
+.sf-inline-editor-container .sf-simple-slate-editor-container {
+  width: 100%;
+  height: 100%;
+}
+
+.sf-inline-editor-container .sf-slate-editor-toolbar {
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+	height: 33px;
+}
+
+.sf-inline-editor-container .sf-slate-editor-content {
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+	overflow: hidden;
+}
+
+.sf-inline-editor-container .sf-slate-editor-toolbar .sf-menu-group:last-child {
+  border-right: none;
+}
+
+.sf-inline-editor-container .sf-simple-slate-editor-container .sf-slate-editor-content {
+  flex: 1;
+}
+
+/* preview */
+.sf-inline-editor-container .longtext-preview-container {
+  padding: 10px;
+  background-color: #fff;
+}
+
+.sf-inline-editor-container .longtext-preview-container .article h1 {
+  margin-top: 1.2em;
+}
+
+.sf-inline-editor-container .longtext-preview-container .article p {
+  margin-top: 0.8em;
+}
+
+.sf-slate-editor-toolbar .sf-menu-group {
+	padding-top: 4px;
+	padding-bottom: 4px;
+}
+
+.sf-editor-menu-popover .popover-inner {
+  display: flex;
+}
+
+.sf-editor-menu-popover .popover-inner .sf-menu-group {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
 var _simpleEditor = _interopRequireDefault(require("../simple-editor"));
 var _getPreviewContent = _interopRequireDefault(require("../../utils/get-preview-content"));
 var _getBrowserInfo = _interopRequireDefault(require("../../utils/get-browser-Info"));
@@ -18,7 +17,7 @@ const InlineLongTextEditor = _ref => {
   let {
     lang,
     headerName,
-    value,
+    value: propsValue,
     autoSave = true,
     saveDelay = 60000,
     isCheckBrowser = false,
@@ -26,98 +25,112 @@ const InlineLongTextEditor = _ref => {
     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 {
-    isValidBrowser,
     isWindowsWechat
   } = (0, _react.useMemo)(() => {
     return (0, _getBrowserInfo.default)(isCheckBrowser);
   }, [isCheckBrowser]);
-  const onUpdateEditorValue = (0, _react.useCallback)(() => {
-    var _editorRef$current, _editorRef$current2;
-    if (!isValueChanged) return;
-    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);
-    onSaveEditorValue({
-      text: markdownString,
-      preview: previewText,
-      images: images,
-      links: links,
-      checklist
-    });
+  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);
-  }, [isValueChanged, onSaveEditorValue]);
+  }, [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
-      if (onEditorValueChanged && typeof onEditorValueChanged === 'function') {
-        var _editorRef$current3, _editorRef$current4;
-        const markdownString = (_editorRef$current3 = editorRef.current) === null || _editorRef$current3 === void 0 ? void 0 : _editorRef$current3.getValue();
-        const slateNodes = (_editorRef$current4 = editorRef.current) === null || _editorRef$current4 === void 0 ? void 0 : _editorRef$current4.getSlateValue();
-        const {
-          previewText,
-          images,
-          links,
-          checklist
-        } = (0, _getPreviewContent.default)(slateNodes, false);
-        onEditorValueChanged({
-          text: markdownString,
-          preview: previewText,
-          images: images,
-          links: links,
-          checklist
-        });
-      }
-      setValueChanged(true);
+      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);
-  }, [onEditorValueChanged]);
+  }, [saveValue]);
   const openEditorDialog = (0, _react.useCallback)(() => {
+    const {
+      height
+    } = editorContainerRef.current.getBoundingClientRect();
+    setStyle({
+      height
+    });
     setShowExpandEditor(true);
-  }, []);
-  const onCloseEditorDialog = (0, _react.useCallback)(() => {
-    onUpdateEditorValue();
+  }, [editorContainerRef]);
+  const onCloseEditorDialog = (0, _react.useCallback)(value => {
+    value && saveValue(value);
+    setStyle({});
     setShowExpandEditor(false);
-  }, [onUpdateEditorValue]);
+  }, [saveValue]);
   (0, _react.useEffect)(() => {
     let timer = null;
     if (autoSave) {
       timer = setTimeout(() => {
-        onUpdateEditorValue();
+        handelAutoSave();
       }, saveDelay);
     }
     return () => {
       timer && clearTimeout(timer);
     };
-  }, [autoSave, saveDelay, onUpdateEditorValue]);
+  }, [autoSave, saveDelay, handelAutoSave]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "sf-inline-editor-container"
-  }, !isWindowsWechat && /*#__PURE__*/_react.default.createElement(_simpleEditor.default, {
+    className: "sf-inline-editor-container",
+    style: style,
+    ref: editorContainerRef
+  }, !showExpandEditor && !isWindowsWechat ? /*#__PURE__*/_react.default.createElement(_simpleEditor.default, {
     isInline: true,
     ref: editorRef,
-    value: value,
+    value: value.text,
     editorApi: editorApi,
     onContentChanged: onContentChanged,
     onExpandEditorToggle: openEditorDialog
-  })), showExpandEditor && /*#__PURE__*/_react.default.createElement(_longtextEditorDialog.default, {
+  }) : /*#__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,
+    value: value.text,
     autoSave: autoSave,
     saveDelay: saveDelay,
     isCheckBrowser: isCheckBrowser,
     editorApi: editorApi,
-    onSaveEditorValue: onSaveEditorValue,
-    onEditorValueChanged: onEditorValueChanged,
+    onSaveEditorValue: saveValue,
+    onEditorValueChanged: saveValue,
     onCloseEditorDialog: onCloseEditorDialog
   }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-editor",
-  "version": "1.0.82alpha3",
+  "version": "1.0.82alpha5",
   "description": "",
   "main": "dist/index.js",
   "scripts": {