@seafile/seafile-editor 1.0.118 → 1.0.119-beta

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

@@ -38,15 +38,18 @@ const ArticleInfo = _ref => {
     }
   }, []);
   const resizeWidthEnd = (0, _react.useCallback)(width => {
-    const panelWidth = JSON.parse(window.localStorage.getItem('sf-editor-panel-width') || '{}');
-    window.localStorage.setItem('sf-editor-panel-width', JSON.stringify({
-      ...panelWidth,
-      width
+    const settings = JSON.parse(window.localStorage.getItem('sf-editor') || '{}');
+    window.localStorage.setItem('sf-editor', JSON.stringify({
+      ...settings,
+      panelWidth: width
     }));
   }, []);
   (0, _react.useEffect)(() => {
-    const panelWidth = JSON.parse(window.localStorage.getItem('sf-editor-panel-width', '{}')) || {};
-    const width = Math.max(MIN_PANEL_WIDTH, Math.min(parseInt(panelWidth.width, 10) || MIN_PANEL_WIDTH, MAX_PANEL_WIDTH));
+    const settings = JSON.parse(window.localStorage.getItem('sf-editor', '{}')) || {};
+    const {
+      panelWidth
+    } = settings;
+    const width = Math.max(MIN_PANEL_WIDTH, Math.min(parseInt(panelWidth, 10) || MIN_PANEL_WIDTH, MAX_PANEL_WIDTH));
     setWidth(width);
   }, []);
   const handleFileDetails = (0, _react.useCallback)(fileDetails => {

package/dist/containers/outline/index.js

@@ -5,15 +5,32 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.setOutlineSetting = exports.getOutlineSetting = exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactI18next = require("react-i18next");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _outlineItem = _interopRequireDefault(require("./outline-item"));
 var _useScrollContext = require("../../hooks/use-scroll-context");
 var _constants = require("../../constants");
 var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
 var _eventTypes = require("../../constants/event-types");
 require("./style.css");
+const getOutlineSetting = () => {
+  const currentValue = localStorage.getItem('sf-editor');
+  const config = currentValue ? JSON.parse(currentValue) : {};
+  const {
+    outlineOpen = false
+  } = config;
+  return outlineOpen;
+};
+exports.getOutlineSetting = getOutlineSetting;
+const setOutlineSetting = isShown => {
+  const currentValue = localStorage.getItem('sf-editor');
+  const config = currentValue ? JSON.parse(currentValue) : {};
+  config['outlineOpen'] = isShown;
+  localStorage.setItem('sf-editor', JSON.stringify(config));
+};
+exports.setOutlineSetting = setOutlineSetting;
 const getHeaderList = children => {
   const headerList = [];
   children.forEach(node => {
@@ -32,52 +49,22 @@ const Outline = _ref => {
   } = (0, _reactI18next.useTranslation)(_constants.TRANSLATE_NAMESPACE);
   const scrollRef = (0, _useScrollContext.useScrollContext)();
   const [headerList, setHeaderList] = (0, _react.useState)([]);
-  const [activeId, setActiveId] = (0, _react.useState)('');
   const [isShown, setIsShown] = (0, _react.useState)(false);
   const [scrollLeft, setScrollLeft] = (0, _react.useState)(0);
   (0, _react.useEffect)(() => {
     const headerList = getHeaderList(editor.children);
     setHeaderList(headerList);
   }, [editor.children]);
-  const handleScroll = (0, _react.useCallback)(e => {
-    const scrollTop = scrollRef.current.scrollTop;
-    const styles = getComputedStyle(scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current);
-    const paddingTop = parseInt(styles.paddingTop);
-    for (let i = 0; i < headerList.length; i++) {
-      const headerItem = headerList[i];
-      const dom = document.getElementById(headerItem.id);
-      const {
-        offsetTop,
-        offsetHeight
-      } = dom;
-      const styles = getComputedStyle(dom);
-      const marginTop = parseInt(styles.marginTop);
-      if (offsetTop + offsetHeight + marginTop > scrollTop - paddingTop) {
-        setActiveId(headerItem.id);
-        break;
-      }
-    }
-  }, [headerList, scrollRef]);
-  (0, _react.useEffect)(() => {
-    let observerRefValue = null;
-    if (scrollRef.current) {
-      scrollRef.current.addEventListener('scroll', handleScroll);
-      observerRefValue = scrollRef.current;
-    }
-    return () => {
-      observerRefValue.removeEventListener('scroll', handleScroll);
-    };
-  }, [handleScroll, scrollRef]);
-  const toggleShow = (0, _react.useCallback)(() => {
-    setIsShown(prevIsShown => {
-      const newIsShown = !prevIsShown;
-      setTimeout(() => {
-        const eventBus = _eventBus.default.getInstance();
-        eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.OUTLINE_STATE_CHANGED, newIsShown);
-      }, 0);
-      return newIsShown;
-    });
+  const updateOutlineState = (0, _react.useCallback)(nextState => {
+    setOutlineSetting(nextState);
+    setIsShown(nextState);
+    const eventBus = _eventBus.default.getInstance();
+    eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.OUTLINE_STATE_CHANGED);
   }, []);
+  const toggleShow = (0, _react.useCallback)(() => {
+    const nextState = !isShown;
+    updateOutlineState(nextState);
+  }, [isShown, updateOutlineState]);
   (0, _react.useEffect)(() => {
     if (!scrollRef.current) return;
     const updateScrollLeft = () => {
@@ -88,11 +75,21 @@ const Outline = _ref => {
       scrollRef.current.removeEventListener('scroll', updateScrollLeft);
     };
   }, [scrollRef]);
+  (0, _react.useEffect)(() => {
+    const outlineState = getOutlineSetting();
+    console.log(outlineState);
+    updateOutlineState(outlineState);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "sf-editor-outline",
+    className: (0, _classnames.default)('sf-editor-outline-wrapper', {
+      'active': isShown
+    }),
     style: {
       left: -scrollLeft
     }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-editor-outline"
   }, isShown && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-editor-outline-header"
   }, /*#__PURE__*/_react.default.createElement("h2", {
@@ -106,14 +103,13 @@ const Outline = _ref => {
     className: "sf-editor-outline-list-container"
   }, headerList.map((node, index) => /*#__PURE__*/_react.default.createElement(_outlineItem.default, {
     key: index,
-    node: node,
-    activeId: activeId
-  })))), !isShown && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    node: node
+  }))))), !isShown && /*#__PURE__*/_react.default.createElement("span", {
     id: "sf-editor-outline-menu",
-    className: "sf-editor-outline-menu sf-edito-tooltip iconfont icon-outline",
+    className: "sf-editor-outline-menu sf-editor-tooltip iconfont icon-outline",
     onClick: toggleShow
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "custom-tooltip"
-  }, t('Outline')))));
+  }, t('Outline'))));
 };
 var _default = exports.default = Outline;

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

@@ -10,23 +10,31 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 const OutlineItem = _ref => {
   let {
-    node,
-    activeId
+    node
   } = _ref;
+  const [isHighlighted, setIsHighlighted] = (0, _react.useState)(false);
+  const onMouseOver = (0, _react.useCallback)(() => {
+    setIsHighlighted(true);
+  }, []);
+  const onMouseOut = (0, _react.useCallback)(() => {
+    setIsHighlighted(false);
+  }, []);
   const onItemClick = (0, _react.useCallback)(() => {
     const {
       id
     } = node;
     document.getElementById(id).scrollIntoView();
   }, [node]);
-  const className = (0, _classnames.default)({
-    'outline-h2': node.type === 'header2',
-    'outline-h3': node.type === 'header3',
-    'active': node.id === activeId
+  const className = (0, _classnames.default)('sf-editor-outline-item', {
+    'pl-5': node.type === 'header2',
+    'pl-7': node.type === 'header3',
+    'active': isHighlighted
   });
   return /*#__PURE__*/_react.default.createElement("div", {
     className: className,
-    onClick: onItemClick
+    onClick: onItemClick,
+    onMouseOver: onMouseOver,
+    onMouseOut: onMouseOut
   }, node.children.map(child => child.text).join(''));
 };
 var _default = exports.default = OutlineItem;

package/dist/containers/outline/style.css

@@ -1,16 +1,26 @@
-.sf-editor-outline {
-  width: 220px;
+.sf-editor-outline-wrapper {
   display: flex;
+  margin: 20px 30px 20px 16px;
   min-height: 0;
-  flex-direction: column;
-  font-size: 14px;
+  pointer-events: none;
   position: fixed;
-  margin: 20px 30px 20px 16px;
+  bottom: 0;
   top: 100px;
+  z-index: 101;
+}
+
+.sf-editor-outline-wrapper.active {
+  pointer-events: all;
 }
 
-.sf-editor-outline.active {
-  pointer-events: all; 
+.sf-editor-outline {
+  display: flex;
+  flex: 1 1;
+  flex-direction: column;
+  font-size: 14px;
+  min-height: 0;
+  position: relative;
+  width: 220px;
 }
 
 .sf-editor-outline-header {
@@ -38,23 +48,27 @@
 }
 
 .sf-editor-outline-list-container {
-  padding: 0.5rem 0;
-  flex: 1 1;
   display: flex;
+  flex: 1 1;
   flex-direction: column;
+  list-style: none;
   overflow-x: hidden;
   overflow-y: auto;
-  max-height: 400px;
+  padding: .5rem 0;
+  word-break: break-word;
 }
 
 .sf-editor-outline-item {
-  padding: 4px 0;
-  padding-right: 6px;
-  max-width: 100%;
+  padding: 4px 6px 4px 0;
+  width: 100%;
   overflow-wrap: anywhere;
   cursor: pointer;
 }
 
+.sf-editor-outline-item.active {
+  color: #eb8205;
+}
+
 .sf-editor-outline-menu {
   line-height: 1;
   font-size: 14px;
@@ -70,7 +84,7 @@
   justify-content: center;
   position: absolute;
   top: 20px;
-  left: -15px;
+  left: -15px;;
   pointer-events: all;
 }
 
@@ -104,43 +118,7 @@
   color: #333;
 }
 
-.sf-editor-outline .outline-h2, 
-.sf-editor-outline .outline-h3 {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.sf-editor-outline .outline-h2 {
-  margin-left: 20px;
-  line-height: 2.5;
-  color:#364149;
-  white-space: nowrap;
-  cursor:pointer;
-}
-
-.sf-editor-outline .outline-h2:hover {
-  color: #eb8205;
-}
-
-.sf-editor-outline .outline-h3 {
-  margin-left: 40px;
-  line-height: 2.5;
-  color:#364149;
-  white-space: nowrap;
-  cursor:pointer;
-}
-
-.sf-editor-outline .outline-h3:hover {
-  color: #eb8205;
-}
-
 .sf-editor-outline .empty-container {
   margin-top: 10px;
   text-align: center;
 }
-
-.sf-editor-outline .outline-h2.active,
-.sf-editor-outline .outline-h3.active {
-  color: #eb8205;
-}

package/dist/editors/slate-editor/index.js

@@ -18,7 +18,7 @@ var _core = require("../../extension/core");
 var _useScrollContext = require("../../hooks/use-scroll-context");
 var _useInsertImage = _interopRequireDefault(require("../../hooks/use-insert-image"));
 var _common = require("../../utils/common");
-var _outline = _interopRequireDefault(require("../../containers/outline"));
+var _outline = _interopRequireWildcard(require("../../containers/outline"));
 var _eventTypes = require("../../constants/event-types");
 require("./style.css");
 const isMacOS = (0, _common.isMac)();
@@ -45,24 +45,39 @@ function SlateEditor(_ref) {
   (0, _useInsertImage.default)(editor);
   const decorate = (0, _extension.useHighlight)(editor);
 
-  //Adjust article container margin-left value according to isShown of the outline and width of window
-  const handleWindowResize = newIsShown => {
+  // Adjust article container margin-left value according to isShown of the outline and width of window
+  const handleWindowResize = (0, _react.useCallback)(() => {
     const rect = scrollRef.current.getBoundingClientRect();
     const articleElement = document.querySelector('.article');
     const articleRect = articleElement ? articleElement.getBoundingClientRect() : null;
-    if (newIsShown && articleRect && (rect.width - articleRect.width) / 2 < 280) {
+    const isOutlineShow = (0, _outline.getOutlineSetting)();
+    if (isOutlineShow && articleRect && (rect.width - articleRect.width) / 2 < 280) {
       setContainerStyle({
-        marginLeft: '280px'
+        marginLeft: 280
       });
     } else {
       setContainerStyle({});
     }
-  };
+  }, []);
   (0, _react.useEffect)(() => {
     const eventBus = _eventBus.default.getInstance();
     const unsubscribeOutline = eventBus.subscribe(_eventTypes.INTERNAL_EVENTS.OUTLINE_STATE_CHANGED, handleWindowResize);
-    return unsubscribeOutline;
+    const unsubscribeArticleInfo = eventBus.subscribe(_eventTypes.EXTERNAL_EVENTS.ON_ARTICLE_INFO_TOGGLE, handleWindowResize);
+    const unsubscribeHelpInfo = eventBus.subscribe(_eventTypes.EXTERNAL_EVENTS.ON_HELP_INFO_TOGGLE, handleWindowResize);
+    return () => {
+      unsubscribeHelpInfo();
+      unsubscribeArticleInfo();
+      unsubscribeOutline();
+    };
   }, [handleWindowResize]);
+  (0, _react.useEffect)(() => {
+    handleWindowResize();
+    window.addEventListener('resize', handleWindowResize);
+    return () => {
+      window.removeEventListener('resize', handleWindowResize);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   const onChange = (0, _react.useCallback)(value => {
     setSlateValue(value);
     if (editor.forceNormalize) return;

package/dist/utils/get-preview-content.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _slate = require("slate");
 var _seafileEditor = require("@seafile/seafile-editor");
+const PREVIEW_TEXT_LENGTH = 150;
 const getPreviewContent = function (content) {
   let isMarkdown = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   const slateNodes = isMarkdown ? (0, _seafileEditor.mdStringToSlate)(content) : content;
@@ -48,7 +49,8 @@ const getPreviewText = (content, previewContent) => {
   for (let index = 0; index < content.length; index++) {
     previewText += getTextOfNode(content[index]) + ' ';
     let textLength = previewText.length;
-    if (textLength >= 150) {
+    if (textLength >= PREVIEW_TEXT_LENGTH) {
+      previewText = textLength > PREVIEW_TEXT_LENGTH ? previewText.slice(0, PREVIEW_TEXT_LENGTH) : previewText;
       break;
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-editor",
-  "version": "1.0.118",
+  "version": "1.0.119beta",
   "description": "",
   "main": "dist/index.js",
   "scripts": {