@seafile/seafile-editor 0.4.8 → 1.0.1

package/dist/assets/css/slate-editor.css

@@ -0,0 +1,57 @@
+.sf-slate-editor-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.sf-slate-editor-container .sf-slate-editor-toolbar {
+  display: flex;
+  justify-content: center;
+  height: 44px;
+  align-items: center;
+  padding: 0 10px;
+  background-color: #fff;
+  user-select: none;
+  border-bottom: 1px solid #e5e6e8;
+  position: relative;
+  z-index: 102;
+}
+
+.sf-slate-editor-container .sf-slate-editor-content {
+  width: 100%;
+  height: calc(100% - 44px);
+  display: flex;
+  background: #f5f5f5;
+  position: relative;
+  min-height: 0;
+}
+
+.sf-slate-editor-container .sf-slate-scroll-container {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+
+.sf-slate-editor-container .sf-slate-article-container {
+  flex: 1;
+  position: relative;
+  max-width: 950px;
+  min-width: 400px;
+  margin: 0 auto;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.sf-slate-editor-container .sf-slate-editor-content .article {
+  max-width: 950px;
+  min-height: 1200px;
+  padding: 40px 60px;
+  background-color: #fff;
+  border: 1px solid #e5e6e8;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
+}
+
+.sf-slate-editor-container .sf-slate-editor-content .article div:first-child {
+  outline: none;
+}

package/dist/constants/event-types.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.INTERNAL_EVENTS = exports.EXTERNAL_EVENTS = void 0;
+var INTERNAL_EVENTS = exports.INTERNAL_EVENTS = {
+  ON_ARTICLE_INFO_TOGGLE: 'on_article_info_toggle',
+  ON_MOUSE_ENTER_BLOCK: 'on_mouse_enter_block',
+  ON_OPEN_LINK_POPOVER: 'on_open_link_popover',
+  ON_CLOSE_LINK_POPOVER: 'on_close_link_popover',
+  ON_OPEN_FORMULA_DIALOG: 'on_open_formula_dialog'
+};
+var EXTERNAL_EVENTS = exports.EXTERNAL_EVENTS = {
+  ON_HELP_INFO_TOGGLE: 'on_help_info_toggle'
+};

package/dist/constants/hot-keys.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HELPER_HOTKEYS = void 0;
+var HELPER_HOTKEYS = exports.HELPER_HOTKEYS = [{
+  'Make_list': [['*/-', 'space']],
+  'Make_ordered_list': [['1.', 'space']],
+  'Insert_new_item': [['Enter']],
+  'Insert_child_in_item': [['Shift', 'Enter']],
+  'Increase_depth': [['Tab']]
+}, {
+  'Heading_1': [['#', 'space']],
+  'Heading_2': [['##', 'space']],
+  'Heading_3': [['###', 'space']],
+  'Heading_4': [['####', 'space']],
+  'Heading_5': [['#####', 'space']],
+  'Heading_6': [['######', 'space']]
+}, {
+  'Make_code_block': [['```']],
+  'Insert_new_line': [['Enter']],
+  'Escape_code_block': [['Ctrl', 'Enter'], ['Cmd', 'Enter']],
+  'Insert_indent': [['Tab']]
+}, {
+  'Make_block_quote': [['>', 'space']],
+  'Escape_block_quote': [['Enter']]
+}, {
+  'Insert_table_row': [['Enter']],
+  'Escape_table': [['Ctrl', 'Enter'], ['Cmd', 'Enter']]
+}, {
+  'Insert_formula': [['Ctrl', '$'], ['Cmd', '$']]
+}, {
+  'Bold': [['**bold** / __bold__', 'space']],
+  'Italic': [['*italic* / _italic_', 'space']],
+  'Italic_bold': [['***italic*** / ___italic___', 'space']],
+  'Inline_code': [['`code`', 'space']]
+}, {
+  'Save_file': [['Ctrl', 's'], ['Cmd', 's']]
+}, {
+  'Paste_screen_shot': [['Ctrl', 'v'], ['Cmd', 'v']],
+  'Drag_image_from_anywhere_to_upload_it': []
+}];

package/dist/containers/article-info/index.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ArticleInfo;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _outline = _interopRequireDefault(require("../outline"));
+var _slateReact = require("slate-react");
+require("./style.css");
+var TAB_TYPES = {
+  OUTLINE: 'outline',
+  FILE_DETAIL: 'file_detail'
+};
+function ArticleInfo(_ref) {
+  var children = _ref.children;
+  var editor = (0, _slateReact.useSlateStatic)();
+  var _useState = (0, _react.useState)(TAB_TYPES.OUTLINE),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    activeTab = _useState2[0],
+    setActiveTab = _useState2[1];
+  var onOutlineClick = (0, _react.useCallback)(function () {
+    if (activeTab === TAB_TYPES.OUTLINE) return;
+    setActiveTab(TAB_TYPES.OUTLINE);
+  }, [activeTab]);
+  var onDetailClick = (0, _react.useCallback)(function () {
+    if (activeTab === TAB_TYPES.FILE_DETAIL) return;
+    setActiveTab(TAB_TYPES.FILE_DETAIL);
+  }, [activeTab]);
+  console.log(children);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-article-info-container"
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: "sf-article-info-nav nav"
+  }, /*#__PURE__*/_react.default.createElement("li", {
+    className: "nav-item"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "nav-link ".concat(activeTab === TAB_TYPES.OUTLINE && 'active'),
+    onClick: onOutlineClick
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "iconfont icon-list-ul"
+  }))), /*#__PURE__*/_react.default.createElement("li", {
+    className: "nav-item"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "nav-link ".concat(activeTab === TAB_TYPES.FILE_DETAIL && 'active'),
+    onClick: onDetailClick
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: 'iconfont icon-info-circle'
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-article-info-content"
+  }, activeTab === TAB_TYPES.OUTLINE && /*#__PURE__*/_react.default.createElement(_outline.default, {
+    editor: editor
+  }), activeTab === TAB_TYPES.FILE_DETAIL && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children)));
+}

package/dist/containers/article-info/style.css

@@ -0,0 +1,52 @@
+.sf-article-info-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: #f5f5f5;
+  user-select: none;
+}
+
+.sf-article-info-container .nav {
+  padding: 10px 0;
+  min-width: 125px;
+  height: 36px;
+  border-bottom: 1px solid #eee;
+  background-color: #fff;
+  justify-content: space-around;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+}
+
+.sf-article-info-container .nav .nav-item {
+  padding: 0 0.75rem;
+}
+
+.sf-article-info-container .nav .nav-link {
+  padding: 0 0.75rem;
+  transition: 0.3s color;
+  margin-right: 0;
+}
+
+.sf-article-info-container .nav-link {
+  color: #888;
+}
+
+.sf-article-info-container .nav .nav-link.active {
+  color: #ff9800;
+  border-bottom: 0;
+}
+
+.sf-article-info-container .nav .iconfont {
+  font-weight: 700;
+  font-size: 0.875rem;
+}
+
+.sf-article-info-container .sf-article-info-content {
+  flex: 1;
+  font-size: 0.937rem;
+  overflow: hidden;
+}
+
+.sf-article-info-container .sf-article-info-content:hover {
+  overflow: auto;
+}

package/dist/containers/custom/get-event-transfer.js

@@ -1,3 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 var getEventTransfer = function getEventTransfer(data) {
   var fragmentString = data.getData('application/x-slate-fragment');
   var textContent = data.getData('text') || data.getData('text/plain') || '';
@@ -9,7 +15,6 @@ var getEventTransfer = function getEventTransfer(data) {
    *  compat old version slate: if clipboard content is old version slate fragment
    *  return  html content
    */
-
   var files = data.files;
   var type = 'text';
   // Paste rtf format content which copied from PPT or Word or Excel as text to document
@@ -30,4 +35,4 @@ var getEventTransfer = function getEventTransfer(data) {
     files: files
   };
 };
-export default getEventTransfer;
+var _default = exports.default = getEventTransfer;

package/dist/containers/custom/set-event-transfer.js

@@ -1,11 +1,17 @@
-import { Node } from 'slate';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slate = require("slate");
 var TRANSFER_TYPES = {
   fragment: 'application/x-slate-fragment',
   html: 'text/html',
   text: 'text/plain'
 };
 
-// tranfrom slate fragment and write to clipboard
+// transform slate fragment and write to clipboard
 function setEventTransfer(event, type, content) {
   var mime = TRANSFER_TYPES[type];
   var transfer = event.dataTransfer || event.clipboardData;
@@ -16,7 +22,7 @@ function setEventTransfer(event, type, content) {
     var texts = '';
     var textItem = '';
     content.forEach(function (element) {
-      textItem = Node.text(element).replace(/\ufeff/, '');
+      textItem = _slate.Node.string(element).replace(/\ufeff/, '');
       texts += textItem + '\r\n';
     });
     transfer.setData('text', texts);
@@ -27,4 +33,4 @@ function setEventTransfer(event, type, content) {
     transfer.setData('text', content);
   }
 }
-export default setEventTransfer;
+var _default = exports.default = setEventTransfer;

package/dist/containers/hotkeys-helper/classify-hotkeys.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ClassifyHotkeys;
+var _react = _interopRequireDefault(require("react"));
+var _common = require("../../utils/common");
+function ClassifyHotkeys(_ref) {
+  var title = _ref.title,
+    shortcutData = _ref.shortcutData,
+    shortcutDataNames = _ref.shortcutDataNames;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-editor-classify-hotkeys"
+  }, /*#__PURE__*/_react.default.createElement("h5", {
+    className: "hotkey-type"
+  }, title), /*#__PURE__*/_react.default.createElement("ul", {
+    className: "hotkey-list"
+  }, Object.keys(shortcutData).map(function (key) {
+    var shortcutName = shortcutDataNames[key];
+    var hotkeys = shortcutData[key];
+    if (hotkeys.length !== 0) {
+      hotkeys = hotkeys.length > 1 && (0, _common.isMac)() ? hotkeys[1] : hotkeys[0];
+    }
+    return /*#__PURE__*/_react.default.createElement("li", {
+      className: "hotkey-shortcuts",
+      key: shortcutName
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "hotkey-shortcuts-left"
+    }, shortcutName), /*#__PURE__*/_react.default.createElement("div", {
+      className: "hotkey-shortcuts-right"
+    }, hotkeys[0] && /*#__PURE__*/_react.default.createElement("div", {
+      className: "key hotkey-first"
+    }, hotkeys[0]), hotkeys[1] && /*#__PURE__*/_react.default.createElement("div", {
+      className: "key hotkey-second"
+    }, hotkeys[1])));
+  })));
+}

package/dist/containers/hotkeys-helper/index.js

@@ -0,0 +1,52 @@
+"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 = HotkeysHelper;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _classifyHotkeys = _interopRequireDefault(require("./classify-hotkeys"));
+var _hotKeys = require("../../constants/hot-keys");
+var _eventTypes = require("../../constants/event-types");
+var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
+require("./style.css");
+function HotkeysHelper() {
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var useHelp = t('userHelp', {
+    returnObjects: true
+  });
+  var title = useHelp.title,
+    userHelpData = useHelp.userHelpData;
+  var onCloseClick = (0, _react.useCallback)(function () {
+    var eventBus = _eventBus.default.getInstance();
+    eventBus.dispatch(_eventTypes.EXTERNAL_EVENTS.ON_HELP_INFO_TOGGLE, false);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-editor-helper"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-editor-helper__header"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "title"
+  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    className: "help-close",
+    onClick: onCloseClick
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "iconfont icon-times-circle"
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-editor-helper__content"
+  }, userHelpData.map(function (item, index) {
+    var shortcutData = _hotKeys.HELPER_HOTKEYS[index];
+    var title = item.shortcutType,
+      shortcutDataNames = item.shortcutData;
+    return /*#__PURE__*/_react.default.createElement(_classifyHotkeys.default, {
+      key: "use-hotkey-".concat(index),
+      title: title,
+      shortcutData: shortcutData,
+      shortcutDataNames: shortcutDataNames
+    });
+  })));
+}

package/dist/{assets/css/user-help.css → containers/hotkeys-helper/style.css}

@@ -1,17 +1,17 @@
 
-.seafile-editor-help {
-  width: 250px;
+.sf-editor-helper {
   height: 100%;
-  flex: 0 0 350px;
+  flex: 1 0 350px;
   background-color: #fff;
   overflow-y: auto;
   overflow-x: hidden;
   border-left: 1px solid #eee;
 }
 
-.seafile-editor-help .help-header{
+.sf-editor-helper__header {
   height: 50px;
   background-color: rgb(250,250,249);
+  display: flex;
   justify-content: space-between;
   padding: 0 10px;
   box-sizing: border-box;
@@ -20,21 +20,16 @@
   font-size: 1rem;
 }
 
-.seafile-editor-help .help-title {
+.sf-editor-helper__header .title {
   font-weight: bolder;
   margin-bottom: 0;
 }
 
-.seafile-editor-help .help-close {
-  font-weight: normal;
-  color: #b9b9b9;
-}
-
-.seafile-editor-help .help-close:hover {
-  color: #888;
+.sf-editor-helper__header .help-close {
+  cursor: pointer;
 }
 
-.seafile-editor-help .help-content {
+.sf-editor-helper__content {
   height: calc(100% - 50px);
   overflow-y: auto;
   padding: 0 15px;
@@ -42,28 +37,45 @@
   font-size: 0.8rem;
 }
 
-.seafile-editor-help .help-shortcut {
+.sf-editor-helper .sf-editor-classify-hotkeys {
   display: flex;
-  border-bottom: 1px solid #eee;
+  flex-direction: column;
   justify-content: space-between;
   color: #2c2d30;
+  /* border-bottom: 1px solid #eee; */
+  /* padding: 10px 0; */
+}
+
+.sf-editor-helper .sf-editor-classify-hotkeys .hotkey-type {
+  border-bottom: 1px solid #eee;
+  line-height: 2;
+  font-weight: bolder;
+  margin: 10px 0 0 0;
+}
+
+.sf-editor-helper .sf-editor-classify-hotkeys .hotkey-list {
+  list-style: none;
+  padding: 0;
+}
+
+.sf-editor-helper .sf-editor-classify-hotkeys .hotkey-shortcuts {
+  display: flex;
+  justify-content: space-between;
   padding: 10px 0;
+  border-bottom: 1px solid #eee;
+  color: #2c2d30;
 }
 
-.seafile-editor-help .help-shortcut-left {
+.sf-editor-helper .sf-editor-classify-hotkeys .hotkey-shortcuts-left {
   word-break: break-all;
   line-height: 30px;
 }
 
-.seafile-editor-help .help-content .help-shortcut-type {
-  border-bottom: 1px solid #eee;
-  /*height: 50px;*/
-  line-height: 2;
-  font-weight: bolder;
-  margin: 10px 0 0 0;
+.sf-editor-helper .sf-editor-classify-hotkeys .hotkey-shortcuts-right {
+  min-width: max-content;
 }
 
-.seafile-editor-help .help-shortcut .key {
+.sf-editor-helper .sf-editor-classify-hotkeys .hotkey-shortcuts-right .key {
   display: inline-block;
   border-radius: 3px;
   background-color: #e8e8e8;
@@ -75,10 +87,6 @@
   line-height: 20px;
 }
 
-.seafile-editor-help .help-shortcut-right {
-  min-width: max-content;
-}
-
-.seafile-editor-help .help-shortcut-right-container:not(:first-child) {
+/* .sf-editor-helper .sf-editor-classify-hotkeys .hotkey-shortcuts-right:not(:first-child) {
   margin-top: 10px;
-}
+} */

package/dist/containers/loading/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createSuper"));
+var _react = _interopRequireDefault(require("react"));
+require("./style.css");
+var Loading = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(Loading, _React$Component);
+  var _super = (0, _createSuper2.default)(Loading);
+  function Loading() {
+    (0, _classCallCheck2.default)(this, Loading);
+    return _super.apply(this, arguments);
+  }
+  (0, _createClass2.default)(Loading, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "empty-loading-page"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "lds-ripple page-centered"
+      }, /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null)));
+    }
+  }]);
+  return Loading;
+}(_react.default.Component);
+var _default = exports.default = Loading;

package/dist/containers/loading/style.css

@@ -0,0 +1,49 @@
+.empty-loading-page {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+}
+
+.page-centered {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  /* bring your own prefixes */
+  transform: translate(-50%, -50%);
+}
+
+.lds-ripple {
+  display: inline-block;
+  position: relative;
+  width: 64px;
+  height: 64px;
+}
+
+.lds-ripple div {
+  position: absolute;
+  border: 4px solid #eb8205;
+  opacity: 1;
+  border-radius: 50%;
+  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+
+.lds-ripple div:nth-child(2) {
+  animation-delay: -0.5s;
+}
+
+@keyframes lds-ripple {
+  0% {
+    top: 28px;
+    left: 28px;
+    width: 0;
+    height: 0;
+    opacity: 1;
+  }
+  100% {
+    top: -1px;
+    left: -1px;
+    width: 58px;
+    height: 58px;
+    opacity: 0;
+  }
+}

package/dist/containers/outline/index.js

@@ -0,0 +1,80 @@
+"use strict";
+
+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 _reactI18next = require("react-i18next");
+var _outlineItem = _interopRequireDefault(require("./outline-item"));
+var _useScrollContext = require("../../hooks/use-scroll-context");
+require("./style.css");
+var getHeaderList = function getHeaderList(children) {
+  var headerList = [];
+  children.forEach(function (node) {
+    if (node.type === 'header2' || node.type === 'header3') {
+      headerList.push(node);
+    }
+  });
+  return headerList;
+};
+var Outline = function Outline(_ref) {
+  var editor = _ref.editor;
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var scrollRef = (0, _useScrollContext.useScrollContext)();
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    headerList = _useState2[0],
+    setHeaderList = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    activeId = _useState4[0],
+    setActiveId = _useState4[1];
+  (0, _react.useEffect)(function () {
+    var headerList = getHeaderList(editor.children);
+    setHeaderList(headerList);
+  }, [editor.children]);
+  var handleScroll = (0, _react.useCallback)(function (e) {
+    var scrollTop = scrollRef.current.scrollTop;
+    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 dom = document.getElementById(headerItem.id);
+      var offsetTop = dom.offsetTop,
+        offsetHeight = dom.offsetHeight;
+      var _styles = getComputedStyle(dom);
+      var marginTop = parseInt(_styles.marginTop);
+      if (offsetTop + offsetHeight + marginTop > scrollTop - paddingTop) {
+        setActiveId(headerItem.id);
+        break;
+      }
+    }
+  }, [headerList, scrollRef]);
+  (0, _react.useEffect)(function () {
+    var observerRefValue = null;
+    if (scrollRef.current) {
+      scrollRef.current.addEventListener('scroll', handleScroll);
+      observerRefValue = scrollRef.current;
+    }
+    return function () {
+      observerRefValue.removeEventListener('scroll', handleScroll);
+    };
+  }, [handleScroll, scrollRef]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-editor-outline"
+  }, headerList.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "empty-container"
+  }, t('No_out_line')), headerList.length > 0 && headerList.map(function (node, index) {
+    return /*#__PURE__*/_react.default.createElement(_outlineItem.default, {
+      key: index,
+      node: node,
+      activeId: activeId
+    });
+  }));
+};
+var _default = exports.default = Outline;