@seafile/seafile-editor 1.0.4-2 → 1.0.4-20

package/dist/constants/event-types.js

@@ -6,5 +6,8 @@ export const INTERNAL_EVENTS = {
   ON_OPEN_FORMULA_DIALOG: 'on_open_formula_dialog'
 };
 export const EXTERNAL_EVENTS = {
-  ON_HELP_INFO_TOGGLE: 'on_help_info_toggle'
+  ON_HELP_INFO_TOGGLE: 'on_help_info_toggle',
+  ON_LINK_CLICK: 'on_link_click',
+  ON_INSERT_IMAGE: 'on_insert_image',
+  INSERT_IMAGE: 'insert_image'
 };

package/dist/editors/plain-markdown-editor/index.js

@@ -29,7 +29,7 @@ class PlainMarkdownEditor extends React.Component {
     });
     _defineProperty(this, "updateCode", newCode => {
       this.setContent(newCode);
-      this.props.onSave && this.props.onSave(newCode);
+      this.props.onContentChanged && this.props.onContentChanged(newCode);
     });
     _defineProperty(this, "onEnterLeftPanel", () => {
       this.setState({

package/dist/editors/simple-slate-editor /index.js

@@ -6,12 +6,13 @@ import EventBus from '../../utils/event-bus';
 import EventProxy from '../../utils/event-handler';
 import withPropsEditor from './with-props-editor';
 import { focusEditor } from '../../extension/core';
-import '../../assets/css/slate-editor.css';
+import './style.css';
 export default function SimpleSlateEditor(_ref) {
   let {
     value,
     editorApi,
     onSave,
+    onContentChanged,
     isSupportFormula
   } = _ref;
   const [slateValue, setSlateValue] = useState(value);
@@ -24,10 +25,14 @@ export default function SimpleSlateEditor(_ref) {
   }, [editor]);
   const onChange = useCallback(value => {
     setSlateValue(value);
-    onSave && onSave(value);
+    const operations = editor.operations;
+    const modifyOps = operations.filter(o => o.type !== 'set_selection');
+    if (modifyOps.length > 0) {
+      onContentChanged && onContentChanged(value);
+    }
     const eventBus = EventBus.getInstance();
     eventBus.dispatch('change');
-  }, [onSave]);
+  }, [editor.operations, onContentChanged]);
 
   // useMount: focus editor
   useEffect(() => {
@@ -50,8 +55,15 @@ export default function SimpleSlateEditor(_ref) {
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+
+  // willUnmount
+  useEffect(() => {
+    return () => {
+      editor.selection = null;
+    };
+  });
   return /*#__PURE__*/React.createElement("div", {
-    className: "sf-slate-editor-container"
+    className: "sf-simple-slate-editor-container"
   }, /*#__PURE__*/React.createElement(Toolbar, {
     editor: editor,
     isSupportFormula: isSupportFormula

package/dist/editors/simple-slate-editor /style.css

@@ -0,0 +1,72 @@
+.sf-simple-slate-editor-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+}
+
+.sf-simple-slate-editor-container .sf-slate-editor-toolbar {
+  display: flex;
+  justify-content: flex-start;
+  height: 44px;
+  align-items: center;
+  padding: 0 10px;
+  background-color: #fff;
+  user-select: none;
+  border-bottom: 1px solid #e5e6e8;
+  position: relative;
+  z-index: 102;
+}
+
+.sf-simple-slate-editor-container .sf-slate-editor-content {
+  width: 100%;
+  height: calc(100% - 44px);
+  display: flex;
+  background: #f5f5f5;
+  position: relative;
+  min-height: 0;
+}
+
+.sf-simple-slate-editor-container .sf-slate-scroll-container,
+  .sf-simple-slate-editor-container .sf-slate-article-container {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+
+/* .sf-simple-slate-editor-container .sf-slate-article-container {
+  flex: 1;
+  position: relative;
+  max-width: 950px;
+  min-width: 400px;
+  margin: 0 auto;
+  padding-top: 20px;
+  padding-bottom: 20px;
+} */
+
+.sf-simple-slate-editor-container .sf-slate-editor-content .article {
+  margin: 0;
+  padding: 10px;
+  height: 100%;
+  border: none;
+  background-color: #fff;
+}
+
+.sf-simple-slate-editor-container .sf-slate-editor-content .article div:first-child {
+  outline: none;
+}
+
+.sf-simple-slate-editor-container ::-webkit-scrollbar{
+  width: 8px;
+  height: 8px;
+}
+
+.sf-simple-slate-editor-container ::-webkit-scrollbar-button {
+  display: none;
+}
+
+.sf-simple-slate-editor-container ::-webkit-scrollbar-thumb {
+  background-color: rgb(206, 206, 212);
+  border-radius: 10px;
+}

package/dist/editors/slate-editor/index.js

@@ -8,13 +8,16 @@ import withPropsEditor from './with-props-editor';
 import EditorHelp from './editor-help';
 import { focusEditor } from '../../extension/core';
 import { ScrollContext } from '../../hooks/use-scroll-context';
-import '../../assets/css/slate-editor.css';
+import './style.css';
+import useSeafileUtils from '../../hooks/use-insert-image';
 export default function SlateEditor(_ref) {
   let {
     value,
     editorApi,
     onSave,
+    onContentChanged,
     isSupportFormula,
+    isSupportInsertSeafileImage,
     children
   } = _ref;
   const [slateValue, setSlateValue] = useState(value);
@@ -26,12 +29,17 @@ export default function SlateEditor(_ref) {
   const eventProxy = useMemo(() => {
     return new EventProxy(editor);
   }, [editor]);
+  useSeafileUtils(editor);
   const onChange = useCallback(value => {
     setSlateValue(value);
-    onSave && onSave(value);
+    const operations = editor.operations;
+    const modifyOps = operations.filter(o => o.type !== 'set_selection');
+    if (modifyOps.length > 0) {
+      onContentChanged && onContentChanged(value);
+    }
     const eventBus = EventBus.getInstance();
     eventBus.dispatch('change');
-  }, [onSave]);
+  }, [editor.operations, onContentChanged]);
 
   // useMount: focus editor
   useEffect(() => {
@@ -54,12 +62,20 @@ export default function SlateEditor(_ref) {
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+
+  // willUnmount
+  useEffect(() => {
+    return () => {
+      editor.selection = null;
+    };
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: "sf-slate-editor-container"
   }, /*#__PURE__*/React.createElement(Toolbar, {
     editor: editor,
     isRichEditor: true,
-    isSupportFormula: isSupportFormula
+    isSupportFormula: isSupportFormula,
+    isSupportInsertSeafileImage: isSupportInsertSeafileImage
   }), /*#__PURE__*/React.createElement("div", {
     className: "sf-slate-editor-content"
   }, /*#__PURE__*/React.createElement(ScrollContext.Provider, {

package/dist/editors/slate-viewer/index.js

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { baseEditor, renderElement, renderLeaf } from '../../extension';
 import { Editable, Slate } from 'slate-react';
 import Outline from '../../containers/outline';
@@ -7,15 +7,24 @@ import './style.css';
 export default function SlateViewer(_ref) {
   let {
     value,
-    isShowOutline
+    isShowOutline,
+    scrollRef: externalScrollRef
   } = _ref;
   const scrollRef = useRef(null);
+  const containerScrollRef = externalScrollRef ? externalScrollRef : scrollRef;
+
+  // willUnmount
+  useEffect(() => {
+    return () => {
+      baseEditor.selection = null;
+    };
+  });
   return /*#__PURE__*/React.createElement(Slate, {
     editor: baseEditor,
     initialValue: value
   }, /*#__PURE__*/React.createElement(ScrollContext.Provider, {
     value: {
-      scrollRef
+      scrollRef: containerScrollRef
     }
   }, /*#__PURE__*/React.createElement("div", {
     ref: scrollRef,

package/dist/editors/slate-viewer/style.css

@@ -5,7 +5,6 @@
   min-width: 0;
   overflow: auto;
   background: #f4f4f4;
-  border: 1px solid #ededed;
   padding: 30px 0 15px;
 }
 
@@ -20,7 +19,7 @@
 
 .sf-slate-viewer-scroll-container .sf-slate-viewer-outline {
   height: 80%;
-  overflow: auto;
+  overflow-y: hidden;
   padding-right: 1rem;
   position: fixed;
   right: 0;
@@ -28,6 +27,10 @@
   width: 300px;
 }
 
+.sf-slate-viewer-scroll-container .sf-slate-viewer-outline:hover {
+  overflow-y: auto;
+}
+
 .sf-slate-viewer-scroll-container .article {
   margin: 0 auto;
   padding: 40px 60px;
@@ -37,21 +40,23 @@
   background: #fff;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 991.98px) {
   .sf-slate-viewer-article-container {
     padding: 0 10px;
     width: 100%;
     margin: 0 !important;
   }
+  
+  .sf-slate-viewer-outline {
+    display: none !important;
+  }
+}
 
+@media (max-width: 768px) {
   .sf-slate-viewer-article-container .article {
     margin: 0 !important;
     padding: 20px !important;
   }
-
-  .sf-slate-viewer-outline {
-    display: none !important;
-  }
 }
 
 

package/dist/extension/constants/index.js

@@ -4,13 +4,13 @@ export { _ELementTypes as ELementTypes };
 export * from './menus-config';
 export const HEADERS = [HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6];
 export const HEADER_TITLE_MAP = {
-  [HEADER1]: 'header_one',
-  [HEADER2]: 'header_two',
-  [HEADER3]: 'header_three',
-  [HEADER4]: 'header_four',
-  [HEADER5]: 'header_five',
-  [HEADER6]: 'header_six',
-  [PARAGRAPH]: 'paragraph'
+  [HEADER1]: 'Header_one',
+  [HEADER2]: 'Header_two',
+  [HEADER3]: 'Header_three',
+  [HEADER4]: 'Header_four',
+  [HEADER5]: 'Header_five',
+  [HEADER6]: 'Header_six',
+  [PARAGRAPH]: 'Paragraph'
 };
 export const LIST_TYPE_ARRAY = ['unordered_list', 'ordered_list'];
 export const INSERT_POSITION = {

package/dist/extension/core/utils/index.js

@@ -1,6 +1,6 @@
 import slugid from 'slugid';
 import { useTranslation } from 'react-i18next';
-import { PARAGRAPH } from '../../constants/element-types';
+import { HEADER1, PARAGRAPH } from '../../constants/element-types';
 export const match = (node, path, predicate) => {
   if (!predicate) return true;
   if (typeof predicate === 'object') {
@@ -35,6 +35,17 @@ export const generateEmptyElement = type => {
     children: [generateDefaultText()]
   };
 };
+export const generateHeaderElement = text => {
+  const headerText = {
+    id: slugid.nice(),
+    text: text
+  };
+  return {
+    id: slugid.nice(),
+    type: HEADER1,
+    children: [headerText]
+  };
+};
 
 /**
  * @param {String} type

package/dist/extension/plugins/image/helper.js

@@ -11,12 +11,15 @@ export const isMenuDisabled = (editor, readonly) => {
   if (isInCodeBlock(editor)) return true;
   return false;
 };
-export const insertImage = (editor, url) => {
+export const insertImage = (editor, url, title) => {
   const imageNode = {
     type: IMAGE,
     id: slugid.nice(),
     data: {
-      src: url
+      src: url,
+      ...(title && {
+        title
+      })
     },
     children: [generateDefaultText()]
   };
@@ -25,6 +28,29 @@ export const insertImage = (editor, url) => {
     select: true
   });
 };
+export const insertSeafileImage = _ref => {
+  let {
+    editor,
+    url,
+    title,
+    selection
+  } = _ref;
+  const imageNode = {
+    type: IMAGE,
+    id: slugid.nice(),
+    data: {
+      src: url,
+      ...(title && {
+        title
+      })
+    },
+    children: [generateDefaultText()]
+  };
+  Transforms.insertNodes(editor, imageNode, {
+    at: selection,
+    select: true
+  });
+};
 export const updateImage = (editor, data) => {
   Transforms.setNodes(editor, {
     data

package/dist/extension/plugins/image/menu/image-menu-popover.js

@@ -1,19 +1,21 @@
-import React, { useCallback, useState } from 'react';
+import React, { Fragment, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Label } from 'reactstrap';
 import ImageMenuInsertInternetDialog from './image-menu-dialog';
+import EventBus from '../../../../utils/event-bus';
+import { EXTERNAL_EVENTS } from '../../../../constants/event-types';
 import { insertImage } from '../helper';
 import './style.css';
 const ImageMenuPopover = _ref => {
   let {
     editor,
-    handelClosePopover
+    handelClosePopover,
+    isSupportInsertSeafileImage
   } = _ref;
   const [isShowInternetImageModal, setIsShowInternetImageModal] = useState(false);
   const {
     t
   } = useTranslation();
-  const handleInsertNextworkImage = e => {
+  const handleInsertNetworkImage = e => {
     e.nativeEvent.stopImmediatePropagation();
     e.stopPropagation();
     setIsShowInternetImageModal(true);
@@ -39,14 +41,20 @@ const ImageMenuPopover = _ref => {
     setIsShowInternetImageModal(false);
     handelClosePopover();
   }, [handelClosePopover]);
-  return /*#__PURE__*/React.createElement("div", {
+  const handleInsertLibraryImage = e => {
+    e.nativeEvent.stopImmediatePropagation();
+    e.stopPropagation();
+    const eventBus = EventBus.getInstance();
+    eventBus.dispatch(EXTERNAL_EVENTS.ON_INSERT_IMAGE, editor.selection);
+    handelClosePopover();
+  };
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "image-popover"
   }, /*#__PURE__*/React.createElement("div", {
     className: "image-popover-item",
-    onClick: handleInsertNextworkImage
-  }, t('Insert_network_image')), /*#__PURE__*/React.createElement(Label, {
+    onClick: handleInsertNetworkImage
+  }, t('Insert_network_image')), /*#__PURE__*/React.createElement("div", {
     className: "image-popover-item",
-    for: "image-uploader",
     onClick: handleClickFileInput
   }, t('Upload_local_image')), /*#__PURE__*/React.createElement("input", {
     onClick: handleClickFileInput,
@@ -55,7 +63,10 @@ const ImageMenuPopover = _ref => {
     accept: "image/*",
     className: "image-uploader",
     id: "image-uploader"
-  }), isShowInternetImageModal && /*#__PURE__*/React.createElement(ImageMenuInsertInternetDialog, {
+  }), isSupportInsertSeafileImage && /*#__PURE__*/React.createElement("div", {
+    className: "image-popover-item",
+    onClick: handleInsertLibraryImage
+  }, t('Insert_library_image'))), isShowInternetImageModal && /*#__PURE__*/React.createElement(ImageMenuInsertInternetDialog, {
     editor: editor,
     onToggleImageDialog: onToggleImageDialog
   }));

package/dist/extension/plugins/image/menu/index.js

@@ -10,7 +10,8 @@ const ImageMenu = _ref => {
     isRichEditor,
     className,
     readonly,
-    editor
+    editor,
+    isSupportInsertSeafileImage
   } = _ref;
   const [isShowImagePopover, setIsShowImagePopover] = useState(false);
   useEffect(() => {
@@ -42,7 +43,8 @@ const ImageMenu = _ref => {
     editor: editor,
     setIsShowImagePopover: setIsShowImagePopover,
     unregisterEventHandler: unregisterEventHandler,
-    handelClosePopover: handleChangePopoverDisplayed
+    handelClosePopover: handleChangePopoverDisplayed,
+    isSupportInsertSeafileImage: isSupportInsertSeafileImage
   }));
 };
 export default ImageMenu;

package/dist/extension/plugins/image/menu/style.css

@@ -25,10 +25,12 @@
   font-size: 14px;
   line-height: 1;
   white-space: nowrap;
+  cursor: pointer;
 }
 
 .image-popover .image-popover-item:hover {
   background-color: #4d9ef8;
+  color: #fff;
 }
 
 .image-popover .image-uploader {

package/dist/extension/plugins/link/helper.js

@@ -92,12 +92,12 @@ export const insertLink = props => {
   const isCollapsed = Range.isCollapsed(selection);
   if (isCollapsed) {
     // If selection is collapsed, we insert a space and then insert link node that help operation easier
-    editor.insertText(' ');
+    editor.insertText('');
     Editor.insertFragment(editor, [linkNode]);
     // Using insertText directly causes the added Spaces to be added to the linked text, as in the issue above, so replaced by insertFragment
     Editor.insertFragment(editor, [{
       id: slugid.nice(),
-      text: ' '
+      text: ''
     }]);
     focusEditor(editor);
     return;
@@ -120,6 +120,45 @@ export const insertLink = props => {
   }
   focusEditor(editor);
 };
+export const insertSeafileLink = _ref => {
+  let {
+    editor,
+    url,
+    title,
+    selection
+  } = _ref;
+  focusEditor(editor, selection);
+  const linkNode = generateLinkNode(url, title);
+  const isCollapsed = Range.isCollapsed(selection);
+  if (isCollapsed) {
+    // If selection is collapsed, we insert a space and then insert link node that help operation easier
+    editor.insertText('');
+    Editor.insertFragment(editor, [linkNode]);
+    // Using insertText directly causes the added Spaces to be added to the linked text, as in the issue above, so replaced by insertFragment
+    Editor.insertFragment(editor, [{
+      id: slugid.nice(),
+      text: ''
+    }]);
+    focusEditor(editor);
+    return;
+  } else {
+    const selectedText = Editor.string(editor, selection); // Selected text
+    if (selectedText !== title) {
+      // Replace the selected text with the link node if the selected text is different from the entered text
+      editor.deleteFragment();
+      Transforms.insertNodes(editor, linkNode);
+    } else {
+      // Wrap the selected text with the link node if the selected text is the same as the entered text
+      Transforms.wrapNodes(editor, linkNode, {
+        split: true,
+        at: selection
+      });
+      Transforms.collapse(editor, {
+        edge: 'end'
+      });
+    }
+  }
+};
 export const getLinkInfo = editor => {
   const isLinkNode = isLinkType(editor);
   if (!isLinkNode) return null;
@@ -159,10 +198,10 @@ export const updateLink = (editor, newUrl, newText) => {
     text: newText
   });
 };
-export const upsertLinkText = (editor, _ref) => {
+export const upsertLinkText = (editor, _ref2) => {
   let {
     text
-  } = _ref;
+  } = _ref2;
   const newLink = getAboveNode(editor, {
     match: {
       type: ELementTypes.LINK

package/dist/extension/plugins/link/render-elem/index.js

@@ -5,7 +5,7 @@ import { useReadOnly } from 'slate-react';
 import LinkPopover from './link-popover';
 import { getLinkInfo } from '../helper';
 import EventBus from '../../../../utils/event-bus';
-import { INTERNAL_EVENTS } from '../../../../constants/event-types';
+import { EXTERNAL_EVENTS, INTERNAL_EVENTS } from '../../../../constants/event-types';
 import './style.css';
 const renderLink = (_ref, editor) => {
   let {
@@ -30,11 +30,14 @@ const renderLink = (_ref, editor) => {
   const unregisterClickEvent = useCallback(() => {
     document.removeEventListener('click', onClosePopover);
   }, [onClosePopover]);
-  const onOpenPopover = useCallback(e => {
-    if (isReadonly) return;
+  const onLinkClick = useCallback(e => {
     e.stopPropagation();
-    // Only one popover can be open at the same time, close other popover and update new popover controller function.
     const eventBus = EventBus.getInstance();
+    if (isReadonly) {
+      eventBus.dispatch(EXTERNAL_EVENTS.ON_LINK_CLICK, e);
+      return;
+    }
+    // Only one popover can be open at the same time, close other popover and update new popover controller function.
     eventBus.dispatch(INTERNAL_EVENTS.ON_CLOSE_LINK_POPOVER);
     eventBus.subscribe(INTERNAL_EVENTS.ON_CLOSE_LINK_POPOVER, () => setIsShowPopover(false));
     const linkInfo = getLinkInfo(editor);
@@ -54,7 +57,8 @@ const renderLink = (_ref, editor) => {
     registerClickEvent();
   }, [editor, isReadonly, registerClickEvent]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", Object.assign({
-    onClick: onOpenPopover,
+    onClick: onLinkClick,
+    "data-url": element.url,
     className: classNames('sf-virtual-link', {
       selected: isShowPopover
     })

package/dist/extension/toolbar/header-toolbar/index.js

@@ -26,7 +26,8 @@ const Toolbar = _ref => {
     editor,
     readonly = false,
     isRichEditor = false,
-    isSupportFormula = false
+    isSupportFormula = false,
+    isSupportInsertSeafileImage = false
   } = _ref;
   useSelectionUpdate();
   const [isShowArticleInfo, setIsShowArticleInfo] = useState(false);
@@ -65,7 +66,7 @@ const Toolbar = _ref => {
   };
   return /*#__PURE__*/React.createElement("div", {
     className: "sf-slate-editor-toolbar"
-  }, /*#__PURE__*/React.createElement(MenuGroup, null), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(HeaderMenu, commonProps)), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(TextStyleMenu, Object.assign({}, commonProps, {
+  }, isRichEditor && /*#__PURE__*/React.createElement(MenuGroup, null), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(HeaderMenu, commonProps)), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(TextStyleMenu, Object.assign({}, commonProps, {
     type: TEXT_STYLE_MAP.BOLD
   })), /*#__PURE__*/React.createElement(TextStyleMenu, Object.assign({}, commonProps, {
     type: TEXT_STYLE_MAP.ITALIC
@@ -75,7 +76,9 @@ const Toolbar = _ref => {
     type: ORDERED_LIST
   })), /*#__PURE__*/React.createElement(ListMenu, Object.assign({}, commonProps, {
     type: UNORDERED_LIST
-  }))), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(CodeBlockMenu, commonProps), /*#__PURE__*/React.createElement(TableMenu, commonProps), /*#__PURE__*/React.createElement(ImageMenu, commonProps), isSupportFormula && /*#__PURE__*/React.createElement(FormulaMenu, commonProps)), isShowSubTableMenu && /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(AlignmentDropDown, commonProps), /*#__PURE__*/React.createElement(ColumnOperationDropDownList, commonProps), /*#__PURE__*/React.createElement(RowOperationDropDownList, commonProps), /*#__PURE__*/React.createElement(RemoveTableMenu, commonProps)), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(ClearFormatMenu, commonProps)), isRichEditor && /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(CodeBlockMenu, commonProps), /*#__PURE__*/React.createElement(TableMenu, commonProps), /*#__PURE__*/React.createElement(ImageMenu, Object.assign({}, commonProps, {
+    isSupportInsertSeafileImage: isSupportInsertSeafileImage
+  })), isSupportFormula && /*#__PURE__*/React.createElement(FormulaMenu, commonProps)), isShowSubTableMenu && /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(AlignmentDropDown, commonProps), /*#__PURE__*/React.createElement(ColumnOperationDropDownList, commonProps), /*#__PURE__*/React.createElement(RowOperationDropDownList, commonProps), /*#__PURE__*/React.createElement(RemoveTableMenu, commonProps)), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(ClearFormatMenu, commonProps)), isRichEditor && /*#__PURE__*/React.createElement("div", {
     className: "sf-slate-article-info-control",
     onClick: updateArticleInfoState
   }, /*#__PURE__*/React.createElement("span", {

package/dist/hooks/use-insert-image.js

@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+import EventBus from '../utils/event-bus';
+import { EXTERNAL_EVENTS } from '../constants/event-types';
+import { insertSeafileImage } from '../extension/plugins/image/helper';
+import { insertSeafileLink } from '../extension/plugins/link/helper';
+const useSeafileUtils = editor => {
+  useEffect(() => {
+    const insertImage = _ref => {
+      let {
+        title,
+        url,
+        isImage,
+        selection
+      } = _ref;
+      if (isImage) {
+        insertSeafileImage({
+          editor,
+          title,
+          url,
+          selection
+        });
+      } else {
+        insertSeafileLink({
+          editor,
+          title,
+          url,
+          selection
+        });
+      }
+    };
+    const eventBus = EventBus.getInstance();
+    const subscribe = eventBus.subscribe(EXTERNAL_EVENTS.INSERT_IMAGE, insertImage);
+    return subscribe;
+  }, [editor]);
+};
+export default useSeafileUtils;