@seafile/seafile-editor 1.0.84 → 1.0.85-beta

package/dist/editors/{simple-slate-editor /index.js → 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,24 +17,29 @@ 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, {
+  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]);
+  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);
@@ -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,28 @@
+"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");
+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/menu/menu.css

@@ -115,4 +115,8 @@
 
 .sf-dropdown-list .sf-dropdown-list-item:hover {
   background-color: #F2F2F2;
-}
+}
+
+.sf-icon-btn-hover:hover {
+  cursor: pointer;
+}

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

@@ -0,0 +1,28 @@
+.sf-editor-menu-popover {
+  padding: 8px 0;
+  min-width: 12rem;
+}
+
+.sf-editor-menu-popover .popover-inner .sf-slate-help-info-control {
+  height: 24px;
+  width: 24px;
+  margin: 4px 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sf-editor-menu-popover .popover-inner .sf-slate-help-info-control:hover {
+  background-color: #f2f2f2;
+  border-radius: 2px;
+  cursor: pointer;
+}
+
+.sf-editor-menu-popover .popover-inner .sf-slate-help-info-control .icon-use-help {
+  font-size: 13px;
+  color: #555;
+}
+
+.sf-editor-menu-popover .bs-popover-auto[x-placement^=bottom] {
+  margin-top: 2px;
+}

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 sf-editor--more-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/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

@@ -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 () {
@@ -34,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/plugins/link/render-elem/index.js

@@ -28,6 +28,9 @@ 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);
@@ -77,7 +80,7 @@ const renderLink = (_ref, editor) => {
   }, attributes), /*#__PURE__*/_react.default.createElement("a", {
     href: element.url,
     onClick: onHrefClick
-  }, children)), isShowPopover && /*#__PURE__*/_react.default.createElement(_linkPopover.default, {
+  }, children)), isLinkActive && 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,7 +14,6 @@ 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/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,85 @@
+"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.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
+  }));
+};
+InlineToolbar.defaultProps = {
+  readonly: false
+};
+var _default = exports.default = InlineToolbar;

package/dist/index.js

@@ -28,6 +28,12 @@ Object.defineProperty(exports, "LongTextEditorDialog", {
     return _longtextEditorDialog.default;
   }
 });
+Object.defineProperty(exports, "LongTextInlineEditor", {
+  enumerable: true,
+  get: function () {
+    return _longtextInlineEditor.default;
+  }
+});
 Object.defineProperty(exports, "MarkdownEditor", {
   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 _longtextInlineEditor = _interopRequireDefault(require("./pages/longtext-inline-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/longtext-inline-editor/index.css

@@ -0,0 +1,71 @@
+.sf-long-text-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-long-text-inline-editor-container .sf-simple-slate-editor-container {
+  width: 100%;
+  height: 100%;
+}
+
+.sf-long-text-inline-editor-container .sf-simple-slate-editor-container .sf-slate-editor-toolbar {
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+	height: 33px;
+  box-shadow: none;
+  padding-right: 0;
+}
+
+.sf-long-text-inline-editor-container .sf-slate-editor-content {
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+	overflow: hidden;
+}
+
+.sf-long-text-inline-editor-container .sf-simple-slate-editor-container .sf-slate-editor-toolbar .sf-menu-group:last-child {
+  border-right: none;
+}
+
+.sf-long-text-inline-editor-container .sf-simple-slate-editor-container .sf-slate-editor-content {
+  flex: 1 !important;
+}
+
+.sf-long-text-inline-editor-container .sf-simple-slate-editor-container .sf-slate-editor-content .article {
+  padding: 16px !important;
+}
+
+/* preview */
+.sf-long-text-inline-editor-container .longtext-preview-container {
+  padding: 10px;
+  background-color: #fff;
+}
+
+.sf-long-text-inline-editor-container .sf-slate-editor-content .article > div[role="textbox"] > :first-child {
+  margin-top: 0 !important;
+}
+
+.sf-long-text-inline-editor-container .sf-slate-editor-toolbar .sf-menu-group,
+.sf-editor-menu-popover .popover-inner .sf-menu-group  {
+	padding: 4px 0 4px 8px !important;
+}
+
+.sf-long-text-inline-editor-container .sf-slate-editor-toolbar .sf-menu-group:first-child {
+  padding-left: 0px !important;
+  flex: 1 !important;
+}
+
+.sf-long-text-inline-editor-container .sf-slate-editor-toolbar .sf-header-menu {
+  padding: 4px 6px 4px 0 !important;
+  width: 100% !important;
+}
+
+.sf-long-text-inline-editor-container .sf-slate-editor-toolbar .sf-header-toggle {
+  padding: 0 3px 0 6px !important;
+}
+
+.sf-editor-menu-popover .popover-inner {
+  display: flex;
+}

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

@@ -0,0 +1,138 @@
+"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 _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 => {
+  let {
+    lang,
+    headerName,
+    value: propsValue,
+    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 {
+    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);
+    }
+    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,
+    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 = LongTextInlineEditor;

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

@@ -26,7 +26,8 @@ class MarkdownPreview extends _react.default.PureComponent {
       });
     });
     this.state = {
-      innerHtml: null
+      innerHtml: null,
+      richValue: null
     };
   }
   componentDidMount() {
@@ -36,20 +37,27 @@ 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
+      innerHtml,
+      richValue
     } = 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", {
@@ -58,7 +66,7 @@ class MarkdownPreview extends _react.default.PureComponent {
         __html: this.state.innerHtml
       }
     }), !isWindowsWechat && /*#__PURE__*/_react.default.createElement(_slateViewer.default, {
-      value: (0, _slateConvert.mdStringToSlate)(value),
+      value: richValue,
       isShowOutline: isShowOutline
     }));
   }

package/dist/pages/seatable-editor.js

@@ -10,7 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _loading = _interopRequireDefault(require("../containers/loading"));
 var _slateConvert = require("../slate-convert");
 var _useMathjax = _interopRequireDefault(require("../hooks/use-mathjax"));
-var _simpleSlateEditor = _interopRequireDefault(require("../editors/simple-slate-editor "));
+var _simpleSlateEditor = _interopRequireDefault(require("../editors/simple-slate-editor"));
 const SeaTableEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     isFetching,

package/dist/pages/simple-editor.js

@@ -10,15 +10,17 @@ var _react = _interopRequireWildcard(require("react"));
 var _loading = _interopRequireDefault(require("../containers/loading"));
 var _slateConvert = require("../slate-convert");
 var _useMathjax = _interopRequireDefault(require("../hooks/use-mathjax"));
-var _simpleSlateEditor = _interopRequireDefault(require("../editors/simple-slate-editor "));
+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.84",
+  "version": "1.0.85beta",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

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

@@ -222,5 +222,6 @@
   "Font_style": "Styl písma",
   "Open_link": "Open link",
   "Image_is_uploading": "Image is uploading",
-  "Image_loading_failed": "Image loading failed"
+  "Image_loading_failed": "Image loading failed",
+  "Expand_editor": "Expand editor"
 }

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

@@ -222,5 +222,6 @@
   "Font_style": "Schriftschnitt",
   "Open_link": "Open link",
   "Image_is_uploading": "Image is uploading",
-  "Image_loading_failed": "Image loading failed"
+  "Image_loading_failed": "Image loading failed",
+  "Expand_editor": "Expand editor"
 }

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

@@ -222,5 +222,10 @@
   "Font_style": "Font style",
   "Open_link": "Open link",
   "Image_is_uploading": "Image is uploading",
-  "Image_loading_failed": "Image loading failed"
+  "Image_loading_failed": "Image loading failed",
+  "Expand_editor": "Expand editor",
+  "Insert_below": "Insert below",
+  "Insert_above": "Insert above",
+  "Insert_on_the_right": "Insert on the right",
+  "Insert_on_the_left": "Insert on the left"
 }

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

@@ -222,5 +222,6 @@
   "Font_style": "Font style",
   "Open_link": "Open link",
   "Image_is_uploading": "Image is uploading",
-  "Image_loading_failed": "Image loading failed"
+  "Image_loading_failed": "Image loading failed",
+  "Expand_editor": "Expand editor"
 }

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

@@ -222,5 +222,6 @@
   "Font_style": "Font style",
   "Open_link": "Ouvrir le lien",
   "Image_is_uploading": "Image is uploading",
-  "Image_loading_failed": "Image loading failed"
+  "Image_loading_failed": "Image loading failed",
+  "Expand_editor": "Expand editor"
 }

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

@@ -222,5 +222,6 @@
   "Font_style": "Font style",
   "Open_link": "Open link",
   "Image_is_uploading": "Image is uploading",
-  "Image_loading_failed": "Image loading failed"
+  "Image_loading_failed": "Image loading failed",
+  "Expand_editor": "Expand editor"
 }

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

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

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

@@ -222,5 +222,6 @@
   "Font_style": "字体样式",
   "Open_link": "打开链接",
   "Image_is_uploading": "图片正在上传",
-  "Image_loading_failed": "图片加载失败"
+  "Image_loading_failed": "图片加载失败",
+  "Expand_editor": "展开编辑器"
 }

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

@@ -8,7 +8,16 @@ SeaMarkdown editor is a WYSIWYG Markdown editor based on slate.js. It is used in
 ## Integrated markdown editor UI
 > An integrated demo. You can customize it according to the style you design.
 
-![markdown editor](./assets/imgs/markdown-editor.png)
+![markdown editor](./assets/imgs/demo-markdown-editor.png)
+
+## Simple editor UI
+![simple editor](./assets/imgs/simple-editor.png)
+
+## Integrated simple editor UI
+> An integrated demo. You can customize it according to the style you design.
+
+![simple editor](./assets/imgs/demo-simple-editor.png)
+
 
 ## Installation
 To install via npm:
@@ -29,6 +38,7 @@ import { MarkdownEditor } from '@seafile/seafile-editor';
 |Name|Explain|
 |-|-|
 |MarkdownEditor|Markdown rich text editor component|
+|SimpleEditor|Simple markdown editor component|
 |MarkdownViewer|Markdown content preview component|
 
 ### Functions
@@ -81,7 +91,7 @@ import { Button } from 'reactstrap';
 import { MarkdownEditor } from '@seafile/seafile-editor';
 import editorApi from './api';
 
-export default function SimpleMarkdownEditor() {
+export default function MarkdownEditorDemo() {
 
   const editorRef = useRef(null);
   const [fileContent, setFileContent] = useState('');
@@ -140,6 +150,109 @@ Common props you may want to specify include:
 * 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)
 
+## SimpleEditor 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);
+  }
+
+}
+
+const editorApi = new API();
+
+export default editorApi;
+```
+
+### Integrate simple into your own page
+
+```javascript
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Button } from 'reactstrap';
+import { SimpleEditor } from '@seafile/seafile-editor';
+import editorApi from './api';
+
+export default function SimpleEditorDemo() {
+
+  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'>
+      <SimpleEditor
+        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
+* 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)`
@@ -190,31 +303,9 @@ processor.process(string).then(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|
-
-
-