@seafile/seafile-editor 1.0.117-beta.1 → 1.0.118-beta

package/dist/constants/event-types.js

@@ -5,16 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.INTERNAL_EVENTS = exports.EXTERNAL_EVENTS = void 0;
 const INTERNAL_EVENTS = exports.INTERNAL_EVENTS = {
-  ON_ARTICLE_INFO_TOGGLE: 'on_article_info_toggle',
   ON_MOUSE_ENTER_BLOCK: 'on_mouse_enter_block',
   ON_OPEN_LINK_MODAL: 'on_open_link_modal',
   ON_CLOSE_LINK_POPOVER: 'on_close_link_popover',
   ON_OPEN_FORMULA_DIALOG: 'on_open_formula_dialog',
   ON_SELECT_ALL_CELL: 'on_select_all_cell',
-  ON_TOGGLE_IMAGE_POPOVER: 'on_toggle_image_popover'
+  ON_TOGGLE_IMAGE_POPOVER: 'on_toggle_image_popover',
+  OUTLINE_STATE_CHANGED: 'outline_state_changed'
 };
 const EXTERNAL_EVENTS = exports.EXTERNAL_EVENTS = {
   ON_HELP_INFO_TOGGLE: 'on_help_info_toggle',
+  ON_ARTICLE_INFO_TOGGLE: 'on_article_info_toggle',
   ON_LINK_CLICK: 'on_link_click',
   ON_INSERT_IMAGE: 'on_insert_image',
   INSERT_IMAGE: 'insert_image'

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

@@ -5,50 +5,81 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = ArticleInfo;
+exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _outline = _interopRequireDefault(require("../outline"));
-var _slateReact = require("slate-react");
+var _resizeWidth = _interopRequireDefault(require("./resize-width"));
+var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
+var _eventTypes = require("../../constants/event-types");
 require("./style.css");
-const TAB_TYPES = {
-  OUTLINE: 'outline',
-  FILE_DETAIL: 'file_detail'
-};
-function ArticleInfo(_ref) {
+const MIN_PANEL_WIDTH = 360;
+const MAX_PANEL_WIDTH = 620;
+const ArticleInfo = _ref => {
   let {
-    children
+    isVisible
   } = _ref;
-  const editor = (0, _slateReact.useSlateStatic)();
-  const [activeTab, setActiveTab] = (0, _react.useState)(TAB_TYPES.OUTLINE);
-  const onOutlineClick = (0, _react.useCallback)(() => {
-    if (activeTab === TAB_TYPES.OUTLINE) return;
-    setActiveTab(TAB_TYPES.OUTLINE);
-  }, [activeTab]);
-  const onDetailClick = (0, _react.useCallback)(() => {
-    if (activeTab === TAB_TYPES.FILE_DETAIL) return;
-    setActiveTab(TAB_TYPES.FILE_DETAIL);
-  }, [activeTab]);
+  const [width, setWidth] = (0, _react.useState)(MIN_PANEL_WIDTH);
+  const [fileDetails, setFileDetails] = (0, _react.useState)({});
+  const containerWrapperStyle = (0, _react.useMemo)(() => {
+    const style = {
+      width,
+      zIndex: 101,
+      display: isVisible ? 'block' : 'none'
+    };
+    if (!style.width || style.width < MIN_PANEL_WIDTH) {
+      style.width = MIN_PANEL_WIDTH;
+    } else if (style.width > MAX_PANEL_WIDTH) {
+      style.width = MAX_PANEL_WIDTH;
+    }
+    return style;
+  }, [width, isVisible]);
+  const resizeWidth = (0, _react.useCallback)(width => {
+    if (width >= MIN_PANEL_WIDTH && width <= MAX_PANEL_WIDTH) {
+      setWidth(width);
+    }
+  }, []);
+  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
+    }));
+  }, []);
+  (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));
+    setWidth(width);
+  }, []);
+  const handleFileDetails = (0, _react.useCallback)(fileDetails => {
+    setFileDetails(fileDetails);
+  }, []);
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    const unsubscribeArticleInfoDetail = eventBus.subscribe(_eventTypes.EXTERNAL_EVENTS.ON_ARTICLE_INFO_TOGGLE, handleFileDetails);
+    return () => {
+      unsubscribeArticleInfoDetail();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const {
+    component: fileDetailsComponent,
+    props: fileDetailsProps
+  } = fileDetails || {};
   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)));
-}
+    className: "sf-article-info-container-wrapper",
+    style: containerWrapperStyle
+  }, /*#__PURE__*/_react.default.createElement(_resizeWidth.default, {
+    minWidth: MIN_PANEL_WIDTH,
+    maxWidth: MAX_PANEL_WIDTH,
+    resizeWidth: resizeWidth,
+    resizeWidthEnd: resizeWidthEnd
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-article-info-container",
+    style: {
+      width
+    }
+  }, fileDetailsComponent && /*#__PURE__*/_react.default.createElement(fileDetailsComponent, {
+    ...fileDetailsProps,
+    width
+  })));
+};
+var _default = exports.default = ArticleInfo;

package/dist/containers/article-info/resize-width/index.css

@@ -0,0 +1,37 @@
+.sf-editor-resize-width-handler {
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;  
+  width: 6px;
+}
+
+.sf-editor-resize-width-handler.resize-handler-placement-right {
+  left: 0;
+  right: auto;
+}
+
+.sf-editor-resize-width-handler:hover {
+  cursor: col-resize;
+}
+
+.sf-editor-resize-width-handler .sf-editor-resize-width-handler-content {
+  background-color: initial;
+  height: 100%;
+  position: relative;
+  width: 2px;
+}
+
+.sf-editor-resize-width-handler:hover .sf-editor-resize-width-handler-content {
+  background-color: #ccc;
+}
+
+.sf-editor-resize-width-handler .sf-editor-resize-width-handler-bar {
+  background-color: #2d7ff9;
+  border-radius: 3px;
+  content: "";
+  left: 50%;
+  margin-left: -3px;
+  position: absolute;
+  width: 6px;
+}

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

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+require("./index.css");
+const ResizeWidth = _ref => {
+  let {
+    minWidth,
+    maxWidth,
+    resizeWidth: resizeWidthAPI,
+    resizeWidthEnd
+  } = _ref;
+  const [isShowHandlerBar, setIsShowHandlerBar] = (0, _react.useState)(false);
+  const [drag, setDrag] = (0, _react.useState)(null);
+  const handlerRef = (0, _react.useRef)(null);
+  const handlerBarRef = (0, _react.useRef)(null);
+  const setHandlerBarTop = handlerTop => {
+    if (!handlerBarRef.current || handlerTop < 0) return;
+    handlerBarRef.current.style.top = handlerTop + 'px';
+  };
+  const setHandlerBarPosition = event => {
+    if (!handlerRef.current) return;
+    const {
+      top
+    } = handlerRef.current.getBoundingClientRect();
+    // 13 is the half of the handler's element height
+    const handlerTop = event.pageY - top - 13;
+    setHandlerBarTop(handlerTop);
+  };
+  const getWidthFromMouseEvent = event => {
+    return event.pageX || event.touches && event.touches[0] && event.touches[0].pageX || event.changedTouches && event.changedTouches[event.changedTouches.length - 1].pageX;
+  };
+  const calculateResizedWidth = event => {
+    const width = getWidthFromMouseEvent(event);
+    const resizedWidth = document.body.clientWidth - width;
+    if (minWidth && resizedWidth < minWidth || maxWidth && resizedWidth > maxWidth) return -1;
+    return resizedWidth;
+  };
+  const onResizeWidth = event => {
+    const resizedWidth = calculateResizedWidth(event);
+    if (resizedWidth < 0) return;
+    if (resizeWidthAPI) {
+      resizeWidthAPI(resizedWidth);
+    }
+  };
+  const onDrag = event => {
+    onResizeWidth(event);
+  };
+  const onDragStart = (0, _react.useCallback)(event => {
+    if (event && event.dataTransfer && event.dataTransfer.setData) {
+      event.dataTransfer.setData('text/plain', 'dummy');
+    }
+    return true;
+  }, []);
+  const onDragEnd = event => {
+    onResizeWidth(event);
+  };
+  const onMouseLeave = () => {
+    setIsShowHandlerBar(false);
+  };
+  const onMouseEnter = event => {
+    setIsShowHandlerBar(true);
+    setHandlerBarPosition(event);
+    if (handlerRef.current) {
+      handlerRef.current.addEventListener('mouseleave', onMouseLeave);
+    }
+  };
+  const onMouseOver = event => {
+    setHandlerBarPosition(event);
+  };
+  const onMouseDown = event => {
+    event.preventDefault && event.preventDefault();
+    const currDrag = onDragStart(event);
+    if (currDrag === null && event.button !== 0) return;
+    window.addEventListener('mouseup', onMouseUp);
+    window.addEventListener('mousemove', onMouseMove);
+    if (handlerRef.current) {
+      handlerRef.current.removeEventListener('mouseleave', onMouseLeave);
+    }
+    setDrag(currDrag);
+  };
+  const onMouseMove = event => {
+    event.preventDefault && event.preventDefault();
+    onDrag(event);
+  };
+  const onMouseUp = event => {
+    window.removeEventListener('mouseup', onMouseUp);
+    window.removeEventListener('mousemove', onMouseMove);
+    onDragEnd(event, drag);
+    setHandlerBarTop(-9999);
+    setDrag(null);
+    setIsShowHandlerBar(false);
+    if (resizeWidthEnd) {
+      const resizeWidth = calculateResizedWidth(event);
+      if (resizeWidth < 0) return;
+      resizeWidthEnd(resizeWidth);
+    }
+  };
+  (0, _react.useEffect)(() => {
+    return () => {
+      window.removeEventListener('mouseup', onMouseUp);
+      window.removeEventListener('mousemove', onMouseMove);
+    };
+    // eslint-disable-next-line
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-editor-resize-width-handler resize-handler-placement-right",
+    ref: handlerRef,
+    onMouseDown: onMouseDown,
+    onMouseOver: onMouseOver,
+    onMouseEnter: onMouseEnter,
+    onDrag: onDrag,
+    onDragStart: onDragStart,
+    onDragEnd: onDragEnd,
+    style: {
+      zIndex: 4
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-editor-resize-width-handler-content"
+  }, isShowHandlerBar && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-editor-resize-width-handler-bar",
+    ref: handlerBarRef,
+    style: {
+      height: 26
+    }
+  })));
+};
+var _default = exports.default = ResizeWidth;

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

@@ -1,54 +1,22 @@
-.sf-article-info-container {
-  flex: 1;
+.sf-article-info-container-wrapper {
   display: flex;
-  flex-direction: column;
-  background-color: #f5f5f5;
-  user-select: none;
-  min-height: 0;
-}
-
-.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;
+  flex-direction: row;
+  max-width: 620px;
+  min-width: 360px;
+  position: relative;
+  height: 100%;
 }
 
-.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 {
+  height: 100%;
 }
 
-.sf-article-info-container .sf-article-info-content {
-  flex: 1;
-  font-size: 0.937rem;
-  min-height: 0;
-  overflow: auto;
+.sf-article-info-container[style*="display: none"] {
+  opacity: 0;
+  pointer-events: none;
 }
 
-.sf-article-info-container .sf-article-info-content:hover {
-  overflow: auto;
+.sf-article-info-container[style*="display: block"] {
+  opacity: 1;
+  pointer-events: auto;
 }

package/dist/containers/hotkeys-helper/style.css

@@ -1,7 +1,9 @@
-
 .sf-editor-helper {
+  z-index:101;
+  position: relative;
+  width: 300px;
   height: 100%;
-  flex: 1 0 350px;
+  right: 0;
   background-color: #fff;
   overflow-y: auto;
   overflow-x: hidden;

package/dist/containers/outline/index.js

@@ -5,13 +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 => {
@@ -30,50 +49,65 @@ 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]);
+  const updateOutlineState = (0, _react.useCallback)(nextState => {
+    setOutlineSetting(nextState);
+    setIsShown(nextState);
+    const eventBus = _eventBus.default.getInstance();
+    eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.OUTLINE_STATE_CHANGED, nextState);
+  }, []);
+  const toggleShow = (0, _react.useCallback)(() => {
+    const nextState = !isShown;
+    updateOutlineState(nextState);
+  }, [isShown, updateOutlineState]);
   (0, _react.useEffect)(() => {
-    let observerRefValue = null;
-    if (scrollRef.current) {
-      scrollRef.current.addEventListener('scroll', handleScroll);
-      observerRefValue = scrollRef.current;
-    }
+    if (!scrollRef.current) return;
+    const updateScrollLeft = () => {
+      setScrollLeft(scrollRef.current.scrollLeft);
+    };
+    scrollRef.current.addEventListener('scroll', updateScrollLeft);
     return () => {
-      observerRefValue.removeEventListener('scroll', handleScroll);
+      scrollRef.current.removeEventListener('scroll', updateScrollLeft);
     };
-  }, [handleScroll, scrollRef]);
+  }, [scrollRef]);
+  (0, _react.useEffect)(() => {
+    const outlineState = getOutlineSetting();
+    updateOutlineState(outlineState);
+  }, [updateOutlineState]);
   return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('sf-editor-outline-wrapper', {
+      'active': isShown
+    }),
+    style: {
+      left: -scrollLeft
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-editor-outline"
-  }, headerList.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+  }, isShown && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-editor-outline-header"
+  }, /*#__PURE__*/_react.default.createElement("h2", {
+    className: "sf-editor-outline-header_title"
+  }, t('Outline')), /*#__PURE__*/_react.default.createElement("span", {
+    className: "sf-editor-outline-header_close iconfont icon-x",
+    onClick: toggleShow
+  })), headerList.length === 0 ? /*#__PURE__*/_react.default.createElement("div", {
     className: "empty-container"
-  }, t('No_outline')), headerList.length > 0 && headerList.map((node, index) => {
-    return /*#__PURE__*/_react.default.createElement(_outlineItem.default, {
-      key: index,
-      node: node,
-      activeId: activeId
-    });
-  }));
+  }, t('No_outline')) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-editor-outline-list-container"
+  }, headerList.map((node, index) => /*#__PURE__*/_react.default.createElement(_outlineItem.default, {
+    key: index,
+    node: node
+  }))))), !isShown && /*#__PURE__*/_react.default.createElement("span", {
+    id: "sf-editor-outline-menu",
+    className: "sf-editor-outline-menu sf-editor-tooltip iconfont icon-outline",
+    onClick: toggleShow
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "custom-tooltip"
+  }, 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,45 +1,128 @@
+.sf-editor-outline-wrapper {
+  display: flex;
+  margin: 20px 30px 20px 16px;
+  min-height: 0;
+  pointer-events: none;
+  position: fixed;
+  bottom: 0;
+  top: 100px;
+  z-index: 101;
+}
+
+.sf-editor-outline-wrapper.active {
+  pointer-events: all;
+}
+
 .sf-editor-outline {
-  border-left: 1px solid #ddd;
-  padding: .5rem 1rem .5rem 0;
+  display: flex;
+  flex: 1 1;
+  flex-direction: column;
+  font-size: 14px;
+  min-height: 0;
+  position: relative;
+  width: 220px;
 }
 
-.sf-editor-outline .outline-h2, 
-.sf-editor-outline .outline-h3 {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.sf-editor-outline.active {
+  pointer-events: all; 
 }
 
-.sf-editor-outline .outline-h2 {
-  margin-left: 20px;
-  line-height: 2.5;
-  color:#364149;
-  white-space: nowrap;
-  cursor:pointer;
+.sf-editor-outline-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.25rem 0;
+  color: #999;
+  border-bottom: 1px solid #dbdbdb;
 }
 
-.sf-editor-outline .outline-h2:hover {
-  color: #eb8205;
+.sf-editor-outline-header_title {
+  font-size: 14px;
+  line-height: 1.1;
+  margin: 0 !important;
+}
+
+.sf-editor-outline-header_close {
+  cursor: pointer;
+  font-size: 14px;
 }
 
-.sf-editor-outline .outline-h3 {
-  margin-left: 40px;
-  line-height: 2.5;
-  color:#364149;
-  white-space: nowrap;
-  cursor:pointer;
+.sf-editor-outline-header_close:hover {
+  color: #555;
 }
 
-.sf-editor-outline .outline-h3:hover {
+.sf-editor-outline-list-container {
+  display: flex;
+  flex: 1 1;
+  flex-direction: column;
+  list-style: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: .5rem 0;
+  word-break: break-word;
+}
+
+.sf-editor-outline-item {
+  padding: 4px 6px 4px 0;
+  width: 100%;
+  overflow-wrap: anywhere;
+  cursor: pointer;
+}
+
+.sf-editor-outline-item.active {
   color: #eb8205;
 }
 
-.sf-editor-outline .empty-container {
-  margin-top: 10px;
+.sf-editor-outline-menu {
+  line-height: 1;
+  font-size: 14px;
+  color: #888;
+  cursor: pointer;
+  width: 28px;
+  height: 28px;
+  background: #fff;
+  border-radius: 0 50% 50% 0;
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 20px;
+  left: -15px;;
+  pointer-events: all;
+}
+
+.sf-editor-outline-menu .custom-tooltip {
+  visibility: hidden;
+  opacity: 0;
+  width: 80px;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: #fff;
   text-align: center;
+  border-radius: 4px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 1;
+  left: 100%;
+  margin-left: 42px;
+  transform: translateX(-50%);
+  transition: opacity 0.3s;
 }
 
-.sf-editor-outline .outline-h2.active,
-.sf-editor-outline .outline-h3.active {
-  color: #eb8205;
+.sf-editor-outline-menu:hover .custom-tooltip {
+  visibility: visible;
+  opacity: 1;
+}
+
+.sf-editor-outline-menu.disabled {
+  opacity: .65;
+}
+
+.sf-editor-outline-menu:not(.disabled):hover {
+  color: #333;
+}
+
+.sf-editor-outline .empty-container {
+  margin-top: 10px;
+  text-align: center;
 }

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

@@ -19,8 +19,8 @@ function EditorHelp(_ref) {
   } = _ref;
   const [isShowHelpInfo, setIsShowHelpInfo] = (0, _react.useState)(false);
   const [isShowArticleInfo, setIsShowArticleInfo] = (0, _react.useState)(false);
-  const updateArticleInfoState = (0, _react.useCallback)(state => {
-    setIsShowArticleInfo(state);
+  const updateArticleInfoState = (0, _react.useCallback)(() => {
+    setIsShowArticleInfo(prevState => !prevState);
     setIsShowHelpInfo(false);
   }, []);
   const updateHelpInfoState = (0, _react.useCallback)(state => {
@@ -29,20 +29,20 @@ function EditorHelp(_ref) {
   }, []);
   (0, _react.useEffect)(() => {
     const eventBus = _eventBus.default.getInstance();
-    const unsubscribeArticleInfo = eventBus.subscribe(_eventTypes.INTERNAL_EVENTS.ON_ARTICLE_INFO_TOGGLE, updateArticleInfoState);
+    const unsubscribeArticleInfo = eventBus.subscribe(_eventTypes.EXTERNAL_EVENTS.ON_ARTICLE_INFO_TOGGLE, updateArticleInfoState);
     const unsubscribeHelpInfo = eventBus.subscribe(_eventTypes.EXTERNAL_EVENTS.ON_HELP_INFO_TOGGLE, updateHelpInfoState);
     return () => {
       unsubscribeHelpInfo();
       unsubscribeArticleInfo();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [updateArticleInfoState, updateHelpInfoState]);
   const containerClass = (0, _classnames.default)('sf-markdown-help-wrapper', {
     'active': isShowArticleInfo || isShowHelpInfo
   });
   return /*#__PURE__*/_react.default.createElement("div", {
     className: containerClass
-  }, isShowArticleInfo && /*#__PURE__*/_react.default.createElement(_articleInfo.default, {
-    children: children
+  }, /*#__PURE__*/_react.default.createElement(_articleInfo.default, {
+    isVisible: isShowArticleInfo
   }), isShowHelpInfo && /*#__PURE__*/_react.default.createElement(_hotkeysHelper.default, null));
 }

package/dist/editors/slate-editor/editor-help/style.css

@@ -1,15 +1,16 @@
 .sf-markdown-help-wrapper {
   display: none;
-  background-color: #fff;
-  border-left: 1px solid #eee;
-  flex: 0 0 300px;
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
-  width: 300px;
+  position: relative;
 }
 
 .sf-markdown-help-wrapper.active {
   display: flex;
   flex-direction: column;
+  position: relative;
+  right: 0;
+  width: auto;
+  overflow: visible;
 }

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

@@ -18,6 +18,8 @@ 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 _eventTypes = require("../../constants/event-types");
 require("./style.css");
 const isMacOS = (0, _common.isMac)();
 function SlateEditor(_ref) {
@@ -31,6 +33,7 @@ function SlateEditor(_ref) {
     children
   } = _ref;
   const [slateValue, setSlateValue] = (0, _react.useState)(value);
+  const [containerStyle, setContainerStyle] = (0, _react.useState)({});
   const scrollRef = (0, _react.useRef)(null);
   const editor = (0, _react.useMemo)(() => (0, _withPropsEditor.default)(_extension.baseEditor, {
     editorApi,
@@ -41,6 +44,33 @@ function SlateEditor(_ref) {
   }, [editor]);
   (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 = (0, _react.useCallback)(newIsShown => {
+    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) {
+      setContainerStyle({
+        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;
+  }, [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;
@@ -124,7 +154,12 @@ function SlateEditor(_ref) {
     ref: scrollRef,
     className: "sf-slate-scroll-container ".concat(isMacOS ? '' : 'isWin')
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "sf-slate-article-container"
+    className: "sf-slate-article-content"
+  }, /*#__PURE__*/_react.default.createElement(_outline.default, {
+    editor: editor
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-slate-article-container",
+    style: containerStyle
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "article"
   }, /*#__PURE__*/_react.default.createElement(_extension.SetNodeToDecorations, null), /*#__PURE__*/_react.default.createElement(_slateReact.Editable, {
@@ -133,7 +168,7 @@ function SlateEditor(_ref) {
     renderLeaf: _extension.renderLeaf,
     onKeyDown: eventProxy.onKeyDown,
     onCopy: eventProxy.onCopy
-  })))), /*#__PURE__*/_react.default.createElement(_editorHelp.default, {
+  }))))), /*#__PURE__*/_react.default.createElement(_editorHelp.default, {
     children: children
   })))));
 }

package/dist/editors/slate-editor/style.css

@@ -4,6 +4,7 @@
   flex-direction: column;
   min-height: 0;
   min-width: 0;
+  position:relative;
 }
 
 .sf-slate-editor-container .sf-slate-editor-toolbar {
@@ -29,10 +30,16 @@
 }
 
 .sf-slate-editor-container .sf-slate-scroll-container {
+  z-index: 100;
+  overflow-x: hidden;
+  overflow-y: auto;
   height: 100%;
   width: 100%;
   background-color: #fafaf9;
   overflow: auto;
+  flex: 1 1;
+  display: flex;
+  position: relative;
 }
 
 .sf-slate-editor-container .sf-slate-scroll-container.isWin::-webkit-scrollbar{
@@ -49,6 +56,13 @@
   border-radius: 10px;
 }
 
+.sf-slate-scroll-container .sf-slate-article-content{
+  display: flex;
+  position: absolute;
+  min-width: 1100px;
+  width: 100%;
+}
+
 .sf-slate-editor-container .sf-slate-article-container {
   flex: 1;
   position: relative;
@@ -57,6 +71,8 @@
   margin: 0 auto;
   padding-top: 20px;
   padding-bottom: 20px;
+  width: 794px;
+  top: 0px;
 }
 
 .sf-slate-editor-container .sf-slate-editor-content .article {
@@ -111,11 +127,6 @@
     margin: 20px !important;
     padding: 20px 30px;
   }
-
-  .sf-markdown-help-wrapper {
-    width: 250px !important;
-    flex: 0 0 250px;
-  }
 }
 
 @media (max-width: 768px) {

package/dist/extension/toolbar/header-toolbar/index.js

@@ -91,12 +91,7 @@ const Toolbar = _ref => {
     isSupportInsertSeafileImage: isSupportInsertSeafileImage
   })), isSupportFormula && /*#__PURE__*/_react.default.createElement(_menu10.default, commonProps), isSupportColumn && /*#__PURE__*/_react.default.createElement(_menu12.default, commonProps)), isShowSubTableMenu && /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, {
     className: "sf-menu-group sf-table-operations-group"
-  }, /*#__PURE__*/_react.default.createElement(_tableOperator.AlignmentDropDown, commonProps), /*#__PURE__*/_react.default.createElement(_tableOperator.ColumnOperationDropDownList, commonProps), /*#__PURE__*/_react.default.createElement(_tableOperator.RowOperationDropDownList, commonProps), /*#__PURE__*/_react.default.createElement(_tableOperator.RemoveTableMenu, commonProps)), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu11.default, commonProps)), isRichEditor && /*#__PURE__*/_react.default.createElement("div", {
-    className: "sf-slate-article-info-control",
-    onClick: updateArticleInfoState
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: sideIconClass
-  })), !isRichEditor && /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_tableOperator.AlignmentDropDown, commonProps), /*#__PURE__*/_react.default.createElement(_tableOperator.ColumnOperationDropDownList, commonProps), /*#__PURE__*/_react.default.createElement(_tableOperator.RowOperationDropDownList, commonProps), /*#__PURE__*/_react.default.createElement(_tableOperator.RemoveTableMenu, commonProps)), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu11.default, commonProps)), !isRichEditor && /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-slate-help-info-control",
     onClick: onHelpIconToggle
   }, /*#__PURE__*/_react.default.createElement("span", {

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

@@ -6,9 +6,9 @@ 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;
-  let isShowAllPreviewText = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   const slateNodes = isMarkdown ? (0, _seafileEditor.mdStringToSlate)(content) : content;
   let previewContent = {
     previewText: '',
@@ -20,7 +20,7 @@ const getPreviewContent = function (content) {
     }
   };
   getPreviewInfo(slateNodes, previewContent);
-  getPreviewText(slateNodes, previewContent, isShowAllPreviewText);
+  getPreviewText(slateNodes, previewContent);
   return previewContent;
 };
 const getPreviewInfo = (nodes, previewContent) => {
@@ -44,16 +44,14 @@ const getPreviewInfo = (nodes, previewContent) => {
     nodeIndex++;
   }
 };
-const getPreviewText = function (content, previewContent) {
-  let isShowAllPreviewText = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+const getPreviewText = (content, previewContent) => {
   let previewText = '';
-  console.log(isShowAllPreviewText);
   for (let index = 0; index < content.length; index++) {
-    const nodeText = getTextOfNode(content[index]) || '';
-    if (isShowAllPreviewText) {
-      previewText += nodeText + ' ';
-    } else {
-      previewText += nodeText.slice(0, 150) + ' ';
+    previewText += getTextOfNode(content[index]) + ' ';
+    let textLength = previewText.length;
+    if (textLength >= PREVIEW_TEXT_LENGTH) {
+      previewText = textLength > PREVIEW_TEXT_LENGTH ? previewText.slice(0, PREVIEW_TEXT_LENGTH) : previewText;
+      break;
     }
   }
   previewContent.previewText = previewText;

package/package.json

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