@seafile/seafile-editor 1.0.4-9 → 1.0.5-1

package/dist/constants/event-types.js

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

package/dist/editors/plain-markdown-editor/code-mirror.js

@@ -40,7 +40,7 @@ class SeafileCodeMirror extends React.Component {
         codeLanguages: languages
       }), EditorView.updateListener.of(viewUpdate => {
         this.onValueChanged(viewUpdate);
-      })],
+      }), EditorView.lineWrapping],
       parent: this.codeMirrorRef
     });
     if (autoFocus) this.focus();

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

@@ -12,6 +12,7 @@ export default function SimpleSlateEditor(_ref) {
     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,6 +55,13 @@ 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-simple-slate-editor-container"
   }, /*#__PURE__*/React.createElement(Toolbar, {

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

@@ -9,12 +9,15 @@ import EditorHelp from './editor-help';
 import { focusEditor } from '../../extension/core';
 import { ScrollContext } from '../../hooks/use-scroll-context';
 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,16 +29,17 @@ export default function SlateEditor(_ref) {
   const eventProxy = useMemo(() => {
     return new EventProxy(editor);
   }, [editor]);
+  useSeafileUtils(editor);
   const onChange = useCallback(value => {
     setSlateValue(value);
     const operations = editor.operations;
     const modifyOps = operations.filter(o => o.type !== 'set_selection');
     if (modifyOps.length > 0) {
-      onSave && onSave(value);
+      onContentChanged && onContentChanged(value);
     }
     const eventBus = EventBus.getInstance();
     eventBus.dispatch('change');
-  }, [editor.operations, onSave]);
+  }, [editor.operations, onContentChanged]);
 
   // useMount: focus editor
   useEffect(() => {
@@ -58,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';
@@ -12,6 +12,13 @@ export default function SlateViewer(_ref) {
   } = _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

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

@@ -19,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;
@@ -27,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,26 +41,22 @@
 }
 
 @media (max-width: 991.98px) {
-  .sf-slate-viewer-outline {
-    display: none !important;
-  }
-}
-
-@media (max-width: 768px) {
   .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

@@ -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/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);
@@ -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;

package/dist/pages/markdown-editor.js

@@ -9,7 +9,8 @@ const SimpleEditor = forwardRef((_ref, ref) => {
     value,
     editorApi,
     mathJaxSource,
-    onValueChanged = () => {},
+    onSave: propsOnSave,
+    onContentChanged: propsOnContentChanged,
     children
   } = _ref;
   const [richValue, setRichValue] = useState([]);
@@ -33,15 +34,16 @@ const SimpleEditor = forwardRef((_ref, ref) => {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isFetching]);
-  const onSave = useCallback(content => {
+  const onContentChanged = useCallback(content => {
     setRichValue(content);
-    onValueChanged && onValueChanged();
-  }, [onValueChanged]);
+    propsOnContentChanged && propsOnContentChanged();
+  }, [propsOnContentChanged]);
   const props = {
     isSupportFormula: !!mathJaxSource,
     value: richValue,
     editorApi: editorApi,
-    onSave: onSave,
+    onSave: propsOnSave,
+    onContentChanged: onContentChanged,
     children: children
   };
   if (isFetching || isLoading || isLoadingMathJax) {

package/dist/pages/rich-markdown-editor.js

@@ -4,6 +4,7 @@ import PlainMarkdownEditor from '../editors/plain-markdown-editor';
 import Loading from '../containers/loading';
 import { mdStringToSlate, slateToMdString } from '../slate-convert';
 import useMathJax from '../hooks/use-mathjax';
+import { generateHeaderElement } from '../extension/core';
 const EDITOR_MODE = {
   RICH: 'rich',
   PLAIN: 'plain'
@@ -12,10 +13,13 @@ const RichMarkdownEditor = forwardRef((_ref, ref) => {
   let {
     mode = EDITOR_MODE.RICH,
     isFetching,
+    initValue,
     value,
     editorApi,
-    onValueChanged,
+    onSave: propsOnSave,
+    onContentChanged: propsOnContentChanged,
     mathJaxSource,
+    isSupportInsertSeafileImage,
     children
   } = _ref;
   const currentMode = useRef(mode);
@@ -39,7 +43,10 @@ const RichMarkdownEditor = forwardRef((_ref, ref) => {
   }, [mdStringValue, mode, richValue]);
   useEffect(() => {
     if (!isFetching) {
-      const richValue = mdStringToSlate(value);
+      let richValue = mdStringToSlate(value);
+      if (!value && initValue) {
+        richValue = [generateHeaderElement(initValue)];
+      }
       setRichValue(richValue);
       setMdStringValue(value);
       setIsLoading(false);
@@ -66,17 +73,19 @@ const RichMarkdownEditor = forwardRef((_ref, ref) => {
       });
     }
   }, [mdStringValue, mode, richValue]);
-  const onSave = useCallback(content => {
+  const onContentChanged = useCallback(content => {
     if (mode === EDITOR_MODE.RICH) {
       setRichValue(content);
     } else {
       setMdStringValue(content);
     }
-    onValueChanged && onValueChanged();
-  }, [mode, onValueChanged]);
+    propsOnContentChanged && propsOnContentChanged();
+  }, [mode, propsOnContentChanged]);
   const props = {
-    onSave: onSave,
+    onSave: propsOnSave,
+    onContentChanged: onContentChanged,
     isSupportFormula: !!mathJaxSource,
+    isSupportInsertSeafileImage,
     ...(children && {
       children
     }),

package/dist/pages/simple-editor.js

@@ -9,7 +9,8 @@ const SimpleEditor = forwardRef((_ref, ref) => {
     value,
     editorApi,
     mathJaxSource,
-    onValueChanged = () => {}
+    onSave: propsOnSave,
+    onContentChanged: propsOnContentChanged
   } = _ref;
   const [richValue, setRichValue] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -32,15 +33,16 @@ const SimpleEditor = forwardRef((_ref, ref) => {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isFetching]);
-  const onSave = useCallback(content => {
+  const onContentChanged = useCallback(content => {
     setRichValue(content);
-    onValueChanged && onValueChanged();
-  }, [onValueChanged]);
+    propsOnContentChanged && propsOnContentChanged();
+  }, [propsOnContentChanged]);
   const props = {
     isSupportFormula: !!mathJaxSource,
     value: richValue,
     editorApi: editorApi,
-    onSave: onSave
+    onSave: propsOnSave,
+    onContentChanged: onContentChanged
   };
   if (isFetching || isLoading || isLoadingMathJax) {
     return /*#__PURE__*/React.createElement(Loading, null);