@seafile/comment-editor 0.0.1-alpha.0

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

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.unwrapLinkNode = exports.onCopyFileLinkNode = exports.isMenuDisabled = exports.insertFileLink = exports.getUrl = exports.getType = exports.getFileLinkEntry = exports.generateFileNode = void 0;
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));
+var _slugid = _interopRequireDefault(require("slugid"));
+var _context = _interopRequireDefault(require("../../../context"));
+var _constants = require("../../constants");
+var _core = require("../../core");
+const isMenuDisabled = (editor, readonly) => {
+  if (readonly) return true;
+  if (editor.selection == null) return true;
+  const selectedElems = (0, _core.getSelectedElems)(editor);
+  const notMatch = selectedElems.some(elem => {
+    const {
+      type
+    } = elem;
+    if (editor.isVoid(elem)) return true;
+    if ([_constants.CODE_BLOCK, _constants.CODE_LINE, _constants.LINK, _constants.TITLE, _constants.SUBTITLE, ..._constants.HEADERS].includes(type)) return true;
+    return false;
+  });
+  if (notMatch) return true; // disabled
+  return false; // enable
+};
+exports.isMenuDisabled = isMenuDisabled;
+const generateFileNode = (uuid, text) => {
+  const fileNode = {
+    id: _slugid.default.nice(),
+    type: _constants.FILE_LINK,
+    doc_uuid: uuid,
+    title: text,
+    display_type: _constants.INSERT_FILE_DISPLAY_TYPE[1],
+    children: [{
+      id: _slugid.default.nice(),
+      text: text || ''
+    }]
+  };
+  return fileNode;
+};
+exports.generateFileNode = generateFileNode;
+const getType = editor => {
+  const [match] = _slate.Editor.nodes(editor, {
+    match: n => (0, _core.getNodeType)(n) === _constants.FILE_LINK,
+    universal: true
+  });
+  if (!match) return _constants.PARAGRAPH;
+  const [n] = match;
+  return (0, _core.getNodeType)(n);
+};
+exports.getType = getType;
+const insertFileLink = (editor, text, uuid) => {
+  if (isMenuDisabled(editor)) return;
+  // Selection folded or not
+  const {
+    selection
+  } = editor;
+  if (selection == null) return;
+  const isCollapsed = _slate.Range.isCollapsed(selection);
+  if (isCollapsed) {
+    const fileNode = generateFileNode(uuid, text);
+    _slate.Transforms.insertNodes(editor, fileNode);
+  } else {
+    const selectedText = _slate.Editor.string(editor, selection); // Selected text
+    if (selectedText !== text) {
+      // If the selected text is different from the typed text, delete the text and insert the link
+      editor.deleteFragment();
+      const fileNode = generateFileNode(uuid, text);
+      _slate.Transforms.insertNodes(editor, fileNode);
+    } else {
+      // If the selected text is the same as the entered text, only the link can be wrapped
+      const fileNode = generateFileNode(uuid, text);
+      _slate.Transforms.wrapNodes(editor, fileNode, {
+        split: true
+      });
+      _slate.Transforms.collapse(editor, {
+        edge: 'end'
+      });
+    }
+  }
+};
+exports.insertFileLink = insertFileLink;
+const unwrapLinkNode = (editor, element) => {
+  if (editor.selection == null) return;
+  const path = _slateReact.ReactEditor.findPath(editor, element);
+  if (path) {
+    _slate.Transforms.unwrapNodes(editor, {
+      at: path
+    });
+  }
+};
+exports.unwrapLinkNode = unwrapLinkNode;
+const getUrl = uuid => {
+  return _context.default.getSdocLocalFileUrl(uuid);
+};
+exports.getUrl = getUrl;
+const onCopyFileLinkNode = (editor, element) => {
+  if (editor.selection == null || _slate.Range.isExpanded(editor.selection)) return;
+  const p = _slateReact.ReactEditor.findPath(editor, element);
+  _slate.Transforms.select(editor, p);
+  const newData = editor.setFragmentData(new DataTransfer());
+  (0, _copyToClipboard.default)('copy', {
+    onCopy: clipboardData => {
+      newData.types.forEach(type => {
+        const data = newData.getData(type);
+        clipboardData.setData(type, data);
+      });
+    }
+  });
+};
+exports.onCopyFileLinkNode = onCopyFileLinkNode;
+const getFileLinkEntry = function (editor) {
+  let at = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : editor.selection;
+  const aboveNodeEntry = _slate.Editor.above(editor, {
+    match: n => n.type === _constants.FILE_LINK,
+    mode: 'highest',
+    at
+  });
+  return aboveNodeEntry;
+};
+exports.getFileLinkEntry = getFileLinkEntry;

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

@@ -0,0 +1,89 @@
+.sdoc-file-link-hover-menu-container {
+  position: absolute;
+  height: 42px;
+  z-index: 101;
+  width: auto;
+}
+  
+.sdoc-file-link-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-file-link-hover-menu-container .hover-menu-container > span:not(:last-of-type) {
+  padding-right: 8px;
+  border-right: 1px solid #e5e5e5;
+}
+
+.sdoc-file-link-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-file-link-hover-menu-container .hover-menu-container .op-item:hover {
+  color: #212529;
+  text-decoration: none;
+  background: #f1f1f1;
+}
+
+.sdoc-file-link-hover-menu-container .op-group-item:last-child .op-item {
+  margin-left: 8px;
+}
+
+.sdoc-file-link-hover-menu-container .hover-menu-container .link-style-icon-active {
+  background: #f1f1f1;
+}
+
+.sdoc-file-link-hover-menu-container .hover-menu-container .op-tooltip:hover::after {
+  position: absolute;
+  color: #212529;
+  content: attr(op-item-tooltip);
+  top: -40px;
+  left: -20px;
+  width: 70px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #fff;
+  border-radius: 3px;
+  border: 1px solid #e8e8e8;
+  font-size: 12px;
+  box-shadow: 0 0 5px #ccc;
+}
+
+.sdoc-file-link-hover-menu-container .hover-menu-container .icon-font {
+  font-size: 12px;
+  color: #999999;
+}
+
+.sdoc-file-link-hover-menu-container .sdoc-file-display-style-popover {
+  position: absolute;
+  top: 37px;
+  right: -80px;
+  padding: 8px 0;
+  background-color: #fff;
+  border: 1px solid #e5e6e8;
+  border-radius: 2px;
+  box-shadow: 0 0 10px #ccc;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  z-index: 101;
+  white-space: nowrap;
+}

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

@@ -0,0 +1,120 @@
+"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 _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _toast = _interopRequireDefault(require("../../../../components/toast"));
+var _commons = require("../../../commons");
+var _constants = require("../../../constants");
+var _core = require("../../../core");
+var _constants2 = require("../constants");
+var _helpers = require("../helpers");
+require("./index.css");
+const FileLinkHoverMenu = _ref => {
+  let {
+    editor,
+    menuPosition,
+    element,
+    onUnwrapFileLinkNode,
+    onHideInsertHoverMenu,
+    t
+  } = _ref;
+  const readOnly = (0, _slateReact.useReadOnly)();
+  const [isShowDisplayStylePopover, setIsShowDisplayStylePopover] = (0, _react.useState)(false);
+  const onCopy = (0, _react.useCallback)(e => {
+    e.stopPropagation();
+    (0, _helpers.onCopyFileLinkNode)(editor, element);
+    _toast.default.success(t('Copied'), {
+      hasCloseButton: false,
+      duration: 2
+    });
+    onHideInsertHoverMenu();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onShowProver = (0, _react.useCallback)(e => {
+    setIsShowDisplayStylePopover(true);
+  }, []);
+  const onSelect = (0, _react.useCallback)((event, value) => {
+    event.stopPropagation();
+    const path = _slateReact.ReactEditor.findPath(editor, element);
+    if (path) {
+      _slate.Transforms.setNodes(editor, {
+        display_type: value
+      }, {
+        at: path
+      });
+    }
+    onHideInsertHoverMenu();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const selectedType = element.display_type || _constants2.FILE_LINK_TYPE.TEXT_LINK;
+  const id = `file-link-display-type-${element.id}`;
+  const newFileLinkTypes = _constants2.FILE_LINK_TYPES.filter(fileLinkType => (0, _core.getCurrentNode)(editor)[0].type === _constants.TABLE_CELL ? fileLinkType !== _constants2.FILE_LINK_TYPE.CARD_LINK : true);
+  return /*#__PURE__*/_react.default.createElement(_commons.ElementPopover, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-file-link-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", {
+    role: "button",
+    className: (0, _classnames.default)('op-item', {
+      'ml-0': readOnly
+    })
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    href: (0, _helpers.getUrl)(element.doc_uuid),
+    target: "_blank",
+    rel: "noopener noreferrer",
+    className: "link-op-menu-link"
+  }, t('Open_link')))), !readOnly && /*#__PURE__*/_react.default.createElement("span", {
+    className: "op-group-item"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    role: "button",
+    className: "op-item",
+    onClick: onCopy
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-copy icon-font"
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    role: "button",
+    className: (0, _classnames.default)('op-item', {
+      'link-style-icon-active': isShowDisplayStylePopover
+    }),
+    onClick: onShowProver,
+    id: id
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: (0, _classnames.default)('icon-font mr-1', _constants2.FILE_LINK_TYPE_CONFIG[selectedType].icon)
+  }), /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-drop-down icon-font"
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    role: "button",
+    className: "op-item",
+    onClick: onUnwrapFileLinkNode
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-unlink icon-font"
+  })))), isShowDisplayStylePopover && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-file-display-style-popover sdoc-dropdown-menu"
+  }, newFileLinkTypes.map(fileLinkType => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: fileLinkType,
+      "date-type": fileLinkType,
+      className: "sdoc-dropdown-menu-item sdoc-dropdown-item-with-left-icon pr-2",
+      onClick: event => onSelect(event, fileLinkType)
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "sdoc-dropdown-item-content"
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: (0, _classnames.default)('sdoc-dropdown-item-content-icon', _constants2.FILE_LINK_TYPE_CONFIG[fileLinkType].icon)
+    }), /*#__PURE__*/_react.default.createElement("span", null, t(_constants2.FILE_LINK_TYPE_CONFIG[fileLinkType].text))), selectedType === fileLinkType && /*#__PURE__*/_react.default.createElement("i", {
+      className: "sdocfont sdoc-check-mark sdoc-dropdown-item-right-icon"
+    }));
+  }))));
+};
+var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(FileLinkHoverMenu);

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

@@ -0,0 +1,18 @@
+"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 FileLinkPlugin = {
+  type: _constants.FILE_LINK,
+  editorMenus: [_menu.default],
+  editorPlugin: _plugin.default,
+  renderElements: [_renderElem.default]
+};
+var _default = exports.default = FileLinkPlugin;

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

@@ -0,0 +1,38 @@
+"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 _constants = require("../../../../constants");
+var _dropdownMenuItem = _interopRequireDefault(require("../../../commons/dropdown-menu-item"));
+var _constants2 = require("../../../constants");
+var _helpers = require("../helpers");
+const FileLinkMenu = _ref => {
+  let {
+    editor,
+    readonly,
+    toggle,
+    eventBus
+  } = _ref;
+  const disabled = (0, _helpers.isMenuDisabled)(editor, readonly);
+  const menuConfig = _constants2.MENUS_CONFIG_MAP[_constants2.FILE_LINK];
+  const openSelectFileDialog = (0, _react.useCallback)(() => {
+    eventBus.dispatch(_constants.INTERNAL_EVENT.INSERT_ELEMENT, {
+      type: _constants2.ELEMENT_TYPE.FILE_LINK,
+      insertFileLinkCallback: _helpers.insertFileLink
+    });
+    toggle && toggle();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [toggle, eventBus]);
+  return /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+    disabled: disabled,
+    menuConfig: menuConfig,
+    onClick: openSelectFileDialog
+  });
+};
+var _default = exports.default = FileLinkMenu;

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

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slate = require("@seafile/slate");
+var _constants = require("../../constants");
+var _helpers = require("./helpers");
+const withFileLink = editor => {
+  const {
+    isInline,
+    deleteBackward,
+    onHotKeyDown
+  } = editor;
+  const newEditor = editor;
+
+  // Rewrite isInline
+  newEditor.isInline = elem => {
+    const {
+      type
+    } = elem;
+    if (type === _constants.FILE_LINK) {
+      return true;
+    }
+    return isInline(elem);
+  };
+  newEditor.deleteBackward = unit => {
+    const {
+      selection
+    } = newEditor;
+    if (selection === null) {
+      return deleteBackward(unit);
+    }
+
+    // Delete file link node
+    const nodeEntry = _slate.Editor.node(newEditor, newEditor.selection);
+    if (nodeEntry && _slate.Node.string(nodeEntry[0]).length === 0) {
+      const beforePath = nodeEntry[1];
+      beforePath.splice(-1, 1, Math.max(nodeEntry[1].at(-1) - 1, 0));
+      const beforeNodeEntry = _slate.Editor.node(newEditor, beforePath);
+      if (beforeNodeEntry && beforeNodeEntry[0].type === _constants.FILE_LINK) {
+        _slate.Transforms.delete(newEditor, {
+          at: beforeNodeEntry[1]
+        });
+        return;
+      }
+      return deleteBackward(unit);
+    }
+    return deleteBackward(unit);
+  };
+  newEditor.onHotKeyDown = e => {
+    const fileLinkEntry = (0, _helpers.getFileLinkEntry)(editor);
+    if (fileLinkEntry) {
+      if (e.key === 'ArrowLeft') {
+        const beforePointFileLink = _slate.Editor.before(newEditor, fileLinkEntry[1]);
+        _slate.Transforms.select(newEditor, beforePointFileLink);
+        e.preventDefault();
+        return;
+      }
+      if (e.key === 'ArrowRight') {
+        const afterPointFileLink = _slate.Editor.after(newEditor, fileLinkEntry[1]);
+        _slate.Transforms.select(newEditor, afterPointFileLink);
+        e.preventDefault();
+        return;
+      }
+    }
+    return onHotKeyDown && onHotKeyDown(e);
+  };
+  return newEditor;
+};
+var _default = exports.default = withFileLink;

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

@@ -0,0 +1,56 @@
+.file-link-selected,
+.sdoc-file-link-render:hover {
+  background-color: #e5e5e5 !important;
+}
+
+.sdoc-file-card-link {
+  position: relative;
+  background-color: #f3f3f3;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  display: inline-block;
+  height: 50px;
+  width: 420px;
+  margin-bottom: -3px;
+}
+
+.sdoc-file-link-render .sdoc-file-link-icon {
+  padding-right: 5px;
+  color: #ff9800;
+}
+
+.sdoc-file-card-link .sdoc-file-link-icon :first-child {
+  font-size: 24px;
+}
+
+.sdoc-file-card-link .sdoc-file-link-icon {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.sdoc-file-link-render .sdoc-file-link-icon .file-link-img {
+  width: 20px;
+}
+
+.sdoc-file-card-link .sdoc-file-link-icon .file-link-img {
+  width: 28px;
+}
+
+.sdoc-file-card-link .sdoc-file-text-link {
+  position: absolute;
+  left: 42px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 330px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sdoc-file-card-link .sdoc-file-text-link a {
+  text-decoration: none;
+  color: #333;
+}

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

@@ -0,0 +1,164 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+var _useScrollContext = require("../../../hooks/use-scroll-context");
+var _helpers = require("../../commons/select-file-dialog/helpers");
+var _constants = require("../../constants");
+var _constants2 = require("./constants");
+var _helpers2 = require("./helpers");
+var _hoverMenu = _interopRequireDefault(require("./hover-menu"));
+require("./render-elem.css");
+const FileLink = _ref => {
+  let {
+    editor,
+    element,
+    children,
+    attributes
+  } = _ref;
+  const fileRef = (0, _react.useRef)(null);
+  const scrollRef = (0, _useScrollContext.useScrollContext)();
+  const readOnly = (0, _slateReact.useReadOnly)();
+  const [isShowInsertHoverMenu, setIsShowInsertHoverMenu] = (0, _react.useState)(false);
+  const [menuPosition, setMenuPosition] = (0, _react.useState)({});
+  const isSelected = (0, _slateReact.useSelected)();
+
+  // Get file type icon
+  const fileTypeIcon = (0, _helpers.parcelFileTypeIcon)(element.title);
+  const registerEventHandle = (0, _react.useCallback)(() => {
+    document.addEventListener('click', onHideInsertHoverMenu);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const unregisterEventHandle = (0, _react.useCallback)(() => {
+    document.removeEventListener('click', onHideInsertHoverMenu);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(() => {
+    return () => {
+      unregisterEventHandle();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const setPosition = (0, _react.useCallback)(elem => {
+    if (elem) {
+      const {
+        top,
+        left
+      } = elem.getBoundingClientRect();
+      const menuTop = top - 42; // top = top distance - menu height
+      const menuLeft = left - 18; // left = left distance - (menu width / 2)
+      const newMenuPosition = {
+        top: menuTop,
+        left: menuLeft
+      };
+      setMenuPosition(newMenuPosition);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onScroll = (0, _react.useCallback)(e => {
+    setPosition(fileRef.current);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(() => {
+    let observerRefValue = null;
+    if (isShowInsertHoverMenu) {
+      scrollRef.current && scrollRef.current.addEventListener('scroll', onScroll);
+      observerRefValue = scrollRef.current;
+    } else {
+      scrollRef.current && scrollRef.current.removeEventListener('scroll', onScroll);
+    }
+    return () => {
+      if (observerRefValue) {
+        observerRefValue.removeEventListener('scroll', onScroll);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowInsertHoverMenu]);
+  const onClickFile = (0, _react.useCallback)(e => {
+    if (readOnly) {
+      window.open((0, _helpers2.getUrl)(element.doc_uuid));
+      return;
+    }
+    if (isShowInsertHoverMenu) {
+      e.stopPropagation();
+    }
+    setPosition(e.currentTarget);
+    setIsShowInsertHoverMenu(true);
+    setTimeout(() => {
+      registerEventHandle();
+    }, 0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowInsertHoverMenu]);
+  const onHideInsertHoverMenu = (0, _react.useCallback)(e => {
+    setIsShowInsertHoverMenu(false);
+    unregisterEventHandle();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onUnwrapFileLinkNode = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    (0, _helpers2.unwrapLinkNode)(editor, element);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  let style = {};
+  if (element.add) {
+    style = {
+      ..._constants.ADDED_STYLE
+    };
+  } else if (element.delete) {
+    style = {
+      ..._constants.DELETED_STYLE
+    };
+  }
+  if (style.computed_background_color) {
+    style['backgroundColor'] = style.computed_background_color;
+  }
+  return /*#__PURE__*/_react.default.createElement("span", Object.assign({}, attributes, {
+    "data-id": element.id,
+    contentEditable: false,
+    className: (0, _classnames.default)('sdoc-file-link-render', {
+      'file-link-selected': isSelected
+    }, {
+      'sdoc-file-card-link': element.display_type === _constants2.FILE_LINK_TYPE.CARD_LINK
+    }),
+    onClick: onClickFile,
+    style: element.display_type === _constants2.FILE_LINK_TYPE.CARD_LINK ? style : {}
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    ref: fileRef
+  }, [_constants2.FILE_LINK_TYPE.ICON_LINK, _constants2.FILE_LINK_TYPE.CARD_LINK].includes(element.display_type) && /*#__PURE__*/_react.default.createElement("span", {
+    className: "sdoc-file-link-icon",
+    style: style
+  }, !fileTypeIcon && /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-link-file"
+  }), fileTypeIcon && /*#__PURE__*/_react.default.createElement("img", {
+    className: "file-link-img",
+    src: fileTypeIcon,
+    alt: ""
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: "sdoc-file-text-link",
+    style: style
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    href: (0, _helpers2.getUrl)(element.doc_uuid),
+    onClick: e => e.preventDefault(),
+    onDragStart: e => e.preventDefault(),
+    title: element.title
+  }, children))), isShowInsertHoverMenu && /*#__PURE__*/_react.default.createElement(_hoverMenu.default, {
+    editor: editor,
+    menuPosition: menuPosition,
+    element: element,
+    onUnwrapFileLinkNode: onUnwrapFileLinkNode,
+    onHideInsertHoverMenu: onHideInsertHoverMenu
+  }));
+};
+const renderFileLink = (props, editor) => {
+  return /*#__PURE__*/_react.default.createElement(FileLink, Object.assign({}, props, {
+    editor: editor
+  }));
+};
+var _default = exports.default = renderFileLink;