@seafile/sdoc-editor 1.0.98 → 1.0.99

package/dist/basic-sdk/constants/index.js

@@ -4,7 +4,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PAGE_EDIT_AREA_WIDTH = exports.MODIFY_TYPE = exports.INTERNAL_EVENT = exports.DOCUMENT_PLUGIN_EDITOR = exports.DIFF_VIEWER = exports.COMMENT_EDITOR_EDIT_AREA_WIDTH = exports.COMMENT_EDITOR = void 0;
+exports.PAGE_EDIT_AREA_WIDTH = exports.MODIFY_TYPE = exports.INTERNAL_EVENT = exports.HEADER_OUTLINE_WIDTH_MAPPING = exports.DOCUMENT_PLUGIN_EDITOR = exports.DIFF_VIEWER = exports.COMMENT_EDITOR_EDIT_AREA_WIDTH = exports.COMMENT_EDITOR = void 0;
 Object.defineProperty(exports, "PLUGIN_BTN_POSITION", {
   enumerable: true,
   get: function () {
@@ -17,7 +17,7 @@ Object.defineProperty(exports, "PLUGIN_DISPLAY_TYPE", {
     return _plugin.PLUGIN_DISPLAY_TYPE;
   }
 });
-exports.Z_INDEX = exports.WIKI_EDITOR = exports.REVISION_DIFF_VALUE = exports.REVISION_DIFF_KEY = exports.REBASE_TYPES = exports.REBASE_TYPE = exports.REBASE_ORIGIN = exports.REBASE_MARK_KEY = exports.REBASE_MARKS = void 0;
+exports.Z_INDEX = exports.WIKI_OUTLINE = exports.WIKI_EDITOR = exports.REVISION_DIFF_VALUE = exports.REVISION_DIFF_KEY = exports.REBASE_TYPES = exports.REBASE_TYPE = exports.REBASE_ORIGIN = exports.REBASE_MARK_KEY = exports.REBASE_MARKS = void 0;
 var Z_INDEX = _interopRequireWildcard(require("./z-index"));
 exports.Z_INDEX = Z_INDEX;
 var _plugin = require("./plugin");
@@ -55,6 +55,12 @@ const COMMENT_EDITOR_EDIT_AREA_WIDTH = exports.COMMENT_EDITOR_EDIT_AREA_WIDTH =
 const COMMENT_EDITOR = exports.COMMENT_EDITOR = 'comment_editor';
 const WIKI_EDITOR = exports.WIKI_EDITOR = 'wiki_editor';
 const DOCUMENT_PLUGIN_EDITOR = exports.DOCUMENT_PLUGIN_EDITOR = 'document_plugin_editor';
+const WIKI_OUTLINE = exports.WIKI_OUTLINE = 'wiki-outline';
+const HEADER_OUTLINE_WIDTH_MAPPING = exports.HEADER_OUTLINE_WIDTH_MAPPING = {
+  header1: '16px',
+  header2: '12px',
+  header3: '8px'
+};
 const MODIFY_TYPE = exports.MODIFY_TYPE = {
   ADD: 'add',
   DELETE: 'delete',

package/dist/basic-sdk/editor/wiki-editor.js

@@ -20,6 +20,7 @@ var _core = require("../extension/core");
 var _insertElementDialog = _interopRequireDefault(require("../extension/commons/insert-element-dialog"));
 var _layout = require("../layout");
 var _editableArticle = _interopRequireDefault(require("./editable-article"));
+var _wikiOutline = _interopRequireDefault(require("../outline/wiki-outline"));
 var _useColorContext = require("../hooks/use-color-context");
 var _readonlyArticle = _interopRequireDefault(require("../views/readonly-article"));
 var _utils = require("../../utils");
@@ -177,7 +178,9 @@ const WikiEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     slateValue: slateValue,
     updateSlateValue: onValueChange,
     showComment: false
-  })))))), /*#__PURE__*/_react.default.createElement(_insertElementDialog.default, {
+  })), /*#__PURE__*/_react.default.createElement(_wikiOutline.default, {
+    doc: slateValue
+  }))))), /*#__PURE__*/_react.default.createElement(_insertElementDialog.default, {
     editor: validEditor
   }));
 });

package/dist/basic-sdk/layout/article-container.js

@@ -31,7 +31,7 @@ function ArticleContainer(_ref) {
     const articleRect = articleRef.current.getBoundingClientRect();
     // get state from local storage
     const isShowOutline = (0, _outline.getOutlineSetting)();
-    if (isShowOutline && (rect.width - articleRect.width) / 2 < 280) {
+    if (isShowOutline && editor.editorType !== _constants.WIKI_EDITOR && (rect.width - articleRect.width) / 2 < 280) {
       setContainerStyle({
         marginLeft: '280px'
       });
@@ -44,7 +44,7 @@ function ArticleContainer(_ref) {
         block: 'nearest'
       });
     }
-  }, [scrollRef]);
+  }, [editor.editorType, scrollRef]);
   const handelArticleClick = (0, _react.useCallback)(event => {
     if (!articleRef.current.contains(event.target)) return;
     const eventBus = _eventBus.default.getInstance();

package/dist/basic-sdk/outline/outline-item.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
+var _constants = require("../constants");
 class OutlineItem extends _react.default.PureComponent {
   constructor(props) {
     super(props);
@@ -30,26 +31,61 @@ class OutlineItem extends _react.default.PureComponent {
         isHighlighted: false
       });
     });
+    (0, _defineProperty2.default)(this, "getOutlineItemClass", () => {
+      const {
+        isHighlighted
+      } = this.state;
+      const {
+        item,
+        isDisplayHorizontalBar
+      } = this.props;
+      const {
+        type,
+        isActive
+      } = item;
+      let outlineItemClass = null;
+      outlineItemClass = (0, _classnames.default)('sdoc-outline-item', {
+        'pl-5': type === 'header2',
+        'pl-7': type === 'header3',
+        'active': isHighlighted,
+        'wiki-outline-active': isActive
+      });
+      if (isDisplayHorizontalBar) {
+        outlineItemClass = (0, _classnames.default)('sdoc-outline-item', {
+          'pl-1': type === 'header2',
+          'pl-2': type === 'header3',
+          'active': isHighlighted
+        });
+      }
+      return outlineItemClass;
+    });
     this.state = {
       isHighlighted: false
     };
   }
   render() {
     const {
-      isHighlighted
-    } = this.state;
-    const {
-      item
+      item,
+      isDisplayHorizontalBar
     } = this.props;
     const {
       type,
-      children
+      children,
+      isActive
     } = item;
-    const outlineItemClass = (0, _classnames.default)('sdoc-outline-item', {
-      'pl-5': type === 'header2',
-      'pl-7': type === 'header3',
-      'active': isHighlighted
-    });
+    const outlineItemClass = this.getOutlineItemClass();
+    if (isDisplayHorizontalBar) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: outlineItemClass
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)('wiki-outline-context', {
+          'active': isActive
+        }),
+        style: {
+          width: _constants.HEADER_OUTLINE_WIDTH_MAPPING[type]
+        }
+      }));
+    }
     return /*#__PURE__*/_react.default.createElement("div", {
       className: outlineItemClass,
       onClick: this.onItemClick,

package/dist/basic-sdk/outline/style.css

@@ -13,6 +13,71 @@
   pointer-events: all;
 }
 
+.wiki-outline-wrapper {
+  position: fixed;
+  right: 0;
+  margin: 0;
+  pointer-events: unset !important;
+  flex: none;
+  max-height: 400px;
+}
+
+.wiki-outline-wrapper .sdoc-outline {
+  width: 59px;
+}
+
+.wiki-outline-wrapper .sdoc-outline .sdoc-outline-list-container {
+  flex: none;
+  max-height: 400px;
+  overflow-y: hidden;
+}
+
+.wiki-outline-wrapper .sdoc-outline .sdoc-outline-list-container .sdoc-outline-item .wiki-outline-context {
+  background-color: rgb(227, 226, 224);
+  height: 2px;
+  box-shadow: none;
+  border-radius: 2px;
+}
+
+.wiki-outline-wrapper .sdoc-outline .sdoc-outline-list-container .sdoc-outline-item .active {
+  background-color: rgb(50, 48, 44);
+}
+
+.wiki-outline-wrapper .wiki-outline-popver {
+  position: absolute;
+  right: 0;
+  width: 242px;
+  max-height: 538px;
+  padding: 12px;
+  margin-right: 10px;
+  background-color: white;
+  box-shadow: rgba(15, 15, 15, 0.04) 0px 0px 0px 1px, rgba(15, 15, 15, 0.03) 0px 3px 6px, rgba(15, 15, 15, 0.06) 0px 9px 24px;
+  border: 1px solid rgba(55, 53, 47, 0.06);
+  border-radius: 14px;
+  overflow-y: auto;
+}
+
+.wiki-outline-wrapper .wiki-outline-popver .sdoc-outline-list-container {
+  padding: 6px;
+}
+
+.wiki-outline-wrapper .wiki-outline-popver .sdoc-outline-list-container .sdoc-outline-item {
+  color: rgb(120, 119, 116);
+  transition: color 0.15s;
+  cursor: pointer;
+  padding: 4px 6px 4px 4px;
+  font-size: 14px;
+}
+
+.wiki-outline-wrapper .wiki-outline-popver .sdoc-outline-list-container .wiki-outline-active {
+  color: rgb(35, 131, 226)
+}
+
+.wiki-outline-wrapper .wiki-outline-popver .sdoc-outline-list-container .sdoc-outline-item:hover {
+  background: rgba(55, 53, 47, 0.06);
+  border-radius: 6px;
+}
+
 .sdoc-outline {
   flex: 1;
   width: 220px;

package/dist/basic-sdk/outline/wiki-outline.js

@@ -0,0 +1,109 @@
+"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 _lodash = _interopRequireDefault(require("lodash.throttle"));
+var _reactI18next = require("react-i18next");
+var _useScrollContext = require("../hooks/use-scroll-context");
+var _outlineItem = _interopRequireDefault(require("./outline-item"));
+require("./style.css");
+const WikiOutline = _ref => {
+  let {
+    doc = []
+  } = _ref;
+  const scrollRef = (0, _useScrollContext.useScrollContext)();
+  const wikiOutlineRef = (0, _react.useRef)(null);
+  const [wikiOutlineList, setWikiOutlineList] = (0, _react.useState)([]);
+  const [isShowOutlinePopver, setIsShowOutlinePopver] = (0, _react.useState)(false);
+  const onMouseOver = (0, _react.useCallback)(() => {
+    if (!isShowOutlinePopver) {
+      setIsShowOutlinePopver(true);
+    }
+  }, [isShowOutlinePopver]);
+  const updateWikiOutlineList = (0, _react.useCallback)(() => {
+    const list = doc.filter(item => ['header1', 'header2', 'header3'].includes(item.type));
+    if (list.length === 0) return;
+    const newList = JSON.parse(JSON.stringify(list)); // The slateValue value in the document cannot be operated, so copy it for operation
+    const index = list.findIndex(item => {
+      const {
+        id
+      } = item;
+      const el = document.getElementById(id);
+      if (el) {
+        const {
+          bottom
+        } = el.getBoundingClientRect();
+        if (bottom >= 43) {
+          // 43 is Top toolbar height
+          return true;
+        }
+      }
+      return false;
+    });
+
+    // There is a title in the visible area
+    if (index !== -1) {
+      newList[index]['isActive'] = true;
+    }
+    // There is no title in the visible area
+    if (index === -1) {
+      const lastItemId = list[list.length - 1].id;
+      const lastItemEl = document.getElementById(lastItemId);
+      if (lastItemEl) {
+        const {
+          top
+        } = lastItemEl.getBoundingClientRect();
+        if (top < 0) {
+          newList[newList.length - 1]['isActive'] = true;
+        }
+      }
+    }
+    setWikiOutlineList([...newList]);
+  }, [doc]);
+  const onScroll = (0, _lodash.default)(() => {
+    updateWikiOutlineList();
+  }, 200);
+  (0, _react.useEffect)(() => {
+    updateWikiOutlineList();
+    let curRef = null;
+    curRef = scrollRef.current;
+    scrollRef.current.addEventListener('scroll', onScroll);
+    return () => {
+      curRef && curRef.removeEventListener('scroll', onScroll);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [doc]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-outline-wrapper wiki-outline-wrapper",
+    onMouseLeave: () => {
+      setIsShowOutlinePopver(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-outline"
+  }, wikiOutlineList.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-outline-list-container",
+    onMouseOver: onMouseOver
+  }, wikiOutlineList.map((item, index) => {
+    return /*#__PURE__*/_react.default.createElement(_outlineItem.default, {
+      key: index,
+      item: item,
+      isDisplayHorizontalBar: true
+    });
+  }))), isShowOutlinePopver && /*#__PURE__*/_react.default.createElement("div", {
+    className: "wiki-outline-popver",
+    ref: wikiOutlineRef
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-outline-list-container"
+  }, wikiOutlineList.map((item, index) => {
+    return /*#__PURE__*/_react.default.createElement(_outlineItem.default, {
+      key: index,
+      item: item
+    });
+  }))));
+};
+var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(WikiOutline);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "1.0.98",
+  "version": "1.0.99",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",