@seafile/seafile-editor 1.0.80 → 1.0.82-alpha

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

@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = SimpleSlateEditor;
+exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _slateReact = require("slate-react");
 var _slate = require("slate");
@@ -17,14 +17,16 @@ var _core = require("../../extension/core");
 var _common = require("../../utils/common");
 require("./style.css");
 const isMacOS = (0, _common.isMac)();
-function SimpleSlateEditor(_ref) {
+const SimpleSlateEditor = _ref => {
   let {
+    isInline,
     value,
     editorApi,
     onSave,
     columns,
     onContentChanged,
-    isSupportFormula
+    isSupportFormula,
+    onExpandEditorToggle
   } = _ref;
   const [slateValue, setSlateValue] = (0, _react.useState)(value);
   const editor = (0, _react.useMemo)(() => (0, _withPropsEditor.default)(_extension.baseEditor, {
@@ -36,6 +38,9 @@ function SimpleSlateEditor(_ref) {
     return new _eventHandler.default(editor);
   }, [editor]);
   const decorate = (0, _extension.useHighlight)(editor);
+  const ToolbarComponent = (0, _react.useMemo)(() => {
+    return isInline ? _extension.InlineToolbar : _extension.Toolbar;
+  }, [isInline]);
   const onChange = (0, _react.useCallback)(value => {
     setSlateValue(value);
     if (editor.forceNormalize) return;
@@ -113,10 +118,11 @@ function SimpleSlateEditor(_ref) {
   }, [editor, focusFirstNode]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-simple-slate-editor-container"
-  }, /*#__PURE__*/_react.default.createElement(_extension.Toolbar, {
+  }, /*#__PURE__*/_react.default.createElement(ToolbarComponent, {
     editor: editor,
     isSupportFormula: isSupportFormula,
-    isSupportColumn: !!columns
+    isSupportColumn: !!columns,
+    onExpandEditorToggle: onExpandEditorToggle
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-slate-editor-content",
     onClick: onEditorClick
@@ -137,4 +143,8 @@ function SimpleSlateEditor(_ref) {
     onKeyDown: eventProxy.onKeyDown,
     onCopy: eventProxy.onCopy
   })))))));
-}
+};
+SimpleSlateEditor.defaultProps = {
+  isInline: false
+};
+var _default = exports.default = SimpleSlateEditor;

package/dist/extension/commons/expand-editor-menu.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _constants = require("../constants");
+var _menu = require("./menu");
+require("./index.css");
+const ExpandEditorMenu = _ref => {
+  let {
+    readonly,
+    isRichEditor,
+    onExpandEditorToggle,
+    className
+  } = _ref;
+  const config = _constants.MENUS_CONFIG_MAP[_constants.EXPAND_EDITOR];
+  return /*#__PURE__*/_react.default.createElement(_menu.MenuItem, Object.assign({
+    disabled: readonly,
+    isActive: false,
+    isRichEditor: isRichEditor,
+    type: _constants.EXPAND_EDITOR,
+    onMouseDown: onExpandEditorToggle,
+    className: className
+  }, config));
+};
+var _default = exports.default = ExpandEditorMenu;

package/dist/extension/commons/index.js

@@ -10,6 +10,12 @@ Object.defineProperty(exports, "ElementPopover", {
     return _elementPopover.default;
   }
 });
+Object.defineProperty(exports, "ExpandEditorMenu", {
+  enumerable: true,
+  get: function () {
+    return _expandEditorMenu.default;
+  }
+});
 Object.defineProperty(exports, "MenuGroup", {
   enumerable: true,
   get: function () {
@@ -22,6 +28,12 @@ Object.defineProperty(exports, "MenuItem", {
     return _menu.MenuItem;
   }
 });
+Object.defineProperty(exports, "MoreMenu", {
+  enumerable: true,
+  get: function () {
+    return _moreMenu.default;
+  }
+});
 Object.defineProperty(exports, "Select", {
   enumerable: true,
   get: function () {
@@ -30,4 +42,6 @@ Object.defineProperty(exports, "Select", {
 });
 var _elementPopover = _interopRequireDefault(require("./element-popover"));
 var _menu = require("./menu");
-var _select = _interopRequireDefault(require("./select"));
+var _select = _interopRequireDefault(require("./select"));
+var _moreMenu = _interopRequireDefault(require("./more-menu"));
+var _expandEditorMenu = _interopRequireDefault(require("./expand-editor-menu"));

package/dist/extension/commons/more-menu/index.css

@@ -0,0 +1,4 @@
+.sf-editor-menu-popover {
+  padding: 8px 0;
+  min-width: 12rem;
+}

package/dist/extension/commons/more-menu/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactstrap = require("reactstrap");
+var _constants = require("../../constants");
+require("./index.css");
+const MoreMenu = _ref => {
+  let {
+    className,
+    disabled,
+    isRichEditor,
+    children
+  } = _ref;
+  const validClassName = (0, _classnames.default)(className, {
+    'sf-rich-editor': isRichEditor,
+    'sf-icon-btn': true,
+    'sf-icon-btn-disabled': disabled,
+    'sf-icon-btn-hover': !disabled
+  });
+  const config = _constants.MENUS_CONFIG_MAP[_constants.MORE_OPERATION];
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    className: validClassName,
+    type: "button",
+    id: config.id
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: config.iconClass
+  })), /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
+    target: config.id,
+    className: "sf-editor-menu-popover",
+    trigger: "legacy",
+    placement: "bottom-end",
+    hideArrow: true,
+    fade: false
+  }, children));
+};
+MoreMenu.defaultProps = {
+  isRichEditor: true,
+  className: 'sf-menu-group-item'
+};
+var _default = exports.default = MoreMenu;

package/dist/extension/constants/menus-config.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TEXT_STYLE_MAP = exports.TABLE_SUBMENU_MAP = exports.MENUS_CONFIG_MAP = exports.CLEAR_FORMAT = void 0;
+exports.TEXT_STYLE_MAP = exports.TABLE_SUBMENU_MAP = exports.MORE_OPERATION = exports.MENUS_CONFIG_MAP = exports.EXPAND_EDITOR = exports.CLEAR_FORMAT = void 0;
 var _elementTypes = require("./element-types");
 const BOLD = 'bold';
 const ITALIC = 'italic';
@@ -12,6 +12,8 @@ const CODE = 'code';
 const DELETE = 'delete';
 const ADD = 'add';
 const CLEAR_FORMAT = exports.CLEAR_FORMAT = 'clear_format';
+const MORE_OPERATION = exports.MORE_OPERATION = 'more_operation';
+const EXPAND_EDITOR = exports.EXPAND_EDITOR = 'expand_editor';
 const TEXT_STYLE_MAP = exports.TEXT_STYLE_MAP = {
   BOLD: BOLD,
   ITALIC: ITALIC,
@@ -142,5 +144,15 @@ const MENUS_CONFIG_MAP = exports.MENUS_CONFIG_MAP = {
     id: "seafile_".concat(_elementTypes.COLUMN),
     iconClass: 'iconfont icon-choose-column',
     text: 'Insert_column'
+  },
+  [MORE_OPERATION]: {
+    id: "seafile_".concat(MORE_OPERATION),
+    iconClass: 'iconfont icon-more',
+    text: ''
+  },
+  [EXPAND_EDITOR]: {
+    id: "seafile_".concat(EXPAND_EDITOR),
+    iconClass: 'iconfont icon-fullscreen',
+    text: 'Expand_editor'
   }
 };

package/dist/extension/index.js

@@ -10,6 +10,12 @@ Object.defineProperty(exports, "ELementTypes", {
     return _constants.ELementTypes;
   }
 });
+Object.defineProperty(exports, "InlineToolbar", {
+  enumerable: true,
+  get: function () {
+    return _toolbar.InlineToolbar;
+  }
+});
 Object.defineProperty(exports, "SetNodeToDecorations", {
   enumerable: true,
   get: function () {

package/dist/extension/plugins/html/plugin.js

@@ -8,44 +8,61 @@ exports.default = void 0;
 var _isUrl = _interopRequireDefault(require("is-url"));
 var _slugid = _interopRequireDefault(require("slugid"));
 var _slateConvert = require("../../../slate-convert");
-var _core = require("../../core");
 var _elementTypes = require("../../constants/element-types");
+var _helpers = require("../code-block/helpers");
 const withHtml = editor => {
   const {
     insertData
   } = editor;
   const newEditor = editor;
   newEditor.insertData = data => {
-    if (!newEditor.insertFragmentData(data)) {
-      // Other document paste content into code block
-      if (!data.types.includes('text/code-block') && (0, _core.getSelectedNodeByType)(editor, _elementTypes.CODE_BLOCK)) {
-        const plaintext = data.getData('text/plain') || '';
-        if (plaintext) {
-          let fragmentData = [];
-          plaintext.split('\n').forEach(item => {
-            const codeLine = {
-              id: _slugid.default.nice(),
-              type: _elementTypes.CODE_LINE,
-              children: [{
-                text: item,
-                id: _slugid.default.nice()
-              }]
-            };
-            fragmentData.push(codeLine);
-          });
-          newEditor.insertFragment(fragmentData);
-        }
-        return;
-      }
-      const htmlContent = data.getData('text/html') || '';
-      const text = data.getData('text/plain') || '';
-      if (!(0, _isUrl.default)(text) && htmlContent) {
-        const content = (0, _slateConvert.deserializeHtml)(htmlContent);
-        editor.insertFragment(content);
-        return;
-      }
+    // If the text is a link and is not within the code_block block, it is processed as link
+    const text = data.getData('text/plain') || '';
+    if ((0, _isUrl.default)(text) && !(0, _helpers.isInCodeBlock)(newEditor)) {
+      insertData(data);
+      return;
+    }
+
+    // If the copied content contains files, proceed as shown in the image
+    if (data.types.includes('Files')) {
       insertData(data);
+      return;
+    }
+
+    // If code_block is selected, the copied content will be processed according to code_block
+    if (!data.types.includes('text/code-block') && (0, _helpers.isInCodeBlock)(newEditor)) {
+      const plaintext = data.getData('text/plain') || '';
+      if (plaintext) {
+        let fragmentData = [];
+        plaintext.split('\n').forEach(item => {
+          const codeLine = {
+            id: _slugid.default.nice(),
+            type: _elementTypes.CODE_LINE,
+            children: [{
+              text: item,
+              id: _slugid.default.nice()
+            }]
+          };
+          fragmentData.push(codeLine);
+        });
+        newEditor.insertFragment(fragmentData);
+      }
+      return;
+    }
+
+    // If it is in slate format, it will be processed in slate format.
+    if (newEditor.insertFragmentData(data)) {
+      return;
+    }
+
+    // If it is in html format, it will be processed in html format.
+    const htmlContent = data.getData('text/html') || '';
+    if (htmlContent) {
+      const content = (0, _slateConvert.deserializeHtml)(htmlContent);
+      editor.insertFragment(content);
+      return;
     }
+    insertData(data);
   };
   return newEditor;
 };

package/dist/extension/plugins/image/render-element/index.js

@@ -111,7 +111,7 @@ const renderImage = (_ref, editor) => {
       'selected': isSelected,
       'error': isError
     }),
-    alt: (element === null || element === void 0 ? void 0 : (_element$data2 = element.data) === null || _element$data2 === void 0 ? void 0 : _element$data2.alt) || '',
+    alt: (element === null || element === void 0 ? void 0 : (_element$data2 = element.data) === null || _element$data2 === void 0 ? void 0 : _element$data2.alt) || ' ' + t('Image_loading_failed'),
     src: element === null || element === void 0 ? void 0 : (_element$data3 = element.data) === null || _element$data3 === void 0 ? void 0 : _element$data3.src,
     width: element === null || element === void 0 ? void 0 : element.data.width,
     height: element === null || element === void 0 ? void 0 : element.data.height

package/dist/extension/toolbar/index.js

@@ -4,10 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "InlineToolbar", {
+  enumerable: true,
+  get: function () {
+    return _inlineToolbar.default;
+  }
+});
 Object.defineProperty(exports, "Toolbar", {
   enumerable: true,
   get: function () {
     return _headerToolbar.default;
   }
 });
-var _headerToolbar = _interopRequireDefault(require("./header-toolbar"));
+var _headerToolbar = _interopRequireDefault(require("./header-toolbar"));
+var _inlineToolbar = _interopRequireDefault(require("./inline-toolbar"));

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

@@ -0,0 +1,40 @@
+.sf-slate-editor-toolbar {
+  background-color: #fcfcfc !important;
+}
+
+.sf-slate-editor-toolbar .sf-slate-article-info-control {
+  position: absolute;
+  right: 20px;
+  height: 30px;
+  width: 30px;
+  line-height: 30px;
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
+  color: #555;
+}
+
+.sf-slate-editor-toolbar .sf-slate-article-info-control:hover {
+  background-color: #e5e5e5;
+}
+
+.sf-slate-editor-toolbar .sf-slate-help-info-control {
+  position: absolute;
+  right: 20px;
+  height: 30px;
+  width: 30px;
+  line-height: 30px;
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
+  color: #555;
+}
+
+.sf-slate-editor-toolbar .sf-slate-help-info-control > span:hover {
+  cursor: pointer;
+  color: #333;
+}
+
+.sf-slate-editor-toolbar .sf-slate-article-info-control .iconfont {
+  font-size: 13px;
+}

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

@@ -0,0 +1,83 @@
+"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 _useSelectionUpdate = _interopRequireDefault(require("../../../hooks/use-selection-update"));
+var _commons = require("../../commons");
+var _menu = _interopRequireDefault(require("../../plugins/blockquote/menu"));
+var _menu2 = _interopRequireDefault(require("../../plugins/header/menu"));
+var _menu3 = _interopRequireDefault(require("../../plugins/text-style/menu"));
+var _menu4 = _interopRequireDefault(require("../../plugins/link/menu"));
+var _constants = require("../../constants");
+var _menu5 = _interopRequireDefault(require("../../plugins/image/menu"));
+var _menu6 = _interopRequireDefault(require("../../plugins/code-block/menu"));
+var _menu7 = _interopRequireDefault(require("../../plugins/check-list/menu"));
+var _menu8 = _interopRequireDefault(require("../../plugins/list/menu"));
+var _elementTypes = require("../../constants/element-types");
+var _tableOperator = require("../../plugins/table/menu/table-operator");
+var _helper = require("../../plugins/table/helper");
+var _menu9 = _interopRequireDefault(require("../../plugins/clear-format/menu"));
+var _shortcutDialog = _interopRequireDefault(require("../user-help/shortcut-dialog"));
+require("./index.css");
+// import TableMenu from '../../plugins/table/menu';
+// import FormulaMenu from '../../plugins/formula/menu';
+// import ColumnMenu from '../../plugins/column/menu';
+
+const InlineToolbar = _ref => {
+  let {
+    editor,
+    readonly = false,
+    isRichEditor = false,
+    isSupportFormula = false,
+    isSupportInsertSeafileImage = false,
+    isSupportColumn = false,
+    onExpandEditorToggle
+  } = _ref;
+  (0, _useSelectionUpdate.default)();
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const isShowSubTableMenu = (0, _react.useMemo)(() => (0, _helper.isInTable)(editor), [editor.selection]);
+  const [isShowHelpModal, setIsShowHelpModal] = (0, _react.useState)(false);
+  const onHelpIconToggle = (0, _react.useCallback)(() => {
+    setIsShowHelpModal(!isShowHelpModal);
+  }, [isShowHelpModal]);
+  const commonProps = {
+    editor,
+    readonly,
+    isRichEditor
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-slate-editor-toolbar"
+  }, isRichEditor && /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu2.default, commonProps)), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu3.default, Object.assign({}, commonProps, {
+    type: _constants.TEXT_STYLE_MAP.BOLD
+  })), /*#__PURE__*/_react.default.createElement(_menu3.default, Object.assign({}, commonProps, {
+    type: _constants.TEXT_STYLE_MAP.ITALIC
+  })), /*#__PURE__*/_react.default.createElement(_menu3.default, Object.assign({}, commonProps, {
+    type: _constants.TEXT_STYLE_MAP.CODE
+  })), /*#__PURE__*/_react.default.createElement(_menu4.default, commonProps)), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu.default, commonProps), /*#__PURE__*/_react.default.createElement(_menu7.default, commonProps), /*#__PURE__*/_react.default.createElement(_menu8.default, Object.assign({}, commonProps, {
+    type: _elementTypes.ORDERED_LIST
+  })), /*#__PURE__*/_react.default.createElement(_menu8.default, Object.assign({}, commonProps, {
+    type: _elementTypes.UNORDERED_LIST
+  }))), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu6.default, commonProps), /*#__PURE__*/_react.default.createElement(_commons.MoreMenu, commonProps, /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu5.default, Object.assign({}, commonProps, {
+    isSupportInsertSeafileImage: isSupportInsertSeafileImage
+  }))), isShowSubTableMenu && /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, {
+    className: "sf-menu-group sf-table-operations-group"
+  }, /*#__PURE__*/_react.default.createElement(_tableOperator.AlignmentDropDown, commonProps), /*#__PURE__*/_react.default.createElement(_tableOperator.ColumnOperationDropDownList, commonProps), /*#__PURE__*/_react.default.createElement(_tableOperator.RowOperationDropDownList, commonProps), /*#__PURE__*/_react.default.createElement(_tableOperator.RemoveTableMenu, commonProps)), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu9.default, commonProps)), !isRichEditor && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-slate-help-info-control",
+    onClick: onHelpIconToggle
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "iconfont icon-use-help"
+  })))), onExpandEditorToggle && /*#__PURE__*/_react.default.createElement(_commons.ExpandEditorMenu, commonProps), isShowHelpModal && /*#__PURE__*/_react.default.createElement(_shortcutDialog.default, {
+    isRichEditor: isRichEditor,
+    toggleShortcutDialog: onHelpIconToggle
+  }));
+};
+InlineToolbar.defaultProps = {
+  readonly: false
+};
+var _default = exports.default = InlineToolbar;

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

@@ -0,0 +1,122 @@
+"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 _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"));
+var _markdownPreview = _interopRequireDefault(require("../markdown-preview"));
+var _longtextEditorDialog = _interopRequireDefault(require("../longtext-editor-dialog"));
+require("./index.css");
+const InlineLongTextEditor = _ref => {
+  let {
+    lang,
+    headerName,
+    value,
+    autoSave = true,
+    saveDelay = 60000,
+    isCheckBrowser = false,
+    editorApi,
+    onSaveEditorValue,
+    onEditorValueChanged
+  } = _ref;
+  const editorRef = useRef(null);
+  const [isValueChanged, setValueChanged] = (0, _react.useState)(false);
+  const [showExpandEditor, setShowExpandEditor] = (0, _react.useState)(false);
+  const {
+    isValidBrowser,
+    isWindowsWechat
+  } = 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
+    });
+    setValueChanged(false);
+  }, [isValueChanged, onSaveEditorValue]);
+  const onContentChanged = (0, _react.useCallback)(() => {
+    // delay to update editor's content
+    setTimeout(() => {
+      // 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);
+    }, 0);
+  }, [onEditorValueChanged]);
+  const openEditorDialog = (0, _react.useCallback)(() => {
+    setShowExpandEditor(true);
+  }, []);
+  const onCloseEditorDialog = (0, _react.useCallback)(() => {
+    onUpdateEditorValue();
+    setShowExpandEditor(false);
+  }, [onUpdateEditorValue]);
+  useEffect(() => {
+    let timer = null;
+    if (autoSave) {
+      timer = setTimeout(() => {
+        onUpdateEditorValue();
+      }, saveDelay);
+    }
+    return () => {
+      timer && clearTimeout(timer);
+    };
+  }, [autoSave, saveDelay, onUpdateEditorValue]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, !readOnly && !isWindowsWechat && /*#__PURE__*/_react.default.createElement(_simpleEditor.default, {
+    isInline: true,
+    ref: editorRef,
+    value: value,
+    editorApi: editorApi,
+    onContentChanged: onContentChanged,
+    onExpandEditorToggle: openEditorDialog
+  })), showExpandEditor && /*#__PURE__*/_react.default.createElement(_longtextEditorDialog.default, {
+    lang: lang,
+    readOnly: false,
+    headerName: headerName,
+    value: value,
+    autoSave: autoSave,
+    saveDelay: saveDelay,
+    isCheckBrowser: isCheckBrowser,
+    editorApi: editorApi,
+    onSaveEditorValue: onSaveEditorValue,
+    onEditorValueChanged: onEditorValueChanged,
+    onCloseEditorDialog: onCloseEditorDialog
+  }));
+};
+var _default = exports.default = InlineLongTextEditor;

package/dist/pages/simple-editor.js

@@ -13,12 +13,14 @@ 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,
     mathJaxSource,
     onSave: propsOnSave,
-    onContentChanged: propsOnContentChanged
+    onContentChanged: propsOnContentChanged,
+    ...otherProps
   } = _ref;
   const [richValue, setRichValue] = (0, _react.useState)([]);
   const [isLoading, setIsLoading] = (0, _react.useState)(true);
@@ -49,11 +51,13 @@ const SimpleEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     propsOnContentChanged && propsOnContentChanged();
   }, [propsOnContentChanged]);
   const props = {
+    isInline,
     isSupportFormula: !!mathJaxSource,
     value: richValue,
     editorApi: editorApi,
     onSave: propsOnSave,
-    onContentChanged: onContentChanged
+    onContentChanged: onContentChanged,
+    ...otherProps
   };
   if (isFetching || isLoading || isLoadingMathJax) {
     return /*#__PURE__*/_react.default.createElement(_loading.default, null);

package/package.json

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

package/public/locales/cs/seafile-editor.json

@@ -221,5 +221,6 @@
   "Select_field": "Vyberte pole",
   "Font_style": "Styl písma",
   "Open_link": "Open link",
-  "Image_is_uploading": "Image is uploading"
+  "Image_is_uploading": "Image is uploading",
+  "Image_loading_failed": "Image loading failed"
 }

package/public/locales/de/seafile-editor.json

@@ -221,5 +221,6 @@
   "Select_field": "Feld auswählen",
   "Font_style": "Schriftschnitt",
   "Open_link": "Open link",
-  "Image_is_uploading": "Image is uploading"
+  "Image_is_uploading": "Image is uploading",
+  "Image_loading_failed": "Image loading failed"
 }

package/public/locales/en/seafile-editor.json

@@ -221,5 +221,6 @@
   "Select_field": "Select field",
   "Font_style": "Font style",
   "Open_link": "Open link",
-  "Image_is_uploading": "Image is uploading"
+  "Image_is_uploading": "Image is uploading",
+  "Image_loading_failed": "Image loading failed"
 }

package/public/locales/es/seafile-editor.json

@@ -221,5 +221,6 @@
   "Select_field": "Select field",
   "Font_style": "Font style",
   "Open_link": "Open link",
-  "Image_is_uploading": "Image is uploading"
+  "Image_is_uploading": "Image is uploading",
+  "Image_loading_failed": "Image loading failed"
 }

package/public/locales/fr/seafile-editor.json

@@ -221,5 +221,6 @@
   "Select_field": "Select field",
   "Font_style": "Font style",
   "Open_link": "Ouvrir le lien",
-  "Image_is_uploading": "Image is uploading"
+  "Image_is_uploading": "Image is uploading",
+  "Image_loading_failed": "Image loading failed"
 }

package/public/locales/it/seafile-editor.json

@@ -221,5 +221,6 @@
   "Select_field": "Select field",
   "Font_style": "Font style",
   "Open_link": "Open link",
-  "Image_is_uploading": "Image is uploading"
+  "Image_is_uploading": "Image is uploading",
+  "Image_loading_failed": "Image loading failed"
 }

package/public/locales/ru/seafile-editor.json

@@ -221,5 +221,6 @@
   "Select_field": "Выбрать поле",
   "Font_style": "Стиль шрифта",
   "Open_link": "Открыть ссылку",
-  "Image_is_uploading": "Изображение загружается"
+  "Image_is_uploading": "Изображение загружается",
+  "Image_loading_failed": "Image loading failed"
 }

package/public/locales/zh_CN/seafile-editor.json

@@ -221,5 +221,6 @@
   "Select_field": "选中字段",
   "Font_style": "字体样式",
   "Open_link": "打开链接",
-  "Image_is_uploading": "图片正在上传"
+  "Image_is_uploading": "图片正在上传",
+  "Image_loading_failed": "图片加载失败"
 }

package/public/media/seafile-editor-font/iconfont.svg

@@ -14,6 +14,8 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="more" unicode="&#58918;" d="M835.2 387.2c0-54.4 41.6-96 96-96s96 41.6 96 96-41.6 96-96 96c-51.2 0-96-41.6-96-96z m-416 0c0-54.4 41.6-96 96-96s96 41.6 96 96-41.6 96-96 96c-51.2 0-96-41.6-96-96z m-416 0c0-54.4 41.6-96 96-96s96 41.6 96 96-41.6 96-96 96c-51.2 0-96-41.6-96-96z"  horiz-adv-x="1027" />
+      
       <glyph glyph-name="drop-down" unicode="&#59013;" d="M550.4 169.6l265.6 336c32 38.4 6.4 102.4-38.4 102.4H246.4c-44.8 0-70.4-60.8-38.4-102.4l265.6-336c19.2-25.6 57.6-25.6 76.8 0z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="caret-up" unicode="&#59014;" d="M550.4 588.8l265.6-336c32-38.4 6.4-102.4-38.4-102.4H246.4c-44.8 0-70.4 60.8-38.4 102.4l265.6 336c19.2 25.6 57.6 25.6 76.8 0z"  horiz-adv-x="1024" />

package/public/media/seafile-editor-font.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4375832 */
-  src: url('./seafile-editor-font/iconfont.eot?t=1709878601328'); /* IE9 */
-  src: url('./seafile-editor-font/iconfont.eot?t=1709878601328#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('./seafile-editor-font/iconfont.woff2?t=1709878601328') format('woff2'),
-       url('./seafile-editor-font/iconfont.woff?t=1709878601328') format('woff'),
-       url('./seafile-editor-font/iconfont.ttf?t=1709878601328') format('truetype'),
-       url('./seafile-editor-font/iconfont.svg?t=1709878601328#iconfont') format('svg');
+  src: url('./seafile-editor-font/iconfont.eot?t=1714979485064'); /* IE9 */
+  src: url('./seafile-editor-font/iconfont.eot?t=1714979485064#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('./seafile-editor-font/iconfont.woff2?t=1714979485064') format('woff2'),
+       url('./seafile-editor-font/iconfont.woff?t=1714979485064') format('woff'),
+       url('./seafile-editor-font/iconfont.ttf?t=1714979485064') format('truetype'),
+       url('./seafile-editor-font/iconfont.svg?t=1714979485064#iconfont') format('svg');
 }
 
 .iconfont {
@@ -16,6 +16,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-more:before {
+  content: "\e626";
+}
+
 .icon-drop-down:before {
   content: "\e685";
 }

package/readme.md

@@ -2,25 +2,219 @@
 
 SeaMarkdown editor is a WYSIWYG Markdown editor based on slate.js. It is used in Seafile and SeaTable project.
 
-## Provide components
+## Markdown editor UI
+![markdown editor](./assets/imgs/demo-markdown-editor.png)
 
+## Integrated markdown editor UI
+> An integrated demo. You can customize it according to the style you design.
+
+![markdown editor](./assets/imgs/markdown-editor.png)
+
+## Installation
+To install via npm:
+
+```bash
+npm install @seafile/seafile-editor --save
+```
+
+Import the library into your project:
+```javascript
+import { MarkdownEditor } from '@seafile/seafile-editor';
+```
+
+## Provide components and functions
+
+### Components
+
+|Name|Explain|
+|-|-|
+|MarkdownEditor|Markdown rich text editor component|
+|MarkdownViewer|Markdown content preview component|
+
+### Functions
 |Name|Explain|
 |-|-|
-|MarkdownEditor|markdown Rich text editor component|
-|MarkdownViewer|markdown Content preview component|
+|mdStringToSlate|Convert markdown strings to the data format used by the editor|
+|slateToMdString|Convert the data format used by the editor to a markdown string|
+|processor|Convert markdown string to html format content|
+
+## MarkdownEditor usage
+
+### Define api
+
+```javascript
+import axios from 'axios';
+
+class API {
+
+  getFileContent() {
+    const fileUrl = '';
+    return axios.get(fileUrl);
+  }
+
+  saveFileContent(content) {
+    const updateLink = '';
+    const formData = new FormData();
+    const blob = new Blob([data], { type: 'text/plain' });
+    formData.append('file', blob);
+    axios.post(updateLink, formData);
+  }
+
+  uploadLocalImage(file) {
+    const uploadLink = '';
+    const formData = new FormData();
+    formData.append('file', file);
+    return axios.post(uploadLink, formData);
+  }
 
-## Instructions
+}
+
+const editorApi = new API();
+
+export default editorApi;
+```
 
-1. npm install @seafile/seafile-editor
-2. code demo
+### Integrate simple into your own page
 ```javascript
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Button } from 'reactstrap';
 import { MarkdownEditor } from '@seafile/seafile-editor';
+import editorApi from './api';
 
-export default Editor = (props) => {
+export default function SimpleMarkdownEditor() {
 
-  return <MarkdownEditor {...props} />;
-  
+  const editorRef = useRef(null);
+  const [fileContent, setFileContent] = useState('');
+  const [isFetching, setIsFetching] = useState(true);
+  const [contentVersion, setContentVersion] = useState(0);
+
+  const mathJaxSource = '';
+
+  useEffect(() => {
+    editorApi.getFileContent().then(res => {
+      setFileContent(res.data);
+      setIsFetching(false);
+    });
+  }, []);
+
+  const onSave = useCallback(() => {
+    const content = editorRef.current.getValue();
+     editorApi.saveFileContent(content).then(res => {
+      window.alert('Saved successfully')
+    });
+  }, []);
+
+  const onContentChanged = useCallback(() => {
+    setContentVersion(contentVersion + 1);
+  }, [contentVersion]);
+
+  return (
+    <div className='seafile-editor'>
+      <MarkdownEditor
+        ref={editorRef}
+        isFetching={isFetching}
+        value={fileContent}
+        initValue={''}
+        editorApi={editorApi}
+        onSave={onSave}
+        onContentChanged={onContentChanged}
+        mathJaxSource={mathJaxSource}
+      />
+    </div>
+  );
 }
+
+```
+
+### Props
+
+Common props you may want to specify include:
+
+* ref: A reference to the editor, used to obtain the current content in the editor
+  * ref.current.getValue: Get the current markdown string value in the editor
+  * ref.current.getSlateValue:  Get the value of the current slate data format in the editor
+* isFetching: Whether the value of the editor is being obtained, if the loading effect is displayed while obtaining, and if the acquisition is completed, the corresponding content obtained is displayed in the editor.
+* value: The text content obtained
+* initValue: If value does not exist, a default value can be provided via initValue
+* onSave: When the editor content changes, the onSave callback event is triggered externally. The user can save the document by implementing this callback function.
+* onContentChanged: When the editor content changes, a change event is triggered to facilitate the user to record whether the document
+* mathJaxSource: Supports inserting formulas. If you want to support inserting formulas, please provide a path that can load formula resources. If support is not required, you can ignore this parameter. [math-jax document](https://docs.mathjax.org/en/stable/start.html)
+
+## Functions
+
+### `mdStringToSlate(mdString)`
+Convert markdown string to data structure supported by editor (slate)
+
+**Params**
+
+* mdString: markdown string
+
+**Returns**
+
+&emsp; Slate nodes
+
+
+### `slateToMdString(slateNodes)`
+Convert editor (slate) supported data structures to markdown string
+
+**Params**
+
+* slateNodes: slate nodes
+
+**Returns**
+
+&emsp; Markdown string
+
+### `processor` processor.process(mdString)
+Convert markdown string to html
+
+**Params**
+
+* mdString: markdown string
+
+**Returns**
+
+&emsp;Promise
+
+Demo
+```javascript
+const string = '# Hello, I am first level title'
+processor.process(string).then(result => {
+  const html = String(result);
+  ...
+})
+
 ```
 
 
+## 🖥 Environment Support
+
+* Modern browsers
+* Software built-in browser
+
+### Modern browsers
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
+| --- | --- | --- | --- |
+| Edge | false | last 2 versions | false |
+
+
+### Software built-in browser
+
+**Mac OS**
+
+| software | browser | version | internal | isSupport |
+|-|-|-|-|-|
+|<img src="./assets/imgs/wechat.png" width='16'> WeChat| Chrome |107.0.0.0| AppleWebKit/537.36  |false|
+|<img src="./assets/imgs/wecom.png" width='16'> WeCom|Safari||AppleWebKit/605.1.15 |false|
+
+**Windows OS**
+> windows 11
+
+| software | browser | version | internal | isSupport |
+|-|-|-|-|-|
+|<img src="./assets/imgs/wechat.png" width='16'> WeChat| Chrome |106.0.0.0| AppleWebKit/537.36  |false|
+|<img src="./assets/imgs/wecom.png" width='16'> WeCom|Chrome|108.0.5993.119|AppleWebKit/537.36  |false|
+
+
+