@seafile/sdoc-editor 0.3.21 → 0.3.23

package/dist/api/seafile-api.js

@@ -29,14 +29,16 @@ class SeafileAPI {
     var d = Date.now();
     return 'image-' + d.toString() + file.name.slice(file.name.lastIndexOf('.'));
   }
-  uploadSdocImage(docUuid, imageFile) {
+  uploadSdocImage(docUuid, imageFiles) {
     const url = '/api/v2.1/seadoc/upload-image/' + docUuid + '/';
     const form = new FormData();
-    const fileName = this.getImageFileNameWithTimestamp(imageFile);
-    const file = new File([imageFile], fileName, {
-      type: imageFile.type
-    });
-    form.append('file', file);
+    for (const fileItem of imageFiles) {
+      const fileName = this.getImageFileNameWithTimestamp(fileItem);
+      const file = new File([fileItem], fileName, {
+        type: fileItem.type
+      });
+      form.append('file', file);
+    }
     return this.req.post(url, form);
   }
   getSdocDownloadImageUrl(docUuid, imageName) {

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

@@ -28,6 +28,10 @@
   padding-left: 1.2em !important;
 }
 
+.sdoc-editor-container .article .list-container .sdoc-li-blod::marker {
+  font-weight: bold;
+}
+
 /* check list  */
 .sdoc-editor-container .article .sdoc-checkbox-container {
   padding: 0px 2px;
@@ -161,4 +165,5 @@
 
 .sdoc-editor-container .article .virtual-link:hover {
   text-decoration: underline;
+  text-underline-position: under;
 }

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

@@ -238,10 +238,12 @@ const CommentItemWrapper = _ref => {
     className: className,
     onClick: onItemClick
   }, element && /*#__PURE__*/React.createElement("div", {
-    className: "comment-item-selected-text"
+    className: "comment-item-selected-text-container"
   }, /*#__PURE__*/React.createElement("i", {
-    className: "sdocfont sdoc-selected-text mr-2"
-  }), Node.string(element)), /*#__PURE__*/React.createElement("ul", {
+    className: "sdocfont sdoc-comment-quote mr-2"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "comment-item-selected-text"
+  }, Node.string(element))), /*#__PURE__*/React.createElement("ul", {
     ref: listRef,
     className: "comment-item-list"
   }, /*#__PURE__*/React.createElement(CommentItemContent, {

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

@@ -18,19 +18,27 @@
   box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15);
 }
 
-.sdoc-comment-list-container .comment-item-selected-text {
-  padding: 6px 16px;
+.sdoc-comment-list-container .comment-item-selected-text-container {
   width: 100%;
+  height: 32px;
+  display: flex;
+  padding: 6px 16px;
+  align-items: center;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 14px;
-  line-height: 20px;
   border-radius: 8px 8px 0 0;
 }
 
-.sdoc-comment-list-container .comment-item-selected-text .sdoc-selected-text {
+.sdoc-comment-list-container .comment-item-selected-text-container .sdoc-comment-quote {
   font-size: 12px;
+  flex-shrink: 0;
+}
+
+.sdoc-comment-list-container .comment-item-selected-text-container .comment-item-selected-text {
+  flex: 1;
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .sdoc-comment-list-container .comment-item-list {

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

@@ -136,7 +136,7 @@
   border: 1px solid #c7c7c7;
 }
 
-.global-comments-popover .sdoc-comment-list-container .comment-item-selected-text {
+.global-comments-popover .sdoc-comment-list-container .comment-item-selected-text-container {
   background-color: #F5F5F5;
   border-bottom: 1px solid #c7c7c7;
 }

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

@@ -0,0 +1,74 @@
+import React, { useEffect, useRef, useImperativeHandle, forwardRef, useMemo } from 'react';
+import SdocEditor from './sdoc-editor';
+import { RevisionDiffViewer } from '../views';
+import context from '../../context';
+import { createDefaultEditor } from '../extension';
+import withNodeId from '../node-id';
+import { withSocketIO } from '../socket';
+import { PAGE_EDIT_AREA_WIDTH } from '../constants';
+const RevisionEditor = forwardRef((_ref, ref) => {
+  let {
+    isShowChanges,
+    isReloading,
+    document,
+    revisionContent,
+    didMountCallback
+  } = _ref;
+  const editorRef = useRef(null);
+  const editor = useMemo(() => {
+    const defaultEditor = createDefaultEditor();
+    const editorConfig = context.getEditorConfig();
+    const newEditor = withNodeId(withSocketIO(defaultEditor, {
+      document,
+      config: editorConfig
+    }));
+    const {
+      cursors
+    } = document;
+    newEditor.cursors = cursors || {};
+    newEditor.width = PAGE_EDIT_AREA_WIDTH; // default width
+    return newEditor;
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // useMount: init socket connection
+  useEffect(() => {
+    editor.openConnection();
+    return () => {
+      editor.closeConnection();
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // The parent component can call the method of this component through ref
+  useImperativeHandle(ref, () => ({
+    setSlateValue: document => {
+      return editorRef.current.setSlateValue(document);
+    },
+    updateDocumentVersion: document => {
+      return editorRef.current.updateDocumentVersion(document);
+    },
+    // get value
+    getSlateValue: () => {
+      return editorRef.current.getSlateValue();
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), [editorRef]);
+  if (isShowChanges) {
+    return /*#__PURE__*/React.createElement(RevisionDiffViewer, {
+      editor: editor,
+      revisionContent: revisionContent,
+      didMountCallback: didMountCallback
+    });
+  }
+  return /*#__PURE__*/React.createElement(SdocEditor, {
+    ref: editorRef,
+    editor: editor,
+    isReloading: isReloading,
+    document: document
+  });
+});
+export default RevisionEditor;

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

@@ -19,10 +19,11 @@ import { isMobile } from '../../utils';
 import { CollaboratorsProvider } from '../../hooks';
 const SdocEditor = forwardRef((_ref, ref) => {
   let {
+    editor,
     document,
     isReloading
   } = _ref;
-  const editor = useMemo(() => {
+  const validEditor = editor || useMemo(() => {
     const defaultEditor = createDefaultEditor();
     const editorConfig = context.getEditorConfig();
     const newEditor = withNodeId(withSocketIO(defaultEditor, {
@@ -39,12 +40,16 @@ const SdocEditor = forwardRef((_ref, ref) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const [slateValue, setSlateValue] = useState(document.children);
+  useEffect(() => {
+    validEditor.readonly = false;
+  }, []);
 
   // useMount: init socket connection
   useEffect(() => {
-    editor.openConnection();
+    if (editor) return;
+    validEditor.openConnection();
     return () => {
-      editor.closeConnection();
+      validEditor.closeConnection();
     };
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -53,16 +58,16 @@ const SdocEditor = forwardRef((_ref, ref) => {
   // useMount: focus editor
   useEffect(() => {
     const timer = setTimeout(() => {
-      const [firstNode] = editor.children;
+      const [firstNode] = validEditor.children;
       if (firstNode) {
         const [firstNodeFirstChild] = firstNode.children;
         if (firstNodeFirstChild) {
-          const endOfFirstNode = Editor.end(editor, [0, 0]);
+          const endOfFirstNode = Editor.end(validEditor, [0, 0]);
           const range = {
             anchor: endOfFirstNode,
             focus: endOfFirstNode
           };
-          focusEditor(editor, range);
+          focusEditor(validEditor, range);
         }
       }
     }, 300);
@@ -76,11 +81,11 @@ const SdocEditor = forwardRef((_ref, ref) => {
   useImperativeHandle(ref, () => ({
     setSlateValue: document => {
       // Force update of editor's child elements
-      editor.children = document.children;
+      validEditor.children = document.children;
       setSlateValue([...document.children]);
     },
     updateDocumentVersion: document => {
-      editor.updateDocumentVersion(document);
+      validEditor.updateDocumentVersion(document);
     },
     // get value
     getSlateValue: () => {
@@ -90,7 +95,7 @@ const SdocEditor = forwardRef((_ref, ref) => {
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }), [document, editor, slateValue]);
+  }), [document, validEditor, slateValue]);
   const isFreezed = context.getSetting('isFreezed');
   if (isReloading) {
     return /*#__PURE__*/React.createElement("div", {
@@ -99,47 +104,47 @@ const SdocEditor = forwardRef((_ref, ref) => {
   }
   if (isMobile) {
     return /*#__PURE__*/React.createElement(EditorContainer, {
-      editor: editor,
+      editor: validEditor,
       readonly: true
     }, /*#__PURE__*/React.createElement(ColorProvider, null, /*#__PURE__*/React.createElement(EditorContent, {
       docValue: slateValue,
       readonly: true,
       showOutline: false
     }, /*#__PURE__*/React.createElement(ReadOnlyArticle, {
-      editor: editor,
+      editor: validEditor,
       slateValue: slateValue
     }))));
   }
   if (isFreezed) {
     return /*#__PURE__*/React.createElement(EditorContainer, {
-      editor: editor,
+      editor: validEditor,
       readonly: isFreezed
     }, /*#__PURE__*/React.createElement(CollaboratorsProvider, null, /*#__PURE__*/React.createElement(ColorProvider, null, /*#__PURE__*/React.createElement(HeaderToolbar, {
-      editor: editor,
+      editor: validEditor,
       readonly: isFreezed
     }), /*#__PURE__*/React.createElement(EditorContent, {
       docValue: slateValue,
       showOutline: true,
       readonly: isFreezed
     }, /*#__PURE__*/React.createElement(ReadOnlyArticle, {
-      editor: editor,
+      editor: validEditor,
       slateValue: slateValue,
       isShowComment: true
     })))));
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorContainer, {
-    editor: editor
+    editor: validEditor
   }, /*#__PURE__*/React.createElement(CollaboratorsProvider, null, /*#__PURE__*/React.createElement(ColorProvider, null, /*#__PURE__*/React.createElement(HeaderToolbar, {
-    editor: editor
+    editor: validEditor
   }), /*#__PURE__*/React.createElement(EditorContent, {
     docValue: slateValue,
     showOutline: true
   }, /*#__PURE__*/React.createElement(EditableArticle, {
-    editor: editor,
+    editor: validEditor,
     slateValue: slateValue,
     updateSlateValue: setSlateValue
   }))))), /*#__PURE__*/React.createElement(InsertElementDialog, {
-    editor: editor
+    editor: validEditor
   }));
 });
 export default SdocEditor;

package/dist/basic-sdk/extension/commons/insert-element-dialog/index.js

@@ -18,8 +18,8 @@ const InsertElementDialog = _ref => {
   const [insertLinkCallback, setInsertLinkCallback] = useState(null);
   const uploadLocalImageInputRef = useRef();
   const onFileChanged = useCallback(event => {
-    const file = event.target.files[0];
-    context.uploadLocalImage(file).then(fileUrl => {
+    const files = event.target.files;
+    context.uploadLocalImage(files).then(fileUrl => {
       insertImage(editor, fileUrl, editor.selection, insertPosition, slateNode);
       if (uploadLocalImageInputRef.current) {
         uploadLocalImageInputRef.current.value = '';
@@ -110,6 +110,7 @@ const InsertElementDialog = _ref => {
         return /*#__PURE__*/React.createElement("input", {
           ref: uploadLocalImageInputRef,
           type: "file",
+          multiple: true,
           accept: "image/*",
           style: {
             display: 'none'

package/dist/basic-sdk/extension/plugins/image/helpers.js

@@ -39,33 +39,35 @@ export const generateImageNode = src => {
     }
   });
 };
-export const insertImage = function (editor, src, selection) {
+export const insertImage = function (editor, srcList, selection) {
   let position = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : INSERT_POSITION.CURRENT;
   let slateNode = arguments.length > 4 ? arguments[4] : undefined;
-  if (!src) return;
+  if (!srcList) return;
   if (position !== INSERT_POSITION.AFTER) {
     if (isInsertImageMenuDisabled(editor)) return;
   }
-  const imageNode = generateImageNode(src);
+  const imageNodes = srcList.map(src => generateImageNode(src));
   const validSelection = selection || editor.selection;
   if (position === INSERT_POSITION.AFTER) {
     let path = Editor.path(editor, validSelection);
     if (slateNode && (slateNode === null || slateNode === void 0 ? void 0 : slateNode.type) === LIST_ITEM) {
       path = ReactEditor.findPath(editor, slateNode);
       const nextPath = Path.next(path);
-      Transforms.insertNodes(editor, imageNode, {
+      Transforms.insertNodes(editor, imageNodes, {
         at: nextPath
       });
       return;
     }
     const p = generateEmptyElement(ELEMENT_TYPE.PARAGRAPH);
-    p.children[0] = imageNode;
+    imageNodes.forEach((item, index) => {
+      p.children[index] = item;
+    });
     Transforms.insertNodes(editor, p, {
       at: [path[0] + 1]
     });
     return;
   }
-  Transforms.insertNodes(editor, imageNode, {
+  Transforms.insertNodes(editor, imageNodes, {
     at: validSelection
   });
 };

package/dist/basic-sdk/extension/plugins/list/render-elem.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import classnames from 'classnames';
 import { ORDERED_LIST } from '../../constants';
 const renderList = (props, editor) => {
   const {
@@ -33,11 +34,14 @@ const renderListItem = (props, editor) => {
     default:
       className = '';
   }
+  const isBlod = element.children[0].children.every(item => item.bold === true);
   return /*#__PURE__*/React.createElement("li", Object.assign({
     "data-id": element.id,
     "data-root": "true"
   }, attributes, {
-    className: className
+    className: classnames(className, {
+      'sdoc-li-blod': isBlod
+    })
   }), children);
 };
 const renderListLic = (props, editor) => {

package/dist/basic-sdk/extension/plugins/table/constants/index.js

@@ -32,8 +32,10 @@ export const TABLE_ROW_STYLE = {
   MIN_HEIGHT: 'min_height'
 };
 export const TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP = {
-  '#3f495d': 'sdoc-table-3f495d',
-  '#2367f2': 'sdoc-table-2367f2',
-  '#f77d21': 'sdoc-table-f77d21',
-  '#0099f4': 'sdoc-table-0099f4'
-};
+  'sdoc-table-header-3f495d': 'sdoc-table-body-3f495d',
+  'sdoc-table-header-2367f2': 'sdoc-table-body-2367f2',
+  'sdoc-table-header-f77d21': 'sdoc-table-body-f77d21',
+  'sdoc-table-header-0099f4': 'sdoc-table-body-0099f4'
+};
+export const INHERIT_CELL_STYLE_WHEN_SELECT_SINGLE = ['background_color'];
+export const INHERIT_CELL_STYLE_WHEN_SELECT_MULTIPLE = ['background_color', 'text_align'];

package/dist/basic-sdk/extension/plugins/table/helpers.js

@@ -3,9 +3,9 @@ import slugid from 'slugid';
 import { Editor, Range, Transforms, Point, Node } from '@seafile/slate';
 import { ReactEditor } from '@seafile/slate-react';
 import deepCopy from 'deep-copy';
-import { getNodeType, getParentNode, getSelectedNodeByType, isTextNode, getSelectedElems, focusEditor, getNode, findPath, replaceNodeChildren, replaceNode } from '../../core';
+import { getNodeType, getParentNode, getSelectedNodeByType, isTextNode, getSelectedElems, focusEditor, getNode, findPath, replaceNodeChildren, replaceNode, getSelectedNodeEntryByType, getAboveBlockNode } from '../../core';
 import { ELEMENT_TYPE, KEYBOARD, CLIPBOARD_FORMAT_KEY, INSERT_POSITION } from '../../constants';
-import { TABLE_MAX_ROWS, TABLE_MAX_COLUMNS, EMPTY_SELECTED_RANGE, TABLE_ROW_MIN_HEIGHT, TABLE_CELL_MIN_WIDTH, TABLE_ELEMENT, TABLE_ELEMENT_POSITION, TABLE_ROW_STYLE } from './constants';
+import { TABLE_MAX_ROWS, TABLE_MAX_COLUMNS, EMPTY_SELECTED_RANGE, TABLE_ROW_MIN_HEIGHT, TABLE_CELL_MIN_WIDTH, TABLE_ELEMENT, TABLE_ELEMENT_POSITION, TABLE_ROW_STYLE, INHERIT_CELL_STYLE_WHEN_SELECT_MULTIPLE, INHERIT_CELL_STYLE_WHEN_SELECT_SINGLE, TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP } from './constants';
 import EventBus from '../../../utils/event-bus';
 import { INTERNAL_EVENT, PAGE_EDIT_AREA_WIDTH } from '../../../constants';
 import ObjectUtils from '../../../utils/object-utils';
@@ -54,20 +54,28 @@ export const isCombineCellsDisabled = (editor, readonly) => {
   }
   return true;
 };
-export const generateTableCell = () => {
+export const generateTableCell = (editor, rowIndex, cellIndex) => {
+  let style = {};
+  const tableNodeEntry = getSelectedNodeEntryByType(editor, ELEMENT_TYPE.TABLE);
+  if (tableNodeEntry && rowIndex !== undefined && cellIndex !== undefined) {
+    const [, tablePath] = tableNodeEntry;
+    style = getCellInheritStyles(editor, tablePath, rowIndex, cellIndex);
+  }
   return {
     id: slugid.nice(),
     type: ELEMENT_TYPE.TABLE_CELL,
     children: [{
       text: '',
       id: slugid.nice()
-    }]
+    }],
+    style,
+    inherit_style: style
   };
 };
-export const generateTableRow = colsCount => {
+export const generateTableRow = (editor, colsCount, rowIndex) => {
   let children = [];
   for (let i = 0; i < colsCount; i++) {
-    const tableCell = generateTableCell();
+    const tableCell = generateTableCell(editor, rowIndex, i);
     children.push(tableCell);
   }
   return {
@@ -97,7 +105,7 @@ export const generateEmptyTable = (editor, tableProps) => {
   const colsCount = size[1];
   let children = [];
   for (let i = 0; i < rowsCount; i++) {
-    const tableRow = generateTableRow(colsCount);
+    const tableRow = generateTableRow(editor, colsCount, i);
     children.push(tableRow);
   }
   const columnWidth = Math.max(TABLE_CELL_MIN_WIDTH, parseInt(editor.width / colsCount));
@@ -133,16 +141,10 @@ export const insertTable = function (editor, size, selection) {
   });
   const validSelection = selection || editor.selection;
   const path = Editor.path(editor, validSelection);
-  if (position === INSERT_POSITION.AFTER) {
-    Transforms.insertNodes(editor, tableNode, {
-      at: [path[0] + 1]
-    });
-    return;
-  }
-  Transforms.insertNodes(editor, tableNode, {
-    at: [path[0]]
-  });
+  handleInsertTable(editor, position, path, tableNode);
 };
+
+// tableSize [tableHeight, tableWidth]
 export const getSelectedInfo = editor => {
   const currentTable = getSelectedNodeByType(editor, ELEMENT_TYPE.TABLE);
   const currentRow = getSelectedNodeByType(editor, ELEMENT_TYPE.TABLE_ROW);
@@ -175,6 +177,7 @@ export const isAllInTable = editor => {
 };
 
 export const setCellStyle = (editor, style) => {
+  // Select single cell
   if (ObjectUtils.isSameObject(editor.tableSelectedRange, EMPTY_SELECTED_RANGE)) {
     const selectedNodes = getSelectedElems(editor);
     let firstTableCellNodePath;
@@ -184,7 +187,8 @@ export const setCellStyle = (editor, style) => {
         if (path) {
           firstTableCellNodePath = firstTableCellNodePath ? firstTableCellNodePath : path;
           Transforms.setNodes(editor, {
-            style: _objectSpread(_objectSpread({}, node.style), style)
+            style: _objectSpread(_objectSpread({}, node.style), style),
+            inherit_style: generateInheritStyle(INHERIT_CELL_STYLE_WHEN_SELECT_SINGLE, style, node)
           }, {
             at: path
           });
@@ -202,6 +206,7 @@ export const setCellStyle = (editor, style) => {
     }
     return;
   }
+  // Select multiple cells
   const {
     minColIndex,
     maxColIndex,
@@ -216,7 +221,8 @@ export const setCellStyle = (editor, style) => {
       const path = [...tablePath, i, j];
       const node = getNode(editor, path);
       Transforms.setNodes(editor, {
-        style: _objectSpread(_objectSpread({}, node.style), style)
+        style: _objectSpread(_objectSpread({}, node.style), style),
+        inherit_style: generateInheritStyle(INHERIT_CELL_STYLE_WHEN_SELECT_MULTIPLE, style, node)
       }, {
         at: path
       });
@@ -228,7 +234,7 @@ export const insertTableRow = function (editor, table, rowIndex) {
   const tableRowCount = table.children.length;
   if (tableRowCount >= TABLE_MAX_ROWS) return;
   const tableColumnCount = table.children[0].children.length;
-  const row = generateTableRow(tableColumnCount);
+  const row = generateTableRow(editor, tableColumnCount, rowIndex);
   const tablePath = findPath(editor, table);
   const targetPath = position === TABLE_ELEMENT_POSITION.AFTER ? [...tablePath, rowIndex + 1] : [...tablePath, rowIndex];
   Transforms.insertNodes(editor, row, {
@@ -303,7 +309,7 @@ export const insertTableColumn = function (editor, table, columnIndex) {
   const tableRowCount = table.children.length;
   for (let i = 0; i < tableRowCount; i++) {
     const newCellPath = [...tablePath, i, newCellIndex];
-    const newCell = generateTableCell();
+    const newCell = generateTableCell(editor, i, columnIndex);
     Transforms.insertNodes(editor, newCell, {
       at: newCellPath
     });
@@ -382,7 +388,7 @@ export const insertTableElement = function (editor, type) {
     const targetPath = position === TABLE_ELEMENT_POSITION.AFTER ? [...tablePath, rowIndex + 1] : [...tablePath, rowIndex];
     const validCount = Math.min(TABLE_MAX_ROWS - tableSize[0], count);
     for (let i = 0; i < validCount; i++) {
-      const row = generateTableRow(tableSize[1]);
+      const row = generateTableRow(editor, tableSize[1], rowIndex);
       Transforms.insertNodes(editor, row, {
         at: targetPath
       });
@@ -406,7 +412,7 @@ export const insertTableElement = function (editor, type) {
     for (let j = 0; j < validCount; j++) {
       for (let i = 0; i < tableSize[0]; i++) {
         const newCellPath = [...tablePath, i, newCellIndex];
-        const newCell = generateTableCell();
+        const newCell = generateTableCell(editor, i, cellIndex);
         Transforms.insertNodes(editor, newCell, {
           at: newCellPath
         });
@@ -450,7 +456,7 @@ export const combineCells = editor => {
     }
   }
   const targetCellPath = [...tablePath, minRowIndex, minColIndex];
-  const newCell = generateTableCell();
+  const newCell = generateTableCell(editor);
   newCell.children = newCellContent;
   newCell.rowspan = maxRowIndex - minRowIndex + 1;
   newCell.colspan = maxColIndex - minColIndex + 1;
@@ -494,7 +500,7 @@ export const splitCell = (editor, rowNumber, columnNumber) => {
     let newRowSpan = rowspanBase + (i + 1 <= rowspanLeft ? 1 : 0);
     let colspanSum = 0;
     for (let j = 0; j < columnNumber; j++) {
-      const newCell = generateTableCell();
+      const newCell = generateTableCell(editor);
       let startIndex = (i * columnNumber + j) * dataBlockNumber;
       if (startIndex < cell.children.length) {
         let endIndex = Math.min(startIndex + dataBlockNumber, cell.children.length);
@@ -661,7 +667,7 @@ export const handleCombinedCellsBeforeDeleteTableRow = (editor, tablePath, table
     } else {
       if (rowspan > 1) {
         const targetCellPath = [...tablePath, rowIndex + 1, i];
-        const newCell = generateTableCell();
+        const newCell = generateTableCell(editor);
         newCell.rowspan = rowspan - 1;
         newCell.colspan = colspan;
         Transforms.removeNodes(editor, {
@@ -701,7 +707,7 @@ export const handleCombinedCellsBeforeDeleteTableColumn = (editor, tablePath, ta
     } else {
       if (colspan > 1) {
         const targetCellPath = [...tablePath, i, columnIndex + 1];
-        const newCell = generateTableCell();
+        const newCell = generateTableCell(editor);
         newCell.rowspan = rowspan;
         newCell.colspan = colspan - 1;
         Transforms.removeNodes(editor, {
@@ -878,7 +884,7 @@ export const insertMultipleRowsAndColumns = (editor, rows, columns) => {
   const validInsertColumns = insertColumns.slice(0, Math.min(TABLE_MAX_COLUMNS - tableSize[1], columns.length));
   for (let i = 0; i < validInsertRows.length; i++) {
     const insertRow = validInsertRows[i];
-    const row = generateTableRow(tableSize[1]);
+    const row = generateTableRow(editor, tableSize[1], rowIndex);
     row.style = insertRow.style;
     newTable.children.push(row);
   }
@@ -887,7 +893,7 @@ export const insertMultipleRowsAndColumns = (editor, rows, columns) => {
   }
   for (let j = 0; j < validInsertColumns.length; j++) {
     for (let i = 0; i < tableSize[0] + validInsertRows.length; i++) {
-      const newCell = generateTableCell();
+      const newCell = generateTableCell(editor);
       newTable.children[i].children.push(newCell);
     }
   }
@@ -1244,8 +1250,8 @@ export const getRowHeight = (element, rowIndex) => {
   const rowHeight = style[TABLE_ROW_STYLE.MIN_HEIGHT] || TABLE_ROW_MIN_HEIGHT;
   return rowIndex === 0 ? rowHeight + 1 : rowHeight;
 };
-const normalizeTableCell = cell => {
-  if (!cell) return generateTableCell();
+const normalizeTableCell = (editor, cell) => {
+  if (!cell) return generateTableCell(editor);
   let newCell = _objectSpread({
     children: [{
       text: '',
@@ -1300,7 +1306,7 @@ export const normalizeTableELement = (editor, element) => {
   for (let i = 0; i < element.children.length; i++) {
     const row = newElement.children[i];
     for (let j = 0; j < row.children.length; j++) {
-      row.children[j] = normalizeTableCell(row.children[j]);
+      row.children[j] = normalizeTableCell(editor, row.children[j]);
     }
     newElement.children[i] = row;
   }
@@ -1314,7 +1320,82 @@ export const insertTableByTemplate = (editor, alternateColor) => {
     alternate_highlight: true
   });
   const path = Editor.path(editor, editor.selection);
-  Transforms.insertNodes(editor, tableNode, {
-    at: [path[0]]
+  const insertPosition = getInsertPosition(editor);
+  handleInsertTable(editor, insertPosition, path, tableNode);
+};
+
+/**
+ * @param {Editor} editor
+ * @param {InsertPosition} insertPosition
+ * @param {Path} path
+ * @param {Node} tableNode
+ * Insert table by insertPosition
+ */
+export const handleInsertTable = (editor, insertPosition, path, tableNode) => {
+  const {
+    selection
+  } = editor;
+  if (insertPosition === INSERT_POSITION.BEFORE) {
+    const insertPath = [path[0]];
+    Transforms.insertNodes(editor, tableNode, {
+      at: insertPath
+    });
+  } else if (insertPosition === INSERT_POSITION.AFTER) {
+    const insertPath = [path[0] + 1];
+    Transforms.insertNodes(editor, tableNode, {
+      at: insertPath
+    });
+  } else if (insertPosition === INSERT_POSITION.CURRENT) {
+    Transforms.splitNodes(editor, {
+      at: selection,
+      always: true
+    });
+    Transforms.insertNodes(editor, tableNode, {
+      at: selection.anchor
+    });
+  }
+};
+export const getInsertPosition = editor => {
+  const {
+    selection
+  } = editor;
+  if (!selection) return INSERT_POSITION.CURRENT;
+  if (!Range.isCollapsed(selection)) return INSERT_POSITION.CURRENT;
+  const aboveNodeEntry = getAboveBlockNode(editor);
+  if (!aboveNodeEntry) return INSERT_POSITION.CURRENT;
+  const isAtStart = Editor.isStart(editor, selection.anchor, aboveNodeEntry[1]);
+  if (isAtStart) return INSERT_POSITION.BEFORE;
+  const isAtEnd = Editor.isEnd(editor, selection.anchor, aboveNodeEntry[1]);
+  if (isAtEnd) return INSERT_POSITION.AFTER;
+  return INSERT_POSITION.CURRENT;
+};
+export const generateInheritStyle = (allowedInheritStyleList, style, cell) => {
+  const inheritStyle = _objectSpread({}, cell['inherit_style']) || {};
+  for (const key in style) {
+    if (Object.hasOwnProperty.call(style, key) && allowedInheritStyleList.includes(key)) {
+      inheritStyle[key] = style[key];
+    }
+  }
+  return inheritStyle;
+};
+export const getCellInheritStyles = (editor, tablePath, rowIndex, colIndex) => {
+  var _table$children$rowIn, _tableCell$inherit_st;
+  const [tableNodeEntry] = Editor.nodes(editor, {
+    match: n => n.type === ELEMENT_TYPE.TABLE,
+    at: tablePath
   });
+  if (!tableNodeEntry) return {};
+  const table = tableNodeEntry[0];
+  const tableCell = (_table$children$rowIn = table.children[rowIndex]) === null || _table$children$rowIn === void 0 ? void 0 : _table$children$rowIn.children[colIndex];
+  if (!tableCell) return {};
+  return (_tableCell$inherit_st = tableCell['inherit_style']) !== null && _tableCell$inherit_st !== void 0 ? _tableCell$inherit_st : {};
+};
+export const getCellHighlightClassName = (primaryColorClassName, rowIndex) => {
+  let className = '';
+  if (rowIndex === 0) {
+    className = primaryColorClassName;
+  } else if (rowIndex % 2 === 0) {
+    className = TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP[primaryColorClassName];
+  }
+  return className;
 };

package/dist/basic-sdk/extension/plugins/table/menu/table-context-menu/index.js

@@ -5,7 +5,7 @@ import { ElementPopover } from '../../../../commons';
 import { ELEMENT_TYPE } from '../../../../constants';
 import { getSelectedNodeByType } from '../../../../core';
 import { TABLE_MAX_COLUMNS, TABLE_MAX_ROWS, TABLE_ELEMENT, TABLE_ELEMENT_POSITION, EMPTY_SELECTED_RANGE } from '../../constants';
-import { insertTableElement, removeTableElement, getSelectedInfo, combineCells } from '../../helpers';
+import { insertTableElement, removeTableElement, combineCells } from '../../helpers';
 import InsertTableElement from './insert-table-element';
 import EventBus from '../../../../../utils/event-bus';
 import { INTERNAL_EVENT } from '../../../../../constants';
@@ -84,6 +84,16 @@ class TableContextMenu extends React.Component {
   componentWillUnmount() {
     this.menu = null;
   }
+  isMergedCell() {
+    const {
+      editor
+    } = this.props;
+    const {
+      colspan,
+      rowspan
+    } = getSelectedNodeByType(editor, ELEMENT_TYPE.TABLE_CELL);
+    return colspan > 1 || rowspan > 1;
+  }
   render() {
     const {
       contextStyle
@@ -106,6 +116,7 @@ class TableContextMenu extends React.Component {
     const canAddColsCount = currentColumnsCount + selectedCols > TABLE_MAX_COLUMNS ? TABLE_MAX_COLUMNS - currentColumnsCount : selectedCols;
     const enableCombineCell = !ObjectUtils.isSameObject(tableSelectedRange, EMPTY_SELECTED_RANGE);
     const enableSplitCell = !enableCombineCell;
+    const isMergedCell = this.isMergedCell();
     return /*#__PURE__*/React.createElement(ElementPopover, {
       className: "sdoc-context-menu"
     }, /*#__PURE__*/React.createElement("div", {
@@ -146,7 +157,7 @@ class TableContextMenu extends React.Component {
       onMouseDown: this.combineCells
     }, t('Combine_cell')), /*#__PURE__*/React.createElement("button", {
       className: "dropdown-item",
-      disabled: !enableSplitCell,
+      disabled: !isMergedCell || !enableSplitCell,
       onMouseDown: this.toggleSplitCellSettingDialog
     }, t('Split_cell'))));
   }

package/dist/basic-sdk/extension/plugins/table/menu/table-menu/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { withTranslation } from 'react-i18next';
-import { insertTable, isTableMenuDisabled } from '../../helpers';
+import { getInsertPosition, insertTable, isTableMenuDisabled } from '../../helpers';
 import { MENUS_CONFIG_MAP, ELEMENT_TYPE, INSERT_POSITION } from '../../../../constants';
 import TableSizePopover from '../../popover/table-size-popover';
 import ElementDropdownMenuItem from '../../../../commons/dropdown-menu-item';
@@ -13,7 +13,8 @@ const TableMenu = _ref => {
   const disabled = isTableMenuDisabled(editor, readonly);
   const menuConfig = MENUS_CONFIG_MAP[ELEMENT_TYPE.TABLE];
   const createTable = useCallback(size => {
-    insertTable(editor, size, editor.selection, INSERT_POSITION.CURRENT);
+    const insertPosition = getInsertPosition(editor, INSERT_POSITION.AFTER);
+    insertTable(editor, size, editor.selection, insertPosition);
   }, [editor]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ElementDropdownMenuItem, {
     disabled: disabled,

package/dist/basic-sdk/extension/plugins/table/plugin.js

@@ -26,7 +26,6 @@ const withTable = editor => {
   const eventBus = EventBus.getInstance();
   newEditor.tableOnKeyDown = event => {
     // Handle special keyboard events
-
     if (isHotkey('mod+a', event)) {
       event.preventDefault();
       const {

package/dist/basic-sdk/extension/plugins/table/popover/table-template/index.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { UncontrolledPopover } from 'reactstrap';
 import { TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP } from '../../constants';
-import SmapleTable from './sample-table';
+import SampleTable from './sample-table';
 import { insertTableByTemplate } from '../../helpers';
 import './index.css';
 import '../../render/alternate-color.css';
@@ -22,7 +22,7 @@ const TableTemplate = _ref => {
     fade: false,
     className: "sdoc-sub-dropdown-menu sdoc-table-template-popover",
     innerClassName: "sdoc-table-template-inner-popover"
-  }, tableTemplatePreviewList.map((alternateColor, index) => /*#__PURE__*/React.createElement(SmapleTable, {
+  }, tableTemplatePreviewList.map((alternateColor, index) => /*#__PURE__*/React.createElement(SampleTable, {
     key: alternateColor + index,
     alternateColor: alternateColor,
     onClickTemplate: handleClickTemplate

package/dist/basic-sdk/extension/plugins/table/popover/table-template/sample-table.js

@@ -1,29 +1,27 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP } from '../../constants';
+import { getCellHighlightClassName } from '../../helpers';
 import './index.css';
-const SmapleTable = _ref => {
+const SampleTable = _ref => {
   let {
     alternateColor,
     onClickTemplate
   } = _ref;
   // generate table
-  const renderTableRow = useCallback((row, column) => new Array(row).fill(null).map((_, index) => {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "sdoc-table-template-row table-row",
-      key: "sdoc-template-table-row-".concat(index),
-      onClick: e => onClickTemplate(e, alternateColor)
-    }, new Array(column).fill(null).map((_, index) => /*#__PURE__*/React.createElement("div", {
-      className: "sdoc-table-template-cell",
-      key: "sdoc-template-table-cell-".concat(index)
-    })));
-  }), [onClickTemplate, alternateColor]);
+  const renderTableRow = useCallback((row, column) => new Array(row).fill(null).map((_, index) => /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-table-template-row table-row ".concat(getCellHighlightClassName(alternateColor, index)),
+    key: "sdoc-template-table-row-".concat(index),
+    onClick: e => onClickTemplate(e, alternateColor)
+  }, new Array(column).fill(null).map((_, index) => /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-table-template-cell",
+    key: "sdoc-template-table-cell-".concat(index)
+  })))), [onClickTemplate, alternateColor]);
   return /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-table-template-view-table ".concat(TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP[alternateColor])
+    className: "sdoc-table-template-view-table"
   }, renderTableRow(4, 4));
 };
-SmapleTable.proptoTypes = {
+SampleTable.protoTypes = {
   alternateColor: PropTypes.string.isRequired,
   onClickTemplate: PropTypes.func.isRequired
 };
-export default SmapleTable;
+export default SampleTable;

package/dist/basic-sdk/extension/plugins/table/render/alternate-color.css

@@ -1,37 +1,37 @@
 /* type1 */
-.sdoc-table-3f495d .table-row:nth-child(2n + 1) {
+.sdoc-table-body-3f495d {
   background-color: #f1f3f6;
 }
 
-.sdoc-table-3f495d .table-row:first-child {
+.sdoc-table-header-3f495d {
   background-color: #3f495d;
   color: white;
 }
 
 /* type2 */
-.sdoc-table-2367f2 .table-row:nth-child(2n + 1) {
+.sdoc-table-body-2367f2 {
   background-color: #e1edff;
 }
 
-.sdoc-table-2367f2 .table-row:first-child {
+.sdoc-table-header-2367f2 {
   background-color: #2367f2;
   color: white;
 }
 
 /* type3 */
-.sdoc-table-f77d21 .table-row:nth-child(2n + 1) {
+.sdoc-table-body-f77d21 {
   background-color: #fff1e8;
 }
 
-.sdoc-table-f77d21 .table-row:first-child {
+.sdoc-table-header-f77d21 {
   background-color: #f77d21;
 }
 
 /* type4 */
-.sdoc-table-0099f4 .table-row:nth-child(2n + 1) {
+.sdoc-table-body-0099f4 {
   background-color: #e1f5ff;
 }
 
-.sdoc-table-0099f4 .table-row:first-child {
+.sdoc-table-header-0099f4 {
   background-color: #0099f4;
 }

package/dist/basic-sdk/extension/plugins/table/render/index.js

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import throttle from 'lodash.throttle';
 import { useSelected, useSlateStatic, useReadOnly } from '@seafile/slate-react';
 import { Transforms, Editor } from '@seafile/slate';
-import { EMPTY_SELECTED_RANGE, TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP } from '../constants';
+import { EMPTY_SELECTED_RANGE } from '../constants';
 import { ResizeHandlersContext, TableSelectedRangeContext, SettingSelectRangeContext } from './hooks';
 import EventBus from '../../../../utils/event-bus';
 import { INTERNAL_EVENT } from '../../../../constants';
@@ -18,7 +18,6 @@ import { findPath } from '../../../core';
 import './index.css';
 import './alternate-color.css';
 const Table = _ref => {
-  var _element$ui, _element$ui2;
   let {
     className,
     attributes,
@@ -190,9 +189,7 @@ const Table = _ref => {
     table: element,
     setSelectedRange: setSelectedRangeByClick
   }), /*#__PURE__*/React.createElement("div", {
-    className: classnames(tableContainerClassName, {
-      [TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP[element === null || element === void 0 ? void 0 : (_element$ui = element.ui) === null || _element$ui === void 0 ? void 0 : _element$ui.alternate_highlight_color]]: element === null || element === void 0 ? void 0 : (_element$ui2 = element.ui) === null || _element$ui2 === void 0 ? void 0 : _element$ui2.alternate_highlight
-    }),
+    className: classnames(tableContainerClassName),
     style: style,
     onMouseDown: onMouseDown,
     ref: table,

package/dist/basic-sdk/extension/plugins/table/render/render-cell.js

@@ -1,13 +1,14 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import classnames from 'classnames';
 import { useSlateStatic, useReadOnly } from '@seafile/slate-react';
-import { Transforms } from '@seafile/slate';
+import { Editor, Transforms } from '@seafile/slate';
 import ObjectUtils from '../../../../utils/object-utils';
 import { findPath, focusEditor } from '../../../core';
 import { useResizeHandlersContext, useTableSelectedRangeContext } from './hooks';
 import { EMPTY_SELECTED_RANGE, SELECTED_TABLE_CELL_BACKGROUND_COLOR, TABLE_CELL_STYLE } from '../constants';
-import { getTableColumns, getCellColumn, colorBlend } from '../helpers';
+import { getTableColumns, colorBlend, getCellHighlightClassName } from '../helpers';
+import { ELEMENT_TYPE } from '../../../constants';
 const TableCell = _ref => {
   let {
     attributes,
@@ -67,9 +68,29 @@ const TableCell = _ref => {
     colspan = 1
   } = element;
   style.gridArea = "".concat(rowIndex + 1, " / ").concat(cellIndex + 1, " / span ").concat(rowspan, " / span ").concat(colspan);
+  if (element.style) {
+    style = _objectSpread(_objectSpread({}, element.style), style);
+  }
+
+  // Table alternate highlight
+  const highlightClass = useMemo(() => {
+    var _tableEntry$;
+    const [tableEntry] = Editor.nodes(editor, {
+      at: cellPath,
+      match: n => n.type === ELEMENT_TYPE.TABLE
+    });
+    const {
+      alternate_highlight,
+      alternate_highlight_color
+    } = ((_tableEntry$ = tableEntry[0]) === null || _tableEntry$ === void 0 ? void 0 : _tableEntry$.ui) || {};
+    if (!alternate_highlight) return '';
+    const className = getCellHighlightClassName(alternate_highlight_color, rowIndex);
+    return className;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, rowIndex]);
   return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
     style: _objectSpread(_objectSpread({}, element.style), style),
-    className: classnames('table-cell', attributes.className, {
+    className: classnames('table-cell', attributes.className, highlightClass, {
       'cell-selected': isSelected,
       'cell-light-height-left-border': isSelectedFirstCell,
       'cell-light-height-right-border': isSelectedLastCell,

package/dist/basic-sdk/index.js

@@ -1,5 +1,6 @@
 import SDocEditor from './editor/sdoc-editor';
+import RevisionEditor from './editor/revision-editor';
 import { DiffViewer, SDocViewer, PublishedRevisionDiffViewer } from './views';
 import SDocOutline from './outline';
 import EventBus from './utils/event-bus';
-export { SDocEditor, SDocViewer, SDocOutline, EventBus, DiffViewer, PublishedRevisionDiffViewer };
+export { SDocEditor, RevisionEditor, SDocViewer, SDocOutline, EventBus, DiffViewer, PublishedRevisionDiffViewer };

package/dist/basic-sdk/socket/socket-manager.js

@@ -50,6 +50,7 @@ class SocketManager {
       this.eventBus.dispatch(EXTERNAL_EVENT.NEW_NOTIFICATION, notification);
     };
     this.onReceiveLocalOperations = operations => {
+      if (this.editor.readonly) return;
       this.pendingOperationList.push(operations);
       const lastOpBeginTime = new Date().getTime();
       this.pendingOperationBeginTimeList.push(lastOpBeginTime);
@@ -61,6 +62,7 @@ class SocketManager {
       this.sendOperations();
     };
     this.sendOperations = () => {
+      if (this.editor.readonly) return;
       if (this.state !== STATE.IDLE) return;
       stateDebug("State changed: ".concat(this.state, " -> ").concat(STATE.SENDING));
       this.state = STATE.SENDING;
@@ -141,6 +143,7 @@ class SocketManager {
     this.onReceiveRemoteOperations = params => {
       // if this.disconnect is true, Then the message sent by the remote end cannot be received
       if (this.state !== STATE.IDLE) return;
+      if (this.editor.readonly) return;
       const {
         version: serverVersion
       } = params;
@@ -203,6 +206,7 @@ class SocketManager {
       this.socketClient.getRecentOperations();
     };
     this.onGetRecentOperations = result => {
+      if (this.editor.readonly) return;
       const {
         mode,
         content
@@ -242,6 +246,7 @@ class SocketManager {
       this.resolveConflicting(loseOperations);
     };
     this.resolveConflicting = loseOperations => {
+      if (this.editor.readonly) return;
       conflictDebug('resolve conflicts');
       this.editor.isRemote = true;
       if (this.pendingOperationList.length !== 0) {
@@ -312,6 +317,7 @@ class SocketManager {
       this.socketClient.sendCursorLocation(location);
     };
     this.receiveCursorLocation = params => {
+      if (this.editor.readonly) return;
       const {
         user,
         location,

package/dist/basic-sdk/socket/with-socket-io.js

@@ -25,6 +25,7 @@ const withSocketIO = (editor, options) => {
     SocketManager.destroy();
   };
   newEditor.onChange = () => {
+    if (newEditor.readonly) return;
     const {
       document,
       config

package/dist/basic-sdk/views/revision-diff-viewer.js

@@ -6,6 +6,7 @@ import Loading from '../../components/loading';
 import '../../assets/css/diff-viewer.css';
 const RevisionDiffViewer = _ref => {
   let {
+    editor,
     revisionContent,
     didMountCallback
   } = _ref;
@@ -27,12 +28,17 @@ const RevisionDiffViewer = _ref => {
       setIsLoading(false);
     });
   }, [revisionContent, didMountCallback]);
+  useEffect(() => {
+    if (!editor) return;
+    editor.readonly = true;
+  }, []);
   if (isLoading) {
     return /*#__PURE__*/React.createElement(Loading, null);
   }
   return /*#__PURE__*/React.createElement(SDocViewer, {
     showToolbar: true,
     showOutline: true,
+    editor: editor,
     document: {
       children: diff.value
     }

package/dist/components/tooltip/index.css

@@ -1,3 +1,7 @@
+.sdoc-tooltip {
+  pointer-events: none;
+}
+
 .sdoc-tooltip .tooltip-inner {
   font-weight: lighter;
   text-align: start;

package/dist/context.js

@@ -25,9 +25,9 @@ class Context {
         this.settings['originFileURL'] = originFileURL;
       }
     };
-    this.uploadLocalImage = imageFile => {
+    this.uploadLocalImage = imageFiles => {
       const docUuid = this.getSetting('docUuid');
-      return this.api.uploadSdocImage(docUuid, imageFile).then(res => {
+      return this.api.uploadSdocImage(docUuid, imageFiles).then(res => {
         const {
           relative_path
         } = res.data;

package/dist/pages/simple-editor.js

@@ -6,8 +6,8 @@ import DocOperations from '../components/doc-operations';
 import Layout, { Header, Content } from '../layout';
 import context from '../context';
 import ErrorBoundary from './error-boundary';
-import { SDocEditor } from '../basic-sdk';
-import { PublishedRevisionDiffViewer, RevisionDiffViewer } from '../basic-sdk/views';
+import { SDocEditor, RevisionEditor } from '../basic-sdk';
+import { PublishedRevisionDiffViewer } from '../basic-sdk/views';
 import { useDocument } from '../hooks';
 import { resetWebTitle } from '../utils';
 import '../assets/css/simple-editor.css';
@@ -31,6 +31,7 @@ const SimpleEditor = _ref => {
   const [revisionContent, setRevisionContent] = useState(null);
   const [changes, setChanges] = useState([]);
   const initIsPublished = context.getSetting('isPublished') || false;
+  const isSdocRevision = context.getSetting('isSdocRevision') || false;
   const [isPublished, setPublished] = useState(initIsPublished);
 
   // useMount: reset title
@@ -93,6 +94,30 @@ const SimpleEditor = _ref => {
       setPublished(true);
     });
   }, [setErrorMessage]);
+  const renderEditor = useCallback(() => {
+    if (!isSdocRevision) {
+      return /*#__PURE__*/React.createElement(SDocEditor, {
+        ref: editorRef,
+        isReloading: isReloading,
+        document: document
+      });
+    }
+    if (isPublished) {
+      return /*#__PURE__*/React.createElement(PublishedRevisionDiffViewer, {
+        isShowChanges: isShowChanges,
+        revisionContent: revisionContent,
+        didMountCallback: setDiffChanges
+      });
+    }
+    return /*#__PURE__*/React.createElement(RevisionEditor, {
+      ref: editorRef,
+      isShowChanges: isShowChanges,
+      isReloading: isReloading,
+      document: document,
+      revisionContent: revisionContent,
+      didMountCallback: setDiffChanges
+    });
+  }, [isSdocRevision, editorRef, isReloading, document, isPublished, isShowChanges, revisionContent, setDiffChanges]);
   if (isFirstLoading) {
     return /*#__PURE__*/React.createElement(Loading, null);
   }
@@ -115,17 +140,6 @@ const SimpleEditor = _ref => {
     handleViewChangesToggle: handleViewChangesToggle,
     handleRevisionMerged: handleRevisionMerged,
     handleRevisionPublished: handleRevisionPublished
-  })), /*#__PURE__*/React.createElement(Content, null, isPublished && /*#__PURE__*/React.createElement(PublishedRevisionDiffViewer, {
-    isShowChanges: isShowChanges,
-    revisionContent: revisionContent,
-    didMountCallback: setDiffChanges
-  }), !isPublished && !isShowChanges && /*#__PURE__*/React.createElement(SDocEditor, {
-    ref: editorRef,
-    isReloading: isReloading,
-    document: document
-  }), !isPublished && isShowChanges && /*#__PURE__*/React.createElement(RevisionDiffViewer, {
-    revisionContent: revisionContent,
-    didMountCallback: setDiffChanges
-  }))));
+  })), /*#__PURE__*/React.createElement(Content, null, renderEditor())));
 };
 export default withTranslation('sdoc-editor')(SimpleEditor);

package/package.json

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

package/public/media/sdoc-editor-font/iconfont.svg

@@ -14,24 +14,18 @@
     />
       <missing-glyph />
       
-<<<<<<< HEAD
-      <glyph glyph-name="sdoc-selected-text" unicode="&#58974;" d="M48 480h928c25.6 0 48-22.4 48-48s-22.4-48-48-48h-928C22.4 384 0 406.4 0 432S22.4 480 48 480z m0-352h352c25.6 0 48-22.4 48-48s-22.4-48-48-48h-352C22.4 32 0 54.4 0 80S22.4 128 48 128z m0 704h928c25.6 0 48-22.4 48-48S1001.6 736 976 736h-928C22.4 736 0 758.4 0 784S22.4 832 48 832z m675.2-950.4c-12.8 0-28.8 6.4-38.4 16l-124.8 118.4c-22.4 19.2-22.4 51.2 0 73.6s54.4 19.2 76.8 0l86.4-83.2 211.2 204.8c22.4 19.2 54.4 19.2 76.8 0s22.4-51.2 0-73.6l-249.6-240c-12.8-12.8-25.6-16-38.4-16z"  horiz-adv-x="1028" />
+      <glyph glyph-name="sdoc-comment-quote" unicode="&#58976;" d="M48 896C73.6 896 96 873.6 96 848v-928c0-25.6-22.4-48-48-48S0-105.6 0-80v928C0 873.6 22.4 896 48 896z m224-665.6c51.2 16 96 48 124.8 92.8 32 41.6 48 118.4 48 163.2-9.6-6.4-22.4-6.4-44.8-6.4-38.4 0-70.4 12.8-99.2 41.6-25.6 28.8-41.6 64-41.6 108.8s16 80 44.8 108.8 70.4 41.6 108.8 41.6c51.2 0 89.6-22.4 124.8-64 32-41.6 48-96 48-160 0-102.4-28.8-220.8-83.2-294.4-54.4-76.8-131.2-128-227.2-153.6l-3.2 121.6z m438.4 6.4c51.2 16 89.6 48 124.8 92.8 35.2 41.6 51.2 118.4 48 163.2-9.6-6.4-22.4-6.4-44.8-6.4-38.4 0-73.6 12.8-99.2 41.6-28.8 28.8-41.6 64-41.6 108.8s16 80 41.6 108.8c32 25.6 70.4 38.4 112 38.4 51.2 0 89.6-22.4 121.6-64s48-96 48-160c0-102.4-28.8-220.8-83.2-294.4-54.4-76.8-131.2-128-227.2-153.6v124.8z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="sdoc-find-replace" unicode="&#58975;" d="M468.66016 896C260.66016 896 81.46016 761.6 20.66016 566.4s16-409.6 185.6-521.6 396.8-102.4 553.6 25.6l185.6-185.6c19.2-16 48-16 64 0 19.2 19.2 19.2 48 0 64l-185.6 185.6c115.2 140.8 137.6 332.8 60.8 492.8S647.86016 896 468.66016 896zM97.46016 432C97.46016 636.8 260.66016 800 465.46016 800S833.46016 636.8 833.46016 432 670.26016 64 465.46016 64 97.46016 227.2 97.46016 432z"  horiz-adv-x="1025" />
       
-=======
-<<<<<<< HEAD
->>>>>>> 4ad4d178 (feat: change icon)
       <glyph glyph-name="sdoc-freezed" unicode="&#58973;" d="M512 384m-512 0a512 512 0 1 1 1024 0 512 512 0 1 1-1024 0ZM316.8 716.8c118.4 70.4 265.6 70.4 384 3.2s192-195.2 192-332.8c0-137.6-73.6-265.6-195.2-332.8-182.4-105.6-416-41.6-521.6 140.8S134.4 608 316.8 716.8z m348.8-604.8c137.6 80 195.2 249.6 131.2 396.8L259.2 195.2c92.8-124.8 268.8-163.2 406.4-83.2zM352 652.8c-137.6-80-192-249.6-128-393.6l537.6 310.4c-96 128-272 163.2-409.6 83.2z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="sdoc-jump-to" unicode="&#58970;" d="M361.6 896c32 0 54.4-16 54.4-48S393.6 800 361.6 800H96v-832h832v262.4c0 32 16 57.6 48 57.6s48-25.6 48-57.6v-300.8c0-32-28.8-57.6-60.8-57.6H60.8c-32 0-60.8 25.6-60.8 57.6V835.2C0 870.4 25.6 896 60.8 896h300.8zM992 896c19.2 0 32-12.8 32-32v-332.8c0-28.8-19.2-51.2-48-51.2s-48 22.4-48 51.2V729.6L531.2 336c-6.4-9.6-19.2-16-35.2-16-12.8 0-25.6 6.4-35.2 16-19.2 19.2-19.2 51.2 0 70.4L857.6 800h-198.4c-28.8 0-51.2 19.2-51.2 48S630.4 896 656 896H992z"  horiz-adv-x="1024" />
       
-=======
->>>>>>> 0183ac39 (feat: change icon)
       <glyph glyph-name="sdoc-callout" unicode="&#58972;" d="M992 352H32c-19.2 0-32 12.8-32 32V832c0 19.2 12.8 32 32 32h960c19.2 0 32-12.8 32-32v-448c0-19.2-12.8-32-32-32zM96 448h832V768H96v-320z m-96-224v-96h1024v96H0z m0-224v-96h576v96H0z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="sdoc-chart" unicode="&#58971;" d="M992-128H32c-19.2 0-32 12.8-32 32V864c0 19.2 12.8 32 32 32h960c19.2 0 32-12.8 32-32v-960c0-19.2-12.8-32-32-32zM96-32h832V800H96v-832z m0 464v-96h832v96H96zM560 800h-96v-832h96V800z"  horiz-adv-x="1024" />
       
-      <glyph glyph-name="sdoc-notification" unicode="&#58970;" d="M931.2 80c-3.2 80-44.8 150.4-105.6 198.4V496c0 124.8-89.6 233.6-208 256v6.4C617.6 816 572.8 864 515.2 864S409.6 816 409.6 758.4v-6.4c-118.4-25.6-208-131.2-208-256v-217.6C137.6 233.6 99.2 160 96 80h835.2zM492.8-96h25.6c67.2 0 124.8 51.2 134.4 118.4H377.6c9.6-67.2 64-118.4 134.4-118.4h-19.2z"  horiz-adv-x="1024" />
-      
       <glyph glyph-name="sdoc-add" unicode="&#58968;" d="M512-128C227.2-128 0 99.2 0 384S227.2 896 512 896s512-227.2 512-512-227.2-512-512-512z m-51.2 563.2H291.2c-19.2 0-35.2-12.8-35.2-35.2v-35.2c0-19.2 12.8-35.2 35.2-35.2h169.6V160c0-19.2 12.8-35.2 35.2-35.2h35.2c19.2 0 35.2 12.8 35.2 35.2v169.6H736c19.2 0 35.2 12.8 35.2 35.2v35.2c0 19.2-12.8 35.2-35.2 35.2h-169.6V604.8c0 19.2-12.8 35.2-35.2 35.2h-35.2c-19.2 0-35.2-12.8-35.2-35.2v-169.6z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="sdoc-tag" unicode="&#58969;" d="M521.353986 860.33363l466.979644-466.979644c22.389435-22.389435 35.183398-51.175851 35.183398-83.160758s-12.793963-60.771324-35.183398-83.160759l-323.047562-319.849071c-22.389435-22.389435-51.175851-35.183398-79.962268-35.183398-31.984907 0-60.771324 12.793963-83.160758 35.183398L35.183398 374.163042c-25.587926 25.587926-38.381889 60.771324-31.984907 95.954721l31.984907 291.062655c6.396981 54.374342 47.977361 95.954721 102.351703 102.351703l291.062654 31.984907c31.984907 3.198491 67.168305-9.595472 92.756231-35.183398zM444.590209 767.577399L159.924536 735.592492l-31.984908-281.467182L578.926819-0.060372l316.65058 313.45209L444.590209 767.577399z m12.793963-127.939628c57.572833-57.572833 57.572833-147.130573 0-204.703406-25.587926-25.587926-63.969814-41.580379-102.351703-41.580379-38.381889 0-73.565286 12.793963-102.351703 41.580379-57.572833 57.572833-57.572833 147.130573 0 204.703406 57.572833 57.572833 150.329063 57.572833 204.703406 0z m-102.351703-70.366796c-6.396981 0-15.992454-3.198491-22.389435-9.595472-12.793963-12.793963-12.793963-31.984907 0-44.77887 12.793963-12.793963 31.984907-12.793963 44.77887 0 12.793963 12.793963 12.793963 31.984907 0 44.77887-6.396981 6.396981-12.793963 9.595472-22.389435 9.595472z"  horiz-adv-x="1024" />

package/public/media/sdoc-editor-font.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: "sdocfont"; /* Project id 4097705 */
-  src: url('./sdoc-editor-font/iconfont.eot?t=1700642464361'); /* IE9 */
-  src: url('./sdoc-editor-font/iconfont.eot?t=1700642464361#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('./sdoc-editor-font/iconfont.woff2?t=1700642464361') format('woff2'),
-       url('./sdoc-editor-font/iconfont.woff?t=1700642464361') format('woff'),
-       url('./sdoc-editor-font/iconfont.ttf?t=1700642464361') format('truetype'),
-       url('./sdoc-editor-font/iconfont.svg?t=1700642464361#sdocfont') format('svg');
+  src: url('./sdoc-editor-font/iconfont.eot?t=1702000194437'); /* IE9 */
+  src: url('./sdoc-editor-font/iconfont.eot?t=1702000194437#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('./sdoc-editor-font/iconfont.woff2?t=1702000194437') format('woff2'),
+       url('./sdoc-editor-font/iconfont.woff?t=1702000194437') format('woff'),
+       url('./sdoc-editor-font/iconfont.ttf?t=1702000194437') format('truetype'),
+       url('./sdoc-editor-font/iconfont.svg?t=1702000194437#sdocfont') format('svg');
 }
 
 .sdocfont {
@@ -16,8 +16,12 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.sdoc-selected-text:before {
-  content: "\e65e";
+.sdoc-comment-quote:before {
+  content: "\e660";
+}
+
+.sdoc-find-replace:before {
+  content: "\e65f";
 }
 
 .sdoc-freezed:before {
@@ -36,10 +40,6 @@
   content: "\e65b";
 }
 
-.sdoc-notification:before {
-  content: "\e65a";
-}
-
 .sdoc-add:before {
   content: "\e658";
 }
@@ -391,3 +391,4 @@
 .sdoc-user:before {
   content: "\e629";
 }
+