@seafile/sdoc-editor 0.5.79 → 1.0.1

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

@@ -83,7 +83,7 @@ const withLink = editor => {
         });
       } else {
         const [firstSelectedNode, ...restNodes] = getSelectedElems(newEditor);
-        if (!firstSelectedNode || restNodes) return; // If select more than one node or not select any node, return
+        if (!firstSelectedNode || restNodes.length) return; // If select more than one node or not select any node, return
         const isSelectTextNodes = firstSelectedNode.children.some(node => Text.isText(node));
         if (!isSelectTextNodes) return;
         const selectContent = window.getSelection().toString();

package/dist/basic-sdk/extension/plugins/seatable-tables/formatter/creator-formatter.js

@@ -0,0 +1,124 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React, { Component } from 'react';
+import { CreatorFormatter } from 'dtable-ui-component';
+import context from '@/context';
+import { isValidEmail } from '@/utils/common-utils';
+class DtableCreatorFormatter extends Component {
+  constructor(_props) {
+    super(_props);
+    _defineProperty(this, "calculateCollaboratorData", props => {
+      const {
+        value
+      } = props;
+      this.getCollaborator(value);
+    });
+    _defineProperty(this, "getCollaborator", value => {
+      if (!value) {
+        this.setState({
+          isDataLoaded: true,
+          collaborator: null
+        });
+        return;
+      }
+      this.setState({
+        isDataLoaded: false,
+        collaborator: null
+      });
+      const {
+        collaborators
+      } = this.props;
+      let collaborator = Array.isArray(collaborators) && collaborators.find(c => c && c.username === value);
+      if (collaborator) {
+        this.setState({
+          isDataLoaded: true,
+          collaborator: collaborator
+        });
+        return;
+      }
+      const mediaUrl = context.getSetting('mediaUrl');
+      const defaultAvatarUrl = "".concat(mediaUrl, "/avatars/default.png");
+      if (value === 'anonymous') {
+        collaborator = {
+          name: 'anonymous',
+          avatar_url: defaultAvatarUrl
+        };
+        this.setState({
+          isDataLoaded: true,
+          collaborator
+        });
+        return;
+      }
+      let dtableCollaborators = window.app.collaboratorsCache;
+      collaborator = dtableCollaborators[value];
+      if (collaborator) {
+        this.setState({
+          isDataLoaded: true,
+          collaborator
+        });
+        return;
+      }
+      if (!isValidEmail(value)) {
+        collaborator = {
+          name: value,
+          avatar_url: defaultAvatarUrl
+        };
+        dtableCollaborators[value] = collaborator;
+        this.setState({
+          isDataLoaded: true,
+          collaborator: collaborator
+        });
+        return;
+      }
+      context.getUserCommonInfo(value).then(res => {
+        collaborator = res.data;
+        dtableCollaborators[value] = collaborator;
+        this.setState({
+          isDataLoaded: true,
+          collaborator: collaborator
+        });
+      }).catch(() => {
+        let mediaUrl = context.getSetting('mediaUrl');
+        let defaultAvatarUrl = "".concat(mediaUrl, "/avatars/default.png");
+        collaborator = {
+          name: value,
+          avatar_url: defaultAvatarUrl
+        };
+        dtableCollaborators[value] = collaborator;
+        this.setState({
+          isDataLoaded: true,
+          collaborator: collaborator
+        });
+      });
+    });
+    this.state = {
+      isDataLoaded: false,
+      collaborator: null
+    };
+  }
+  componentDidMount() {
+    this.calculateCollaboratorData(this.props);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.calculateCollaboratorData(nextProps);
+  }
+  render() {
+    const {
+      isDataLoaded,
+      collaborator
+    } = this.state;
+    const {
+      value,
+      containerClassName
+    } = this.props;
+    if (!value || !collaborator) return this.props.renderEmptyFormatter();
+    if (isDataLoaded) {
+      return /*#__PURE__*/React.createElement(CreatorFormatter, {
+        collaborators: [collaborator],
+        value: value,
+        containerClassName: containerClassName
+      });
+    }
+    return this.props.renderEmptyFormatter();
+  }
+}
+export default DtableCreatorFormatter;

package/dist/basic-sdk/extension/plugins/seatable-tables/formatter/index.js

@@ -0,0 +1,241 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React, { Fragment } from 'react';
+import { TextFormatter, NumberFormatter, CheckboxFormatter, DateFormatter, SingleSelectFormatter, MultipleSelectFormatter, CollaboratorFormatter, ImageFormatter, FileFormatter, SimpleLongTextFormatter, GeolocationFormatter, FormulaFormatter, CTimeFormatter, MTimeFormatter, AutoNumberFormatter, UrlFormatter, EmailFormatter, DurationFormatter, RateFormatter, ButtonFormatter, CreatorFormatter } from 'dtable-ui-component';
+import { CellType, SELECT_OPTION_COLORS } from 'dtable-utils';
+class CellFormatter extends React.Component {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "renderEmptyFormatter", () => {
+      const {
+        components
+      } = this.props;
+      const {
+        emptyComponent
+      } = components || {};
+      return emptyComponent || null;
+    });
+    _defineProperty(this, "getSelectColumnOptions", column => {
+      if (!column || !column.data || !Array.isArray(column.data.options)) {
+        return [];
+      }
+      return column.data.options;
+    });
+    _defineProperty(this, "renderFormatter", () => {
+      let {
+        column,
+        cellValue,
+        collaborators,
+        isSample
+      } = this.props;
+      const {
+        type: columnType
+      } = column || {};
+      const containerClassName = "document-".concat(columnType, "-formatter");
+      switch (columnType) {
+        case CellType.TEXT:
+          {
+            if (!cellValue) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(TextFormatter, {
+              value: cellValue,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.COLLABORATOR:
+          {
+            // TODO
+            if (!Array.isArray(cellValue) || cellValue.length === 0) return this.renderEmptyFormatter();
+            cellValue = cellValue.filter(item => item);
+            if (cellValue.length === 0) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(CollaboratorFormatter, {
+              value: cellValue,
+              collaborators: collaborators,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.LONG_TEXT:
+          {
+            if (!cellValue) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(SimpleLongTextFormatter, {
+              value: cellValue,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.IMAGE:
+          {
+            if (!cellValue || Array.isArray(cellValue) && cellValue.length === 0) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(ImageFormatter, {
+              value: cellValue,
+              isSample: isSample,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.FILE:
+          {
+            if (!cellValue || Array.isArray(cellValue) && cellValue.length === 0) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(FileFormatter, {
+              value: cellValue,
+              isSample: isSample,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.GEOLOCATION:
+          {
+            if (!cellValue) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(GeolocationFormatter, {
+              value: cellValue,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.NUMBER:
+          {
+            if (!cellValue && cellValue !== 0) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(NumberFormatter, {
+              value: cellValue,
+              data: column.data,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.DATE:
+          {
+            if (!cellValue) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(DateFormatter, {
+              value: cellValue,
+              format: column.data.format,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.MULTIPLE_SELECT:
+          {
+            if (!cellValue || cellValue.length === 0) return this.renderEmptyFormatter();
+            const options = column.data && column.data.options || [];
+            return /*#__PURE__*/React.createElement(MultipleSelectFormatter, {
+              value: cellValue,
+              options: options,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.SINGLE_SELECT:
+          {
+            if (!cellValue) return this.renderEmptyFormatter();
+            const options = this.getSelectColumnOptions(column);
+            if (options.length === 0) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(SingleSelectFormatter, {
+              value: cellValue,
+              options: options,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.CHECKBOX:
+          {
+            return /*#__PURE__*/React.createElement(CheckboxFormatter, {
+              value: cellValue,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.CTIME:
+          {
+            if (!cellValue) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(CTimeFormatter, {
+              value: cellValue,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.MTIME:
+          {
+            if (!cellValue) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(MTimeFormatter, {
+              value: cellValue,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.CREATOR:
+        case CellType.LAST_MODIFIER:
+          {
+            // TODO
+            return /*#__PURE__*/React.createElement(CreatorFormatter, {
+              value: cellValue,
+              collaborators: collaborators,
+              containerClassName: containerClassName,
+              renderEmptyFormatter: this.renderEmptyFormatter
+            });
+          }
+        case CellType.FORMULA:
+        case CellType.LINK_FORMULA:
+          {
+            if (!cellValue && cellValue !== 0 && cellValue !== false) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(FormulaFormatter, {
+              value: cellValue,
+              column: column,
+              collaborators: collaborators,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.LINK:
+          {
+            // TODO
+            return null;
+          }
+        case CellType.AUTO_NUMBER:
+          {
+            if (!cellValue) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(AutoNumberFormatter, {
+              value: cellValue,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.URL:
+          {
+            if (!cellValue) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(UrlFormatter, {
+              value: cellValue,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.EMAIL:
+          {
+            if (!cellValue) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(EmailFormatter, {
+              value: cellValue,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.DURATION:
+          {
+            var _column$data;
+            if (!cellValue) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(DurationFormatter, {
+              value: cellValue,
+              format: column === null || column === void 0 ? void 0 : (_column$data = column.data) === null || _column$data === void 0 ? void 0 : _column$data.duration_format,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.RATE:
+          {
+            if (!cellValue) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(RateFormatter, {
+              value: cellValue,
+              data: column.data || {},
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.BUTTON:
+          {
+            return /*#__PURE__*/React.createElement(ButtonFormatter, {
+              data: column.data || {},
+              containerClassName: containerClassName,
+              optionColors: SELECT_OPTION_COLORS
+            });
+          }
+        default:
+          return null;
+      }
+    });
+  }
+  render() {
+    return /*#__PURE__*/React.createElement(Fragment, null, this.renderFormatter());
+  }
+}
+CellFormatter.defaultProps = {
+  isSample: true
+};
+export default CellFormatter;

package/dist/basic-sdk/extension/plugins/seatable-tables/op-menu/index.css

@@ -0,0 +1,16 @@
+.seatable-op-menu {
+  position: absolute;
+  padding: 7px;
+  height: 36px;
+  background-color: #fff;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  z-index: 100;
+  display: flex;
+}
+
+.seatable-op-menu .sdocfont {
+  font-size: 12px;
+  color: #444;
+  cursor: pointer;
+}

package/dist/basic-sdk/extension/plugins/seatable-tables/op-menu/index.js

@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import { ElementPopover } from '../../../commons';
+import './index.css';
+export default function OpMenu(_ref) {
+  let {
+    editor,
+    element,
+    menuPosition
+  } = _ref;
+  const [isShowSettingPanel, setIsShowSettingPanel] = useState(false);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ElementPopover, null, /*#__PURE__*/React.createElement("div", {
+    className: "seatable-op-menu",
+    style: menuPosition
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "sdocfont sdoc-settings"
+  }))));
+}

package/dist/basic-sdk/extension/plugins/seatable-tables/render-element/index.css

@@ -2,6 +2,7 @@
   width: 100%;
   overflow: auto;
   border: 1px solid transparent;
+  position: relative;
 }
 
 .seatable-view-container.selected {

package/dist/basic-sdk/extension/plugins/seatable-tables/render-element/record-item.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import { getColumnWidth } from '../../seatable-column/helpers';
+import Formatter from '../formatter';
 export default function RecordItem(_ref) {
   let {
     record,
     columns,
-    getTableCellValue
+    editor
   } = _ref;
   return /*#__PURE__*/React.createElement("tr", {
     className: "seatable-view-body-column-row"
@@ -16,6 +17,11 @@ export default function RecordItem(_ref) {
       style: {
         width
       }
-    }, getTableCellValue(record, column));
+    }, /*#__PURE__*/React.createElement(Formatter, {
+      isSample: true,
+      column: column,
+      cellValue: record[column.key],
+      collaborators: editor.collaborators
+    }));
   }));
 }

package/dist/basic-sdk/extension/plugins/seatable-tables/render-element/record-list.js

@@ -2,16 +2,16 @@ import React from 'react';
 import RecordItem from './record-item';
 export default function RecordList(_ref) {
   let {
+    editor,
     records,
-    columns,
-    getTableCellValue
+    columns
   } = _ref;
   return /*#__PURE__*/React.createElement("tbody", null, records.map(record => {
     return /*#__PURE__*/React.createElement(RecordItem, {
       key: record._id,
+      editor: editor,
       record: record,
-      columns: columns,
-      getTableCellValue: getTableCellValue
+      columns: columns
     });
   }));
 }

package/dist/basic-sdk/extension/plugins/seatable-tables/render-element/seatable-table.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { useReadOnly, useSelected } from '@seafile/slate-react';
@@ -6,6 +6,8 @@ import Loading from '../../../../../components/loading';
 import RecordHeader from './record-header';
 import RecordList from './record-list';
 import './index.css';
+import OpMenu from '../op-menu';
+import { useScrollContext } from '../../../../hooks/use-scroll-context';
 function SeaTableTable(_ref) {
   let {
     element,
@@ -14,8 +16,9 @@ function SeaTableTable(_ref) {
     children,
     editor
   } = _ref;
+  const scrollRef = useScrollContext();
   const isSelected = useSelected();
-  const isReadOnly = useReadOnly();
+  const readOnly = useReadOnly();
   const [isLoading, setIsLoading] = useState(true);
   const [columns, setColumns] = useState([]);
   const [records, setRecords] = useState([]);
@@ -24,6 +27,14 @@ function SeaTableTable(_ref) {
   const {
     t
   } = useTranslation();
+
+  // menu control
+  const seaTableRef = useRef(null);
+  const [isShowMenu, setIsShowMenu] = useState(false);
+  const [menuPosition, setMenuPosition] = useState({
+    top: '',
+    left: ''
+  });
   useEffect(() => {
     const {
       table_id
@@ -31,26 +42,77 @@ function SeaTableTable(_ref) {
     const table = editor.getTableById(table_id);
     setColumns(table.columns);
     const records = table.rows;
-    const isShowTipMessage = isReadOnly ? records.length > 200 : records.length > 10;
-    const shownRecords = isReadOnly ? records.slice(0, 200) : records.slice(0, 10);
+    const isShowTipMessage = readOnly ? records.length > 200 : records.length > 10;
+    const shownRecords = readOnly ? records.slice(0, 200) : records.slice(0, 10);
     setIsShowTipMessage(isShowTipMessage);
     setRecords(records);
     setShownRecords(shownRecords);
     setIsLoading(false);
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [element, isReadOnly]);
+  }, [element, readOnly]);
+  const handleScroll = useCallback(e => {
+    if (readOnly) return;
+    if (!isShowMenu) return;
+    if (e.currentTarget.scrollTop) {
+      const {
+        top,
+        left
+      } = seaTableRef.current.getBoundingClientRect();
+      const menuTop = top - 36; // top = top distance - menu height
+      const newMenuPosition = {
+        top: menuTop,
+        left: left // left = code-block left distance
+      };
+
+      setMenuPosition(newMenuPosition);
+    }
+  }, [isShowMenu, readOnly]);
+  useEffect(() => {
+    if (readOnly) return;
+    let observerRefValue = null;
+    if (scrollRef.current) {
+      scrollRef.current.addEventListener('scroll', handleScroll);
+      observerRefValue = scrollRef.current;
+    }
+    return () => {
+      observerRefValue.removeEventListener('scroll', handleScroll);
+    };
+  }, [handleScroll, readOnly, scrollRef]);
+  useEffect(() => {
+    if (!isSelected) {
+      setIsShowMenu(false);
+    }
+  }, [isSelected]);
+  const onTableClick = useCallback(event => {
+    if (readOnly) return;
+    const {
+      top,
+      left
+    } = seaTableRef.current.getBoundingClientRect();
+    const menuTop = top - 36; // top = top distance - menu height
+    const newMenuPosition = {
+      top: menuTop,
+      left: left // left = callout left distance
+    };
+
+    setMenuPosition(newMenuPosition);
+    setIsShowMenu(true);
+  }, [readOnly]);
   const containerClass = classNames('seatable-view-container', {
     selected: isSelected
   });
-  const getTableCellValue = useCallback((row, column) => {
-    const {
-      table_id
-    } = element;
-    return editor.getTableCellValue(table_id, row, column);
-  }, [editor, element]);
   return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
-    className: containerClass,
+    className: "seatable-table-wrapper",
     contentEditable: false
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: seaTableRef,
+    className: containerClass,
+    onClick: onTableClick
+  }, isShowMenu && /*#__PURE__*/React.createElement(OpMenu, {
+    editor: editor,
+    element: element,
+    menuPosition: menuPosition
   }), isLoading && /*#__PURE__*/React.createElement(Loading, null), !isLoading && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("table", {
     className: "seatable-view-records"
   }, /*#__PURE__*/React.createElement(RecordHeader, {
@@ -58,14 +120,13 @@ function SeaTableTable(_ref) {
   }), /*#__PURE__*/React.createElement(RecordList, {
     editor: editor,
     records: shownRecords,
-    columns: columns,
-    getTableCellValue: getTableCellValue
-  })), !isReadOnly && isShowTipMessage && /*#__PURE__*/React.createElement("div", {
+    columns: columns
+  })), !readOnly && isShowTipMessage && /*#__PURE__*/React.createElement("div", {
     className: "d-print-none ml-2 m-2"
   }, t('And_x_more_records', {
     count: records.length - 10
-  })), isReadOnly && isShowTipMessage && /*#__PURE__*/React.createElement("div", {
+  })), readOnly && isShowTipMessage && /*#__PURE__*/React.createElement("div", {
     className: "d-print-none ml-2 m-2"
-  }, t('Print_limit_exceeded'))), children);
+  }, t('Print_limit_exceeded'))), children));
 }
 export default SeaTableTable;

package/dist/basic-sdk/extension/plugins/seatable-tables/setting/index.css

@@ -0,0 +1 @@
+.seatable-setting-container {}

package/dist/basic-sdk/extension/plugins/seatable-tables/setting/index.js

@@ -0,0 +1,6 @@
+import React from 'react';
+export default function SeaTableSetting() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "seatable-setting-container"
+  });
+}

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

@@ -1377,6 +1377,7 @@ export const handleInsertTable = (editor, insertPosition, path, tableNode) => {
       at: selection.anchor
     });
   }
+  ReactEditor.focus(editor);
 };
 export const getInsertPosition = editor => {
   const {

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

@@ -30,6 +30,7 @@ const QuickInsertBlockMenu = _ref => {
   const renderItemListRef = useRef([]);
   const downDownWrapperRef = useRef(null);
   const onInsertImageToggle = useCallback(() => {
+    callback && callback();
     const eventBus = EventBus.getInstance();
     if (insertPosition === INSERT_POSITION.CURRENT) {
       Transforms.select(editor, editor.selection.focus);
@@ -39,47 +40,47 @@ const QuickInsertBlockMenu = _ref => {
       insertPosition,
       slateNode
     });
-    callback && callback();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, insertPosition]);
   const createTable = useCallback(size => {
+    callback && callback();
     const newInsertPosition = slateNode.type === ELEMENT_TYPE.LIST_ITEM ? INSERT_POSITION.AFTER : insertPosition;
     insertTable(editor, size, editor.selection, newInsertPosition);
-    callback && callback();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, insertPosition, slateNode]);
   const openLinkDialog = useCallback(() => {
+    callback && callback();
     const eventBus = EventBus.getInstance();
     eventBus.dispatch(INTERNAL_EVENT.INSERT_ELEMENT, {
       type: ELEMENT_TYPE.LINK,
       insertPosition,
       slateNode
     });
-    callback && callback();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [insertPosition]);
   const onInsertCodeBlock = useCallback(() => {
+    callback && callback();
     const newInsertPosition = slateNode.type === ELEMENT_TYPE.LIST_ITEM ? INSERT_POSITION.AFTER : insertPosition;
     changeToCodeBlock(editor, 'plaintext', newInsertPosition);
-    callback && callback();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, insertPosition, slateNode]);
   const onInsertList = useCallback(type => {
-    toggleList(editor, type, insertPosition);
     callback && callback();
+    toggleList(editor, type, insertPosition);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, insertPosition, slateNode]);
   const onInsertCheckList = useCallback(() => {
-    setCheckListItemType(editor, ELEMENT_TYPE.CHECK_LIST_ITEM, insertPosition);
     callback && callback();
+    setCheckListItemType(editor, ELEMENT_TYPE.CHECK_LIST_ITEM, insertPosition);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, insertPosition, slateNode]);
   const onInsert = useCallback(type => {
-    insertElement(editor, type, insertPosition);
     callback && callback();
+    insertElement(editor, type, insertPosition);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, insertPosition, slateNode]);
   const onInsertCallout = useCallback(type => {
+    callback && callback();
     if (insertPosition === INSERT_POSITION.CURRENT) {
       wrapCallout(editor);
       Transforms.removeNodes(editor, {
@@ -89,7 +90,6 @@ const QuickInsertBlockMenu = _ref => {
       insertElement(editor, type, insertPosition);
       wrapCallout(editor);
     }
-    callback && callback();
   }, [callback, editor, insertPosition]);
   const isDisableCallout = useMemo(() => {
     const callout = getAboveBlockNode(editor, {

package/dist/basic-sdk/extension/toolbar/side-toolbar/index.js

@@ -33,9 +33,9 @@ const SideToolbar = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const handleClick = useCallback(e => {
-    if (!isShowSideMenu) return;
+    if (!isShowSideMenu || !menuRef.current) return;
     const isClickSideTool = menuRef.current.contains(e.target);
-    if (isClickSideTool) return;
+    if (isClickSideTool || !sideMenuRef.current) return;
     const {
       sideMenuDom
     } = sideMenuRef.current;

package/dist/pages/document-plugin-editor.js

@@ -21,7 +21,7 @@ const DocumentPluginEditor = _ref => {
     getColumnCellValue,
     tables,
     getTableById,
-    getTableCellValue
+    collaborators
   } = _ref;
   context.initApi();
   const forceUpdate = useForceUpdate();
@@ -47,7 +47,7 @@ const DocumentPluginEditor = _ref => {
     // insert table
     newEditor.tables = tables || [];
     newEditor.getTableById = getTableById;
-    newEditor.getTableCellValue = getTableCellValue;
+    newEditor.collaborators = collaborators;
     newEditor.cursors = cursors || {};
     newEditor.width = PAGE_EDIT_AREA_WIDTH; // default width
     newEditor.editorType = DOCUMENT_PLUGIN_EDITOR;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.5.79",
+  "version": "1.0.1",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",
@@ -16,6 +16,7 @@
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "1.11.2",
     "deep-copy": "1.4.2",
+    "dtable-ui-component": "^4.4.36",
     "goober": "2.1.13",
     "is-hotkey": "0.2.0",
     "is-url": "^1.2.4",

package/public/media/dtable-font.css

@@ -1,11 +1,14 @@
 @font-face {
-  font-family: "dtable-font"; /* Project id 1206632 */
-  src: url('./dtable-fonts/dtable-font.eot?t=1691034193364'); /* IE9 */
-  src: url('./dtable-fonts/dtable-font.eot?t=1691034193364#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('./dtable-fonts/dtable-font.woff2?t=1691034193364') format('woff2'),
-       url('./dtable-fonts/dtable-font.woff?t=1691034193364') format('woff'),
-       url('./dtable-fonts/dtable-font.ttf?t=1691034193364') format('truetype'),
-       url('./dtable-fonts/dtable-font.svg?t=1691034193364#dtable-font') format('svg');
+  font-family: "dtable-font";
+  /* Project id 1206632 */
+  src: url('./dtable-fonts/dtable-font.eot?t=1691034193364');
+  /* IE9 */
+  src: url('./dtable-fonts/dtable-font.eot?t=1691034193364#iefix') format('embedded-opentype'),
+    /* IE6-IE8 */
+    url('./dtable-fonts/dtable-font.woff2?t=1691034193364') format('woff2'),
+    url('./dtable-fonts/dtable-font.woff?t=1691034193364') format('woff'),
+    url('./dtable-fonts/dtable-font.ttf?t=1691034193364') format('truetype'),
+    url('./dtable-fonts/dtable-font.svg?t=1691034193364#dtable-font') format('svg');
 }
 
 .dtable-font {
@@ -1563,4 +1566,3 @@
 .dtable-icon-calendar-alt-solid:before {
   content: "\e622";
 }
-

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

@@ -14,6 +14,8 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="sdoc-settings" unicode="&#58993;" d="M976 467.2c3.2-3.2 3.2-3.2 3.2-9.6L976 326.4c0-3.2-3.2-12.8-9.6-12.8l-108.8-38.4c-3.2-12.8-12.8-28.8-19.2-41.6l51.2-102.4c0-3.2 0-12.8-3.2-19.2l-96-96c-3.2-3.2-12.8-9.6-19.2-3.2L668.8 64c-12.8-9.6-28.8-12.8-41.6-19.2L588.8-64c0-3.2-3.2-9.6-12.8-9.6H444.8c-3.2 0-12.8 3.2-12.8 9.6l-38.4 108.8c-12.8 3.2-28.8 12.8-41.6 19.2l-102.4-51.2c-3.2 0-12.8 0-19.2 3.2l-96 96c-6.4 0-12.8 9.6-6.4 16l51.2 102.4c-9.6 12.8-12.8 28.8-19.2 41.6L51.2 310.4c-3.2 0-9.6 3.2-9.6 12.8V454.4c0 3.2 3.2 12.8 9.6 12.8L160 508.8c3.2 12.8 9.6 28.8 19.2 41.6L128 656c-6.4 6.4-6.4 12.8 0 12.8l96 96c3.2 9.6 9.6 9.6 16 3.2l102.4-51.2c12.8 9.6 28.8 12.8 41.6 19.2l38.4 112c0 3.2 3.2 9.6 12.8 9.6h128c3.2 0 12.8-3.2 12.8-9.6l38.4-108.8c12.8-3.2 28.8-12.8 41.6-19.2l102.4 51.2c3.2 0 12.8 0 19.2-3.2l96-96c3.2-3.2 9.6-12.8 3.2-19.2l-51.2-102.4c9.6-12.8 12.8-28.8 19.2-41.6L976 467.2zM566.4 614.4c-176 48-329.6-108.8-288-288 19.2-76.8 86.4-140.8 160-160 176-48 329.6 108.8 288 288-19.2 80-80 140.8-160 160z"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="sdoc-seatable-table" unicode="&#58991;" d="M384 896c35.2 0 64-28.8 64-64v-320c0-35.2-28.8-64-64-64H64c-35.2 0-64 28.8-64 64V832C0 867.2 28.8 896 64 896h320z m-32-96H96v-256h256V800z m608 96c35.2 0 64-28.8 64-64v-320c0-35.2-28.8-64-64-64H640c-35.2 0-64 28.8-64 64V832c0 35.2 28.8 64 64 64h320z m-32-96h-256v-256h256V800zM384 320c35.2 0 64-28.8 64-64v-320c0-35.2-28.8-64-64-64H64c-35.2 0-64 28.8-64 64V256c0 35.2 28.8 64 64 64h320z m-32-96H96v-256h256v256z m608 96c35.2 0 64-28.8 64-64v-320c0-35.2-28.8-64-64-64H640c-35.2 0-64 28.8-64 64V256c0 35.2 28.8 64 64 64h320z m-32-96h-256v-256h256v256z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="sdoc-more-vertical-left" unicode="&#58992;" d="M703.629257 704.370743c-54.294956 0-95.814629 41.519672-95.814628 95.814628s41.519672 95.814629 95.814628 95.814629 95.814629-41.519672 95.814629-95.814629-41.519672-95.814629-95.814629-95.814628z m0-415.196724c-54.294956 0-95.814629 41.519672-95.814628 95.814628s41.519672 95.814629 95.814628 95.814629 95.814629-41.519672 95.814629-95.814629-41.519672-95.814629-95.814629-95.814628z m0-415.196724c-54.294956 0-95.814629 41.519672-95.814628 95.814628s41.519672 95.814629 95.814628 95.814629 95.814629-41.519672 95.814629-95.814629-41.519672-95.814629-95.814629-95.814628zM310.78928 857.674149L16.957752 432.895962c-19.162926-28.744389-19.162926-76.651703 0-105.396092L310.78928-94.084496c19.162926-28.744389 60.682598-44.713493 89.426987-25.550568 28.744389 22.356747 38.325851 63.876419 19.162925 92.620808L125.547665 381.794826l287.443885 405.615262c25.550568 35.13203 25.550568 73.457882-12.775283 95.814628s-67.07024 3.193821-89.426987-25.550567z"  horiz-adv-x="1024" />

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

@@ -1,14 +1,14 @@
 @font-face {
   font-family: "sdocfont";
   /* Project id 4097705 */
-  src: url('./sdoc-editor-font/iconfont.eot?t=1718766655905');
+  src: url('./sdoc-editor-font/iconfont.eot?t=1719382079268');
   /* IE9 */
-  src: url('./sdoc-editor-font/iconfont.eot?t=1718766655905#iefix') format('embedded-opentype'),
+  src: url('./sdoc-editor-font/iconfont.eot?t=1719382079268#iefix') format('embedded-opentype'),
     /* IE6-IE8 */
-    url('./sdoc-editor-font/iconfont.woff2?t=1718766655905') format('woff2'),
-    url('./sdoc-editor-font/iconfont.woff?t=1718766655905') format('woff'),
-    url('./sdoc-editor-font/iconfont.ttf?t=1718766655905') format('truetype'),
-    url('./sdoc-editor-font/iconfont.svg?t=1718766655905#sdocfont') format('svg');
+    url('./sdoc-editor-font/iconfont.woff2?t=1719382079268') format('woff2'),
+    url('./sdoc-editor-font/iconfont.woff?t=1719382079268') format('woff'),
+    url('./sdoc-editor-font/iconfont.ttf?t=1719382079268') format('truetype'),
+    url('./sdoc-editor-font/iconfont.svg?t=1719382079268#sdocfont') format('svg');
 }
 
 .sdocfont {
@@ -19,6 +19,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.sdoc-settings:before {
+  content: "\e671";
+}
+
 .sdoc-seatable-table:before {
   content: "\e66f";
 }