@seafile/sdoc-editor 3.0.212 → 3.0.214

package/dist/android/outline-module.js

@@ -19,7 +19,9 @@ var updateOutlineValue = exports.updateOutlineValue = function updateOutlineValu
 };
 var scrollToOutline = exports.scrollToOutline = function scrollToOutline(item) {
   var id = item.id;
-  document.getElementById(id).scrollIntoView();
+  var target = document.getElementById(id);
+  if (!target) return false;
+  target.scrollIntoView();
   return true;
 };
 var registerOutlineEventHandler = exports.registerOutlineEventHandler = function registerOutlineEventHandler() {

package/dist/assets/css/sdoc-editor-plugins.css

@@ -40,6 +40,10 @@
   position: relative;
 }
 
+.sdoc-editor__article .list-container .sdoc-li-content {
+  display: block;
+}
+
 .sdoc-editor__article .list-container .sdoc-li-control {
   user-select: none;
   cursor: pointer;

package/dist/editor/wiki-editor.js

@@ -178,7 +178,8 @@ var WikiEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       slateValue: slateValue,
       showComment: false
     })), !_commonUtils.isMobile && isWikiReadOnly && /*#__PURE__*/_react["default"].createElement(_wikiOutline["default"], {
-      doc: slateValue
+      doc: slateValue,
+      editor: validEditor
     })))));
   }
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_layout.EditorContainer, {
@@ -199,7 +200,8 @@ var WikiEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     updateSlateValue: onValueChange,
     showComment: showComment
   })), /*#__PURE__*/_react["default"].createElement(_wikiOutline["default"], {
-    doc: slateValue
+    doc: slateValue,
+    editor: validEditor
   }), /*#__PURE__*/_react["default"].createElement(_menu["default"], {
     editor: validEditor,
     className: "wiki-search-and-replace",

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toggleHeaderCollapsed = exports.setHeaderType = exports.setHeaderCollapsed = exports.isSelectionInHeader = exports.isMenuDisabled = exports.isHeaderCollapsed = exports.isHasImage = exports.isElementHiddenByCollapsedHeader = exports.getSkippedHiddenHeaderMovePoint = exports.getHeaderType = exports.getHeaderLevel = exports.getCollapsedHeaderSectionEndIndex = exports.getCollapsedHeaderInsertPath = exports.clearHeaderCollapsedState = void 0;
+exports.toggleHeaderCollapsed = exports.setHeaderType = exports.setHeaderCollapsed = exports.isSelectionInHeader = exports.isMenuDisabled = exports.isHeaderCollapsed = exports.isHasImage = exports.isElementHiddenByCollapsedHeader = exports.getSkippedHiddenHeaderMovePoint = exports.getHeaderType = exports.getHeaderLevel = exports.getCollapsedHeaderSectionEndIndex = exports.getCollapsedHeaderInsertPath = exports.expandCollapsedHeaderAncestors = exports.clearHeaderCollapsedState = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _slate = require("@seafile/slate");
 var _context = _interopRequireDefault(require("../../../context"));
@@ -155,6 +155,25 @@ var getSectionEndIndex = function getSectionEndIndex(siblings, startIndex, level
   }
   return endIndex;
 };
+var getCollapsedHeaderAncestorEntries = function getCollapsedHeaderAncestorEntries(editor, element, defaultPath) {
+  var path = (0, _core.findPath)(editor, element, defaultPath);
+  if (!path || path.length !== 1) return [];
+  var currentIndex = path[path.length - 1];
+  var parentPath = _slate.Path.parent(path);
+  var siblings = parentPath.length === 0 ? editor.children : _slate.Node.get(editor, parentPath).children;
+  var ancestorEntries = [];
+  for (var index = currentIndex - 1; index >= 0; index--) {
+    var sibling = siblings[index];
+    if (!_slate.Element.isElement(sibling) || !isHeaderCollapsed(editor, sibling, [index])) continue;
+    var siblingLevel = getHeaderLevel(sibling.type);
+    if (siblingLevel === null) continue;
+    var endIndex = getSectionEndIndex(siblings, index, siblingLevel);
+    if (currentIndex < endIndex) {
+      ancestorEntries.unshift([sibling, [index]]);
+    }
+  }
+  return ancestorEntries;
+};
 var getCollapsedHeaderSectionEndIndex = exports.getCollapsedHeaderSectionEndIndex = function getCollapsedHeaderSectionEndIndex(editor, element, defaultPath) {
   var path = (0, _core.findPath)(editor, element, defaultPath);
   if (!path || path.length !== 1) return null;
@@ -174,22 +193,27 @@ var getCollapsedHeaderInsertPath = exports.getCollapsedHeaderInsertPath = functi
   return [endIndex];
 };
 var isElementHiddenByCollapsedHeader = exports.isElementHiddenByCollapsedHeader = function isElementHiddenByCollapsedHeader(editor, element, defaultPath) {
-  var path = (0, _core.findPath)(editor, element, defaultPath);
-  if (!path || path.length !== 1) return false;
-  var currentIndex = path[path.length - 1];
-  var parentPath = _slate.Path.parent(path);
-  var siblings = parentPath.length === 0 ? editor.children : _slate.Node.get(editor, parentPath).children;
-  for (var index = currentIndex - 1; index >= 0; index--) {
-    var sibling = siblings[index];
-    if (!_slate.Element.isElement(sibling) || !isHeaderCollapsed(editor, sibling, [index])) continue;
-    var siblingLevel = getHeaderLevel(sibling.type);
-    if (siblingLevel === null) continue;
-    var endIndex = getSectionEndIndex(siblings, index, siblingLevel);
-    if (currentIndex < endIndex) {
-      return true;
-    }
-  }
-  return false;
+  return getCollapsedHeaderAncestorEntries(editor, element, defaultPath).length > 0;
+};
+var expandCollapsedHeaderAncestors = exports.expandCollapsedHeaderAncestors = function expandCollapsedHeaderAncestors(editor, element, defaultPath) {
+  var _editor$onHeaderColla3;
+  var ancestorEntries = getCollapsedHeaderAncestorEntries(editor, element, defaultPath);
+  if (ancestorEntries.length === 0) return false;
+  var collapsedHeaderState = getCollapsedHeaderState();
+  var isUpdated = false;
+  ancestorEntries.forEach(function (_ref) {
+    var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+      header = _ref2[0],
+      path = _ref2[1];
+    var headerId = getHeaderId(editor, header, path);
+    if (!headerId || !collapsedHeaderState[headerId]) return;
+    collapsedHeaderState[headerId] = false;
+    isUpdated = true;
+  });
+  if (!isUpdated) return false;
+  persistCollapsedHeaderState(collapsedHeaderState);
+  (_editor$onHeaderColla3 = editor.onHeaderCollapseStateChange) === null || _editor$onHeaderColla3 === void 0 ? void 0 : _editor$onHeaderColla3.call(editor);
+  return true;
 };
 var getSkippedHiddenHeaderMovePoint = exports.getSkippedHiddenHeaderMovePoint = function getSkippedHiddenHeaderMovePoint(editor, point) {
   var reverse = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;

package/dist/extension/plugins/list/render-elem.js

@@ -66,7 +66,7 @@ var renderListItem = exports.renderListItem = function renderListItem(props, edi
     onMouseDown: togglePrefix
   }), /*#__PURE__*/_react["default"].createElement("span", {
     className: "sdoc-li-divider"
-  })), /*#__PURE__*/_react["default"].createElement("span", {
+  })), /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-li-content"
   }, newChildren));
 };

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

@@ -33,7 +33,8 @@ var CustomRenderElement = function CustomRenderElement(props) {
   (0, _helper.setDataRoot)(element, attributes);
   if ((0, _helpers.isElementHiddenByCollapsedHeader)(editor, element)) {
     return /*#__PURE__*/_react["default"].createElement("div", Object.assign({
-      "data-id": element.id
+      "data-id": element.id,
+      id: element.id
     }, attributes, {
       style: {
         display: 'none'

package/dist/layout/editor-content.js

@@ -74,7 +74,8 @@ var EditorContent = function EditorContent(_ref) {
     style: (0, _fullWidthMode.getContentStyleByFullModeStyle)()
   }, showOutline && /*#__PURE__*/_react["default"].createElement(_outline["default"], {
     scrollLeft: scrollLeft,
-    doc: docValue
+    doc: docValue,
+    editor: editor
   }), children))), /*#__PURE__*/_react["default"].createElement(_rightPanel["default"], {
     editor: editor
   })));

package/dist/outline/index.js

@@ -32,6 +32,7 @@ var setOutlineSetting = exports.setOutlineSetting = function setOutlineSetting(i
 var SDocOutline = function SDocOutline(_ref) {
   var scrollLeft = _ref.scrollLeft,
     doc = _ref.doc,
+    editor = _ref.editor,
     t = _ref.t;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -52,9 +53,15 @@ var SDocOutline = function SDocOutline(_ref) {
     updateOutlineState(!isShown);
   }, [isShown, updateOutlineState]);
   var list = (0, _react.useMemo)(function () {
-    return doc === null || doc === void 0 ? void 0 : doc.filter(function (item) {
-      return ['header1', 'header2', 'header3'].includes(item.type);
-    });
+    return doc === null || doc === void 0 ? void 0 : doc.reduce(function (headerList, item, index) {
+      if (['header1', 'header2', 'header3'].includes(item.type)) {
+        headerList.push({
+          item: item,
+          path: [index]
+        });
+      }
+      return headerList;
+    }, []);
   }, [doc]);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])('sdoc-outline-wrapper', {
@@ -79,10 +86,14 @@ var SDocOutline = function SDocOutline(_ref) {
     className: "mt-4 text-secondary"
   }, t('Headings_you_add_to_the_document_will_appear_here')), list.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-outline-list-container"
-  }, list.map(function (item, index) {
+  }, list.map(function (_ref2, index) {
+    var item = _ref2.item,
+      path = _ref2.path;
     return /*#__PURE__*/_react["default"].createElement(_outlineItem["default"], {
       key: index,
       item: item,
+      itemPath: path,
+      editor: editor,
       isSdocRevision: isSdocRevision
     });
   })))), !isShown && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {

package/dist/outline/outline-item.js

@@ -15,15 +15,33 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../constants");
 var _constants2 = require("../extension/constants");
+var _helpers = require("../extension/plugins/header/helpers");
 var OutlineItem = /*#__PURE__*/function (_React$PureComponent) {
   function OutlineItem(props) {
     var _this;
     (0, _classCallCheck2["default"])(this, OutlineItem);
     _this = (0, _callSuper2["default"])(this, OutlineItem, [props]);
     (0, _defineProperty2["default"])(_this, "onItemClick", function () {
-      var item = _this.props.item;
+      var _this$props = _this.props,
+        item = _this$props.item,
+        editor = _this$props.editor,
+        itemPath = _this$props.itemPath;
       var id = item.id;
-      document.getElementById(id).scrollIntoView();
+      var scrollToTarget = function scrollToTarget() {
+        var target = document.getElementById(id);
+        if (!target) return;
+        target.scrollIntoView();
+      };
+      var isExpanded = editor ? (0, _helpers.expandCollapsedHeaderAncestors)(editor, item, itemPath) : false;
+      if (!isExpanded) {
+        scrollToTarget();
+        return;
+      }
+      if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
+        window.requestAnimationFrame(scrollToTarget);
+        return;
+      }
+      setTimeout(scrollToTarget, 0);
     });
     (0, _defineProperty2["default"])(_this, "onMouseOver", function () {
       _this.setState({
@@ -37,9 +55,9 @@ var OutlineItem = /*#__PURE__*/function (_React$PureComponent) {
     });
     (0, _defineProperty2["default"])(_this, "getOutlineItemClass", function () {
       var isHighlighted = _this.state.isHighlighted;
-      var _this$props = _this.props,
-        item = _this$props.item,
-        isDisplayHorizontalBar = _this$props.isDisplayHorizontalBar;
+      var _this$props2 = _this.props,
+        item = _this$props2.item,
+        isDisplayHorizontalBar = _this$props2.isDisplayHorizontalBar;
       var type = item.type,
         isActive = item.isActive;
       var outlineItemClass = null;
@@ -67,10 +85,10 @@ var OutlineItem = /*#__PURE__*/function (_React$PureComponent) {
   return (0, _createClass2["default"])(OutlineItem, [{
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-        item = _this$props2.item,
-        isDisplayHorizontalBar = _this$props2.isDisplayHorizontalBar,
-        isSdocRevision = _this$props2.isSdocRevision;
+      var _this$props3 = this.props,
+        item = _this$props3.item,
+        isDisplayHorizontalBar = _this$props3.isDisplayHorizontalBar,
+        isSdocRevision = _this$props3.isSdocRevision;
       var type = item.type,
         children = item.children,
         isActive = item.isActive;

package/dist/outline/wiki-outline.js

@@ -16,7 +16,8 @@ var _outlineItem = _interopRequireDefault(require("./outline-item"));
 require("./style.css");
 var WikiOutline = function WikiOutline(_ref) {
   var _ref$doc = _ref.doc,
-    doc = _ref$doc === void 0 ? [] : _ref$doc;
+    doc = _ref$doc === void 0 ? [] : _ref$doc,
+    editor = _ref.editor;
   var scrollRef = (0, _useScrollContext.useScrollContext)();
   var wikiOutlineRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)([]),
@@ -33,9 +34,15 @@ var WikiOutline = function WikiOutline(_ref) {
     }
   }, [isShowOutlinePopover]);
   var updateWikiOutlineList = (0, _react.useCallback)(function () {
-    var list = doc.filter(function (item) {
-      return ['header1', 'header2', 'header3'].includes(item.type);
-    });
+    var list = doc.reduce(function (headerList, item, index) {
+      if (['header1', 'header2', 'header3'].includes(item.type)) {
+        headerList.push({
+          item: item,
+          path: [index]
+        });
+      }
+      return headerList;
+    }, []);
     if (list.length === 0) {
       setWikiOutlineList([]);
       return;
@@ -43,7 +50,8 @@ var WikiOutline = function WikiOutline(_ref) {
 
     // The slateValue value in the document cannot be operated, so copy it for operation
     var newList = JSON.parse(JSON.stringify(list));
-    var index = list.findIndex(function (item) {
+    var index = list.findIndex(function (_ref2) {
+      var item = _ref2.item;
       var id = item.id;
       var el = document.getElementById(id);
       if (el) {
@@ -63,7 +71,7 @@ var WikiOutline = function WikiOutline(_ref) {
     }
     // There is no title in the visible area
     if (index === -1) {
-      var lastItemId = list[list.length - 1].id;
+      var lastItemId = list[list.length - 1].item.id;
       var lastItemEl = document.getElementById(lastItemId);
       if (lastItemEl) {
         var _lastItemEl$getBoundi = lastItemEl.getBoundingClientRect(),
@@ -98,10 +106,14 @@ var WikiOutline = function WikiOutline(_ref) {
   }, wikiOutlineList.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-outline-list-container",
     onMouseOver: onMouseOver
-  }, wikiOutlineList.map(function (item, index) {
+  }, wikiOutlineList.map(function (_ref3, index) {
+    var item = _ref3.item,
+      path = _ref3.path;
     return /*#__PURE__*/_react["default"].createElement(_outlineItem["default"], {
       key: index,
       item: item,
+      itemPath: path,
+      editor: editor,
       isDisplayHorizontalBar: true
     });
   }))), isShowOutlinePopover && /*#__PURE__*/_react["default"].createElement("div", {
@@ -109,10 +121,14 @@ var WikiOutline = function WikiOutline(_ref) {
     ref: wikiOutlineRef
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-outline-list-container"
-  }, wikiOutlineList.map(function (item, index) {
+  }, wikiOutlineList.map(function (_ref4, index) {
+    var item = _ref4.item,
+      path = _ref4.path;
     return /*#__PURE__*/_react["default"].createElement(_outlineItem["default"], {
       key: index,
-      item: item
+      item: item,
+      itemPath: path,
+      editor: editor
     });
   }))));
 };

package/dist/views/sdoc-wiki-ssr-viewer.js

@@ -55,7 +55,8 @@ var SDocWikiSSRViewer = function SDocWikiSSRViewer(_ref) {
     slateValue: slateValue,
     showComment: false
   })), /*#__PURE__*/_react["default"].createElement(_wikiOutline["default"], {
-    doc: slateValue
+    doc: slateValue,
+    editor: validEditor
   })))));
 };
 var _default = exports["default"] = SDocWikiSSRViewer;

package/dist/wiki-outline/index.js

@@ -14,9 +14,12 @@ var _outlineItem = _interopRequireDefault(require("./outline-item"));
 require("./style.css");
 var getHeaderList = function getHeaderList(children) {
   var headerList = [];
-  children.forEach(function (node) {
+  children.forEach(function (node, index) {
     if (node.type === 'header2' || node.type === 'header3') {
-      headerList.push(node);
+      headerList.push({
+        node: node,
+        path: [index]
+      });
     }
   });
   return headerList;
@@ -43,8 +46,9 @@ var Outline = function Outline(_ref) {
     var styles = getComputedStyle(scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current);
     var paddingTop = parseInt(styles.paddingTop);
     for (var i = 0; i < headerList.length; i++) {
-      var headerItem = headerList[i];
+      var headerItem = headerList[i].node;
       var dom = document.getElementById(headerItem.id);
+      if (!dom) continue;
       var offsetTop = dom.offsetTop,
         offsetHeight = dom.offsetHeight;
       var _styles = getComputedStyle(dom);
@@ -69,10 +73,14 @@ var Outline = function Outline(_ref) {
     className: "sdoc-wiki-viewer-outline"
   }, headerList.length === 0 && /*#__PURE__*/_react["default"].createElement("div", {
     className: "empty-container"
-  }, t('No_out_line')), headerList.length > 0 && headerList.map(function (node, index) {
+  }, t('No_out_line')), headerList.length > 0 && headerList.map(function (_ref2, index) {
+    var node = _ref2.node,
+      path = _ref2.path;
     return /*#__PURE__*/_react["default"].createElement(_outlineItem["default"], {
       key: index,
       node: node,
+      itemPath: path,
+      editor: editor,
       activeId: activeId
     });
   }));

package/dist/wiki-outline/outline-item.js

@@ -8,13 +8,30 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _helpers = require("../extension/plugins/header/helpers");
 var OutlineItem = function OutlineItem(_ref) {
   var node = _ref.node,
-    activeId = _ref.activeId;
+    activeId = _ref.activeId,
+    itemPath = _ref.itemPath,
+    editor = _ref.editor;
   var onItemClick = (0, _react.useCallback)(function () {
     var id = node.id;
-    document.getElementById(id).scrollIntoView();
-  }, [node]);
+    var scrollToTarget = function scrollToTarget() {
+      var target = document.getElementById(id);
+      if (!target) return;
+      target.scrollIntoView();
+    };
+    var isExpanded = editor ? (0, _helpers.expandCollapsedHeaderAncestors)(editor, node, itemPath) : false;
+    if (!isExpanded) {
+      scrollToTarget();
+      return;
+    }
+    if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
+      window.requestAnimationFrame(scrollToTarget);
+      return;
+    }
+    setTimeout(scrollToTarget, 0);
+  }, [editor, itemPath, node]);
   var className = (0, _classnames["default"])({
     'outline-h2': node.type === 'header2',
     'outline-h3': node.type === 'header3',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "3.0.212",
+  "version": "3.0.214",
   "main": "dist/index.js",
   "scripts": {
     "test": "jest",
@@ -72,5 +72,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "099e9c9cbec764f5003fe54444628797cedd81ee"
+  "gitHead": "e81b1d456d92201965be81ba4b16575fd578cf92"
 }