@seafile/sdoc-editor 3.0.203 → 3.0.205

package/dist/editor/sdoc-editor.js

@@ -255,6 +255,16 @@ var SdocEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       (0, _dispatchContentSelectEvent.dispatchContentSelectEvent)(validEditor);
     }
   };
+  (0, _react.useEffect)(function () {
+    validEditor.onHeaderCollapseStateChange = function () {
+      _setSlateValue(function (value) {
+        return (0, _toConsumableArray2["default"])(value);
+      });
+    };
+    return function () {
+      validEditor.onHeaderCollapseStateChange = null;
+    };
+  }, [validEditor]);
   var isFreezed = _context["default"].getSetting('isFreezed');
   if (isReloading || isLoadingMathJax) {
     return /*#__PURE__*/_react["default"].createElement("div", {

package/dist/editor/wiki-editor.js

@@ -146,6 +146,16 @@ var WikiEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }, 0);
     _setSlateValue(value);
   };
+  (0, _react.useEffect)(function () {
+    validEditor.onHeaderCollapseStateChange = function () {
+      _setSlateValue(function (value) {
+        return (0, _toConsumableArray2["default"])(value);
+      });
+    };
+    return function () {
+      validEditor.onHeaderCollapseStateChange = null;
+    };
+  }, [validEditor]);
   if (isReloading || isLoadingMathJax) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "h-100 w-100 d-flex align-items-center justify-content-center"

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

@@ -4,11 +4,77 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setHeaderType = exports.isSelectionInHeader = exports.isMenuDisabled = exports.isHasImage = exports.isElementHiddenByCollapsedHeader = exports.getSkippedHiddenHeaderMovePoint = exports.getHeaderType = exports.getHeaderLevel = exports.getCollapsedHeaderSectionEndIndex = 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.clearHeaderCollapsedState = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _slate = require("@seafile/slate");
+var _context = _interopRequireDefault(require("../../../context"));
+var _localStorageUtils = _interopRequireDefault(require("../../../utils/local-storage-utils"));
 var _constants = require("../../constants");
 var _core = require("../../core");
+var HEADER_COLLAPSE_STORAGE_PREFIX = 'sdoc-header-collapsed:';
+var getHeaderStorageDocKey = function getHeaderStorageDocKey() {
+  return _context["default"].getSetting('docUuid') || _context["default"].getSetting('wikiId') || window.location.pathname || 'default';
+};
+var getHeaderStorageKey = function getHeaderStorageKey() {
+  return "".concat(HEADER_COLLAPSE_STORAGE_PREFIX).concat(getHeaderStorageDocKey());
+};
+var clearAllHeaderCollapsedState = function clearAllHeaderCollapsedState() {
+  Object.keys(window.localStorage).forEach(function (key) {
+    if (key.startsWith(HEADER_COLLAPSE_STORAGE_PREFIX)) {
+      _localStorageUtils["default"].removeItem(key);
+    }
+  });
+};
+var getCollapsedHeaderState = function getCollapsedHeaderState() {
+  return _localStorageUtils["default"].getItem(getHeaderStorageKey(), {});
+};
+var persistCollapsedHeaderState = function persistCollapsedHeaderState(collapsedHeaderState) {
+  try {
+    _localStorageUtils["default"].setItem(getHeaderStorageKey(), collapsedHeaderState);
+  } catch (error) {
+    clearAllHeaderCollapsedState();
+    try {
+      _localStorageUtils["default"].setItem(getHeaderStorageKey(), collapsedHeaderState);
+    } catch (_unused) {
+      // Ignore storage failures after cleanup.
+    }
+  }
+};
+var getHeaderId = function getHeaderId(editor, element, defaultPath) {
+  var _Node$get;
+  if (element !== null && element !== void 0 && element.id) return element.id;
+  var path = defaultPath || (0, _core.findPath)(editor, element);
+  if (!path) return null;
+  return ((_Node$get = _slate.Node.get(editor, path)) === null || _Node$get === void 0 ? void 0 : _Node$get.id) || "path:".concat(path.join('.'));
+};
+var isHeaderCollapsed = exports.isHeaderCollapsed = function isHeaderCollapsed(editor, element, defaultPath) {
+  var headerId = getHeaderId(editor, element, defaultPath);
+  if (!headerId) {
+    return !!(element !== null && element !== void 0 && element.collapsed);
+  }
+  var collapsedHeaderState = getCollapsedHeaderState();
+  if (Object.prototype.hasOwnProperty.call(collapsedHeaderState, headerId)) {
+    return !!collapsedHeaderState[headerId];
+  }
+  return !!(element !== null && element !== void 0 && element.collapsed);
+};
+var setHeaderCollapsed = exports.setHeaderCollapsed = function setHeaderCollapsed(editor, element, collapsed, defaultPath) {
+  var _editor$onHeaderColla;
+  var headerId = getHeaderId(editor, element, defaultPath);
+  if (!headerId) return;
+  var collapsedHeaderState = getCollapsedHeaderState();
+  collapsedHeaderState[headerId] = collapsed;
+  persistCollapsedHeaderState(collapsedHeaderState);
+  (_editor$onHeaderColla = editor.onHeaderCollapseStateChange) === null || _editor$onHeaderColla === void 0 ? void 0 : _editor$onHeaderColla.call(editor);
+};
+var toggleHeaderCollapsed = exports.toggleHeaderCollapsed = function toggleHeaderCollapsed(editor, element, defaultPath) {
+  setHeaderCollapsed(editor, element, !isHeaderCollapsed(editor, element, defaultPath), defaultPath);
+};
+var clearHeaderCollapsedState = exports.clearHeaderCollapsedState = function clearHeaderCollapsedState(editor) {
+  var _editor$onHeaderColla2;
+  _localStorageUtils["default"].removeItem(getHeaderStorageKey());
+  editor === null || editor === void 0 ? void 0 : (_editor$onHeaderColla2 = editor.onHeaderCollapseStateChange) === null || _editor$onHeaderColla2 === void 0 ? void 0 : _editor$onHeaderColla2.call(editor);
+};
 var isMenuDisabled = exports.isMenuDisabled = function isMenuDisabled(editor) {
   var readonly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   if (readonly) return true;
@@ -99,6 +165,14 @@ var getCollapsedHeaderSectionEndIndex = exports.getCollapsedHeaderSectionEndInde
   if (level === null) return null;
   return getSectionEndIndex(siblings, currentIndex, level);
 };
+var getCollapsedHeaderInsertPath = exports.getCollapsedHeaderInsertPath = function getCollapsedHeaderInsertPath(editor, element, defaultPath) {
+  var endIndex = getCollapsedHeaderSectionEndIndex(editor, element, defaultPath);
+  if (endIndex === null) {
+    var path = (0, _core.findPath)(editor, element, defaultPath);
+    return path ? _slate.Path.next(path) : null;
+  }
+  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;
@@ -107,7 +181,7 @@ var isElementHiddenByCollapsedHeader = exports.isElementHiddenByCollapsedHeader
   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) || !sibling.collapsed) continue;
+    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);

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

@@ -64,7 +64,7 @@ var withHeader = function withHeader(editor) {
     var _match = (0, _slicedToArray2["default"])(match, 2),
       currentNode = _match[0],
       path = _match[1];
-    var isCollapsedHeader = !!currentNode.collapsed;
+    var isCollapsedHeader = (0, _helpers2.isHeaderCollapsed)(newEditor, currentNode, path);
     var startPoint = _slate.Editor.start(newEditor, path);
     var endPoint = _slate.Editor.end(newEditor, path);
     if (isCollapsedHeader) {
@@ -80,8 +80,7 @@ var withHeader = function withHeader(editor) {
       }
       if (isAtHeaderEnd) {
         _slate.Editor.withoutNormalizing(newEditor, function () {
-          var sectionEndIndex = (0, _helpers2.getCollapsedHeaderSectionEndIndex)(newEditor, currentNode, path);
-          var insertPath = sectionEndIndex === null ? _slate.Path.next(path) : [sectionEndIndex];
+          var insertPath = (0, _helpers2.getCollapsedHeaderInsertPath)(newEditor, currentNode, path);
           var newNode = (0, _core.generateEmptyElement)(currentNode.type);
           _slate.Transforms.insertNodes(newEditor, newNode, {
             at: insertPath
@@ -91,7 +90,7 @@ var withHeader = function withHeader(editor) {
         return;
       }
       _slate.Editor.withoutNormalizing(newEditor, function () {
-        var sectionEndIndex = (0, _helpers2.getCollapsedHeaderSectionEndIndex)(newEditor, currentNode, path);
+        var insertPath = (0, _helpers2.getCollapsedHeaderInsertPath)(newEditor, currentNode, path);
         var afterRange = {
           anchor: cursorPoint,
           focus: endPoint
@@ -100,9 +99,9 @@ var withHeader = function withHeader(editor) {
         _slate.Transforms["delete"](newEditor, {
           at: afterRange
         });
+        (0, _helpers2.setHeaderCollapsed)(newEditor, currentNode, true, path);
         var newNode = (0, _core.generateEmptyElement)(currentNode.type);
         newNode.children[0].text = afterText;
-        var insertPath = sectionEndIndex === null ? _slate.Path.next(path) : [sectionEndIndex];
         _slate.Transforms.insertNodes(newEditor, newNode, {
           at: insertPath
         });

package/dist/extension/plugins/header/render-elem.css

@@ -2,6 +2,15 @@
   position: relative;
 }
 
+.sdoc-header-row::before {
+  content: '';
+  position: absolute;
+  right: 100%;
+  top: 0;
+  width: 20px;
+  height: 100%;
+}
+
 .sdoc-header-collapse-prefix {
   display: inline-flex;
   align-items: center;
@@ -11,7 +20,7 @@
   top: 50%;
   width: 16px;
   height: 16px;
-  margin-right: 6px;
+  margin-right: 4px;
   cursor: pointer;
   transform: translateY(-50%);
   opacity: 0;
@@ -19,7 +28,9 @@
 }
 
 .sdoc-header-collapse-prefix:hover {
-  background-color: rgba(42, 28, 0, .07);
+  opacity: 1;
+  pointer-events: auto;
+  background-color: rgba(0, 0, 0, .04);
   border-radius: 2px;
 }
 
@@ -28,6 +39,11 @@
   pointer-events: auto;
 }
 
+.sdoc-header-row:hover .sdoc-header-collapse-prefix {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 .sdoc-header-collapse-prefix .sdocfont {
   width: 16px;
   height: 16px;
@@ -36,8 +52,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: #212529;
-  opacity: 0.5;
+  color: #666;
 }
 
 .sdoc-header-collapse-prefix-collapsed {

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

@@ -12,6 +12,7 @@ var _slateReact = require("@seafile/slate-react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
 var _helper = require("../paragraph/helper");
+var _helpers = require("./helpers");
 var _placeholder = _interopRequireDefault(require("./placeholder"));
 require("./render-elem.css");
 var renderTitle = exports.renderTitle = function renderTitle(props, editor) {
@@ -52,16 +53,8 @@ var renderHeader = exports.renderHeader = function renderHeader(props, editor) {
     isComposing = props.isComposing;
   var type = element.type;
   var level = type.split('header')[1];
-  var collapsed = !!element.collapsed;
   var currentPath = _slateReact.ReactEditor.findPath(editor, element);
-  var activeHeaderEntry = editor.selection ? _slate.Editor.above(editor, {
-    at: editor.selection,
-    match: function match(node, path) {
-      return _slate.Element.isElement(node) && node.id === element.id && path.length === currentPath.length;
-    },
-    mode: 'lowest'
-  }) : null;
-  var isActiveHeader = !!activeHeaderEntry;
+  var collapsed = (0, _helpers.isHeaderCollapsed)(editor, element, currentPath);
   var style = (0, _objectSpread2["default"])({
     textAlign: element.align,
     fontSize: "".concat(_constants.SDOC_FONT_SIZE[element.type], "pt")
@@ -75,11 +68,12 @@ var renderHeader = exports.renderHeader = function renderHeader(props, editor) {
   var onToggleCollapsed = function onToggleCollapsed(event) {
     event.preventDefault();
     event.stopPropagation();
-    _slate.Transforms.setNodes(editor, {
-      collapsed: !collapsed
-    }, {
-      at: currentPath
-    });
+    (0, _helpers.toggleHeaderCollapsed)(editor, element, currentPath);
+    if (collapsed) {
+      var endPoint = _slate.Editor.end(editor, currentPath);
+      _slate.Transforms.select(editor, endPoint);
+      _slateReact.ReactEditor.focus(editor);
+    }
   };
   return /*#__PURE__*/_react["default"].createElement("div", Object.assign({
     "data-id": element.id,
@@ -93,7 +87,7 @@ var renderHeader = exports.renderHeader = function renderHeader(props, editor) {
     className: "sdoc-header-row"
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: (0, _classnames["default"])('sdoc-header-collapse-prefix', {
-      'sdoc-header-collapse-prefix-visible': isActiveHeader,
+      'sdoc-header-collapse-prefix-visible': collapsed,
       'sdoc-header-collapse-prefix-collapsed': collapsed
     }),
     contentEditable: false,

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

@@ -109,7 +109,6 @@ var onSetNodeType = exports.onSetNodeType = function onSetNodeType(editor, eleme
       id: _slugid["default"].nice(),
       type: _constants2.TOGGLE_HEADER,
       level: level,
-      collapsed: false,
       children: [titleNode, bodyNode]
     };
     _slate.Editor.withoutNormalizing(editor, function () {

package/dist/views/readonly-article.js

@@ -1,11 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _slateReact = require("@seafile/slate-react");
 var _comment = _interopRequireDefault(require("../comment"));
@@ -20,6 +21,19 @@ var ReadOnlyArticle = function ReadOnlyArticle(_ref) {
     _ref$showComment = _ref.showComment,
     showComment = _ref$showComment === void 0 ? false : _ref$showComment;
   var decorate = (0, _decorates.usePipDecorate)(editor);
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    setVersion = _useState2[1];
+  (0, _react.useEffect)(function () {
+    editor.onHeaderCollapseStateChange = function () {
+      setVersion(function (value) {
+        return value + 1;
+      });
+    };
+    return function () {
+      editor.onHeaderCollapseStateChange = null;
+    };
+  }, [editor]);
   return /*#__PURE__*/_react["default"].createElement(_slateReact.Slate, {
     editor: editor,
     value: slateValue,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "3.0.203",
+  "version": "3.0.205",
   "main": "dist/index.js",
   "scripts": {
     "test": "jest",
@@ -72,5 +72,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "630489bd5113fdec9cd38dbcc2708fd2d18e7f81"
+  "gitHead": "8ced52244e7fab9a1f1af86ab419b8b5adb833b0"
 }