@seafile/sdoc-editor 2.0.25 → 2.0.27

package/dist/basic-sdk/extension/constants/element-type.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WIKI_LINK = exports.VIDEO_LINK = exports.VIDEO = exports.UNORDERED_LIST = exports.TWO_COLUMN = exports.TOP_LEVEL_TYPES = exports.TITLE = exports.THREE_COLUMN = exports.TABLE_ROW = exports.TABLE_CELL = exports.TABLE = exports.SUBTITLE = exports.SEATABLE_TABLE = exports.SEATABLE_ROW = exports.SEATABLE_COLUMN = exports.SDOC_LINK = exports.QUICK_INSERT = exports.PARAGRAPH = exports.ORDERED_LIST = exports.MULTI_COLUMN = exports.MENTION_TEMP = exports.MENTION = exports.LIST_ITEM = exports.LINK = exports.INLINE_LEVEL_TYPES = exports.IMAGE_BLOCK = exports.IMAGE = exports.HEADER6 = exports.HEADER5 = exports.HEADER4 = exports.HEADER3 = exports.HEADER2 = exports.HEADER1 = exports.HEADER = exports.GROUP = exports.FOUR_COLUMN = exports.FONT_SIZE_REDUCE = exports.FONT_SIZE_INCREASE = exports.FONT_SIZE = exports.FIVE_COLUMN = exports.FILE_LINK_INSET_INPUT_TEMP = exports.FILE_LINK = exports.COLUMN = exports.CODE_LINE = exports.CODE_BLOCK = exports.CHECK_LIST_ITEM = exports.CALL_OUT = exports.BLOCKQUOTE = exports.ASK_AI = void 0;
+exports.WIKI_LINK = exports.VIDEO_LINK = exports.VIDEO = exports.UNORDERED_LIST = exports.TWO_COLUMN = exports.TOP_LEVEL_TYPES = exports.TITLE = exports.THREE_COLUMN = exports.TABLE_ROW = exports.TABLE_CELL = exports.TABLE = exports.SUBTITLE = exports.SEATABLE_TABLE = exports.SEATABLE_ROW = exports.SEATABLE_COLUMN = exports.SDOC_LINK = exports.QUICK_INSERT = exports.PARAGRAPH = exports.ORDERED_LIST = exports.MULTI_COLUMN = exports.MENTION_TEMP = exports.MENTION = exports.LIST_ITEM = exports.LINK = exports.INLINE_LEVEL_TYPES = exports.IMAGE_BLOCK = exports.IMAGE = exports.HEADER6 = exports.HEADER5 = exports.HEADER4 = exports.HEADER3 = exports.HEADER2 = exports.HEADER1 = exports.HEADER = exports.GROUP = exports.FOUR_COLUMN = exports.FONT_SIZE_REDUCE = exports.FONT_SIZE_INCREASE = exports.FONT_SIZE = exports.FIVE_COLUMN = exports.FILE_LINK_INSET_INPUT_TEMP = exports.FILE_LINK = exports.COLUMN = exports.CODE_LINE = exports.CODE_BLOCK = exports.CHECK_LIST_ITEM = exports.CHART = exports.CALL_OUT = exports.BLOCKQUOTE = exports.ASK_AI = void 0;
 const BLOCKQUOTE = exports.BLOCKQUOTE = 'blockquote';
 const TITLE = exports.TITLE = 'title';
 const SUBTITLE = exports.SUBTITLE = 'subtitle';
@@ -43,6 +43,7 @@ const MENTION_TEMP = exports.MENTION_TEMP = 'mention_temp';
 const FILE_LINK_INSET_INPUT_TEMP = exports.FILE_LINK_INSET_INPUT_TEMP = 'file_link_insert_input_temp';
 const QUICK_INSERT = exports.QUICK_INSERT = 'quick_insert';
 const VIDEO_LINK = exports.VIDEO_LINK = 'video_link';
+const CHART = exports.CHART = 'chart';
 const SEATABLE_COLUMN = exports.SEATABLE_COLUMN = 'seatable_column';
 const SEATABLE_ROW = exports.SEATABLE_ROW = 'seatable_row';
 const SEATABLE_TABLE = exports.SEATABLE_TABLE = 'seatable_table';

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

@@ -23,6 +23,12 @@ Object.defineProperty(exports, "CALL_OUT", {
     return _elementType.CALL_OUT;
   }
 });
+Object.defineProperty(exports, "CHART", {
+  enumerable: true,
+  get: function () {
+    return _elementType.CHART;
+  }
+});
 Object.defineProperty(exports, "CHECK_LIST_ITEM", {
   enumerable: true,
   get: function () {
@@ -561,4 +567,4 @@ const MOUSE_ENTER_EVENT_DISABLED_MAP = exports.MOUSE_ENTER_EVENT_DISABLED_MAP =
   [_elementType.HEADER6]: [_elementType.CALL_OUT],
   [_elementType.CALL_OUT]: [_elementType.CALL_OUT]
 };
-const ROOT_ELEMENT_TYPES = exports.ROOT_ELEMENT_TYPES = [_elementType.PARAGRAPH, _elementType.TITLE, _elementType.SUBTITLE, _elementType.CHECK_LIST_ITEM, _elementType.ORDERED_LIST, _elementType.UNORDERED_LIST, _elementType.BLOCKQUOTE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CALL_OUT, _elementType.TABLE, _elementType.CODE_BLOCK, _elementType.IMAGE_BLOCK, _elementType.VIDEO, _elementType.SEATABLE_TABLE, _elementType.SEATABLE_ROW];
+const ROOT_ELEMENT_TYPES = exports.ROOT_ELEMENT_TYPES = [_elementType.PARAGRAPH, _elementType.TITLE, _elementType.SUBTITLE, _elementType.CHECK_LIST_ITEM, _elementType.ORDERED_LIST, _elementType.UNORDERED_LIST, _elementType.BLOCKQUOTE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CALL_OUT, _elementType.TABLE, _elementType.CODE_BLOCK, _elementType.IMAGE_BLOCK, _elementType.VIDEO, _elementType.SEATABLE_TABLE, _elementType.SEATABLE_ROW, _elementType.CHART];

package/dist/basic-sdk/extension/constants/menus-config.js

@@ -238,6 +238,11 @@ const MENUS_CONFIG_MAP = exports.MENUS_CONFIG_MAP = {
     iconClass: 'sdocfont sdoc-seatable-table',
     type: _elementType.SEATABLE_TABLE,
     text: 'SeaTable_table'
+  },
+  [_elementType.CHART]: {
+    id: `sdoc_${_elementType.CHART}`,
+    iconClass: 'sdocfont sdoc-chart',
+    text: 'Insert_chart'
   }
 };
 
@@ -359,6 +364,12 @@ const SIDE_INSERT_MENUS_CONFIG = exports.SIDE_INSERT_MENUS_CONFIG = {
     type: _elementType.LINK,
     text: 'Link'
   },
+  [_elementType.CHART]: {
+    id: `sdoc_${_elementType.CHART}`,
+    iconClass: 'sdocfont sdoc-chart',
+    type: _elementType.CHART,
+    text: 'Insert_chart'
+  },
   [_elementType.CODE_BLOCK]: {
     id: '',
     iconClass: 'sdocfont sdoc-code-block',
@@ -447,6 +458,7 @@ const SIDE_INSERT_MENUS_SEARCH_MAP = exports.SIDE_INSERT_MENUS_SEARCH_MAP = {
   [_elementType.THREE_COLUMN]: 'Three_column',
   [_elementType.FOUR_COLUMN]: 'Four_column',
   [_elementType.LINK]: 'Link',
+  [_elementType.CHART]: 'Chart',
   [_elementType.CODE_BLOCK]: 'Code_block',
   [_elementType.CALL_OUT]: 'Callout',
   [_elementType.UNORDERED_LIST]: 'Unordered_list',

package/dist/basic-sdk/extension/plugins/chart/chart-edit-dialog/index.css

@@ -0,0 +1,20 @@
+.sdoc-chart-edit-dialog {
+  max-width: 1100px !important;
+  width: 1100px !important;
+  height: calc(100% - 56px);
+}
+
+.sdoc-chart-edit-dialog .modal-content {
+  height: 100%;
+}
+
+.sdoc-chart-edit-dialog .modal-body {
+  padding: 0;
+  overflow: hidden;
+  display: flex;
+}
+
+.sdoc-chart-edit-dialog .sdoc-chart-fullscreen-view {
+  width: 100%;
+  height: 600px;
+}

package/dist/basic-sdk/extension/plugins/chart/chart-edit-dialog/index.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _DTableModalHeader2 = _interopRequireDefault(require("dtable-ui-component/lib/DTableModalHeader"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactstrap = require("reactstrap");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactI18next = require("react-i18next");
+var _seaChart = require("sea-chart");
+var _context = _interopRequireDefault(require("../../../../../context"));
+require("./index.css");
+const ChartEditDialog = _ref => {
+  var _window, _window$app, _window$app$state, _window2, _window2$app, _window2$app$state;
+  let {
+    editor,
+    element,
+    api,
+    isFullScreen,
+    onCloseEditDialog,
+    t
+  } = _ref;
+  const [statItemData, setStatItemData] = (0, _react.useState)(element.stat_item || {});
+  const onSettingChange = (0, _react.useCallback)(setting => {
+    const newStatItemData = {
+      ...statItemData,
+      ...setting
+    };
+    setStatItemData(newStatItemData);
+  }, [statItemData]);
+  return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
+    className: "sdoc-chart-edit-dialog",
+    isOpen: true,
+    toggle: () => onCloseEditDialog(statItemData)
+  }, /*#__PURE__*/_react.default.createElement(_DTableModalHeader2.default, {
+    toggle: () => onCloseEditDialog(statItemData)
+  }, t(!isFullScreen ? 'Edit_chart' : 'Chart')), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, {
+    className: (0, _classnames.default)({
+      'sdoc-chart-fullscreen-view': isFullScreen
+    })
+  }, !isFullScreen && /*#__PURE__*/_react.default.createElement(_seaChart.Editor, {
+    chart: statItemData,
+    config: _context.default.getSettings(),
+    api: api,
+    tables: editor.tables || [],
+    collaborators: editor.collaborators || [],
+    departments: ((_window = window) === null || _window === void 0 ? void 0 : (_window$app = _window.app) === null || _window$app === void 0 ? void 0 : (_window$app$state = _window$app.state) === null || _window$app$state === void 0 ? void 0 : _window$app$state.departments) || [],
+    hideTypeToggle: true,
+    onChange: onSettingChange
+  }), isFullScreen && /*#__PURE__*/_react.default.createElement(_seaChart.View, {
+    chart: statItemData,
+    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) || []
+  })));
+};
+var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(ChartEditDialog);

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

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isInsertChartMenuDisabled = exports.isInViewPort = exports.insertChart = exports.generateChartNode = void 0;
+var _slate = require("@seafile/slate");
+var _seaChart = require("sea-chart");
+var _core = require("../../core");
+var _helper = require("../callout/helper");
+var _constants = require("../../constants");
+const isInsertChartMenuDisabled = (editor, readonly) => {
+  if (readonly) return true;
+  const {
+    selection
+  } = editor;
+  if (selection === null) return true;
+  if ((0, _helper.getCalloutEntry)(editor)) return true;
+  const selectedElems = (0, _core.getSelectedElems)(editor);
+  const hasVoid = selectedElems.some(elem => editor.isVoid(elem));
+  if (hasVoid) return true;
+  const isMatch = selectedElems.every(elem => {
+    const type = (0, _core.getNodeType)(elem);
+    if (type === _constants.PARAGRAPH) return true;
+    return false;
+  });
+  if (isMatch) return false; // enable
+  return true; // disable
+};
+exports.isInsertChartMenuDisabled = isInsertChartMenuDisabled;
+const generateChartNode = editor => {
+  const element = (0, _core.generateEmptyElement)(_constants.CHART);
+  const initConfig = {
+    option: {
+      id: element.id,
+      table_id: editor.tables[0]._id // Default first table
+    },
+    tables: []
+  };
+  const model = new _seaChart.ChartModel(initConfig.option, initConfig.tables);
+  return {
+    ...element,
+    stat_item: {
+      ...model,
+      type: model.config.type
+    }
+  };
+};
+exports.generateChartNode = generateChartNode;
+const insertChart = (editor, insertPosition) => {
+  const chartNode = generateChartNode(editor);
+  let path = _slate.Editor.path(editor, editor.selection)[0];
+  if (insertPosition === _constants.INSERT_POSITION.AFTER) {
+    path = path + 1;
+  }
+  _slate.Transforms.insertNodes(editor, chartNode, {
+    at: [path]
+  });
+};
+exports.insertChart = insertChart;
+const isInViewPort = element => {
+  const viewHeight = window.innerHeight || document.documentElement.clientHeight;
+  const {
+    top
+  } = element.getBoundingClientRect();
+  return top >= 0 && top <= viewHeight;
+};
+exports.isInViewPort = isInViewPort;

package/dist/basic-sdk/extension/plugins/chart/hover-menu/index.css

@@ -0,0 +1,55 @@
+.sdoc-chart-hover-menu-container {
+  position: absolute;
+  height: 42px;
+  z-index: 101;
+  width: auto;
+}
+  
+.sdoc-chart-hover-menu-container .hover-menu-container {
+  height: 36px;
+  padding: 7px 8px;
+  background-color: #fff;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
+  border: 1px solid #e8e8e8;
+}
+
+.sdoc-chart-hover-menu-container .hover-menu-container > span:not(:last-of-type) {
+  padding-right: 6px;
+  border-right: 1px solid #e5e5e5;
+}
+
+.sdoc-chart-hover-menu-container .hover-menu-container .op-item {
+  position: relative;
+  font-size: 12px;
+  color: #212529;
+  padding: 0 5px;
+  border-radius: 2px;
+  min-width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sdoc-chart-hover-menu-container .hover-menu-container .op-item:hover {
+  color: #212529;
+  text-decoration: none;
+  background: #f1f1f1;
+}
+
+.sdoc-chart-hover-menu-container .op-group-item:last-child .op-item {
+  margin-left: 8px;
+}
+
+.sdoc-chart-hover-menu-container .hover-menu-container .active {
+  background: #f1f1f1;
+}
+
+.sdoc-chart-hover-menu-container .hover-menu-container .icon-font {
+  font-size: 12px;
+  color: #999999;
+}

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

@@ -0,0 +1,58 @@
+"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 _reactI18next = require("react-i18next");
+var _commons = require("../../../commons");
+var _tooltip = _interopRequireDefault(require("../../../../../components/tooltip"));
+require("./index.css");
+const ChartHoverMenu = _ref => {
+  let {
+    menuPosition,
+    onEditChart,
+    onFullscreen,
+    t
+  } = _ref;
+  const [isShowTooltip, setIsShowTooltip] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    setIsShowTooltip(true);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_commons.ElementPopover, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-chart-hover-menu-container",
+    style: menuPosition
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "hover-menu-container"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "op-group-item"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    id: "sdoc_chart_edit",
+    role: "button",
+    className: "op-item",
+    onClick: onEditChart
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-rename icon-font"
+  }), isShowTooltip && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    target: "sdoc_chart_edit",
+    placement: "top",
+    fade: true
+  }, t('Edit_chart')))), /*#__PURE__*/_react.default.createElement("span", {
+    className: "op-group-item"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    id: "sdoc_chart_full_screen_mode",
+    role: "button",
+    className: "op-item",
+    onClick: onFullscreen
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-fullscreen icon-font"
+  }), isShowTooltip && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    target: "sdoc_chart_full_screen_mode",
+    placement: "top",
+    fade: true
+  }, t('Full_screen_mode')))))));
+};
+var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(ChartHoverMenu);

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

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _constants = require("../../constants");
+var _menu = _interopRequireDefault(require("./menu"));
+var _plugin = _interopRequireDefault(require("./plugin"));
+var _renderElem = _interopRequireDefault(require("./render-elem"));
+const ChartPlugin = {
+  type: _constants.CHART,
+  nodeType: 'element',
+  editorMenus: [_menu.default],
+  editorPlugin: _plugin.default,
+  renderElements: [_renderElem.default]
+};
+var _default = exports.default = ChartPlugin;

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

@@ -0,0 +1,31 @@
+"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 _helpers = require("../helpers");
+var _constants = require("../../../constants");
+var _dropdownMenuItem = _interopRequireDefault(require("../../../commons/dropdown-menu-item"));
+const ChartMenu = _ref => {
+  let {
+    editor,
+    readonly,
+    toggle
+  } = _ref;
+  const disabled = (0, _helpers.isInsertChartMenuDisabled)(editor, readonly);
+  const menuConfig = _constants.MENUS_CONFIG_MAP[_constants.CHART];
+  const onInsertChart = (0, _react.useCallback)(() => {
+    (0, _helpers.insertChart)(editor);
+    toggle && toggle();
+  }, [editor, toggle]);
+  return /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+    disabled: disabled,
+    menuConfig: menuConfig,
+    onClick: onInsertChart
+  });
+};
+var _default = exports.default = ChartMenu;

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _constants = require("../../constants");
+const withChart = editor => {
+  const {
+    isVoid
+  } = editor;
+  const newEditor = editor;
+
+  // Rewrite isVoid
+  newEditor.isVoid = elem => {
+    const {
+      type
+    } = elem;
+    if (type === _constants.CHART) {
+      return true;
+    }
+    return isVoid(elem);
+  };
+  return newEditor;
+};
+var _default = exports.default = withChart;

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

@@ -0,0 +1,64 @@
+.sdoc-chart-container {
+  width: 100%;
+  height: 300px;
+  padding: 8px;
+  cursor: pointer;
+}
+  
+.sdoc-chart-container .sdoc-chart-view {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+}
+
+.sdoc-chart-container .sdoc-chart-view.init {
+  background-color: #f5f5f5;
+}
+
+.sdoc-chart-container .sdoc-chart-view .sdoc-chart-view-content {
+  width: 100%;
+  height: 100%;
+}
+  
+.sdoc-chart-container .active {
+  box-shadow: 0 0 0 2px #007bff;
+}
+
+.sdoc-chart-container .active .sdoc-chart-view-rect {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  background-color: #007bff;
+}
+
+.sdoc-chart-container .active .sdoc-chart-view-rect-lt {
+  position: absolute;
+  left: -5px;
+  top: -5px;
+}
+
+.sdoc-chart-container .active .sdoc-chart-view-rect-lb {
+  position: absolute;
+  left: -5px;
+  bottom: -5px;
+}
+
+.sdoc-chart-container .active .sdoc-chart-view-rect-rt {
+  position: absolute;
+  right: -5px;
+  top: -5px;
+}
+
+.sdoc-chart-container .active .sdoc-chart-view-rect-rb {
+  position: absolute;
+  right: -5px;
+  bottom: -5px;
+}
+
+.sdoc-chart-container .sdoc-chart-view .sdoc-chart-tip {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  position: absolute;
+}

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

@@ -0,0 +1,154 @@
+"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 {
+    stat_item
+  } = 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 : () => {},
+    sqlQuery: editor.sqlQuery
+  };
+  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 [isRender, setIsRender] = (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 (!isRender && (0, _helpers.isInViewPort)(chartRef.current)) {
+      setIsRender(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isRender]);
+  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, {
+      stat_item: newStatItemData
+    }, {
+      at: [path[0]]
+    });
+    setIsShowDialog(false);
+  }, [editor, element]);
+
+  // Mount
+  (0, _react.useEffect)(() => {
+    if (!isRender && (0, _helpers.isInViewPort)(chartRef.current)) {
+      setIsRender(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
+  }, [isRender]);
+  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
+    }, {
+      'init': !isRender
+    }),
+    ref: chartRef
+  }, children, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-chart-view-content",
+    contentEditable: false
+  }, isRender && /*#__PURE__*/_react.default.createElement(_seaChart.View, {
+    chart: stat_item,
+    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) || []
+  })), /*#__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 () {
@@ -195,7 +201,8 @@ var _seatableColumn = _interopRequireDefault(require("./seatable-column"));
 var _seatableRow = _interopRequireDefault(require("./seatable-row"));
 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/render/custom-element.js

@@ -220,6 +220,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

@@ -20,6 +20,7 @@ var _menu6 = _interopRequireDefault(require("../../../plugins/file-link/menu"));
 var _menu7 = _interopRequireDefault(require("../../../plugins/seatable-column/menu"));
 var _menu8 = _interopRequireDefault(require("../../../plugins/seatable-row/menu"));
 var _menu9 = _interopRequireDefault(require("../../../plugins/seatable-tables/menu"));
+var _menu10 = _interopRequireDefault(require("../../../plugins/chart/menu"));
 var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
 var _constants = require("../../../../constants");
 require("./index.css");
@@ -100,7 +101,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), (editor === null || editor === void 0 ? void 0 : editor.editorType) === _constants.DOCUMENT_PLUGIN_EDITOR && /*#__PURE__*/_react.default.createElement(_menu10.default, props), /*#__PURE__*/_react.default.createElement(_menu4.default, props), /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-dropdown-menu-divider"
   }), editor.tables && /*#__PURE__*/_react.default.createElement(_menu8.default, props), editor.columns && /*#__PURE__*/_react.default.createElement(_menu7.default, props), editor.tables && /*#__PURE__*/_react.default.createElement(_menu9.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/side-toolbar/helpers.js

@@ -357,7 +357,7 @@ const getSearchedOperations = (sourceMenuSearchMap, isNodeEmpty, event, t, edito
       const targetStr = event.target.value.trim().toUpperCase();
       if (sourceStr.includes(targetStr)) {
         // Only the documentation plugin has this operation
-        if ([_constants.SEATABLE_COLUMN, _constants.SEATABLE_TABLE].includes(key) && editor.editorType !== _constants3.DOCUMENT_PLUGIN_EDITOR) {
+        if ([_constants.SEATABLE_COLUMN, _constants.SEATABLE_TABLE, _constants.CHART].includes(key) && editor.editorType !== _constants3.DOCUMENT_PLUGIN_EDITOR) {
           return;
         }
         menuSearchMap[key] = value;

package/dist/basic-sdk/extension/toolbar/side-toolbar/insert-block-menu.js

@@ -14,8 +14,9 @@ var _helpers = require("./helpers");
 var _helpers2 = require("../../plugins/table/helpers");
 var _tableSizePopover = _interopRequireDefault(require("../../plugins/table/popover/table-size-popover"));
 var _helpers3 = require("../../plugins/code-block/helpers");
+var _helpers4 = require("../../plugins/chart/helpers");
 var _transforms = require("../../plugins/list/transforms");
-var _helpers4 = require("../../plugins/check-list/helpers");
+var _helpers5 = require("../../plugins/check-list/helpers");
 var _constants = require("../../constants");
 var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
 var _constants2 = require("../../../constants");
@@ -76,6 +77,11 @@ const InsertBlockMenu = _ref => {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [insertPosition]);
+  const onInsertChart = (0, _react.useCallback)(() => {
+    const newInsertPosition = slateNode.type === _constants.ELEMENT_TYPE.LIST_ITEM ? _constants.INSERT_POSITION.AFTER : insertPosition;
+    (0, _helpers4.insertChart)(editor, newInsertPosition);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, insertPosition, slateNode]);
   const onInsertCodeBlock = (0, _react.useCallback)(() => {
     const newInsertPosition = slateNode.type === _constants.ELEMENT_TYPE.LIST_ITEM ? _constants.INSERT_POSITION.AFTER : insertPosition;
     (0, _helpers3.changeToCodeBlock)(editor, 'plaintext', newInsertPosition);
@@ -87,7 +93,7 @@ const InsertBlockMenu = _ref => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, insertPosition, slateNode]);
   const onInsertCheckList = (0, _react.useCallback)(() => {
-    (0, _helpers4.setCheckListItemType)(editor, _constants.ELEMENT_TYPE.CHECK_LIST_ITEM, insertPosition);
+    (0, _helpers5.setCheckListItemType)(editor, _constants.ELEMENT_TYPE.CHECK_LIST_ITEM, insertPosition);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, insertPosition, slateNode]);
   const onInsert = (0, _react.useCallback)(type => {
@@ -171,6 +177,12 @@ const InsertBlockMenu = _ref => {
       ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.LINK]
     },
     onClick: openLinkDialog
+  }), editor.editorType === _constants2.DOCUMENT_PLUGIN_EDITOR && /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+    isHidden: !insertMenuSearchMap[_constants.ELEMENT_TYPE.CHART],
+    menuConfig: {
+      ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.CHART]
+    },
+    onClick: onInsertChart
   }), /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
     isHidden: !insertMenuSearchMap[_constants.ELEMENT_TYPE.CODE_BLOCK],
     menuConfig: {

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

@@ -34,6 +34,7 @@ const DocumentPluginEditor = _ref => {
     collaborators,
     formulaRows,
     getTableFormulaResults,
+    sqlQuery,
     getArticleStyle
   } = _ref;
   _context.default.initApi();
@@ -67,6 +68,7 @@ const DocumentPluginEditor = _ref => {
     newEditor.collaborators = collaborators;
     newEditor.formulaRows = formulaRows;
     newEditor.getTableFormulaResults = getTableFormulaResults;
+    newEditor.sqlQuery = sqlQuery;
     newEditor.cursors = cursors || {};
     newEditor.width = _constants.PAGE_EDIT_AREA_WIDTH; // default width
     newEditor.editorType = _constants.DOCUMENT_PLUGIN_EDITOR;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "2.0.25",
+  "version": "2.0.27",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",
@@ -16,7 +16,7 @@
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "1.10.7",
     "deep-copy": "1.4.2",
-    "dtable-ui-component": "^6.0.3",
+    "dtable-ui-component": "~6.0.5",
     "is-hotkey": "0.2.0",
     "is-url": "^1.2.4",
     "lodash.isequal": "4.5.0",
@@ -38,6 +38,7 @@
     "remark-parse": "11.0.0",
     "remark-rehype": "11.0.0",
     "remark-stringify": "11.0.0",
+    "sea-chart": "~2.0.3",
     "slugid": "3.2.0",
     "socket.io-client": "4.8.1",
     "type-of": "2.0.1",

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

@@ -619,5 +619,8 @@
   "Selected_row_records_cannot_exceed_10_rows": "Selected row records cannot exceed 10 rows",
   "Select_seatable_rows": "Select seatable rows",
   "Add_rows_record": "Add rows record",
-  "Double_click_then_adjust_field_width": "Double click, then adjust field width"
+  "Double_click_then_adjust_field_width": "Double click, then adjust field width",
+  "Insert_chart": "Insert chart",
+  "Edit_chart": "Edit chart",
+  "Please_complete_the_chart_configuration_first": "Please complete the chart configuration first"
 }

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

@@ -619,5 +619,8 @@
   "Selected_row_records_cannot_exceed_10_rows": "Sie können höchstens zehn Einträge in einer Zeile auswählen",
   "Select_seatable_rows": "Seatable-Zeilen auswählen",
   "Add_rows_record": "Zeileneintrag hinzufügen",
-  "Double_click_then_adjust_field_width": "Klicken Sie doppelt, dann passen Sie die Breite des Felds an"
+  "Double_click_then_adjust_field_width": "Klicken Sie doppelt, dann passen Sie die Breite des Felds an",
+  "Insert_chart": "Insert chart",
+  "Edit_chart": "Edit chart",
+  "Please_complete_the_chart_configuration_first": "Please complete the chart configuration first"
 }

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

@@ -622,5 +622,9 @@
   "Double_click_then_adjust_field_width": "Double click, then adjust field width",
   "SeaTable_row": "SeaTable row",
   "Please_select_one_row_record": "Please select one row record",
-  "No_linked_records": "No linked records"
+  "No_linked_records": "No linked records",
+  "Insert_chart": "Insert chart",
+  "Edit_chart": "Edit chart",
+  "Please_complete_the_chart_configuration_first": "Please complete the chart configuration first",
+  "chart": "chart"
 }

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

@@ -619,5 +619,8 @@
   "Selected_row_records_cannot_exceed_10_rows": "Selected row records cannot exceed 10 rows",
   "Select_seatable_rows": "Select seatable rows",
   "Add_rows_record": "Add rows record",
-  "Double_click_then_adjust_field_width": "Double click, then adjust field width"
+  "Double_click_then_adjust_field_width": "Double click, then adjust field width",
+  "Insert_chart": "Insert chart",
+  "Edit_chart": "Edit chart",
+  "Please_complete_the_chart_configuration_first": "Please complete the chart configuration first"
 }

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

@@ -619,5 +619,8 @@
   "Selected_row_records_cannot_exceed_10_rows": "Selected row records cannot exceed 10 rows",
   "Select_seatable_rows": "Select seatable rows",
   "Add_rows_record": "Add rows record",
-  "Double_click_then_adjust_field_width": "Double click, then adjust field width"
+  "Double_click_then_adjust_field_width": "Double click, then adjust field width",
+  "Insert_chart": "Insert chart",
+  "Edit_chart": "Edit chart",
+  "Please_complete_the_chart_configuration_first": "Please complete the chart configuration first"
 }

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

@@ -619,5 +619,8 @@
   "Selected_row_records_cannot_exceed_10_rows": "Selected row records cannot exceed 10 rows",
   "Select_seatable_rows": "Select seatable rows",
   "Add_rows_record": "Add rows record",
-  "Double_click_then_adjust_field_width": "Double click, then adjust field width"
+  "Double_click_then_adjust_field_width": "Double click, then adjust field width",
+  "Insert_chart": "Insert chart",
+  "Edit_chart": "Edit chart",
+  "Please_complete_the_chart_configuration_first": "Please complete the chart configuration first"
 }

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

@@ -619,5 +619,8 @@
   "Selected_row_records_cannot_exceed_10_rows": "Selected row records cannot exceed 10 rows",
   "Select_seatable_rows": "Select seatable rows",
   "Add_rows_record": "Add rows record",
-  "Double_click_then_adjust_field_width": "Double click, then adjust field width"
+  "Double_click_then_adjust_field_width": "Double click, then adjust field width",
+  "Insert_chart": "Insert chart",
+  "Edit_chart": "Edit chart",
+  "Please_complete_the_chart_configuration_first": "Please complete the chart configuration first"
 }

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

@@ -619,5 +619,8 @@
   "Selected_row_records_cannot_exceed_10_rows": "Selected row records cannot exceed 10 rows",
   "Select_seatable_rows": "Select seatable rows",
   "Add_rows_record": "Add rows record",
-  "Double_click_then_adjust_field_width": "Double click, then adjust field width"
+  "Double_click_then_adjust_field_width": "Double click, then adjust field width",
+  "Insert_chart": "Insert chart",
+  "Edit_chart": "Edit chart",
+  "Please_complete_the_chart_configuration_first": "Please complete the chart configuration first"
 }

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

@@ -619,5 +619,8 @@
   "Selected_row_records_cannot_exceed_10_rows": "Выбранные записи строк не могут превышать 10 строк",
   "Select_seatable_rows": "Выберите доступные для размещения строки",
   "Add_rows_record": "Добавить записи строк",
-  "Double_click_then_adjust_field_width": "Дважды щелкните, затем отрегулируйте ширину поля"
+  "Double_click_then_adjust_field_width": "Дважды щелкните, затем отрегулируйте ширину поля",
+  "Insert_chart": "Insert chart",
+  "Edit_chart": "Edit chart",
+  "Please_complete_the_chart_configuration_first": "Please complete the chart configuration first"
 }

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

@@ -619,5 +619,8 @@
   "Selected_row_records_cannot_exceed_10_rows": "选择的行记录不能超过10条",
   "Select_seatable_rows": "选择 Seatable 行",
   "Add_rows_record": "添加行记录",
-  "Double_click_then_adjust_field_width": "双击后调节字段宽度"
+  "Double_click_then_adjust_field_width": "双击后调节字段宽度",
+  "Insert_chart": "插入图表",
+  "Edit_chart": "编辑图表",
+  "Please_complete_the_chart_configuration_first": "请先完成图表配置"
 }