@seafile/sdoc-editor 0.1.124 → 0.1.125-beta

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

@@ -35,8 +35,10 @@ var ImageMenu = /*#__PURE__*/function (_React$Component) {
       return false;
     };
     _this.isDisabled = function () {
-      var editor = _this.props.editor;
-      return isInsertImageMenuDisabled(editor);
+      var _this$props = _this.props,
+        editor = _this$props.editor,
+        readonly = _this$props.readonly;
+      return isInsertImageMenuDisabled(editor, readonly);
     };
     _this.onToggleClick = function (event) {
       event.stopPropagation();
@@ -105,10 +107,10 @@ var ImageMenu = /*#__PURE__*/function (_React$Component) {
   _createClass(ImageMenu, [{
     key: "render",
     value: function render() {
-      var _this$props = this.props,
-        isRichEditor = _this$props.isRichEditor,
-        className = _this$props.className,
-        t = _this$props.t;
+      var _this$props2 = this.props,
+        isRichEditor = _this$props2.isRichEditor,
+        className = _this$props2.className,
+        t = _this$props2.t;
       var _this$state = this.state,
         isShowImagePopover = _this$state.isShowImagePopover,
         isShowInsertImageDialog = _this$state.isShowInsertImageDialog;

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

@@ -6,7 +6,8 @@ import { Editor, Transforms, Range } from '@seafile/slate';
 import slugid from 'slugid';
 import { LINK } from '../../constants';
 import { getNodeType, getSelectedElems, getAboveNode, getEditorString, replaceNodeChildren } from '../../core';
-export var isMenuDisabled = function isMenuDisabled(editor) {
+export var isMenuDisabled = function isMenuDisabled(editor, readonly) {
+  if (readonly) return true;
   if (editor.selection == null) return true;
   var selectedElems = getSelectedElems(editor);
   var notMatch = selectedElems.some(function (elem) {

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

@@ -21,8 +21,10 @@ var LinkMenu = /*#__PURE__*/function (_React$Component) {
       return getLinkType(editor) === LINK;
     };
     _this.isDisabled = function () {
-      var editor = _this.props.editor;
-      return isMenuDisabled(editor);
+      var _this$props = _this.props,
+        editor = _this$props.editor,
+        readonly = _this$props.readonly;
+      return isMenuDisabled(editor, readonly);
     };
     _this.onLinkDialogToggle = function () {
       _this.setState({
@@ -40,10 +42,10 @@ var LinkMenu = /*#__PURE__*/function (_React$Component) {
   _createClass(LinkMenu, [{
     key: "render",
     value: function render() {
-      var _this$props = this.props,
-        isRichEditor = _this$props.isRichEditor,
-        className = _this$props.className,
-        editor = _this$props.editor;
+      var _this$props2 = this.props,
+        isRichEditor = _this$props2.isRichEditor,
+        className = _this$props2.className,
+        editor = _this$props2.editor;
       var isShowLinkDialog = this.state.isShowLinkDialog;
       var menuConfig = MENUS_CONFIG_MAP[LINK];
       var props = _objectSpread(_objectSpread({

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

@@ -4,7 +4,8 @@ import { Editor, Element } from '@seafile/slate';
 import { PARAGRAPH } from '../../constants';
 import { getSelectedNodeByType } from '../../core';
 import { toggleList } from './transforms';
-export var isMenuDisabled = function isMenuDisabled(editor) {
+export var isMenuDisabled = function isMenuDisabled(editor, readonly) {
+  if (readonly) return true;
   if (editor.selection == null) return true;
   var selectedElements = [];
   var nodeEntries = Editor.nodes(editor, {

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

@@ -25,16 +25,18 @@ var ListMenu = /*#__PURE__*/function (_React$Component) {
       return getListType(editor, type) === type;
     };
     _this.isDisabled = function () {
-      var editor = _this.props.editor;
-      return isMenuDisabled(editor);
+      var _this$props2 = _this.props,
+        editor = _this$props2.editor,
+        readonly = _this$props2.readonly;
+      return isMenuDisabled(editor, readonly);
     };
     _this.onMouseDown = function (e) {
       e.preventDefault();
       e.stopPropagation();
       if (_this.isDisabled()) return;
-      var _this$props2 = _this.props,
-        editor = _this$props2.editor,
-        type = _this$props2.type;
+      var _this$props3 = _this.props,
+        editor = _this$props3.editor,
+        type = _this$props3.type;
 
       // 执行命令
       setListType(editor, type);
@@ -45,10 +47,10 @@ var ListMenu = /*#__PURE__*/function (_React$Component) {
   _createClass(ListMenu, [{
     key: "render",
     value: function render() {
-      var _this$props3 = this.props,
-        isRichEditor = _this$props3.isRichEditor,
-        className = _this$props3.className,
-        type = _this$props3.type;
+      var _this$props4 = this.props,
+        isRichEditor = _this$props4.isRichEditor,
+        className = _this$props4.className,
+        type = _this$props4.type;
       var menuConfig = MENUS_CONFIG_MAP[type];
       var props = _objectSpread(_objectSpread({
         isRichEditor: isRichEditor,

package/dist/basic-sdk/extension/plugins/sdoc-link/dialogs/select-sdoc-file-dialog/index.css

@@ -0,0 +1,55 @@
+.sdoc-file-select-dialog {
+  max-width: 620px;
+}
+
+.sdoc-file-select-dialog .sdoc-file-select-modal {
+  width: 620px;
+}
+
+.sdoc-file-select-dialog .sdoc-file-select-container {
+  display: flex;
+}
+
+.sdoc-file-select-dialog .sdoc-file-select-left {
+  border-right: 1px solid #e9ecef;
+  width: 150px;
+  padding: 12px 8px;
+}
+
+.sdoc-file-select-dialog .sdoc-file-select-left .sdoc-file-select-nav-item {
+  padding: 5px 0 5px 8px;
+  border-radius: 3px;
+  display: inline-block;
+  cursor: pointer;
+  width: 100%;
+}
+
+.sdoc-file-select-dialog .sdoc-file-select-left .sdoc-file-select-nav-item:hover {
+  background-color: #f5f5f5;
+}
+
+.sdoc-file-select-dialog .sdoc-file-select-container .sdoc-file-select-left .selected-sdoc-file-select-nav-item {
+  background-color: #ff8000;
+  color: #fff;
+}
+
+.sdoc-file-select-dialog .sdoc-file-select-right {
+  height: 440px;
+  width: 468px;
+  display: flex;
+  padding: 0;
+  flex-direction: column;
+}
+
+.sdoc-file-select-dialog .sdoc-file-select-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 1rem;
+  border-top: 1px solid #e9ecef;
+}
+
+.sdoc-file-select-dialog .highlight-bg-color {
+  background-color: #FF8000;
+  border-color: #FF8000;
+}

package/dist/basic-sdk/extension/plugins/sdoc-link/{menu/sdoc-link-file-dialog.js → dialogs/select-sdoc-file-dialog/index.js}

@@ -1,14 +1,15 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useState } from 'react';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import { withTranslation } from 'react-i18next';
+import { Button, Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { useTranslation } from 'react-i18next';
 import LocalFiles from './local-files';
-import { insertSdocFileLink } from '../helpers';
-import './sdoc-link-file-dialog.css';
-var SdocLinkFileDialog = function SdocLinkFileDialog(_ref) {
+import { insertSdocFileLink } from '../../helpers';
+import './index.css';
+var SelectSdocFileDialog = function SelectSdocFileDialog(_ref) {
   var editor = _ref.editor,
-    onDialogToggle = _ref.onDialogToggle,
-    t = _ref.t;
+    toggle = _ref.toggle;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     currentSelectedFile = _useState2[0],
@@ -16,8 +17,13 @@ var SdocLinkFileDialog = function SdocLinkFileDialog(_ref) {
   var onSelectedFile = useCallback(function (fileInfo) {
     setCurrentSelectedFile(fileInfo);
   }, []);
+  var closeDialog = useCallback(function () {
+    toggle(false);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   var onSubmit = useCallback(function () {
-    onDialogToggle(false);
+    closeDialog(false);
     if (currentSelectedFile) {
       insertSdocFileLink(editor, currentSelectedFile.name, currentSelectedFile.doc_uuid);
     }
@@ -27,36 +33,37 @@ var SdocLinkFileDialog = function SdocLinkFileDialog(_ref) {
     isOpen: true,
     autoFocus: false,
     zIndex: 1071,
-    returnFocusAfterClose: false
+    returnFocusAfterClose: false,
+    className: "sdoc-file-select-dialog",
+    contentClassName: "sdoc-file-select-modal"
   }, /*#__PURE__*/React.createElement(ModalHeader, {
-    toggle: function toggle() {
-      return onDialogToggle(false);
-    }
-  }, t('Select_sdoc_document')), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-file-addition-container"
+    toggle: closeDialog
+  }, t('Select_sdoc_document')), /*#__PURE__*/React.createElement(ModalBody, {
+    className: "p-0"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-file-addition-left"
+    className: "sdoc-file-select-container"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-file-addition-nav"
+    className: "sdoc-file-select-left"
   }, /*#__PURE__*/React.createElement("div", {
-    className: 'sdoc-addition-item selected-sdoc-addition-item',
-    onClick: onDialogToggle
+    className: "sdoc-file-select-nav"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-file-select-nav-item selected-sdoc-file-select-nav-item"
   }, t('Local_file')))), /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-file-addition-right"
+    className: "sdoc-file-select-right"
   }, /*#__PURE__*/React.createElement(LocalFiles, {
     onSelectedFile: onSelectedFile,
-    toggle: function toggle() {
-      return onDialogToggle(false);
-    }
-  })))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    toggle: closeDialog
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-file-select-footer"
+  }, /*#__PURE__*/React.createElement(Button, {
     color: "secondary",
-    onClick: function onClick() {
-      return onDialogToggle(false);
-    }
+    className: "mr-2",
+    onClick: closeDialog
   }, t('Cancel')), /*#__PURE__*/React.createElement(Button, {
     color: "primary",
-    disabled: false,
+    className: "highlight-bg-color",
+    disabled: !currentSelectedFile,
     onClick: onSubmit
-  }, t('Confirm'))));
+  }, t('Confirm')))))));
 };
-export default withTranslation('sdoc-editor')(SdocLinkFileDialog);
+export default SelectSdocFileDialog;

package/dist/basic-sdk/extension/plugins/sdoc-link/dialogs/select-sdoc-file-dialog/local-files/index.css

@@ -0,0 +1,75 @@
+.sdoc-files-tree {
+  flex: 1;
+  padding: 16px;
+  overflow: auto;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.sdoc-files-tree .sdoc-file-info {
+  border-radius: 2px;
+  height: 1.5rem;
+  line-height: 1.625;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: relative;
+  padding-left: 2.8rem;
+}
+
+.sdoc-files-tree .sdoc-file-info:hover {
+  cursor: pointer;
+  background: #fdefb9;
+  box-shadow: inset 0 0 1px #999;
+}
+
+.sdoc-files-tree .sdoc-file-info .sdoc-file-icon-container {
+  width: 2.8rem;
+  height: 100%;
+  padding-left: 1.5rem;
+  position: absolute;
+  left: 0;
+}
+
+.sdoc-files-tree .sdoc-file-info .sdoc-file-icon {
+  color: #9aa0ac;
+}
+
+.sdoc-files-tree .sdoc-file-info.active {
+  background: #ff8000;
+  box-shadow: inset 0 0 1px #999;
+  color: #fff;
+}
+
+.sdoc-files-tree .sdoc-file-info.active .sdoc-file-icon {
+  color: #fff;
+}
+
+.sdoc-files-tree .sdoc-file-icon-toggle {
+  height: 1.5rem;
+  width: 1.5rem;
+  line-height: 1.5rem !important;
+  font-size: 12px !important;
+  transform: scale(.8);
+  text-align: center;
+  position: absolute;
+  left: 0;
+}
+
+.sdoc-files-tree .sdoc-file-info.expanded .sdoc-file-icon-toggle {
+  transform: rotate(90deg) scale(.8);
+}
+
+.sdoc-files-tree .sdoc-file-info .sdoc-file-name {
+  font-size: 14px;
+}
+
+.sdoc-files-tree .sdoc-folder-children {
+  padding-left: 20px;
+}
+
+.sdoc-files-tree .sdoc-folder-children-empty {
+  color: #999;
+  padding: 4px 20px;
+}

package/dist/basic-sdk/extension/plugins/sdoc-link/{menu/local-files.js → dialogs/select-sdoc-file-dialog/local-files/index.js}

@@ -2,12 +2,13 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useState, useRef, useEffect } from 'react';
 import { withTranslation } from 'react-i18next';
+import classnames from 'classnames';
 import slugid from 'slugid';
-import context from '../../../../../context';
-import { getErrorMsg } from '../../../../../utils';
-import toaster from '../../../../../components/toast';
-import { getParentPathNameArr, getNewFileListData } from '../helpers';
-import './local-files.css';
+import context from '../../../../../../../context';
+import { getErrorMsg } from '../../../../../../../utils';
+import toaster from '../../../../../../../components/toast';
+import { getParentPathNameArr, getNewFileListData } from '../../../helpers';
+import './index.css';
 var LocalFiles = function LocalFiles(_ref) {
   var onSelectedFile = _ref.onSelectedFile,
     toggle = _ref.toggle,
@@ -72,6 +73,7 @@ var LocalFiles = function LocalFiles(_ref) {
       getFileData(p, item.indexId, fileListData);
       expandedFolder.add(item.indexId);
     }
+    onSelectedFile(null);
     setCurrentActiveItem(item);
     setExpandedFolder(new Set(Array.from(expandedFolder)));
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -83,51 +85,59 @@ var LocalFiles = function LocalFiles(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   var renderFileTree = useCallback(function (data) {
-    if (!Array.isArray(data)) {
-      return null;
-    }
+    if (!Array.isArray(data) || data.length === 0) return null;
     return data.map(function (item) {
       var _item$children, _item$children2;
+      if (!item) return null;
+      var type = item.type,
+        indexId = item.indexId,
+        name = item.name;
+      var selected = (currentActiveItem === null || currentActiveItem === void 0 ? void 0 : currentActiveItem.indexId) === indexId;
       return /*#__PURE__*/React.createElement("div", {
-        key: item.indexId,
-        className: "sdoc-local-folder-container"
-      }, item.type === 'dir' && /*#__PURE__*/React.createElement("div", {
+        key: indexId,
+        className: "sdoc-folder-container"
+      }, type === 'dir' && /*#__PURE__*/React.createElement("div", {
         ref: folderRef,
-        className: "sdoc-local-folder",
+        className: "sdoc-folder"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classnames('sdoc-folder-info sdoc-file-info', {
+          'active': selected,
+          'expanded': expandedFolder.has(indexId)
+        }),
         onClick: function onClick(e) {
-          onToggle(e, item, fileListData);
+          return onToggle(e, item, fileListData);
         }
       }, /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-local-folder-info ".concat((currentActiveItem === null || currentActiveItem === void 0 ? void 0 : currentActiveItem.indexId) === item.indexId ? 'active' : 'inactive')
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "".concat(expandedFolder.has(item.indexId) ? 'icon-drop-down-scale' : '')
+        className: "sdoc-file-icon-container"
       }, /*#__PURE__*/React.createElement("i", {
-        className: "sdocfont ".concat(expandedFolder.has(item.indexId) ? 'sdoc-drop-down' : 'sdoc-right-slide')
-      })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("i", {
-        className: "sdocfont sdoc-file"
+        className: "sdoc-file-icon sdoc-file-icon-toggle sdocfont sdoc-right-slide"
+      }), /*#__PURE__*/React.createElement("i", {
+        className: "sdoc-file-icon sdocfont sdoc-file sdoc-folder-icon"
       })), /*#__PURE__*/React.createElement("span", {
-        className: "sdoc-folder-name"
-      }, item.name)), /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-local-folder-children"
-      }, (item === null || item === void 0 ? void 0 : (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) === 0 && /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-local-folder-children-empty"
-      }, t('Empty')), (item === null || item === void 0 ? void 0 : (_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length) > 0 && renderFileTree(item.children))), item.type === 'file' && /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-local-file-item ".concat((currentActiveItem === null || currentActiveItem === void 0 ? void 0 : currentActiveItem.indexId) === item.indexId ? 'active' : 'inactive'),
+        className: "sdoc-folder-name sdoc-file-name"
+      }, name)), /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-folder-children"
+      }, ((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) === 0 && /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-folder-children-empty"
+      }, "(".concat(t('Empty'), ")")), ((_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length) > 0 && renderFileTree(item.children))), type === 'file' && /*#__PURE__*/React.createElement("div", {
+        className: classnames('sdoc-file-info', {
+          'active': selected
+        }),
         onClick: function onClick(e) {
           onSelectFile(e, item);
         }
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "sdoc-local-file-icon"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-file-icon-container"
       }, /*#__PURE__*/React.createElement("i", {
-        className: "sdocfont sdoc-document"
+        className: "sdoc-file-icon sdocfont sdoc-document"
       })), /*#__PURE__*/React.createElement("span", {
-        className: "sdoc-local-file-name"
-      }, item.name)));
+        className: "sdoc-file-name"
+      }, name)));
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fileListData, currentActiveItem, expandedFolder]);
   return /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-local-files-library"
+    className: "sdoc-files-tree"
   }, renderFileTree(fileListData));
 };
 export default withTranslation('sdoc-editor')(LocalFiles);

package/dist/basic-sdk/extension/plugins/sdoc-link/helpers.js

@@ -6,7 +6,8 @@ import copy from 'copy-to-clipboard';
 import context from '../../../../context';
 import { SDOC_LINK, LINK, INSERT_FILE_DISPLAY_TYPE } from '../../constants';
 import { getNodeType, getSelectedElems } from '../../core';
-export var isMenuDisabled = function isMenuDisabled(editor) {
+export var isMenuDisabled = function isMenuDisabled(editor, readonly) {
+  if (readonly) return true;
   if (editor.selection == null) return true;
   var selectedElems = getSelectedElems(editor);
   var notMatch = selectedElems.some(function (elem) {

package/dist/basic-sdk/extension/plugins/sdoc-link/{menu/sdoc-link-hover-menu.js → hover-menu/index.js}

@@ -6,7 +6,7 @@ import { withTranslation } from 'react-i18next';
 import { ElementPopover } from '../../../commons';
 import toaster from '../../../../../components/toast';
 import { getUrl, onCopySdocLinkNode } from '../helpers';
-import './sdoc-link-hover-menu.css';
+import './index.css';
 var SdocLinkHoverMenu = function SdocLinkHoverMenu(_ref) {
   var editor = _ref.editor,
     menuPosition = _ref.menuPosition,

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

@@ -5,13 +5,14 @@ import { withTranslation } from 'react-i18next';
 import { SDOC_LINK, MENUS_CONFIG_MAP } from '../../../constants';
 import { MenuItem } from '../../../commons';
 import { getType, isMenuDisabled } from '../helpers';
-import InsertSdocFileDialog from './sdoc-link-file-dialog';
+import SelectSdocFileDialog from '../dialogs/select-sdoc-file-dialog';
 import './index.css';
 var SdocLinkMenu = function SdocLinkMenu(_ref) {
   var isRichEditor = _ref.isRichEditor,
     className = _ref.className,
     editor = _ref.editor,
-    t = _ref.t;
+    t = _ref.t,
+    readonly = _ref.readonly;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     showInsertDialog = _useState2[0],
@@ -25,9 +26,9 @@ var SdocLinkMenu = function SdocLinkMenu(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   var isDisabled = useCallback(function () {
-    return isMenuDisabled(editor);
+    return isMenuDisabled(editor, readonly);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [editor, readonly]);
   var onInsertFileDialogToggle = useCallback(function () {
     setShowInsertPopover(true);
   }, []);
@@ -77,9 +78,9 @@ var SdocLinkMenu = function SdocLinkMenu(_ref) {
     onMouseDown: onInsertSdocFile
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("i", {
     className: "sdocfont sdoc-document"
-  })), /*#__PURE__*/React.createElement("span", null, t('Sdoc_document')))), showInsertDialog && /*#__PURE__*/React.createElement(InsertSdocFileDialog, {
+  })), /*#__PURE__*/React.createElement("span", null, t('Sdoc_document')))), showInsertDialog && /*#__PURE__*/React.createElement(SelectSdocFileDialog, {
     editor: editor,
-    onDialogToggle: onDialogToggle
+    toggle: onDialogToggle
   }));
 };
 export default withTranslation('sdoc-editor')(SdocLinkMenu);

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

@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useState, useRef } from 'react';
 import { Range } from '@seafile/slate';
 import { useScrollContext } from '../../../hooks/use-scroll-context';
 import { unwrapLinkNode, getUrl } from './helpers';
-import InsertHoverMenu from './menu/sdoc-link-hover-menu';
+import HoverMenu from './hover-menu';
 import './render-elem.css';
 var SdocFileLink = function SdocFileLink(_ref) {
   var editor = _ref.editor,
@@ -87,6 +87,7 @@ var SdocFileLink = function SdocFileLink(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/React.createElement("span", Object.assign({}, attributes, {
+    "data-id": element.id,
     contentEditable: false,
     className: "sdoc-file-render ".concat(element.display_type === 'card_link' ? 'sdoc-file-card-link' : ''),
     onClick: onClickFile
@@ -104,7 +105,7 @@ var SdocFileLink = function SdocFileLink(_ref) {
       e.preventDefault();
     },
     title: element.title
-  }, children))), isShowInsertHoverMenu && Range.isCollapsed(editor.selection) && /*#__PURE__*/React.createElement(InsertHoverMenu, {
+  }, children))), isShowInsertHoverMenu && Range.isCollapsed(editor.selection) && /*#__PURE__*/React.createElement(HoverMenu, {
     editor: editor,
     menuPosition: menuPosition,
     element: element,

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

@@ -12,7 +12,8 @@ import EventBus from '../../../utils/event-bus';
 import { INTERNAL_EVENT, PAGE_EDIT_AREA_WIDTH } from '../../../constants';
 import ObjectUtils from '../../../utils/object-utils';
 import { replacePastedDataId } from '../../../node-id/helpers';
-export var isTableMenuDisabled = function isTableMenuDisabled(editor) {
+export var isTableMenuDisabled = function isTableMenuDisabled(editor, readonly) {
+  if (readonly) return true;
   var selection = editor.selection;
   if (selection === null) return true;
   if (!Range.isCollapsed(selection)) return true;

package/dist/basic-sdk/extension/plugins/table/menu/active-table-menu/cell-text-align-menu.js

@@ -3,20 +3,23 @@ import { useTranslation } from 'react-i18next';
 import CommonMenu from './common-menu';
 import { setCellStyle } from '../../helpers';
 var CellTextAlignMenu = function CellTextAlignMenu(_ref) {
-  var editor = _ref.editor;
+  var editor = _ref.editor,
+    readonly = _ref.readonly;
   var textAlignRef = useRef(null);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var setTextAlignStyle = useCallback(function (textAlign) {
+    if (readonly) return;
     setCellStyle(editor, {
       textAlign: textAlign
     });
     textAlignRef.current && textAlignRef.current.hidePopover();
-  }, [editor]);
+  }, [editor, readonly]);
   return /*#__PURE__*/React.createElement(CommonMenu, {
     id: "text-align",
     iconClass: "sdocfont sdoc-align-left",
-    ref: textAlignRef
+    ref: textAlignRef,
+    disabled: readonly
   }, /*#__PURE__*/React.createElement("div", {
     className: "sdoc-dropdown-menu-item",
     onClick: function onClick() {

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

@@ -46,7 +46,8 @@ var CommonMenu = /*#__PURE__*/function (_Component) {
       var _this$props2 = this.props,
         id = _this$props2.id,
         iconClass = _this$props2.iconClass,
-        children = _this$props2.children;
+        children = _this$props2.children,
+        disabled = _this$props2.disabled;
       var isShowMenu = this.state.isShowMenu;
       var className = this.getClassName();
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
@@ -61,7 +62,7 @@ var CommonMenu = /*#__PURE__*/function (_Component) {
         className: "sdoc-menu-with-dropdown-triangle"
       }, /*#__PURE__*/React.createElement("i", {
         className: "sdoc-menu-with-dropdown-triangle-icon sdocfont sdoc-".concat(isShowMenu ? 'caret-up' : 'drop-down')
-      }))), /*#__PURE__*/React.createElement(UncontrolledPopover, {
+      }))), !disabled && /*#__PURE__*/React.createElement(UncontrolledPopover, {
         target: id,
         className: "sdoc-common-menu-popover sdoc-table-menu-popover",
         trigger: "legacy",

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

@@ -11,24 +11,30 @@ import './index.css';
 var ActiveTableMenu = function ActiveTableMenu(_ref) {
   var isRichEditor = _ref.isRichEditor,
     className = _ref.className,
-    editor = _ref.editor;
+    editor = _ref.editor,
+    readonly = _ref.readonly;
   if (!isAllInTable(editor)) return null;
   return /*#__PURE__*/React.createElement(MenuGroup, {
     className: "menu-group sdoc-table-menu-group"
   }, /*#__PURE__*/React.createElement(CellTextAlignMenu, {
-    editor: editor
+    editor: editor,
+    readonly: readonly
   }), /*#__PURE__*/React.createElement(TableColumnMenu, {
-    editor: editor
+    editor: editor,
+    readonly: readonly
   }), /*#__PURE__*/React.createElement(TableRowMenu, {
-    editor: editor
+    editor: editor,
+    readonly: readonly
   }), /*#__PURE__*/React.createElement(CellBgColorMenu, {
     editor: editor,
     isRichEditor: isRichEditor,
-    className: className
+    className: className,
+    readonly: readonly
   }), /*#__PURE__*/React.createElement(RemoveTable, {
     editor: editor,
     isRichEditor: isRichEditor,
-    className: className
+    className: className,
+    readonly: readonly
   }));
 };
 export default withTranslation('sdoc-editor')(ActiveTableMenu);