@seafile/sdoc-editor 1.0.138 → 1.0.139

package/dist/basic-sdk/assets/css/sdoc-editor-article.css

@@ -1,5 +1,5 @@
 .sdoc-editor__article {
-  width: 794px;
+  width: 100%;
   min-height: 800px;
   padding: 40px 60px;
   background-color: #fff;

package/dist/basic-sdk/comment/components/comment-item-collapse-wrapper.js

@@ -71,6 +71,7 @@ const CommentItemCollapseWrapper = _ref => {
     });
   }, [editor, element, scrollRef]);
   const onItemClick = (0, _react.useCallback)(event => {
+    event.stopPropagation();
     if (event.target.className === _constants.COMMENT_URL_CLASSNAME) return;
     setCurrentCommentGroup(topLevelComment.id);
   }, [setCurrentCommentGroup, topLevelComment.id]);

package/dist/basic-sdk/comment/components/comment-item-wrapper.js

@@ -251,7 +251,8 @@ const CommentItemWrapper = _ref => {
     'active': isActive,
     'sdoc-resolved': comment.resolved,
     'd-flex flex-column': element,
-    'comment-item-detail-wrapper': isGlobalComment
+    'global-comment-item-detail-wrapper': isGlobalComment,
+    'comment-item-detail-wrapper': !isGlobalComment
   });
   const tip = comment.resolved ? 'Reopen_discussion' : 'Enter_reply_shift_Enter_for_new_line_Enter_to_send';
   const handleScrollToArticle = (0, _react.useCallback)(e => {

package/dist/basic-sdk/comment/components/comment-list.css

@@ -1,6 +1,7 @@
 .sdoc-comment-list-container {
   position: absolute;
   margin-top: 5px;
+  left: 14px;
 }
 
 .sdoc-comment-list-container .article.sdoc-comment-editor {
@@ -8,14 +9,31 @@
 }
 
 .sdoc-comment-list-container .comment-ui-container {
-  background-color: #edf2fa;
-  border-radius: 3px;
-  box-shadow: 0 0 2px rgba(0, 0, 0, .04);
-  padding: 16px 16px;
-  margin-bottom: 10px;
+  background-color: #FFF;
+  margin-bottom: 0px;
+  box-shadow: none;
+  padding: 16px;
+  border-radius: 0px;
   cursor: pointer;
 }
 
+/* comment detail list */
+.sdoc-comment-list-container .comment-item-detail-wrapper .comment-item-list {
+  margin-bottom: 16px;
+}
+
+.sdoc-comment-list-container .comment-item-detail-wrapper .comment-item-list .comment-item .comment-content {
+  margin-bottom: 0px;
+}
+
+.sdoc-comment-list-container .comment-item-detail-wrapper .comment-item {
+  padding: 16px 16px 0px;
+}
+
+.sdoc-comment-list-container .comment-ui-container.sdoc-resolved {
+  background: #f5f5f5;
+}
+
 .sdoc-comment-list-container .comment-ui-container.active {
   position: relative;
   left: -5px;
@@ -52,12 +70,12 @@
   overflow-y: auto;
   margin: 0;
   padding: 0;
-  padding-bottom: 16px;
+  padding-bottom: 0px;
 }
 
 .sdoc-comment-list-container .comment-item {
   position: relative;
-  padding: 16px 16px 0;
+  padding: 0px;
   cursor: pointer;
 }
 
@@ -82,14 +100,11 @@
   align-items: center;
 }
 
-.sdoc-comment-list-container .comment-item .comment-content {
+/* content */
+.comment-item .comment-content {
   margin-top: 10px;
-  margin-left: 41px;
-  word-break: keep-all;
+  margin-left: 35px;
   word-wrap: break-word;
-}
-
-.comment-item .comment-content {
   font-size: 14px;
 }
 
@@ -104,17 +119,65 @@
 }
 
 .comment-item .comment-content p {
-  margin: 0.8em 0;
+  margin: 0;
+}
+
+/* footer */
+.comment-item .comment-footer {
+  display: flex;
+  color: #666666;
+  font-size: 14px;
+  margin-left: 35px;
+  margin-top: 16px;
+}
+
+.comment-item .comment-footer .comments-count {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.comment-item .comment-footer .comments-count .comments-count-number {
+  margin-left: 8px;
+  margin-top: -2px;
+}
+
+.comment-item .comment-footer .comment-author {
+  margin-left: 20px;
+  align-items: initial;
+}
+
+.comment-item .comment-footer .comment-author__avatar {
+  width: 16px;
+  height: 16px;
+}
+
+.comment-item .comment-footer .comment-author__avatar img {
+  border-radius: 50%;
+}
+
+.comment-item .comment-footer .comment-author__latest-reply {
+  margin-left: 8px;
+}
+
+.comment-item .comment-footer .comment-author__latest-reply p {
+  margin: 0px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 220px;
 }
 
+/* header */
 .sdoc-comment-list-container .comment-header .comment-author__avatar {
   display: flex;
   align-items: center;
 }
 
-.sdoc-comment-list-container .comment-header .comment-author__avatar img {
-  width: 32px;
-  height: 32px;
+.sdoc-article-container .sdoc-comment-list-container .comment-item .comment-header .comment-author__avatar img {
+  margin-top: 3px;
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
 }
 
@@ -299,20 +362,6 @@
 }
 
 /* editor Side comment preview */
-.sdoc-article-container .sdoc-comment-list-container {
-  width: 312px;
-  /* font-size: 14px !important; */
-}
-
-.sdoc-article-container .comment-ui-container {
-  padding: 0;
-  margin: 0;
-}
-
-.sdoc-article-container .sdoc-comment-list-container .comment-item {
-  padding: 16px 16px 0px 16px;
-}
-
 .sdoc-article-container .sdoc-comment-list-container .comment-item .comment-editor-wrapper.pb-3 {
   padding-bottom: 0 !important;
 }
@@ -321,16 +370,6 @@
   align-items: flex-start;
 }
 
-.sdoc-article-container .sdoc-comment-list-container .comment-item .comment-content {
-  margin-left: 33px;
-}
-
-.sdoc-article-container .sdoc-comment-list-container .comment-item .comment-author__avatar img {
-  margin-top: 3px;
-  width: 24px;
-  height: 24px;
-}
-
 .sdoc-article-container .sdoc-comment-list-container .comment-item .comment-author__info {
   padding-left: 8px;
 }

package/dist/basic-sdk/comment/components/comment-list.js

@@ -13,40 +13,23 @@ var _useSelectionPosition = require("../../hooks/use-selection-position");
 var _useCommentContext = require("../hooks/comment-hooks/use-comment-context");
 var _commentEditor = _interopRequireDefault(require("./comment-editor"));
 var _commentItemWrapper = _interopRequireDefault(require("./comment-item-wrapper"));
-var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
-var _constants = require("../../constants");
+var _commentItemCollapseWrapper = _interopRequireDefault(require("./comment-item-collapse-wrapper"));
 require("./comment-list.css");
 const CommentList = _ref => {
+  var _topLevelComment$repl, _topLevelComment$repl2;
   let {
+    editor,
     comments,
-    selectionElement,
+    activeElement,
     hiddenComment,
     deleteUnseenNotifications
   } = _ref;
   const commentRef = (0, _react.useRef)(null);
-  const position = (0, _useSelectionPosition.useCommentListPosition)();
-  const [activeComment, setActiveComment] = (0, _react.useState)(false);
-  const handelArticleClick = (0, _react.useCallback)(event => {
-    if (event.target.className !== 'article') return;
-    hiddenComment();
-  }, [hiddenComment]);
-  // onMount: hidden comment
-  (0, _react.useEffect)(() => {
-    const eventBus = _eventBus.default.getInstance();
-    const unsubscribe = eventBus.subscribe(_constants.INTERNAL_EVENT.ARTICLE_CLICK, handelArticleClick);
-    return () => {
-      unsubscribe();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const onCommentClick = (0, _react.useCallback)(comment => {
-    if (activeComment && activeComment.id === comment.id) return;
-    setActiveComment(comment);
-    deleteUnseenNotifications && deleteUnseenNotifications(comment);
-  }, [activeComment, deleteUnseenNotifications]);
+  const position = (0, _useSelectionPosition.useCommentListPosition)(activeElement);
   const {
     dispatch
   } = (0, _useCommentContext.useCommentContext)();
+  const [isShowCommentDetail, setIsShowCommentDetail] = (0, _react.useState)(false);
   const insertComment = (0, _react.useCallback)(async (elementId, comment) => {
     const res = await _context.default.insertComment(comment);
     const {
@@ -69,7 +52,7 @@ const CommentList = _ref => {
   }, [dispatch]);
   const insertContent = (0, _react.useCallback)(content => {
     const user = _context.default.getUserInfo();
-    const elementId = selectionElement === null || selectionElement === void 0 ? void 0 : selectionElement.id;
+    const elementId = activeElement === null || activeElement === void 0 ? void 0 : activeElement.id;
     const time = (0, _dayjs.default)().format('YYYY-MM-DD HH:mm:ss');
     const comment = {
       comment: content,
@@ -81,51 +64,63 @@ const CommentList = _ref => {
       updated_at: time
     };
     insertComment(elementId, comment);
-  }, [insertComment, selectionElement]);
-  const resetActiveComment = (0, _react.useCallback)(e => {
+    setIsShowCommentDetail(true);
+  }, [insertComment, activeElement === null || activeElement === void 0 ? void 0 : activeElement.id]);
+  const onClickOutSide = (0, _react.useCallback)(e => {
     const commentWrapper = commentRef.current;
     const clickIsInComment = commentWrapper && commentWrapper.contains(e.target) && commentWrapper !== e.target;
     if (clickIsInComment) return;
-    setActiveComment(null);
-  }, []);
+    hiddenComment();
+  }, [hiddenComment]);
   (0, _react.useEffect)(() => {
-    document.addEventListener('click', resetActiveComment);
+    document.addEventListener('click', onClickOutSide);
     commentRef.current.scrollIntoView({
       behavior: 'smooth',
       block: 'nearest'
     });
     return () => {
-      document.removeEventListener('click', resetActiveComment);
+      document.removeEventListener('click', onClickOutSide);
     };
-  }, [resetActiveComment]);
+  }, [onClickOutSide]);
+  const setCurrentCommentGroup = (0, _react.useCallback)(() => {
+    setIsShowCommentDetail(true);
+  }, []);
+  const topLevelComment = (comments === null || comments === void 0 ? void 0 : comments.length) > 0 ? comments[0] : {};
+  const replyCount = topLevelComment === null || topLevelComment === void 0 ? void 0 : (_topLevelComment$repl = topLevelComment.replies) === null || _topLevelComment$repl === void 0 ? void 0 : _topLevelComment$repl.length;
+  const latestReply = ((_topLevelComment$repl2 = topLevelComment.replies) === null || _topLevelComment$repl2 === void 0 ? void 0 : _topLevelComment$repl2.length) > 0 ? topLevelComment.replies[topLevelComment.replies.length - 1] : null;
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: commentRef,
     id: "sdoc-comment-list-container",
     className: "sdoc-comment-list-container",
     style: {
-      top: position.y
+      top: position.y,
+      width: '300px'
     }
-  }, comments.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+  }, !isShowCommentDetail && Object.keys(topLevelComment).length > 0 && /*#__PURE__*/_react.default.createElement(_commentItemCollapseWrapper.default, {
+    key: comments.id,
+    editor: editor,
+    topLevelComment: topLevelComment,
+    replyCount: replyCount,
+    latestReply: latestReply,
+    setCurrentCommentGroup: setCurrentCommentGroup
+  }), !isShowCommentDetail && comments.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-ui-container active"
+  }, /*#__PURE__*/_react.default.createElement(_commentEditor.default, {
+    type: "comment",
+    globalComment: true,
+    insertContent: insertContent,
+    hiddenComment: hiddenComment,
+    commentRef: commentRef
+  })), isShowCommentDetail && comments.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: "comment-list"
   }, comments.map(comment => {
     if (comment.resolved) return null;
-    const isActive = activeComment && activeComment.id === comment.id;
     const props = {
       key: comment.id,
       comment: comment,
-      isActive: isActive,
-      onCommentClick: onCommentClick,
-      hiddenComment: () => setActiveComment(null)
+      isActive: true
     };
     return /*#__PURE__*/_react.default.createElement(_commentItemWrapper.default, props);
-  })), comments.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-ui-container active"
-  }, /*#__PURE__*/_react.default.createElement(_commentEditor.default, {
-    type: "comment",
-    globalComment: true,
-    insertContent: insertContent,
-    hiddenComment: hiddenComment,
-    commentRef: commentRef
   })));
 };
 var _default = exports.default = CommentList;

package/dist/basic-sdk/comment/components/editor-comment.js

@@ -14,56 +14,74 @@ var _commentList = _interopRequireDefault(require("./comment-list"));
 var _useSelectionElement = require("../../hooks/use-selection-element");
 var _useCommentContext = require("../hooks/comment-hooks/use-comment-context");
 var _elementsCommentCount = _interopRequireDefault(require("./elements-comment-count"));
+var _eventBus = _interopRequireDefault(require("../../../basic-sdk/utils/event-bus"));
+var _index = require("../utils/index");
 var _constants = require("../../extension/constants");
 var _constants2 = require("../../constants");
+var _constants3 = require("../../../basic-sdk/constants");
 const EditorComment = _ref => {
   let {
     deleteUnseenNotifications,
     editor
   } = _ref;
   (0, _useSelectionUpdate.default)();
-  const selectionElement = (0, _useSelectionElement.useSelectionElement)({
-    editor
-  });
-  const [isShowComments, setIsShowComments] = (0, _react.useState)(false);
-  const onAddCommentToggle = (0, _react.useCallback)(() => {
-    setIsShowComments(true);
-  }, []);
-
-  // When selectionElement update, recalculate comment's panel state
-  const [comments, setComments] = (0, _react.useState)([]);
   const {
     element_comments_map
   } = (0, _useCommentContext.useCommentContext)().commentsInfo;
-  (0, _react.useEffect)(() => {
-    var _element_comments_map;
-    const comments = (_element_comments_map = element_comments_map[selectionElement === null || selectionElement === void 0 ? void 0 : selectionElement.id]) === null || _element_comments_map === void 0 ? void 0 : _element_comments_map.map(item => {
-      item.replies = item.replies.filter(reply => !['True', 'False'].includes(reply.reply));
-      return item;
-    });
-    const unresolvedComments = comments && comments.filter(item => !item.resolved);
-    const hasComments = unresolvedComments && unresolvedComments.length > 0;
-    if (hasComments) {
-      setIsShowComments(true);
-      setComments(comments);
-      return;
+  const currentSelectionElement = (0, _useSelectionElement.useSelectionElement)({
+    editor
+  }); // The slate node of the current cursor line
+  const [activeElement, setActiveElement] = (0, _react.useState)(null); // The slate node currently activated by clicking
+  const [comments, setComments] = (0, _react.useState)([]);
+  const [isShowComments, setIsShowComments] = (0, _react.useState)(false);
+  const onAddCommentToggle = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    let activeElement = currentSelectionElement;
+    // Add comments to image elements in the image block
+    if (currentSelectionElement.type === _constants.ELEMENT_TYPE.IMAGE_BLOCK) {
+      activeElement = currentSelectionElement.children.find(item => (item === null || item === void 0 ? void 0 : item.type) === _constants.ELEMENT_TYPE.IMAGE);
     }
-    setComments([]);
-    setIsShowComments(false);
-  }, [element_comments_map, selectionElement, editor.selection]);
+    setActiveElement(activeElement);
+    setIsShowComments(true);
+  }, [currentSelectionElement]);
+  const onSelectElement = (0, _react.useCallback)(elementId => {
+    const activeElement = (0, _index.getCommentElementById)(elementId, editor);
+    setActiveElement(activeElement);
+    const unresolvedComments = element_comments_map[elementId].filter(item => !item.resolved);
+    setComments(unresolvedComments);
+    setIsShowComments(true);
+  }, [editor, element_comments_map]);
   const hiddenComment = (0, _react.useCallback)(() => {
     setComments([]);
     setIsShowComments(false);
   }, []);
+
+  // Comments are updated to modify the current comment
+  (0, _react.useEffect)(() => {
+    if (activeElement) {
+      const unresolvedComments = element_comments_map[activeElement.id].filter(item => !item.resolved);
+      setComments(unresolvedComments);
+      if (unresolvedComments.length === 0) {
+        setIsShowComments(false);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [element_comments_map]);
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    eventBus.dispatch(_constants3.INTERNAL_EVENT.RESIZE_ARTICLE, {
+      isHasComments: isShowComments
+    });
+  }, [isShowComments]);
   const cursor = (0, _helper.useCursorPosition)();
   const style = (0, _react.useMemo)(() => {
     var _Node$string;
-    if (selectionElement && ((_Node$string = _slate.Node.string(selectionElement)) === null || _Node$string === void 0 ? void 0 : _Node$string.length) === 0 && !selectionElement.children.find(n => n.type === _constants.ELEMENT_TYPE.IMAGE)) {
+    if (currentSelectionElement && ((_Node$string = _slate.Node.string(currentSelectionElement)) === null || _Node$string === void 0 ? void 0 : _Node$string.length) === 0 && !currentSelectionElement.children.find(n => n.type === _constants.ELEMENT_TYPE.IMAGE)) {
       return {
         top: '-99999px'
       };
     }
-    const comments = element_comments_map[selectionElement === null || selectionElement === void 0 ? void 0 : selectionElement.id];
+    const comments = element_comments_map[currentSelectionElement === null || currentSelectionElement === void 0 ? void 0 : currentSelectionElement.id];
     const unresolvedComments = comments && comments.filter(item => !item.resolved);
     const hasComments = unresolvedComments && unresolvedComments.length > 0;
     if (hasComments) return {
@@ -76,8 +94,7 @@ const EditorComment = _ref => {
       top: cursor.y,
       zIndex: _constants2.Z_INDEX.COMMENT_ADD
     };
-  }, [selectionElement, element_comments_map, cursor.y, isShowComments]);
-  if (!selectionElement) return null;
+  }, [currentSelectionElement, element_comments_map, cursor.y, isShowComments]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-comment-container"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -94,18 +111,16 @@ const EditorComment = _ref => {
     className: "sdocfont sdoc-add-comment mr-1"
   }))), /*#__PURE__*/_react.default.createElement(_elementsCommentCount.default, {
     elementCommentsMap: element_comments_map,
-    selectionElement: selectionElement,
-    editor: editor
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-list-wrapper",
-    style: isShowComments ? {
-      width: '294px'
-    } : null
-  }, isShowComments && /*#__PURE__*/_react.default.createElement(_commentList.default, {
+    activeElement: activeElement,
+    editor: editor,
+    onSelectElement: onSelectElement
+  }), isShowComments && /*#__PURE__*/_react.default.createElement(_commentList.default, {
+    editor: editor,
     comments: comments,
-    selectionElement: selectionElement,
+    activeElement: activeElement,
+    onSelectElement: onSelectElement,
     hiddenComment: hiddenComment,
     deleteUnseenNotifications: deleteUnseenNotifications
-  }))));
+  })));
 };
 var _default = exports.default = EditorComment;

package/dist/basic-sdk/comment/components/elements-comment-count/element-comment-count.js

@@ -9,7 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _core = require("../../../extension/core");
 var _helper = require("../../helper");
 var _mouseEvent = require("../../../utils/mouse-event");
-var _utils = require("../../utils");
 var _constants = require("../../../constants");
 var _useScrollContext = require("../../../hooks/use-scroll-context");
 const ElementCommentCount = _ref => {
@@ -17,15 +16,16 @@ const ElementCommentCount = _ref => {
     elementId,
     isElementSelected,
     commentsCount,
-    editor
+    editor,
+    onSelectElement
   } = _ref;
   const element = (0, _core.getNodeById)(editor.children, elementId);
   const [top, setTop] = (0, _react.useState)(-9999);
   const scrollRef = (0, _useScrollContext.useScrollContext)();
   const onClick = (0, _react.useCallback)(event => {
     (0, _mouseEvent.eventStopPropagation)(event);
-    (0, _utils.focusToCommentElement)(editor, element);
-  }, [editor, element]);
+    onSelectElement(elementId);
+  }, [elementId, onSelectElement]);
   const updatePosition = (0, _react.useCallback)(() => {
     if (!element) return;
     const scrollTop = scrollRef.current.scrollTop || 0;

package/dist/basic-sdk/comment/components/elements-comment-count/index.js

@@ -12,7 +12,8 @@ const ElementsCommentCount = _ref => {
   let {
     elementCommentsMap,
     selectionElement,
-    editor
+    editor,
+    onSelectElement
   } = _ref;
   if (!elementCommentsMap) return null;
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -29,7 +30,8 @@ const ElementsCommentCount = _ref => {
       elementId: elementId,
       isElementSelected: isSelected,
       commentsCount: unresolvedCommentCount,
-      editor: editor
+      editor: editor,
+      onSelectElement: onSelectElement
     });
   }));
 };

package/dist/basic-sdk/comment/components/global-comment/index.css

@@ -193,6 +193,7 @@
 /* custom */
 .sdoc-comment-drawer .sdoc-comment-list-container {
   margin-top: 0px;
+  left: 0;
 }
 
 .sdoc-comment-drawer .sdoc-comment-list-container .comment-ui-container {
@@ -211,10 +212,6 @@
   padding-bottom: 0px;
 }
 
-.sdoc-comment-drawer .sdoc-comment-list-container .comment-ui-container .comment-item {
-  padding: 0px
-}
-
 .sdoc-comment-drawer .sdoc-comment-list-container .comment-ui-container.active .comment-item:hover {
   background-color: unset;
 }
@@ -225,9 +222,8 @@
   margin-top: -5px;
 }
 
-.sdoc-comment-drawer .sdoc-comment-list-container .comment-item .comment-content{
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item .comment-content {
   margin-left: 35px;
-  margin-bottom: 16px;
   display: flex;
   align-items: center;
 }
@@ -237,13 +233,6 @@
   margin-right: 6px;
 }
 
-.sdoc-comment-drawer .sdoc-comment-list-container .comment-item .comment-footer {
-  display: flex;
-  color: #666666;
-  font-size: 14px;
-  margin-left: 35px;
-}
-
 .sdoc-comment-drawer .sdoc-comment-list-container .comment-item .comment-footer .comments-count {
   display: flex;
   align-items: center;
@@ -296,15 +285,20 @@
   border: 1px solid #dee3eb;
 }
 
-.sdoc-comment-drawer .sdoc-comment-list-container .comment-item-detail-wrapper {
+/* global detail */
+.sdoc-comment-drawer .sdoc-comment-list-container .global-comment-item-detail-wrapper {
   border-bottom: 0px
 }
 
-.sdoc-comment-drawer .sdoc-comment-list-container .comment-item-detail-wrapper:hover {
+.sdoc-comment-drawer .sdoc-comment-list-container .global-comment-item-detail-wrapper:hover {
   background-color: #FFF;
 }
 
-.sdoc-comment-drawer .sdoc-comment-list-container .comment-item-detail-wrapper .comment-operation .sdoc-confirm {
+.sdoc-comment-drawer .sdoc-comment-list-container .global-comment-item-detail-wrapper .comment-operation .sdoc-confirm {
   color: rgb(70, 77, 90);
   font-weight: unset;
 }
+
+.sdoc-comment-drawer .sdoc-comment-list-container .global-comment-item-detail-wrapper .comment-item:not(:last-child){
+  margin-bottom: 16px;
+}

package/dist/basic-sdk/comment/components/style.css

@@ -3,12 +3,12 @@
   position: absolute;
   left: 0;
   top: 0;
-  width: 794px;
+  width: 100%;
 }
 
 .sdoc-comment-container .comment-container-main {
   position: absolute;
-  width: 794px;
+  width: 100%;
   top: 0;
 }
 

package/dist/basic-sdk/comment/utils/index.js

@@ -18,9 +18,10 @@ Object.defineProperty(exports, "generatorNotificationKey", {
     return _notificationUtils.generatorNotificationKey;
   }
 });
-exports.searchCollaborators = void 0;
+exports.searchCollaborators = exports.getCommentElementById = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
 var _utils = require("../../../utils");
 var _constants = require("../../../constants");
 var _notificationUtils = require("./notification-utils");
@@ -251,4 +252,16 @@ const focusToCommentElement = (editor, element) => {
   };
   (0, _core.focusEditor)(editor, range);
 };
-exports.focusToCommentElement = focusToCommentElement;
+exports.focusToCommentElement = focusToCommentElement;
+const getCommentElementById = (elementId, editor) => {
+  let element = null;
+  const dom = document.querySelectorAll(`[data-id="${elementId}"]`)[0];
+  if (dom) {
+    const slateNode = _slateReact.ReactEditor.toSlateNode(editor, dom);
+    if (slateNode) {
+      element = slateNode;
+    }
+  }
+  return element;
+};
+exports.getCommentElementById = getCommentElementById;

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.HEADER_OUTLINE_WIDTH_MAPPING = 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.LEFT_OUTLINE_WIDTH = exports.INTERNAL_EVENT = exports.HEADER_OUTLINE_WIDTH_MAPPING = exports.FULL_WIDTH_MODE = exports.DOCUMENT_PLUGIN_EDITOR = exports.DIFF_VIEWER = exports.COMMENT_EDITOR_EDIT_AREA_WIDTH = exports.COMMENT_EDITOR = exports.ARTICLE_MIN_WIDTH = exports.ARTICLE_FULL_WIDTH = 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_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;
+exports.Z_INDEX = exports.WIKI_OUTLINE = exports.WIKI_EDITOR = exports.RIGHT_COMMENT_WIDTH = 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");
@@ -84,4 +84,13 @@ const REBASE_ORIGIN = exports.REBASE_ORIGIN = {
   MY: 'my'
 };
 const REBASE_MARKS = exports.REBASE_MARKS = [REBASE_MARK_KEY.ORIGIN, REBASE_MARK_KEY.REBASE_TYPE, REBASE_MARK_KEY.MODIFY_TYPE, REBASE_MARK_KEY.OLD_ELEMENT];
-const DIFF_VIEWER = exports.DIFF_VIEWER = 'diff_viewer';
+const DIFF_VIEWER = exports.DIFF_VIEWER = 'diff_viewer';
+const FULL_WIDTH_MODE = exports.FULL_WIDTH_MODE = 'full-width-mode';
+
+// left outline and right comment width
+const LEFT_OUTLINE_WIDTH = exports.LEFT_OUTLINE_WIDTH = 280;
+const RIGHT_COMMENT_WIDTH = exports.RIGHT_COMMENT_WIDTH = 314;
+
+// min width and full width
+const ARTICLE_MIN_WIDTH = exports.ARTICLE_MIN_WIDTH = '794px';
+const ARTICLE_FULL_WIDTH = exports.ARTICLE_FULL_WIDTH = 'calc(100% - 50px - 50px)'; // The left and right sides are 50

package/dist/basic-sdk/extension/plugins/code-block/helpers.js

@@ -17,12 +17,12 @@ const isMenuDisabled = (editor, readonly) => {
   const {
     selection
   } = editor;
-  if (selection == null) return true;
+  if (selection === null) return true;
   if ((0, _helper.getCalloutEntry)(editor)) return true;
   const selectedElems = (0, _core.getSelectedElems)(editor);
   const hasVoid = selectedElems.some(elem => editor.isVoid(elem));
   if (hasVoid) return true;
-  const isMatch = selectedElems.some(elem => {
+  const isMatch = selectedElems.every(elem => {
     const type = (0, _core.getNodeType)(elem);
     if (type === _constants.PARAGRAPH) return true;
     return false;

package/dist/basic-sdk/hooks/use-selection-position.js

@@ -5,24 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useSelectionPosition = exports.useCommentListPosition = void 0;
 var _slateReact = require("@seafile/slate-react");
-var _slate = require("@seafile/slate");
 var _useScrollContext = require("./use-scroll-context");
-const useSelectionPosition = () => {
+const useSelectionPosition = node => {
   const editor = (0, _slateReact.useSlateStatic)();
   if (!editor.selection) return {
     x: 0,
     y: 0
   };
-  const node = _slate.Editor.above(editor, {
-    mode: 'lowest',
-    match: n => _slate.Element.isElement(n) && _slate.Editor.isBlock(editor, n)
-  });
   if (!node) return {
     x: 0,
     y: 0
   };
   try {
-    const domNode = _slateReact.ReactEditor.toDOMNode(editor, node[0]);
+    const domNode = _slateReact.ReactEditor.toDOMNode(editor, node);
     const rect = domNode.getBoundingClientRect();
     return rect;
   } catch (error) {
@@ -34,8 +29,8 @@ const useSelectionPosition = () => {
   }
 };
 exports.useSelectionPosition = useSelectionPosition;
-const useCommentListPosition = () => {
-  const selectionPosition = useSelectionPosition();
+const useCommentListPosition = selectionElement => {
+  const selectionPosition = useSelectionPosition(selectionElement);
   const headerHeight = 100;
   const scrollRef = (0, _useScrollContext.useScrollContext)();
   const {

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

@@ -7,49 +7,67 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = ArticleContainer;
 var _react = _interopRequireWildcard(require("react"));
-var _constants = require("../constants");
-var _useScrollContext = require("../hooks/use-scroll-context");
-var _eventBus = _interopRequireDefault(require("../utils/event-bus"));
 var _outline = require("../outline");
+var _eventBus = _interopRequireDefault(require("../utils/event-bus"));
+var _useScrollContext = require("../hooks/use-scroll-context");
+var _localStorageUtils = _interopRequireDefault(require("../../utils/local-storage-utils"));
+var _fullWidthMode = require("../utils/full-width-mode");
+var _constants = require("../constants");
 function ArticleContainer(_ref) {
   let {
     editor,
     children
   } = _ref;
+  const scrollRef = (0, _useScrollContext.useScrollContext)();
   const articleRef = (0, _react.useRef)(null);
+  const articleFullWidthModeRef = (0, _react.useRef)({});
+  const [containerStyle, setContainerStyle] = (0, _react.useState)({});
   (0, _react.useEffect)(() => {
     editor.width = articleRef.current.children[0].clientWidth;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const scrollRef = (0, _useScrollContext.useScrollContext)();
-  const [containerStyle, setContainerStyle] = (0, _react.useState)({});
+  const handleWidthModeSize = (0, _react.useCallback)(() => {
+    const isFullWidth = _localStorageUtils.default.getItem(_constants.FULL_WIDTH_MODE);
+    if (!isFullWidth) return;
+    const containerStyle = (0, _fullWidthMode.getStyleByFullWidthMode)(articleFullWidthModeRef, scrollRef, editor);
+    setContainerStyle(containerStyle);
+  }, [editor, scrollRef]);
   const handleWindowResize = (0, _react.useCallback)(function () {
     let {
-      scrollIntoArticle = false
+      scrollIntoArticle = false,
+      isFullWidth = _localStorageUtils.default.getItem(_constants.FULL_WIDTH_MODE),
+      isHasComments
     } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const isShowOutline = (0, _outline.getOutlineSetting)();
+
+    // Full width mode
+    if (isFullWidth) {
+      articleFullWidthModeRef.current['isShowOutline'] = isShowOutline;
+      articleFullWidthModeRef.current['isHasComments'] = isHasComments;
+      handleWidthModeSize();
+      return;
+    }
+
+    // get state from local storage
+    const containerStyle = {
+      width: _constants.ARTICLE_MIN_WIDTH
+    };
     const rect = scrollRef.current.getBoundingClientRect();
     const articleRect = articleRef.current.getBoundingClientRect();
-    // get state from local storage
-    const isShowOutline = (0, _outline.getOutlineSetting)();
     if (isShowOutline && editor.editorType !== _constants.WIKI_EDITOR && (rect.width - articleRect.width) / 2 < 280) {
-      setContainerStyle({
-        marginLeft: '280px'
-      });
+      containerStyle['marginLeft'] = '280px';
     } else {
-      setContainerStyle({});
+      containerStyle['marginLeft'] = 'auto';
     }
+    setContainerStyle(containerStyle);
     if (scrollIntoArticle) {
       articleRef.current.scrollIntoView({
         inline: 'start',
         block: 'nearest'
       });
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor.editorType, scrollRef]);
-  const handelArticleClick = (0, _react.useCallback)(event => {
-    if (!articleRef.current.contains(event.target)) return;
-    const eventBus = _eventBus.default.getInstance();
-    eventBus.dispatch(_constants.INTERNAL_EVENT.ARTICLE_CLICK, event);
-  }, []);
   (0, _react.useEffect)(() => {
     const eventBus = _eventBus.default.getInstance();
     const unsubscribeOutline = eventBus.subscribe(_constants.INTERNAL_EVENT.OUTLINE_STATE_CHANGED, handleWindowResize);
@@ -77,13 +95,11 @@ function ArticleContainer(_ref) {
     className: "article sdoc-editor__article",
     style: articleStyle,
     id: "sdoc-editor-print-wrapper",
-    ref: articleRef,
-    onClick: handelArticleClick
+    ref: articleRef
   }, children), _react.default.Children.count(children) > 1 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "article sdoc-editor__article",
     style: articleStyle,
     id: "sdoc-editor-print-wrapper",
-    ref: articleRef,
-    onClick: handelArticleClick
+    ref: articleRef
   }, children[0]), [...children.slice(1)]));
 }

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

@@ -1,6 +1,7 @@
 .sdoc-outline-wrapper {
   position: fixed;
   top: 100px;
+  left: 0;
   bottom: 0;
   display: flex;
   margin: 20px 30px 20px 16px;
@@ -16,6 +17,7 @@
 .wiki-outline-wrapper {
   position: fixed;
   right: 0;
+  left: unset;
   margin: 0;
   pointer-events: unset !important;
   flex: none;

package/dist/basic-sdk/right-panel/index.css

@@ -3,7 +3,8 @@
   flex-direction: row;
   max-width: 620px;
   min-width: 360px;
-  position: relative;
+  position: absolute;
+  right: 0;
 }
 
 .sdoc-content-right-panel-wrapper .sdoc-content-right-panel {

package/dist/basic-sdk/utils/full-width-mode.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStyleByFullWidthMode = void 0;
+var _localStorageUtils = _interopRequireDefault(require("../../utils/local-storage-utils"));
+var _constants = require("../constants");
+const getStyleByFullWidthMode = (articleFullWidthModeRef, scrollRef, editor) => {
+  const {
+    isShowOutline,
+    isHasComments
+  } = (articleFullWidthModeRef === null || articleFullWidthModeRef === void 0 ? void 0 : articleFullWidthModeRef.current) || {};
+  const containerStyle = {};
+  containerStyle['width'] = _constants.ARTICLE_FULL_WIDTH;
+
+  // Has outline and comments
+  if (isShowOutline && editor.editorType !== _constants.WIKI_EDITOR && isHasComments) {
+    const rect = scrollRef.current.getBoundingClientRect();
+    const currentMaxWidth = rect.width - 100;
+    const leftWidth = _constants.LEFT_OUTLINE_WIDTH - 50;
+    const rightWidth = _constants.RIGHT_COMMENT_WIDTH - 50;
+    // Enough width to enable widescreen mode
+    if (currentMaxWidth - leftWidth - rightWidth > _constants.ARTICLE_MIN_WIDTH.slice(0, -2)) {
+      containerStyle['marginLeft'] = `${_constants.LEFT_OUTLINE_WIDTH}px`;
+      containerStyle['width'] = containerStyle['width'].slice(0, -1) + ` - ${leftWidth + rightWidth}px`;
+    } else {
+      containerStyle['width'] = _constants.ARTICLE_MIN_WIDTH;
+      _localStorageUtils.default.setItem(_constants.FULL_WIDTH_MODE, false);
+    }
+    return containerStyle;
+  }
+
+  // Has outline
+  if (isShowOutline && editor.editorType !== _constants.WIKI_EDITOR) {
+    containerStyle['marginLeft'] = `${_constants.LEFT_OUTLINE_WIDTH}px`;
+    const adjustWidth = ` - ${_constants.LEFT_OUTLINE_WIDTH - 50}px`; // One side is 50
+    containerStyle['width'] = containerStyle['width'].slice(0, -1) + adjustWidth;
+  }
+  // Has comments
+  if (isHasComments) {
+    containerStyle['marginRight'] = `${_constants.RIGHT_COMMENT_WIDTH}px`;
+    const adjustWidth = ` - ${_constants.RIGHT_COMMENT_WIDTH - 50}px`; // One side is 50
+    containerStyle['width'] = containerStyle['width'].slice(0, -1) + adjustWidth;
+  }
+  return containerStyle;
+};
+exports.getStyleByFullWidthMode = getStyleByFullWidthMode;

package/dist/components/doc-operations/more-operations.js

@@ -1,26 +1,29 @@
 "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 _DTableSwitch2 = _interopRequireDefault(require("dtable-ui-component/lib/DTableSwitch"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactI18next = require("react-i18next");
 var _reactstrap = require("reactstrap");
 var _printJs = _interopRequireDefault(require("@seafile/print-js"));
+var _menuShortcutIndicator = _interopRequireDefault(require("../../basic-sdk/extension/commons/menu-shortcut-indicator"));
+var _context = _interopRequireDefault(require("../../context"));
 var _basicSdk = require("../../basic-sdk");
+var _localStorageUtils = _interopRequireDefault(require("../../utils/local-storage-utils"));
+var _utils = require("../../utils");
 var _constants = require("../../constants");
-var _context = _interopRequireDefault(require("../../context"));
 var _constants2 = require("../../basic-sdk/constants");
-var _menuShortcutIndicator = _interopRequireDefault(require("../../basic-sdk/extension/commons/menu-shortcut-indicator"));
-var _utils = require("../../utils");
 const MoreOperations = _ref => {
   let {
     t
   } = _ref;
   const [isDropdownOpen, setIsDropdownOpen] = (0, _react.useState)(false);
+  const [isFullWidthMode, setIsFullWidthMode] = (0, _react.useState)(_localStorageUtils.default.getItem(_constants2.FULL_WIDTH_MODE));
   const parentFolderURL = _context.default.getSetting('parentFolderURL');
   const isPro = _context.default.getSetting('isPro');
   const isFreezed = _context.default.getSetting('isFreezed');
@@ -36,7 +39,12 @@ const MoreOperations = _ref => {
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const toggleDropdown = (0, _react.useCallback)(isDropdownOpen => {
+  const toggleDropdown = (0, _react.useCallback)((event, isDropdownOpen) => {
+    if (isDropdownOpen) {
+      // Clicking the fullscreen menu does not close the collapsed menu
+      const el = document.getElementById('sdoc-full-width-mode-wrapper');
+      if (el && el.contains(event.target)) return;
+    }
     setIsDropdownOpen(!isDropdownOpen);
   }, []);
   const handlePrint = (0, _react.useCallback)(() => {
@@ -68,10 +76,19 @@ const MoreOperations = _ref => {
     const printTexts = (0, _utils.isMac)() ? ['⌘', 'P'] : ['Ctrl', 'P'];
     return printTexts;
   }, []);
+  const onSwitchMode = (0, _react.useCallback)(() => {
+    const newMode = !isFullWidthMode;
+    _localStorageUtils.default.setItem(_constants2.FULL_WIDTH_MODE, newMode);
+    const eventBus = _basicSdk.EventBus.getInstance();
+    eventBus.dispatch(_constants2.INTERNAL_EVENT.RESIZE_ARTICLE, {
+      isFullWidth: newMode
+    });
+    setIsFullWidthMode(newMode);
+  }, [isFullWidthMode]);
   return /*#__PURE__*/_react.default.createElement(_reactstrap.Dropdown, {
     className: "sdoc-operator-folder",
     isOpen: isDropdownOpen,
-    toggle: () => toggleDropdown(isDropdownOpen)
+    toggle: event => toggleDropdown(event, isDropdownOpen)
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownToggle, {
     className: "op-item",
     tag: "span"
@@ -96,7 +113,15 @@ const MoreOperations = _ref => {
   }, t('Freeze_document')), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
     className: "sdoc-dropdown-menu-item",
     onClick: handleClickHistory
-  }, t('Document_history')), parentFolderURL && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  }, t('Document_history')), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
+    id: "sdoc-full-width-mode-wrapper",
+    className: "sdoc-dropdown-menu-item"
+  }, /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
+    checked: isFullWidthMode,
+    placeholder: t('Full_width_mode'),
+    switchClassName: "sdoc-full-width-mode-wrapper w-100",
+    onChange: onSwitchMode
+  })), parentFolderURL && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-operator-folder-divider"
   }), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
     className: "sdoc-dropdown-menu-item",

package/dist/components/doc-operations/style.css

@@ -55,3 +55,39 @@
   height: 1px;
   width: 100%;
 }
+
+.sdoc-operator-folder .sdoc-dropdown-menu .sdoc-dropdown-menu-item .sdoc-full-width-mode-wrapper .custom-switch {
+  padding-left: 0px;
+  width: 100%;
+  justify-content: space-between;
+  cursor: pointer;
+}
+
+.sdoc-operator-folder .sdoc-dropdown-menu .sdoc-dropdown-menu-item .sdoc-full-width-mode-wrapper .custom-switch .custom-switch-description {
+  margin-left: 0px;
+  color: unset;
+}
+
+.sdoc-operator-folder .sdoc-dropdown-menu .sdoc-dropdown-menu-item .sdoc-full-width-mode-wrapper .custom-switch .custom-switch-indicator {
+  width: 22px;
+  height: 12px;
+  border-radius: 6px;
+}
+
+.sdoc-operator-folder .sdoc-dropdown-menu .sdoc-dropdown-menu-item .sdoc-full-width-mode-wrapper .custom-switch .custom-switch-indicator:before {
+  height: 8px;
+  width: 8px;
+}
+
+.sdoc-operator-folder .sdoc-dropdown-menu .sdoc-dropdown-menu-item .sdoc-full-width-mode-wrapper .custom-switch .custom-switch-input:checked ~ .custom-switch-indicator:before {
+  left: 12px;
+}
+
+.sdoc-operator-folder .sdoc-dropdown-menu .sdoc-dropdown-menu-item .sdoc-full-width-mode-wrapper .custom-switch .custom-switch-input:checked~.custom-switch-indicator {
+  background: #ff8000;
+}
+
+.sdoc-operator-folder .sdoc-dropdown-menu .sdoc-dropdown-menu-item .sdoc-full-width-mode-wrapper .custom-switch .custom-switch-input:focus~.custom-switch-indicator {
+  box-shadow: 0 0 0 2px rgba(255, 128, 0, .25);
+  border-color: #ff8000;
+}

package/package.json

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

package/public/locales/cs/sdoc-editor.json

@@ -570,5 +570,6 @@
   "Two_column": "2 columns",
   "Three_column": "3 columns",
   "Four_column": "4 columns",
-  "Five_column": "5 columns"
+  "Five_column": "5 columns",
+  "Full_width_mode": "Full width mode"
 }

package/public/locales/de/sdoc-editor.json

@@ -570,5 +570,6 @@
   "Two_column": "2 columns",
   "Three_column": "3 columns",
   "Four_column": "4 columns",
-  "Five_column": "5 columns"
+  "Five_column": "5 columns",
+  "Full_width_mode": "Full width mode"
 }

package/public/locales/en/sdoc-editor.json

@@ -570,5 +570,6 @@
   "Two_column": "2 columns",
   "Three_column": "3 columns",
   "Four_column": "4 columns",
-  "Five_column": "5 columns"
+  "Five_column": "5 columns",
+  "Full_width_mode": "Full width mode"
 }

package/public/locales/es/sdoc-editor.json

@@ -570,5 +570,6 @@
   "Two_column": "2 columns",
   "Three_column": "3 columns",
   "Four_column": "4 columns",
-  "Five_column": "5 columns"
+  "Five_column": "5 columns",
+  "Full_width_mode": "Full width mode"
 }

package/public/locales/es_AR/sdoc-editor.json

@@ -570,5 +570,6 @@
   "Two_column": "2 columns",
   "Three_column": "3 columns",
   "Four_column": "4 columns",
-  "Five_column": "5 columns"
+  "Five_column": "5 columns",
+  "Full_width_mode": "Full width mode"
 }

package/public/locales/es_MX/sdoc-editor.json

@@ -570,5 +570,6 @@
   "Two_column": "2 columns",
   "Three_column": "3 columns",
   "Four_column": "4 columns",
-  "Five_column": "5 columns"
+  "Five_column": "5 columns",
+  "Full_width_mode": "Full width mode"
 }

package/public/locales/fr/sdoc-editor.json

@@ -570,5 +570,6 @@
   "Two_column": "2 columns",
   "Three_column": "3 columns",
   "Four_column": "4 columns",
-  "Five_column": "5 columns"
+  "Five_column": "5 columns",
+  "Full_width_mode": "Full width mode"
 }

package/public/locales/it/sdoc-editor.json

@@ -570,5 +570,6 @@
   "Two_column": "2 columns",
   "Three_column": "3 columns",
   "Four_column": "4 columns",
-  "Five_column": "5 columns"
+  "Five_column": "5 columns",
+  "Full_width_mode": "Full width mode"
 }

package/public/locales/ru/sdoc-editor.json

@@ -570,5 +570,6 @@
   "Two_column": "2 столбца",
   "Three_column": "3 столбца",
   "Four_column": "4 столбца",
-  "Five_column": "5 столбцов"
+  "Five_column": "5 столбцов",
+  "Full_width_mode": "Full width mode"
 }

package/public/locales/zh_CN/sdoc-editor.json

@@ -570,5 +570,6 @@
   "Two_column": "2 列",
   "Three_column": "3 列",
   "Four_column": "4 列",
-  "Five_column": "5 列"
+  "Five_column": "5 列",
+  "Full_width_mode": "全宽模式"
 }