@seafile/sdoc-editor 3.0.114 → 3.0.115

package/dist/extension/plugins/toggle-header/render-elem.js

@@ -0,0 +1,130 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderToggleHeaderTitle = exports.renderToggleHeaderContent = exports.renderToggleHeader = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireDefault(require("react"));
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _constants = require("../../constants");
+var _core = require("../../core");
+var _helper = require("../paragraph/helper");
+var _helper2 = require("./helper");
+var _placeholder = _interopRequireDefault(require("./placeholder"));
+require("./render-elem.css");
+var renderToggleHeader = exports.renderToggleHeader = function renderToggleHeader(props, editor) {
+  var attributes = props.attributes,
+    children = props.children,
+    element = props.element;
+  var collapsed = !!element.collapsed;
+  var childNodes = _react["default"].Children.toArray(children);
+  var titleNode = childNodes[0] || null;
+  var contentNode = childNodes[1] || null;
+  var onToggleCollapsed = function onToggleCollapsed(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    var path = _slateReact.ReactEditor.findPath(editor, element);
+    _slate.Editor.withoutNormalizing(editor, function () {
+      var _toggleNode$children;
+      var _Editor$node = _slate.Editor.node(editor, path),
+        _Editor$node2 = (0, _slicedToArray2["default"])(_Editor$node, 1),
+        toggleNode = _Editor$node2[0];
+      var contentNode = toggleNode === null || toggleNode === void 0 ? void 0 : (_toggleNode$children = toggleNode.children) === null || _toggleNode$children === void 0 ? void 0 : _toggleNode$children[1];
+
+      // Click toggle-header to expand
+      if (collapsed) {
+        if (!contentNode || contentNode.type !== _constants.TOGGLE_CONTENT) {
+          var content = (0, _core.generateEmptyElement)(_constants.TOGGLE_CONTENT);
+          content.children = Array.isArray(toggleNode.collapsed_body) && toggleNode.collapsed_body.length > 0 ? toggleNode.collapsed_body : [(0, _core.generateEmptyElement)(_constants.PARAGRAPH)];
+          _slate.Transforms.insertNodes(editor, content, {
+            at: [].concat((0, _toConsumableArray2["default"])(path), [1])
+          });
+        }
+        _slate.Transforms.setNodes(editor, {
+          collapsed: false,
+          collapsed_body: null
+        }, {
+          at: path
+        });
+        return;
+      }
+
+      // Click toggle-header to collapse
+      var collapsedBody = (contentNode === null || contentNode === void 0 ? void 0 : contentNode.type) === _constants.TOGGLE_CONTENT ? contentNode.children || [] : [];
+      if ((contentNode === null || contentNode === void 0 ? void 0 : contentNode.type) === _constants.TOGGLE_CONTENT) {
+        _slate.Transforms.removeNodes(editor, {
+          at: [].concat((0, _toConsumableArray2["default"])(path), [1])
+        });
+      }
+      _slate.Transforms.setNodes(editor, {
+        collapsed: true,
+        collapsed_body: collapsedBody
+      }, {
+        at: path
+      });
+    });
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", Object.assign({
+    "data-id": element.id,
+    id: element.id
+  }, attributes, {
+    className: (0, _classnames["default"])('sdoc-toggle-header-container', {
+      'sdoc-toggle-header-collapsed': collapsed
+    })
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-toggle-header-row"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "sdoc-toggle-header-prefix",
+    contentEditable: false,
+    onMouseDown: onToggleCollapsed
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: (0, _classnames["default"])('sdocfont', collapsed ? 'sdoc-big-caret-up' : 'sdoc-big-drop-down')
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-toggle-header-title-wrap"
+  }, titleNode)), !collapsed && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-toggle-header-content-wrap"
+  }, contentNode));
+};
+var renderToggleHeaderTitle = exports.renderToggleHeaderTitle = function renderToggleHeaderTitle(props) {
+  var attributes = props.attributes,
+    children = props.children,
+    element = props.element,
+    isComposing = props.isComposing;
+  var level = (0, _helper2.getLevel)(element);
+  var style = {
+    textAlign: element.align,
+    fontSize: "".concat(_constants.SDOC_FONT_SIZE["header".concat(level)], "pt")
+  };
+  var isShowPlaceHolder = false;
+  if ((0, _helper.isEmptyNode)(element) && _slate.Node.string(element) === '' && !isComposing) {
+    isShowPlaceHolder = true;
+  }
+  return /*#__PURE__*/_react["default"].createElement("div", Object.assign({
+    "data-id": element.id
+  }, attributes, {
+    className: (0, _classnames["default"])('sdoc-toggle-header-title', "sdoc-header-".concat(level)),
+    style: (0, _objectSpread2["default"])({
+      position: isShowPlaceHolder ? 'relative' : ''
+    }, style)
+  }), isShowPlaceHolder && /*#__PURE__*/_react["default"].createElement(_placeholder["default"], {
+    title: 'Header',
+    top: 0,
+    left: 0
+  }), children);
+};
+var renderToggleHeaderContent = exports.renderToggleHeaderContent = function renderToggleHeaderContent(props) {
+  var attributes = props.attributes,
+    children = props.children,
+    element = props.element;
+  return /*#__PURE__*/_react["default"].createElement("div", Object.assign({
+    "data-id": element.id
+  }, attributes, {
+    className: "sdoc-toggle-header-content"
+  }), children);
+};

package/dist/extension/plugins/video/helpers.js

@@ -27,6 +27,7 @@ var isInsertVideoMenuDisabled = exports.isInsertVideoMenuDisabled = function isI
           var parentNode = (0, _core.getParentNode)(editor.children, n.id);
           type = (0, _core.getNodeType)(parentNode);
         }
+        if (_constants.TOGGLE_TITLE_TYPES.includes(type)) return true;
         if (type === _constants.CODE_BLOCK) return true;
         if (type.startsWith('header')) return true;
         if (type === _constants.TITLE) return true;

package/dist/extension/plugins/whiteboard/helper.js

@@ -10,6 +10,7 @@ var _regenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/r
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
 var _slugid = _interopRequireDefault(require("slugid"));
 var _constants = require("../../../constants");
 var _context2 = _interopRequireDefault(require("../../../context"));
@@ -28,6 +29,7 @@ var isInsertWhiteboardMenuDisabled = exports.isInsertWhiteboardMenuDisabled = fu
           var parentNode = (0, _core.getParentNode)(editor.children, n.id);
           type = (0, _core.getNodeType)(parentNode);
         }
+        if (_constants2.TOGGLE_TITLE_TYPES.includes(type)) return true;
         if (type === _constants2.CODE_BLOCK) return true;
         if (type.startsWith('header')) return true;
         if (type === _constants2.TITLE) return true;
@@ -68,7 +70,7 @@ var generateWhiteboardNode = exports.generateWhiteboardNode = function generateW
 var insertWhiteboard = exports.insertWhiteboard = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/(0, _regenerator2["default"])().m(function _callee(editor, filename, filePath, repoId) {
     var _editor$selection;
-    var repoID, eventBus, exdrawReadOnlyLink, whiteboardNode, path, position, nextPath, endOfFirstNode, range;
+    var repoID, eventBus, exdrawReadOnlyLink, whiteboardNode, path, currentToggleContentEntry, position, nextPath, endOfFirstNode, range;
     return (0, _regenerator2["default"])().w(function (_context) {
       while (1) switch (_context.n) {
         case 0:
@@ -102,10 +104,22 @@ var insertWhiteboard = exports.insertWhiteboard = /*#__PURE__*/function () {
         case 3:
           exdrawReadOnlyLink = _context.v;
           whiteboardNode = generateWhiteboardNode(repoID, filename, filePath, exdrawReadOnlyLink);
-          path = (_editor$selection = editor.selection) === null || _editor$selection === void 0 ? void 0 : _editor$selection.anchor.path;
+          path = (_editor$selection = editor.selection) === null || _editor$selection === void 0 ? void 0 : _editor$selection.anchor.path; // When inserting whiteboard in the toggle content, insert current
+          currentToggleContentEntry = (0, _core.getSelectedNodeEntryByType)(editor, _constants2.TOGGLE_CONTENT);
+          if (!currentToggleContentEntry) {
+            _context.n = 4;
+            break;
+          }
+          _slate.Transforms.insertNodes(editor, whiteboardNode, {
+            at: path.slice(0, -1)
+          });
+          _slate.Transforms.select(editor, _slate.Editor.start(editor, path));
+          _slateReact.ReactEditor.focus(editor);
+          return _context.a(2);
+        case 4:
           position = 'after';
           if (!(position === _constants2.INSERT_POSITION.AFTER)) {
-            _context.n = 4;
+            _context.n = 5;
             break;
           }
           _slate.Transforms.insertNodes(editor, whiteboardNode, {
@@ -124,7 +138,7 @@ var insertWhiteboard = exports.insertWhiteboard = /*#__PURE__*/function () {
           };
           (0, _core.focusEditor)(editor, range);
           return _context.a(2);
-        case 4:
+        case 5:
           return _context.a(2);
       }
     }, _callee);

package/dist/extension/render/custom-element.js

@@ -72,6 +72,26 @@ var CustomRenderElement = function CustomRenderElement(props) {
           renderHeader = _HeaderPlugin$renderE3[2];
         return renderHeader(props, editor);
       }
+    case _elementType.TOGGLE_HEADER:
+      {
+        var _ToggleHeaderPlugin$r = (0, _slicedToArray2["default"])(_plugins.ToggleHeaderPlugin.renderElements, 1),
+          renderToggleHeader = _ToggleHeaderPlugin$r[0];
+        return renderToggleHeader(props, editor);
+      }
+    case _elementType.TOGGLE_HEADER1:
+    case _elementType.TOGGLE_HEADER2:
+    case _elementType.TOGGLE_HEADER3:
+      {
+        var _ToggleHeaderPlugin$r2 = (0, _slicedToArray2["default"])(_plugins.ToggleHeaderPlugin.renderElements, 2),
+          renderToggleHeaderTitle = _ToggleHeaderPlugin$r2[1];
+        return renderToggleHeaderTitle(props, editor);
+      }
+    case _elementType.TOGGLE_CONTENT:
+      {
+        var _ToggleHeaderPlugin$r3 = (0, _slicedToArray2["default"])(_plugins.ToggleHeaderPlugin.renderElements, 3),
+          renderToggleHeaderContent = _ToggleHeaderPlugin$r3[2];
+        return renderToggleHeaderContent(props, editor);
+      }
     case _constants2.LINK:
       {
         var _LinkPlugin$renderEle = (0, _slicedToArray2["default"])(_plugins.LinkPlugin.renderElements, 1),

package/dist/extension/toolbar/insert-element-toolbar/index.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 var _objectSpread6 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactI18next = require("react-i18next");
@@ -30,6 +31,7 @@ var _transforms = require("../../plugins/list/transforms");
 var _helper2 = require("../../plugins/multi-column/helper");
 var _helpers4 = require("../../plugins/table/helpers");
 var _tableSizePopover = _interopRequireDefault(require("../../plugins/table/popover/table-size-popover"));
+var _helper3 = require("../../plugins/toggle-header/helper");
 var _helpers5 = require("../../plugins/video/helpers");
 var _utils = require("../../utils");
 var _linkedRepoPopover = _interopRequireDefault(require("../linked-repo-popover"));
@@ -161,6 +163,11 @@ var QuickInsertBlockMenu = function QuickInsertBlockMenu(_ref) {
     (0, _helpers6.insertElement)(editor, type, insertPosition);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, insertPosition, slateNode]);
+  var onInsertToggleHeader = (0, _react.useCallback)(function (type) {
+    callback && callback();
+    (0, _helper3.insertToggleHeader)(editor, type, insertPosition);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, insertPosition, slateNode]);
   var onInsertCallout = (0, _react.useCallback)(function (type) {
     callback && callback();
     if (insertPosition === _constants2.INSERT_POSITION.CURRENT) {
@@ -178,7 +185,7 @@ var QuickInsertBlockMenu = function QuickInsertBlockMenu(_ref) {
   var isDisableCallout = (0, _react.useMemo)(function () {
     var callout = (0, _core.getAboveBlockNode)(editor, {
       match: function match(n) {
-        return n.type === _constants2.ELEMENT_TYPE.CALL_OUT;
+        return [].concat((0, _toConsumableArray2["default"])(_constants2.TOGGLE_TITLE_TYPES), [_constants2.ELEMENT_TYPE.CALL_OUT]).includes(n.type);
       }
     });
     return !!callout;
@@ -188,7 +195,7 @@ var QuickInsertBlockMenu = function QuickInsertBlockMenu(_ref) {
   var isDisableFormula = (0, _react.useMemo)(function () {
     var callout = (0, _core.getAboveBlockNode)(editor, {
       match: function match(n) {
-        return [_constants2.ELEMENT_TYPE.ORDERED_LIST, _constants2.ELEMENT_TYPE.UNORDERED_LIST, _constants2.ELEMENT_TYPE.CHECK_LIST_ITEM, _constants2.ELEMENT_TYPE.BLOCKQUOTE, _constants2.ELEMENT_TYPE.CALL_OUT].includes(n.type);
+        return [_constants2.ELEMENT_TYPE.ORDERED_LIST, _constants2.ELEMENT_TYPE.UNORDERED_LIST, _constants2.ELEMENT_TYPE.CHECK_LIST_ITEM, _constants2.ELEMENT_TYPE.BLOCKQUOTE, _constants2.ELEMENT_TYPE.CALL_OUT].concat((0, _toConsumableArray2["default"])(_constants2.TOGGLE_TITLE_TYPES)).includes(n.type);
       }
     });
     return !!callout;
@@ -198,7 +205,7 @@ var QuickInsertBlockMenu = function QuickInsertBlockMenu(_ref) {
   var isDisableImage = (0, _react.useMemo)(function () {
     var callout = (0, _core.getAboveBlockNode)(editor, {
       match: function match(n) {
-        return [_constants2.ELEMENT_TYPE.ORDERED_LIST, _constants2.ELEMENT_TYPE.UNORDERED_LIST, _constants2.ELEMENT_TYPE.CHECK_LIST_ITEM].includes(n.type);
+        return [_constants2.ELEMENT_TYPE.ORDERED_LIST, _constants2.ELEMENT_TYPE.UNORDERED_LIST, _constants2.ELEMENT_TYPE.CHECK_LIST_ITEM].concat((0, _toConsumableArray2["default"])(_constants2.TOGGLE_TITLE_TYPES)).includes(n.type);
       }
     });
     return !!callout;
@@ -206,7 +213,7 @@ var QuickInsertBlockMenu = function QuickInsertBlockMenu(_ref) {
   var isDisableVideo = (0, _react.useMemo)(function () {
     var callout = (0, _core.getAboveBlockNode)(editor, {
       match: function match(n) {
-        return [_constants2.ELEMENT_TYPE.ORDERED_LIST, _constants2.ELEMENT_TYPE.UNORDERED_LIST, _constants2.ELEMENT_TYPE.CHECK_LIST_ITEM, _constants2.ELEMENT_TYPE.MULTI_COLUMN].includes(n.type);
+        return [_constants2.ELEMENT_TYPE.ORDERED_LIST, _constants2.ELEMENT_TYPE.UNORDERED_LIST, _constants2.ELEMENT_TYPE.CHECK_LIST_ITEM, _constants2.ELEMENT_TYPE.MULTI_COLUMN].concat((0, _toConsumableArray2["default"])(_constants2.TOGGLE_TITLE_TYPES)).includes(n.type);
       }
     });
     return !!callout;
@@ -214,7 +221,7 @@ var QuickInsertBlockMenu = function QuickInsertBlockMenu(_ref) {
   var isDisableTable = (0, _react.useMemo)(function () {
     var callout = (0, _core.getAboveBlockNode)(editor, {
       match: function match(n) {
-        return [_constants2.ELEMENT_TYPE.ORDERED_LIST, _constants2.ELEMENT_TYPE.UNORDERED_LIST, _constants2.ELEMENT_TYPE.CHECK_LIST_ITEM, _constants2.ELEMENT_TYPE.MULTI_COLUMN, _constants2.ELEMENT_TYPE.BLOCKQUOTE, _constants2.ELEMENT_TYPE.CALL_OUT].includes(n.type);
+        return [_constants2.ELEMENT_TYPE.ORDERED_LIST, _constants2.ELEMENT_TYPE.UNORDERED_LIST, _constants2.ELEMENT_TYPE.CHECK_LIST_ITEM, _constants2.ELEMENT_TYPE.MULTI_COLUMN, _constants2.ELEMENT_TYPE.BLOCKQUOTE, _constants2.ELEMENT_TYPE.CALL_OUT].concat((0, _toConsumableArray2["default"])(_constants2.TOGGLE_TITLE_TYPES)).includes(n.type);
       }
     });
     return !!callout;
@@ -222,7 +229,7 @@ var QuickInsertBlockMenu = function QuickInsertBlockMenu(_ref) {
   var isDisableMultiColumn = (0, _react.useMemo)(function () {
     var callout = (0, _core.getAboveBlockNode)(editor, {
       match: function match(n) {
-        return [_constants2.ELEMENT_TYPE.ORDERED_LIST, _constants2.ELEMENT_TYPE.UNORDERED_LIST, _constants2.ELEMENT_TYPE.CHECK_LIST_ITEM, _constants2.ELEMENT_TYPE.MULTI_COLUMN, _constants2.ELEMENT_TYPE.BLOCKQUOTE, _constants2.ELEMENT_TYPE.CALL_OUT].includes(n.type);
+        return [_constants2.ELEMENT_TYPE.ORDERED_LIST, _constants2.ELEMENT_TYPE.UNORDERED_LIST, _constants2.ELEMENT_TYPE.CHECK_LIST_ITEM, _constants2.ELEMENT_TYPE.MULTI_COLUMN, _constants2.ELEMENT_TYPE.BLOCKQUOTE, _constants2.ELEMENT_TYPE.CALL_OUT].concat((0, _toConsumableArray2["default"])(_constants2.TOGGLE_TITLE_TYPES)).includes(n.type);
       }
     });
     return !!callout;
@@ -230,7 +237,23 @@ var QuickInsertBlockMenu = function QuickInsertBlockMenu(_ref) {
   var isDisableCodeBlock = (0, _react.useMemo)(function () {
     var callout = (0, _core.getAboveBlockNode)(editor, {
       match: function match(n) {
-        return [_constants2.ELEMENT_TYPE.MULTI_COLUMN].includes(n.type);
+        return [].concat((0, _toConsumableArray2["default"])(_constants2.TOGGLE_TITLE_TYPES), [_constants2.ELEMENT_TYPE.MULTI_COLUMN]).includes(n.type);
+      }
+    });
+    return !!callout;
+  }, [editor]);
+  var isDisableHeader = (0, _react.useMemo)(function () {
+    var callout = (0, _core.getAboveBlockNode)(editor, {
+      match: function match(n) {
+        return _constants2.TOGGLE_TITLE_TYPES.includes(n.type);
+      }
+    });
+    return !!callout;
+  }, [editor]);
+  var isDisableToggleHeader = (0, _react.useMemo)(function () {
+    var callout = (0, _core.getAboveBlockNode)(editor, {
+      match: function match(n) {
+        return [].concat((0, _toConsumableArray2["default"])(_constants2.TOGGLE_TITLE_TYPES), [_constants2.ELEMENT_TYPE.MULTI_COLUMN]).includes(n.type);
       }
     });
     return !!callout;
@@ -262,7 +285,7 @@ var QuickInsertBlockMenu = function QuickInsertBlockMenu(_ref) {
     });
   }, [callback, editor, insertPosition, slateNode]);
   var dropDownItems = (0, _react.useMemo)(function () {
-    var items = (0, _objectSpread6["default"])((0, _objectSpread6["default"])((0, _objectSpread6["default"])((0, _objectSpread6["default"])((0, _defineProperty2["default"])({}, _constants2.PARAGRAPH, /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
+    var items = (0, _objectSpread6["default"])((0, _objectSpread6["default"])((0, _objectSpread6["default"])((0, _objectSpread6["default"])((0, _objectSpread6["default"])((0, _defineProperty2["default"])({}, _constants2.PARAGRAPH, /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
       isHidden: !quickInsertMenuSearchMap[_constants2.PARAGRAPH],
       disabled: isEmptyNode,
       key: "sdoc-insert-menu-paragraph",
@@ -275,11 +298,23 @@ var QuickInsertBlockMenu = function QuickInsertBlockMenu(_ref) {
         isHidden: !quickInsertMenuSearchMap[item.type],
         key: item.id,
         menuConfig: item,
+        disabled: isDisableHeader,
         onClick: function onClick() {
           return onInsert(item.type);
         }
       });
       return acc;
+    }, {})), _constants2.SIDE_INSERT_MENUS_CONFIG[_constants2.ELEMENT_TYPE.TOGGLE_HEADER].reduce(function (acc, item) {
+      acc[item.id] = /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
+        isHidden: !quickInsertMenuSearchMap[item.type],
+        key: item.id,
+        menuConfig: item,
+        disabled: isDisableToggleHeader,
+        onClick: function onClick() {
+          return onInsertToggleHeader(item.type);
+        }
+      });
+      return acc;
     }, {})), {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _constants2.UNORDERED_LIST, /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
       isHidden: !quickInsertMenuSearchMap[_constants2.UNORDERED_LIST],
       key: "sdoc-insert-menu-unorder-list",
@@ -437,7 +472,7 @@ var QuickInsertBlockMenu = function QuickInsertBlockMenu(_ref) {
     });
     return items;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [quickInsertMenuSearchMap, isDisableImage, onInsertImageToggle, isDisableVideo, isDisableMultiColumn, onInsertVideoToggle, isDisableTable, editor, createTable, callback, handleClosePopover, openLinkDialog, onInsertCodeBlock, isDisableCallout, onInsertCheckList, isEmptyNode, onInsertCallout, onInsertList, onInsert, createMultiColumn]);
+  }, [quickInsertMenuSearchMap, isDisableImage, onInsertImageToggle, isDisableVideo, isDisableMultiColumn, onInsertVideoToggle, isDisableTable, editor, createTable, callback, handleClosePopover, openLinkDialog, onInsertCodeBlock, isDisableCallout, isDisableToggleHeader, onInsertCheckList, isEmptyNode, onInsertCallout, onInsertList, onInsert, createMultiColumn, isDisableHeader]);
   var getSelectItemDom = function getSelectItemDom(selectIndex) {
     var dropDownItemWrapper = downDownWrapperRef.current;
     var searchedDropDownItemWrapper = [];

package/dist/extension/toolbar/side-toolbar/helpers.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.wrapIntoMultiColumn = exports.setSelection = exports.onWrapMultiListItemToNonListTypeTarget = exports.onWrapMultiListItem = exports.onWrapListItemFromMultiColumn = exports.onWrapListItem = exports.onSetNodeType = exports.onDeleteNode = exports.onCopyNode = exports.normalizeCopyData = exports.isNotSupportTransform = exports.isMultiColumn = exports.isListItem = exports.isList = exports.isInMultiColumnNode = exports.isBlockquote = exports.insertEmptyListNodeAtTarget = exports.insertElement = exports.getTransformMenusConfig = exports.getTopValue = exports.getSearchedOperations = exports.getNodeEntry = exports.getListNodeFromMultiColumn = exports.getListNode = exports.deleteNodesFromBack = exports.createDragPreviewContainer = exports.clearDragClass = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _slate = require("@seafile/slate");
@@ -25,6 +26,7 @@ var _model = require("../../plugins/list/model");
 var _transforms = require("../../plugins/list/transforms");
 var _helper2 = require("../../plugins/multi-column/helper");
 var _constants3 = require("../../plugins/table/constants");
+var _helper3 = require("../../plugins/toggle-header/helper");
 var onSetNodeType = exports.onSetNodeType = function onSetNodeType(editor, element, type) {
   var selection = editor.selection;
   if (!type) return;
@@ -56,6 +58,71 @@ var onSetNodeType = exports.onSetNodeType = function onSetNodeType(editor, eleme
     }
     return;
   }
+  if (_constants2.TOGGLE_TITLE_TYPES.includes(type)) {
+    var level = (0, _helper3.getLevelFromType)(type);
+    var currentToggleEntry = _slate.Editor.above(editor, {
+      at: selection,
+      match: function match(n) {
+        return _slate.Element.isElement(n) && n.type === _constants2.TOGGLE_HEADER;
+      },
+      mode: 'lowest'
+    });
+
+    // Convert existing toggle-header
+    if (currentToggleEntry) {
+      var _currentToggleEntry = (0, _slicedToArray2["default"])(currentToggleEntry, 2),
+        togglePath = _currentToggleEntry[1];
+      _slate.Editor.withoutNormalizing(editor, function () {
+        _slate.Transforms.setNodes(editor, {
+          level: level
+        }, {
+          at: togglePath
+        });
+        _slate.Transforms.setNodes(editor, {
+          type: type
+        }, {
+          at: [].concat((0, _toConsumableArray2["default"])(togglePath), [0])
+        });
+      });
+      (0, _core.focusEditor)(editor, _slate.Editor.start(editor, [].concat((0, _toConsumableArray2["default"])(togglePath), [0])));
+      return;
+    }
+
+    // Convert paragraph/header to toggle-header
+    var _path = (0, _core.findPath)(editor, element);
+    var _ref3 = _slate.Editor.node(editor, _path) || [],
+      _ref4 = (0, _slicedToArray2["default"])(_ref3, 1),
+      _targetNode = _ref4[0];
+    var titleChildren = _targetNode.children || [];
+    var titleNode = {
+      id: _slugid["default"].nice(),
+      type: type,
+      align: _targetNode.align,
+      children: titleChildren
+    };
+    var bodyNode = {
+      id: _slugid["default"].nice(),
+      type: _constants2.TOGGLE_CONTENT,
+      children: [(0, _core.generateEmptyElement)(_constants2.PARAGRAPH)]
+    };
+    var toggleNode = {
+      id: _slugid["default"].nice(),
+      type: _constants2.TOGGLE_HEADER,
+      level: level,
+      collapsed: false,
+      children: [titleNode, bodyNode]
+    };
+    _slate.Editor.withoutNormalizing(editor, function () {
+      _slate.Transforms.removeNodes(editor, {
+        at: _path
+      });
+      _slate.Transforms.insertNodes(editor, toggleNode, {
+        at: _path
+      });
+    });
+    (0, _core.focusEditor)(editor, _slate.Editor.start(editor, [].concat((0, _toConsumableArray2["default"])(_path), [0])));
+    return;
+  }
   if ([_constants2.PARAGRAPH].concat((0, _toConsumableArray2["default"])(_constants2.HEADERS)).includes(type)) {
     var _getTopLevelBlockNode;
     // Transform list-item, blockquote, callout to paragraph or header
@@ -82,7 +149,7 @@ var onSetNodeType = exports.onSetNodeType = function onSetNodeType(editor, eleme
         return;
       }
     } else {
-      // List-item, blockquote, callout is top node
+      // List-item, blockquote, callout, toggle-header is top node
       if ([_constants2.ORDERED_LIST, _constants2.UNORDERED_LIST].includes(topNodeType)) {
         (0, _transforms.toggleList)(editor, topNodeType);
         if ((0, _toConsumableArray2["default"])(_constants2.HEADERS).includes(type)) {
@@ -101,24 +168,60 @@ var onSetNodeType = exports.onSetNodeType = function onSetNodeType(editor, eleme
         (0, _helper.unwrapCallout)(editor);
         return;
       }
+      if ([_constants2.TOGGLE_HEADER].includes(topNodeType)) {
+        var _toggleNode$children, _toggleNode$children2;
+        var _currentToggleEntry2 = _slate.Editor.above(editor, {
+          at: selection,
+          match: function match(n) {
+            return _slate.Element.isElement(n) && n.type === _constants2.TOGGLE_HEADER;
+          },
+          mode: 'lowest'
+        });
+        if (!_currentToggleEntry2) return;
+        var _currentToggleEntry3 = (0, _slicedToArray2["default"])(_currentToggleEntry2, 2),
+          _toggleNode = _currentToggleEntry3[0],
+          _togglePath = _currentToggleEntry3[1];
+        var _titleNode = (_toggleNode$children = _toggleNode.children) === null || _toggleNode$children === void 0 ? void 0 : _toggleNode$children[0];
+        var _bodyNode = (_toggleNode$children2 = _toggleNode.children) === null || _toggleNode$children2 === void 0 ? void 0 : _toggleNode$children2[1];
+        var bodyChildren = (_bodyNode === null || _bodyNode === void 0 ? void 0 : _bodyNode.type) === _constants2.TOGGLE_CONTENT ? _bodyNode.children || [] : Array.isArray(_toggleNode.collapsed_body) ? _toggleNode.collapsed_body : [];
+        var hasBodyContent = bodyChildren.some(function (child) {
+          if (!_slate.Element.isElement(child)) return false;
+          if (child.type !== _constants2.PARAGRAPH) return true;
+          return _slate.Node.string(child) !== '';
+        });
+        var convertedTitleNode = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _titleNode), {}, {
+          type: type
+        });
+        var unwrapNodes = hasBodyContent ? [convertedTitleNode].concat((0, _toConsumableArray2["default"])(bodyChildren)) : [convertedTitleNode];
+        _slate.Editor.withoutNormalizing(editor, function () {
+          _slate.Transforms.removeNodes(editor, {
+            at: _togglePath
+          });
+          _slate.Transforms.insertNodes(editor, unwrapNodes, {
+            at: _togglePath
+          });
+        });
+        (0, _core.focusEditor)(editor, _slate.Editor.start(editor, _togglePath));
+        return;
+      }
     }
   }
   if (type === _constants2.CHECK_LIST_ITEM) {
-    var _path = (0, _core.findPath)(editor, element);
-    var _ref3 = _slate.Editor.node(editor, [_path[0]]) || [],
-      _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
-      _targetNode = _ref4[0],
-      targetPath = _ref4[1];
-    if (_targetNode && [_constants2.ORDERED_LIST, _constants2.UNORDERED_LIST].includes(_targetNode === null || _targetNode === void 0 ? void 0 : _targetNode.type) && !(0, _core.isMultiLevelList)(_targetNode)) {
-      (0, _helpers3.convertToCheck)(editor, _targetNode, targetPath);
+    var _path2 = (0, _core.findPath)(editor, element);
+    var _ref5 = _slate.Editor.node(editor, [_path2[0]]) || [],
+      _ref6 = (0, _slicedToArray2["default"])(_ref5, 2),
+      _targetNode2 = _ref6[0],
+      targetPath = _ref6[1];
+    if (_targetNode2 && [_constants2.ORDERED_LIST, _constants2.UNORDERED_LIST].includes(_targetNode2 === null || _targetNode2 === void 0 ? void 0 : _targetNode2.type) && !(0, _core.isMultiLevelList)(_targetNode2)) {
+      (0, _helpers3.convertToCheck)(editor, _targetNode2, targetPath);
       return;
     }
     var newType = element.type === _constants2.CHECK_LIST_ITEM ? _constants2.PARAGRAPH : _constants2.CHECK_LIST_ITEM;
     _slate.Transforms.setNodes(editor, {
       type: newType
     });
-    if ([_constants2.MULTI_COLUMN, _constants2.BLOCKQUOTE].includes(_targetNode.type)) {
-      if (_targetNode.type === _constants2.BLOCKQUOTE) {
+    if ([_constants2.MULTI_COLUMN, _constants2.BLOCKQUOTE].includes(_targetNode2.type)) {
+      if (_targetNode2.type === _constants2.BLOCKQUOTE) {
         (0, _helpers2.setBlockQuoteType)(editor, true);
       } else {
         var _currentNodeInColumn2 = (0, _core.getNode)(editor, selection.anchor.path.slice(0, 3));
@@ -157,26 +260,26 @@ var onSetNodeType = exports.onSetNodeType = function onSetNodeType(editor, eleme
 
   // Transform to multi_column and put content into first column
   if (_constants2.MULTI_COLUMN_TYPE.includes(type)) {
-    var _path2 = (0, _core.findPath)(editor, element);
+    var _path3 = (0, _core.findPath)(editor, element);
     var multiColumnNode = (0, _helper2.generateEmptyMultiColumn)(editor, type);
     _slate.Transforms.insertNodes(editor, multiColumnNode, {
-      at: [_path2[0] + 1]
+      at: [_path3[0] + 1]
     });
-    var nodeIndex = _path2[0];
+    var nodeIndex = _path3[0];
     var highestNode = editor.children[nodeIndex];
-    if (_path2.length > 1 && [_constants2.BLOCKQUOTE, _constants2.ORDERED_LIST, _constants2.UNORDERED_LIST, _constants2.CODE_BLOCK].includes(highestNode.type)) {
+    if (_path3.length > 1 && [_constants2.BLOCKQUOTE, _constants2.ORDERED_LIST, _constants2.UNORDERED_LIST, _constants2.CODE_BLOCK].includes(highestNode.type)) {
       _slate.Transforms.moveNodes(editor, {
-        at: [_path2[0]],
-        to: [_path2[0] + 1, 0, 0]
+        at: [_path3[0]],
+        to: [_path3[0] + 1, 0, 0]
       });
     } else {
       _slate.Transforms.moveNodes(editor, {
-        at: _path2,
-        to: [_path2[0] + 1, 0, 0]
+        at: _path3,
+        to: [_path3[0] + 1, 0, 0]
       });
     }
     _slate.Transforms.removeNodes(editor, {
-      at: [_path2[0], 0, 1]
+      at: [_path3[0], 0, 1]
     });
     return;
   }
@@ -382,6 +485,16 @@ var onWrapMultiListItemToNonListTypeTarget = exports.onWrapMultiListItemToNonLis
 };
 var getTransformMenusConfig = exports.getTransformMenusConfig = function getTransformMenusConfig(editor, slateNode) {
   var newSideMenusConfig = _constants2.SIDE_TRANSFORM_MENUS_CONFIG;
+  if (_constants2.TOGGLE_HEADER === slateNode.type) {
+    return newSideMenusConfig = _constants2.SIDE_TRANSFORM_MENUS_CONFIG.filter(function (item) {
+      return [].concat((0, _toConsumableArray2["default"])(_constants2.TOGGLE_TITLE_TYPES), (0, _toConsumableArray2["default"])(_constants2.HEADERS), [_constants2.PARAGRAPH]).includes(item.type);
+    });
+  }
+  if (![_constants2.PARAGRAPH].concat((0, _toConsumableArray2["default"])(_constants2.HEADERS), [_constants2.TOGGLE_HEADER]).includes(slateNode.type)) {
+    return newSideMenusConfig = _constants2.SIDE_TRANSFORM_MENUS_CONFIG.filter(function (item) {
+      return !_constants2.TOGGLE_TITLE_TYPES.includes(item.type);
+    });
+  }
   if ([_constants2.CALL_OUT].includes(slateNode.type)) {
     return newSideMenusConfig = _constants2.SIDE_TRANSFORM_MENUS_CONFIG.filter(function (item) {
       return [_constants2.PARAGRAPH].includes(item.type);

package/dist/extension/toolbar/side-toolbar/insert-block-menu.js

@@ -28,6 +28,7 @@ var _transforms = require("../../plugins/list/transforms");
 var _helper2 = require("../../plugins/multi-column/helper");
 var _helpers4 = require("../../plugins/table/helpers");
 var _tableSizePopover = _interopRequireDefault(require("../../plugins/table/popover/table-size-popover"));
+var _helper3 = require("../../plugins/toggle-header/helper");
 var _helpers5 = require("../../plugins/video/helpers");
 var _linkedRepoPopover = _interopRequireDefault(require("../linked-repo-popover"));
 var _helpers6 = require("./helpers");
@@ -133,6 +134,11 @@ var InsertBlockMenu = function InsertBlockMenu(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, insertPosition, slateNode]);
   var onInsert = (0, _react.useCallback)(function (type) {
+    // Insert toggle header
+    if (_constants2.TOGGLE_TITLE_TYPES.includes(type)) {
+      (0, _helper3.insertToggleHeader)(editor, type, insertPosition);
+      return;
+    }
     (0, _helpers6.insertElement)(editor, type, insertPosition);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, insertPosition, slateNode]);
@@ -168,7 +174,7 @@ var InsertBlockMenu = function InsertBlockMenu(_ref) {
       _toast["default"].danger(errorMessage);
     });
   }, [editor, insertPosition, slateNode]);
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, [_constants2.SIDE_INSERT_MENUS_CONFIG[_constants2.ELEMENT_TYPE.PARAGRAPH]].concat((0, _toConsumableArray2["default"])(_constants2.SIDE_INSERT_MENUS_CONFIG[_constants2.ELEMENT_TYPE.HEADER])).map(function (item) {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, [_constants2.SIDE_INSERT_MENUS_CONFIG[_constants2.ELEMENT_TYPE.PARAGRAPH]].concat((0, _toConsumableArray2["default"])(_constants2.SIDE_INSERT_MENUS_CONFIG[_constants2.ELEMENT_TYPE.HEADER]), (0, _toConsumableArray2["default"])(_constants2.SIDE_INSERT_MENUS_CONFIG[_constants2.ELEMENT_TYPE.TOGGLE_HEADER])).map(function (item) {
     return /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
       isHidden: !insertMenuSearchMap[item.type],
       disabled: isNodeEmpty && item.type === _constants2.PARAGRAPH,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "3.0.114",
+  "version": "3.0.115",
   "main": "dist/index.js",
   "scripts": {
     "test": "jest",
@@ -72,5 +72,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5eaccca57c89bb7c49082207ca8fd4bda957a02d"
+  "gitHead": "49c280cdc7d6958cd5ad0a125165bd79123d502b"
 }