@seafile/seafile-editor 1.0.4 → 1.0.5-1

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/code-mirror.js

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import React from 'react';
 import className from 'classnames';
 import { basicSetup } from 'codemirror';
@@ -8,7 +9,7 @@ import './code-mirror.css';
 class SeafileCodeMirror extends React.Component {
   constructor() {
     super(...arguments);
-    this.onValueChanged = viewUpdate => {
+    _defineProperty(this, "onValueChanged", viewUpdate => {
       const {
         onChange
       } = this.props;
@@ -17,16 +18,16 @@ class SeafileCodeMirror extends React.Component {
         const value = doc.toString();
         onChange(value);
       }
-    };
-    this.focus = () => {
+    });
+    _defineProperty(this, "focus", () => {
       this.view.focus();
-    };
-    this.scrollIntoView = pos => {
+    });
+    _defineProperty(this, "scrollIntoView", pos => {
       EditorView.scrollIntoView(pos);
-    };
-    this.setCodeMirrorRef = ref => {
+    });
+    _defineProperty(this, "setCodeMirrorRef", ref => {
       this.codeMirrorRef = ref;
-    };
+    });
   }
   componentDidMount() {
     const {
@@ -39,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

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import React from 'react';
 import isHotkey from 'is-hotkey';
 import processor from '../../slate-convert/md-to-html';
@@ -10,12 +11,12 @@ class PlainMarkdownEditor extends React.Component {
     *   the data about scroll, these variable has nothing to width react
     *   they are not state
     * */
-    this.scrollData = {
+    _defineProperty(this, "scrollData", {
       scrollPercentage: 0,
       leftPanel: null,
       rightPanel: null
-    };
-    this.setContent = markdownContent => {
+    });
+    _defineProperty(this, "setContent", markdownContent => {
       this.setState({
         editorValue: markdownContent
       });
@@ -25,22 +26,22 @@ class PlainMarkdownEditor extends React.Component {
           previewValue: html
         });
       });
-    };
-    this.updateCode = newCode => {
+    });
+    _defineProperty(this, "updateCode", newCode => {
       this.setContent(newCode);
-      this.props.onSave && this.props.onSave(newCode);
-    };
-    this.onEnterLeftPanel = () => {
+      this.props.onContentChanged && this.props.onContentChanged(newCode);
+    });
+    _defineProperty(this, "onEnterLeftPanel", () => {
       this.setState({
         isMouseInLeftSide: true
       });
-    };
-    this.onLeaveLeftPanel = () => {
+    });
+    _defineProperty(this, "onLeaveLeftPanel", () => {
       this.setState({
         isMouseInLeftSide: false
       });
-    };
-    this.onLeftScroll = e => {
+    });
+    _defineProperty(this, "onLeftScroll", e => {
       const {
         isMouseInLeftSide
       } = this.state;
@@ -48,18 +49,18 @@ class PlainMarkdownEditor extends React.Component {
       let srcElement = this.scrollData.leftPanel;
       this.scrollData.scrollPercentage = srcElement.scrollTop / srcElement.scrollHeight;
       this.scrollData.rightPanel.scrollTop = this.scrollData.scrollPercentage * this.scrollData.rightPanel.scrollHeight;
-    };
-    this.onEnterRightPanel = () => {
+    });
+    _defineProperty(this, "onEnterRightPanel", () => {
       this.setState({
         isMouseInRightSide: true
       });
-    };
-    this.onLeaveRightPanel = () => {
+    });
+    _defineProperty(this, "onLeaveRightPanel", () => {
       this.setState({
         isMouseInRightSide: false
       });
-    };
-    this.onRightScroll = e => {
+    });
+    _defineProperty(this, "onRightScroll", e => {
       const {
         isMouseInRightSide
       } = this.state;
@@ -67,8 +68,8 @@ class PlainMarkdownEditor extends React.Component {
       let srcElement = this.scrollData.rightPanel;
       this.scrollData.scrollPercentage = srcElement.scrollTop / srcElement.scrollHeight;
       this.scrollData.leftPanel.scrollTop = this.scrollData.scrollPercentage * this.scrollData.leftPanel.scrollHeight;
-    };
-    this.onHotKey = event => {
+    });
+    _defineProperty(this, "onHotKey", event => {
       const {
         onSave
       } = this.props;
@@ -77,7 +78,7 @@ class PlainMarkdownEditor extends React.Component {
         onSave && onSave(this.state.editorValue);
         return true;
       }
-    };
+    });
     this.state = {
       editorValue: props.value,
       previewValue: '',

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-editor/style.css

@@ -0,0 +1,126 @@
+.sf-slate-editor-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+}
+
+.sf-slate-editor-container .sf-slate-editor-toolbar {
+  display: flex;
+  justify-content: center;
+  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-slate-editor-container .sf-slate-editor-content {
+  width: 100%;
+  height: calc(100% - 44px);
+  display: flex;
+  background: #f5f5f5;
+  position: relative;
+  min-height: 0;
+}
+
+.sf-slate-editor-container .sf-slate-scroll-container {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+
+.sf-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-slate-editor-container .sf-slate-editor-content .article {
+  max-width: 950px;
+  min-height: 1200px;
+  padding: 40px 60px;
+  background-color: #fff;
+  border: 1px solid #e5e6e8;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
+}
+
+.sf-slate-editor-container .sf-slate-editor-content .article div:first-child {
+  outline: none;
+}
+
+.sf-slate-editor-container ::-webkit-scrollbar{
+  width: 8px;
+  height: 8px;
+}
+
+.sf-slate-editor-container ::-webkit-scrollbar-button {
+  display: none;
+}
+
+.sf-slate-editor-container ::-webkit-scrollbar-thumb {
+  background-color: rgb(206, 206, 212);
+  border-radius: 10px;
+}
+
+@media (max-width: 991.8px) {
+  .sf-slate-editor-toolbar {
+    overflow-x: auto;
+    padding-right: 40px !important;
+    justify-content: flex-start !important;
+  }
+
+  .sf-slate-editor-toolbar::-webkit-scrollbar{
+    display: none;
+  }
+
+  .sf-slate-editor-toolbar .sf-slate-article-info-control,
+  .sf-slate-editor-toolbar .sf-slate-help-info-control {
+    right: 0;
+    padding: 0 20px;
+    height: 43px;
+    align-items: center;
+    background-color: #fcfcfc;
+    position: fixed;
+  }
+
+  .sf-slate-article-container {
+    width: 100%;
+  }
+
+  .sf-slate-article-container .article {
+    margin: 20px !important;
+    padding: 20px 30px;
+  }
+
+  .sf-markdown-help-wrapper {
+    width: 250px !important;
+    flex: 0 0 250px;
+  }
+}
+
+@media (max-width: 768px) {
+  .sf-slate-editor-container .sf-slate-article-container {
+    flex: 1;
+    position: relative;
+    max-width: 950px;
+    min-width: auto;
+    margin: 0 auto;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .sf-slate-article-container .article {
+    margin: 0 !important;
+    padding: 10px 15px !important;
+    border: 0 !important;
+  }
+}

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,4 +40,23 @@
   background: #fff;
 }
 
+@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;
+  }
+}
+
 

package/dist/extension/commons/element-popover/index.js

@@ -1,11 +1,12 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import React from 'react';
 import ReactDOM from 'react-dom';
 class ElementPopover extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {
+    _defineProperty(this, "state", {
       isMounted: false
-    };
+    });
     this.el = document.createElement('div');
     if (props.className) {
       this.el.className = props.className;

package/dist/extension/commons/menu/menu.css

@@ -16,7 +16,7 @@
   margin-right: 8px;
   border: none !important;
   color: #444;
-  background-color: #fff;
+  background-color: #fcfcfc;
 }
 
 .menu-group .menu-group-item:disabled {

package/dist/extension/constants/index.js

@@ -1,15 +1,16 @@
 import { HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH } from './element-types';
-export * as ELementTypes from './element-types';
+import * as _ELementTypes from './element-types';
+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