@seafile/sdoc-editor 2.0.7 → 2.0.8-alpha.0

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

@@ -0,0 +1,155 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _slateReact = require("@seafile/slate-react");
+var _slate = require("@seafile/slate");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _seaChart = require("sea-chart");
+var _reactI18next = require("react-i18next");
+var _hoverMenu = _interopRequireDefault(require("./hover-menu/"));
+var _chartEditDialog = _interopRequireDefault(require("./chart-edit-dialog"));
+var _context = _interopRequireDefault(require("../../../../context"));
+var _useScrollContext = require("../../../hooks/use-scroll-context");
+var _helpers = require("./helpers");
+require("./render-elem.css");
+const Chart = _ref => {
+  var _window, _window$app, _window2, _window2$app, _window2$app$state;
+  let {
+    element,
+    editor,
+    attributes,
+    children,
+    isSelected,
+    t
+  } = _ref;
+  const {
+    statItem
+  } = element;
+  const api = {
+    queryUsers: (_window = window) !== null && _window !== void 0 && (_window$app = _window.app) !== null && _window$app !== void 0 && _window$app.queryUsers ? window.app.queryUsers : () => {},
+    getTableFormulaResults: editor.getTableFormulaResults,
+    getViewRows: editor.getViewRows
+  };
+  const scrollRef = (0, _useScrollContext.useScrollContext)();
+  const readOnly = (0, _slateReact.useReadOnly)();
+  const chartRef = (0, _react.useRef)(null);
+  const [menuPosition, setMenuPosition] = (0, _react.useState)({});
+  const [isShowHoverMenu, setIsShowHoverMenu] = (0, _react.useState)(false);
+  const [isShowDialog, setIsShowDialog] = (0, _react.useState)(false);
+  const [isFullScreen, setIsFullScreen] = (0, _react.useState)(false);
+  const setPosition = (0, _react.useCallback)(() => {
+    if (chartRef.current) {
+      const {
+        top,
+        left
+      } = chartRef.current.getBoundingClientRect();
+      setMenuPosition({
+        top: top - 42,
+        left: left - 3
+      });
+    }
+  }, []);
+  const onScroll = (0, _react.useCallback)(e => {
+    setPosition();
+    // Unrendered chart scrolls into viewport for the first time
+    // if (isInViewPort(chartRef.current) && !chartRef.current.chartMetaData && isSelectedTable(statItem, editor?.dtableBases) && !chartRef.current.isStopScroll) {
+    //   chartRef.current.isStopScroll = true;
+    // }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onClickChart = (0, _react.useCallback)(() => {
+    const path = _slateReact.ReactEditor.findPath(editor, element);
+    _slate.Transforms.select(editor, [path[0]]);
+    setPosition();
+    setIsShowHoverMenu(true);
+  }, [editor, element, setPosition]);
+  const onCloseEditDialog = (0, _react.useCallback)(newStatItemData => {
+    const path = _slateReact.ReactEditor.findPath(editor, element);
+    _slate.Transforms.setNodes(editor, {
+      statItem: newStatItemData
+    }, {
+      at: [path[0]]
+    });
+    setIsShowDialog(false);
+  }, [editor, element]);
+
+  // Mount
+  (0, _react.useEffect)(() => {
+    // Init draw
+    if ((0, _helpers.isInViewPort)(chartRef.current)) {
+      // getDtables(statItem.base_id, true);
+    }
+    let observerRefValue = null;
+    if (scrollRef.current) {
+      scrollRef.current.addEventListener('scroll', onScroll);
+      observerRefValue = scrollRef.current;
+    }
+    return () => {
+      observerRefValue.removeEventListener('scroll', onScroll);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", Object.assign({
+    id: element.id,
+    className: "sdoc-chart-container"
+  }, attributes, {
+    onClick: onClickChart
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('sdoc-chart-view', {
+      'active': isSelected
+    }),
+    ref: chartRef
+  }, children, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-chart-view-content",
+    contentEditable: false
+  }, /*#__PURE__*/_react.default.createElement(_seaChart.View, {
+    chart: statItem,
+    api: api,
+    config: _context.default.getSettings(),
+    tables: editor.tables,
+    collaborators: editor.collaborators || [],
+    departments: ((_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$app = _window2.app) === null || _window2$app === void 0 ? void 0 : (_window2$app$state = _window2$app.state) === null || _window2$app$state === void 0 ? void 0 : _window2$app$state.departments) || [],
+    isCalculateByView: true,
+    isRenderByD3: true
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: "sdoc-chart-view-rect sdoc-chart-view-rect-lt"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "sdoc-chart-view-rect sdoc-chart-view-rect-lb"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "sdoc-chart-view-rect sdoc-chart-view-rect-rt"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "sdoc-chart-view-rect sdoc-chart-view-rect-rb"
+  }))), isSelected && isShowHoverMenu && !readOnly && /*#__PURE__*/_react.default.createElement(_hoverMenu.default, {
+    menuPosition: menuPosition,
+    onEditChart: () => {
+      setIsFullScreen(false);
+      setIsShowDialog(true);
+    },
+    onFullscreen: () => {
+      setIsFullScreen(true);
+      setIsShowDialog(true);
+    }
+  }), isShowDialog && /*#__PURE__*/_react.default.createElement(_chartEditDialog.default, {
+    editor: editor,
+    element: element,
+    api: api,
+    isFullScreen: isFullScreen,
+    onCloseEditDialog: onCloseEditDialog
+  }));
+};
+const SdocChart = (0, _reactI18next.withTranslation)('sdoc-editor')(Chart);
+function renderChart(props, editor) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const isSelected = (0, _slateReact.useSelected)();
+  return /*#__PURE__*/_react.default.createElement(SdocChart, Object.assign({}, props, {
+    editor: editor,
+    isSelected: isSelected
+  }));
+}
+var _default = exports.default = renderChart;

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

@@ -16,6 +16,12 @@ Object.defineProperty(exports, "CalloutPlugin", {
     return _callout.default;
   }
 });
+Object.defineProperty(exports, "ChartPlugin", {
+  enumerable: true,
+  get: function () {
+    return _chart.default;
+  }
+});
 Object.defineProperty(exports, "CheckListPlugin", {
   enumerable: true,
   get: function () {
@@ -188,7 +194,8 @@ var _wikiLink = _interopRequireDefault(require("./wiki-link"));
 var _seatableColumn = _interopRequireDefault(require("./seatable-column"));
 var _seatableTables = _interopRequireDefault(require("./seatable-tables"));
 var _group = _interopRequireDefault(require("./group"));
-const Plugins = [_markdown.default, _html.default, _header.default, _link.default, _blockquote.default, _list.default, _checkList.default, _codeBlock.default, _image.default, _video.default, _table.default, _multiColumn.default, _textStyle.default, _textAlign.default, _font.default, _sdocLink.default, _paragraph.default, _fileLink.default, _callout.default, _searchReplace.default, _quickInsert.default, _group.default];
+var _chart = _interopRequireDefault(require("./chart"));
+const Plugins = [_markdown.default, _html.default, _header.default, _link.default, _blockquote.default, _list.default, _checkList.default, _codeBlock.default, _image.default, _video.default, _table.default, _multiColumn.default, _textStyle.default, _textAlign.default, _font.default, _sdocLink.default, _paragraph.default, _fileLink.default, _callout.default, _searchReplace.default, _quickInsert.default, _group.default, _chart.default];
 const WikiPlugins = exports.WikiPlugins = [...Plugins, _wikiLink.default];
 const CommentPlugins = exports.CommentPlugins = [_markdown.default, _html.default, _paragraph.default, _textStyle.default, _list.default, _image.default, _link.default, _mention.default, _blockquote.default];
 var _default = exports.default = Plugins;

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

@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.COLUMN_MIN_WIDTH = void 0;
-const COLUMN_MIN_WIDTH = exports.COLUMN_MIN_WIDTH = 35;
+const COLUMN_MIN_WIDTH = exports.COLUMN_MIN_WIDTH = 80;

package/dist/basic-sdk/extension/plugins/multi-column/helper.js

@@ -11,6 +11,9 @@ var _slateReact = require("@seafile/slate-react");
 var _constants = require("../../constants");
 var _constants2 = require("./constants");
 var _core = require("../../core");
+var _localStorageUtils = _interopRequireDefault(require("../../../../utils/local-storage-utils"));
+var _constants3 = require("../../../constants");
+var _fullWidthMode = require("../../../utils/full-width-mode");
 const insertMultiColumn = function (editor, selection) {
   let position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _constants.INSERT_POSITION.CURRENT;
   let type = arguments.length > 3 ? arguments[3] : undefined;
@@ -40,7 +43,7 @@ const generateEmptyMultiColumn = (editor, MultiColumnType) => {
     default:
       break;
   }
-  const currentPageWidth = getCurrentPageWidth();
+  const currentPageWidth = getCurrentPageWidth(editor);
   const initialColumnWidth = Math.max(_constants2.COLUMN_MIN_WIDTH, parseInt(currentPageWidth / multiColumnNumber));
   for (let i = 0; i < multiColumnNumber; i++) {
     const columnWidthKey = _slugid.default.nice();
@@ -139,12 +142,13 @@ const handleInsertMultiColumn = (editor, insertPosition, path, multiColumnNode)
   _slateReact.ReactEditor.focus(editor);
 };
 exports.handleInsertMultiColumn = handleInsertMultiColumn;
-const updateColumnWidthOnDeletion = (editor, selection, column, deletionDirection) => {
-  const multiColumnPath = [selection.anchor.path[0]];
+const updateColumnWidthOnDeletion = function (editor, selection, column, deletionDirection) {
+  let isDragged = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  const multiColumnPath = !isDragged ? [selection.anchor.path[0]] : [selection[0]];
   const newMultiColumnNode = _slate.Node.get(editor, multiColumnPath);
-  const targetColumnIndex = selection.anchor.path[1] + (deletionDirection === 'deleteForward' ? 1 : 0);
+  const targetColumnIndex = !isDragged ? selection.anchor.path[1] + (deletionDirection === 'deleteForward' ? 1 : 0) : selection[1] + (deletionDirection === 'deleteForward' ? 1 : 0);
   const remainingColumn = column.filter((_, index) => index !== targetColumnIndex);
-  const currentPageWidth = getCurrentPageWidth();
+  const currentPageWidth = getCurrentPageWidth(editor);
   const columnWidth = Math.max(_constants2.COLUMN_MIN_WIDTH, parseInt(currentPageWidth / remainingColumn.length));
 
   // Recalculate width of every left column
@@ -156,9 +160,22 @@ const updateColumnWidthOnDeletion = (editor, selection, column, deletionDirectio
   updateColumnWidth(editor, newMultiColumnNode, newColumn, multiColumnPath);
 };
 exports.updateColumnWidthOnDeletion = updateColumnWidthOnDeletion;
-const getCurrentPageWidth = () => {
+const getCurrentPageWidth = editor => {
   const sdocEditorPage = document.getElementById('sdoc-editor');
-  const pageWidth = sdocEditorPage === null || sdocEditorPage === void 0 ? void 0 : sdocEditorPage.getBoundingClientRect().width;
+  let pageWidth;
+  pageWidth = sdocEditorPage === null || sdocEditorPage === void 0 ? void 0 : sdocEditorPage.getBoundingClientRect().width;
+
+  // Get pageWidth if on is_full_width mode
+  if (_localStorageUtils.default.getItem(_constants3.FULL_WIDTH_MODE)) {
+    var _getStyleByFullWidthM;
+    const sdocEditorPageContent = document.getElementsByClassName('sdoc-editor-page-content')[0];
+    const pageContentWidth = sdocEditorPageContent === null || sdocEditorPageContent === void 0 ? void 0 : sdocEditorPageContent.getBoundingClientRect().width;
+    const pageWidthString = (_getStyleByFullWidthM = (0, _fullWidthMode.getStyleByFullWidthMode)(undefined, editor)) === null || _getStyleByFullWidthM === void 0 ? void 0 : _getStyleByFullWidthM.width;
+    const numbers = pageWidthString.match(/\d+/g).map(Number);
+
+    // 120 is padding and 2 is border width of 'sdoc-editor' dom;
+    pageWidth = pageContentWidth - numbers.slice(1).reduce((sum, num) => sum + num, 0) - 120 - 2;
+  }
   return pageWidth;
 };
 exports.getCurrentPageWidth = getCurrentPageWidth;

package/dist/basic-sdk/extension/plugins/multi-column/render/index.css

@@ -16,16 +16,14 @@
 .sdoc-multicolumn-wrapper .column {
   display: flex;
   left: 3px;
-  line-height: 1.5;
   align-items: flex-start;
 }
 
 .sdoc-column-container {
-  width: calc(100% - 15px);
+  width: calc(100% - 50px);
   max-width: 100%;
   position: relative;
   padding: 5px 5px 5px 0px;
-  margin-left: 15px;
   box-sizing: border-box;
   word-wrap: break-word;
   white-space: pre-wrap;

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

@@ -26,10 +26,15 @@ const MultiColumn = _ref => {
     ...element.style
   } : {});
   const multiColumnContainerClassName = (0, _classnames.default)('sdoc-multicolumn-container', className);
-  const [pageWidth, setPageWidth] = (0, _react.useState)((0, _helper.getCurrentPageWidth)());
+  const [pageWidth, setPageWidth] = (0, _react.useState)((0, _helper.getCurrentPageWidth)(editor));
   const handleResizeColumn = newColumn => {
     (0, _helper.updateColumnWidth)(editor, element, newColumn);
   };
+  (0, _react.useEffect)(() => {
+    setPageWidth((0, _helper.getCurrentPageWidth)(editor));
+  }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  , []);
   (0, _react.useEffect)(() => {
     const sdocEditorPage = document.getElementById('sdoc-editor');
     if (!sdocEditorPage) return;
@@ -37,7 +42,7 @@ const MultiColumn = _ref => {
       var _entries$;
       const newPageWidth = (_entries$ = entries[0]) === null || _entries$ === void 0 ? void 0 : _entries$.contentRect.width;
       // Check if sdocPageWidth changes
-      if (newPageWidth !== pageWidth) {
+      if (pageWidth && newPageWidth !== pageWidth) {
         const scaleFactor = newPageWidth / pageWidth;
         const updatedColumns = element.column.map(item => ({
           ...item,

package/dist/basic-sdk/extension/plugins/multi-column/resize-handlers/index.js

@@ -129,14 +129,14 @@ const ResizeHandlers = _ref => {
     }, index === 0 && /*#__PURE__*/_react.default.createElement("div", {
       className: "column-width-just",
       style: {
-        left: '0'
+        left: '-15px'
       }
     }), /*#__PURE__*/_react.default.createElement(_columnResizeHandler.default, {
       key: index,
       index: index,
       handleMouseDown: handleMouseDown,
       style: {
-        left: `${left}px`
+        left: `${left - 15}px`
       },
       adjustingCell: adjustingCell,
       isDraggingResizeHandler: isDraggingResizeHandler,

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

@@ -6,15 +6,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactstrap = require("reactstrap");
+var _reactI18next = require("react-i18next");
 var _utils = require("../../../utils");
 const SeaTableList = _ref => {
   let {
     editor,
     onViewClick
   } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
   const seatableRef = (0, _react.useRef)(null);
+  const isComposingRef = (0, _react.useRef)(null);
   const [computedStyle, setComputedStyle] = (0, _react.useState)({});
-  const tables = editor.tables;
+  const [tables, setTables] = (0, _react.useState)(editor.tables || []);
   (0, _react.useEffect)(() => {
     if (seatableRef.current) {
       // bottom overflow
@@ -29,16 +35,43 @@ const SeaTableList = _ref => {
       });
     }
   }, []);
+  const onChange = (0, _react.useCallback)(event => {
+    if (isComposingRef.current) return;
+    const value = event.target.value.trim().toUpperCase();
+    if (value) {
+      const list = editor.tables.filter(item => item.name.toUpperCase().includes(value));
+      setTables(list);
+    } else {
+      setTables(editor.tables);
+    }
+  }, [editor.tables]);
+  const onCompositionStart = (0, _react.useCallback)(() => {
+    isComposingRef.current = true;
+  }, []);
+  const onCompositionEnd = (0, _react.useCallback)(e => {
+    isComposingRef.current = false;
+    onChange(e);
+  }, [onChange]);
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: seatableRef,
     className: "sdoc-dropdown-menu-container sdoc-seatable-selected-table-list-wrapper",
     style: computedStyle
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-seatable-list-search-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+    placeholder: t('Search_action'),
+    onChange: onChange,
+    autoFocus: true,
+    onCompositionStart: onCompositionStart,
+    onCompositionEnd: onCompositionEnd
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-seatable-list-wrapper"
   }, tables.map(item => {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: item._id,
       className: "sdoc-dropdown-menu-item text-truncate d-block",
       onClick: () => onViewClick(item)
     }, item.name);
-  }));
+  })));
 };
 var _default = exports.default = SeaTableList;

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

@@ -113,22 +113,34 @@
 }
 
 .sdoc-seatable-hover-menu-container .hover-menu-container .sdoc-seatable-setting-popover .tables-list-empty {
-  padding: 10px;
+  padding: 0px 16px;
   width: 100%;
   font-size: 13px;
-  text-align: center;
   line-height: 30px;
   vertical-align: middle;
 }
 
 .sdoc-seatable-hover-menu-container .hover-menu-container .sdoc-seatable-setting-popover .seatable-setting-container {
   list-style: none;
-  overflow-y: auto;
   max-height: 280px;
   min-height: 80px;
   padding: 8px 0px;
 }
 
+.sdoc-seatable-hover-menu-container .hover-menu-container .sdoc-seatable-setting-popover .seatable-setting-container .seatable-setting-input-wrapper {
+  padding: 0px 10px 8px 10px;
+}
+
+.sdoc-seatable-hover-menu-container .hover-menu-container .sdoc-seatable-setting-popover .seatable-setting-container .seatable-setting-input-wrapper input {
+  max-height: 28px;
+  font-size: 14px;
+}
+
+.sdoc-seatable-hover-menu-container .hover-menu-container .sdoc-seatable-setting-popover .seatable-setting-container .seatable-setting-list-wrapper {
+  max-height: 228px;
+  overflow-y: auto;
+}
+
 .sdoc-seatable-hover-menu-container .hover-menu-container .sdoc-seatable-setting-popover .seatable-setting-container .seatable-setting-item {
   position: relative;
   white-space: nowrap;
@@ -191,6 +203,9 @@
   left: 158px !important;
   transform: unset !important;
   max-height: 350px;
-  overflow: auto;
   margin-top: 0px !important;
 }
+
+.sdoc-seatable-setting-hide-column-popover-wrapper .field-settings .field-settings-body {
+  max-height: 278px;
+}

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = OpMenu;
 var _react = _interopRequireWildcard(require("react"));
 var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
 var _commons = require("../../../commons");
 var _tooltip = _interopRequireDefault(require("../../../../../components/tooltip"));
 var _customSwitch = _interopRequireDefault(require("../seatable-settings/custom-switch"));
@@ -22,18 +23,26 @@ const TablesList = _ref => {
   let {
     tablesData,
     onSelectTable,
-    selectedTableText
+    selectedTableText,
+    onChange,
+    onCompositionStart,
+    onCompositionEnd
   } = _ref;
   const {
     t
   } = (0, _reactI18next.useTranslation)('sdoc-editor');
-  if (!tablesData.length) {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "tables-list-empty"
-    }, /*#__PURE__*/_react.default.createElement("span", null, t('Search_not_found')));
-  }
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "seatable-setting-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "seatable-setting-input-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+    autoFocus: true,
+    placeholder: t('Search_action'),
+    onChange: onChange,
+    onCompositionStart: onCompositionStart,
+    onCompositionEnd: onCompositionEnd
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "seatable-setting-list-wrapper"
   }, tablesData.map(item => {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: `seatable-setting-item ${selectedTableText === item.name ? 'active' : ''}`,
@@ -49,7 +58,9 @@ const TablesList = _ref => {
     }, /*#__PURE__*/_react.default.createElement("i", {
       className: "sdocfont sdoc-check-mark icon-font"
     })));
-  }));
+  }), !tablesData.length && /*#__PURE__*/_react.default.createElement("div", {
+    className: "tables-list-empty"
+  }, /*#__PURE__*/_react.default.createElement("span", null, t('Search_not_found')))));
 };
 const TablesSettings = _ref2 => {
   let {
@@ -97,7 +108,8 @@ function OpMenu(_ref3) {
   } = (0, _reactI18next.useTranslation)('sdoc-editor');
   const scrollRef = (0, _useScrollContext.useScrollContext)();
   const timer = (0, _react.useRef)(null);
-  const tablesData = editor.tables;
+  const hoverMenuRef = (0, _react.useRef)(null);
+  const [tablesData, setTablesData] = (0, _react.useState)(editor.tables || []);
   const [isShowTooltip, setIsShowTooltip] = (0, _react.useState)(false);
   const [selectedTable, setSelectedTable] = (0, _react.useState)({});
   const [selectedTableText, setSelectedTableText] = (0, _react.useState)('');
@@ -242,8 +254,23 @@ function OpMenu(_ref3) {
     onCloseOther(['tableList', 'tableSort', 'tableColumnHidden', 'tableFilter']);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isShowSeaTableSetting]);
+  const onChange = (0, _react.useCallback)(e => {
+    if (!hoverMenuRef.current.isInputtingChinese) {
+      const value = e.target.value.trim().toUpperCase();
+      const newTablesData = editor.tables.filter(item => item.name.toUpperCase().includes(value));
+      setTablesData(newTablesData);
+    }
+  }, [editor.tables]);
+  const onCompositionStart = (0, _react.useCallback)(() => {
+    hoverMenuRef.current.isInputtingChinese = true;
+  }, []);
+  const onCompositionEnd = (0, _react.useCallback)(e => {
+    hoverMenuRef.current.isInputtingChinese = false;
+    onChange(e);
+  }, [onChange]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_commons.ElementPopover, null, /*#__PURE__*/_react.default.createElement("div", {
     id: "sdoc-seatable-hover-menu-container",
+    ref: hoverMenuRef,
     className: "sdoc-seatable-hover-menu-container",
     style: menuPosition
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -317,7 +344,10 @@ function OpMenu(_ref3) {
   }, /*#__PURE__*/_react.default.createElement(TablesList, {
     tablesData: tablesData,
     onSelectTable: onSelectTable,
-    selectedTableText: selectedTableText
+    selectedTableText: selectedTableText,
+    onChange: onChange,
+    onCompositionStart: onCompositionStart,
+    onCompositionEnd: onCompositionEnd
   })), /*#__PURE__*/_react.default.createElement(_filterSetter.default, {
     target: "sdoc_seatable_filter",
     container: document.getElementById('sdoc-seatable-hover-menu-container'),

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

@@ -311,7 +311,8 @@ function SeaTableTable(_ref) {
   }), isLoading && /*#__PURE__*/_react.default.createElement(_loading.default, null), !isLoading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("table", {
     className: (0, _classnames.default)('seatable-view-records', {
       'no_alternate_color': !element.alternate_color
-    })
+    }),
+    contentEditable: false
   }, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement(_recordHeader.default, {
     editor: editor,
     element: element,

package/dist/basic-sdk/extension/plugins/seatable-tables/seatable-settings/hide-column-setter/hide-column-popover.js

@@ -171,6 +171,7 @@ class HideColumnPopover extends _react.default.Component {
     }, /*#__PURE__*/_react.default.createElement("input", {
       className: "form-control",
       type: "text",
+      autoFocus: true,
       placeholder: t('Search_column'),
       value: this.state.searchVal,
       onChange: this.onChangeSearch
@@ -179,10 +180,7 @@ class HideColumnPopover extends _react.default.Component {
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "empty-hidden-columns-list"
     }, t('No_columns_available_to_be_hidden'))), !isEmpty && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      className: "field-settings-body",
-      style: {
-        maxHeight: window.innerHeight - 400 + 'px'
-      }
+      className: "field-settings-body"
     }, fieldSettings.map(setting => {
       return /*#__PURE__*/_react.default.createElement(_hideColumnItem.default, {
         key: setting.key,

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

@@ -42,6 +42,7 @@ const isTableMenuDisabled = (editor, readonly) => {
       if (type === _constants.ELEMENT_TYPE.TABLE_CELL) return true;
       if (type === _constants.ELEMENT_TYPE.TABLE_ROW) return true;
       if (type === _constants.ELEMENT_TYPE.CALL_OUT) return true;
+      if (type === _constants.ELEMENT_TYPE.MULTI_COLUMN) return true;
       if (_slate.Editor.isVoid(editor, n)) return true;
       return false;
     },

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

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _caret = _interopRequireDefault(require("./caret"));
 var _constants = require("../../constants");
 var _helpers = require("../font/helpers");
+var _InlineBugFixWrapper = _interopRequireDefault(require("../../commons/Inline-bug-fix-wrapper"));
 const renderText = (props, editor) => {
   const {
     attributes,
@@ -98,6 +99,6 @@ const renderText = (props, editor) => {
   }, attributes, {
     style: style,
     className: Object.keys(rest).join(' ')
-  }), leaf.isCaret ? /*#__PURE__*/_react.default.createElement(_caret.default, leaf) : null, markedChildren);
+  }), leaf.isCaret ? /*#__PURE__*/_react.default.createElement(_caret.default, leaf) : null, leaf.isCaret && /*#__PURE__*/_react.default.createElement(_InlineBugFixWrapper.default, null, markedChildren), !leaf.isCaret && markedChildren);
 };
 var _default = exports.default = renderText;

package/dist/basic-sdk/extension/render/custom-element.js

@@ -215,6 +215,11 @@ const CustomRenderElement = props => {
         const [renderGroup] = _plugins.GroupPlugin.renderElements;
         return renderGroup(props);
       }
+    case _constants.CHART:
+      {
+        const [renderChart] = _plugins.ChartPlugin.renderElements;
+        return renderChart(props, editor);
+      }
     default:
       {
         const [renderParagraph] = _plugins.ParagraphPlugin.renderElements;

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

@@ -19,6 +19,7 @@ var _menu5 = _interopRequireDefault(require("../../../plugins/sdoc-link/menu"));
 var _menu6 = _interopRequireDefault(require("../../../plugins/file-link/menu"));
 var _menu7 = _interopRequireDefault(require("../../../plugins/seatable-column/menu"));
 var _menu8 = _interopRequireDefault(require("../../../plugins/seatable-tables/menu"));
+var _menu9 = _interopRequireDefault(require("../../../plugins/chart/menu"));
 var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
 var _constants = require("../../../../constants");
 require("./index.css");
@@ -99,7 +100,7 @@ const InsertToolbar = _ref => {
     style: {
       maxHeight: window.innerHeight - bottom - 100
     }
-  }, /*#__PURE__*/_react.default.createElement(_menu.default, props), /*#__PURE__*/_react.default.createElement(_tableMenu.default, props), (editor === null || editor === void 0 ? void 0 : editor.editorType) !== _constants.DOCUMENT_PLUGIN_EDITOR && /*#__PURE__*/_react.default.createElement(_menu2.default, props), /*#__PURE__*/_react.default.createElement(_menu3.default, props), /*#__PURE__*/_react.default.createElement(_menu4.default, props), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_menu.default, props), /*#__PURE__*/_react.default.createElement(_tableMenu.default, props), (editor === null || editor === void 0 ? void 0 : editor.editorType) !== _constants.DOCUMENT_PLUGIN_EDITOR && /*#__PURE__*/_react.default.createElement(_menu2.default, props), /*#__PURE__*/_react.default.createElement(_menu3.default, props), /*#__PURE__*/_react.default.createElement(_menu9.default, props), /*#__PURE__*/_react.default.createElement(_menu4.default, props), /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-dropdown-menu-divider"
   }), editor.columns && /*#__PURE__*/_react.default.createElement(_menu7.default, props), editor.tables && /*#__PURE__*/_react.default.createElement(_menu8.default, props), !editor.tables && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_menu5.default, props), /*#__PURE__*/_react.default.createElement(_menu6.default, props)))));
 };

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

@@ -138,6 +138,12 @@ const QuickInsertBlockMenu = _ref => {
     });
     return !!callout;
   }, [editor]);
+  const isDisableTable = (0, _react.useMemo)(() => {
+    const callout = (0, _core.getAboveBlockNode)(editor, {
+      match: n => [_constants.ELEMENT_TYPE.ORDERED_LIST, _constants.ELEMENT_TYPE.UNORDERED_LIST, _constants.ELEMENT_TYPE.CHECK_LIST_ITEM, _constants.ELEMENT_TYPE.MULTI_COLUMN].includes(n.type)
+    });
+    return !!callout;
+  }, [editor]);
   const createMultiColumn = (0, _react.useCallback)(type => {
     callback && callback();
     const newInsertPosition = slateNode.type === _constants.ELEMENT_TYPE.LIST_ITEM ? _constants.INSERT_POSITION.AFTER : insertPosition;
@@ -168,6 +174,7 @@ const QuickInsertBlockMenu = _ref => {
       // eslint-disable-next-line react/jsx-indent
       _react.default.createElement(_dropdownMenuItem.default, {
         isHidden: !quickInsertMenuSearchMap[_constants.TABLE],
+        disabled: isDisableTable,
         key: "sdoc-insert-menu-table",
         menuConfig: {
           ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.TABLE]