@seafile/seafile-editor 0.4.7 → 1.0.0

package/src/containers/outline/outline-item.js

@@ -0,0 +1,28 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const OutlineItem = ({ node, activeId }) => {
+  const onItemClick = useCallback(() => {
+    const { id } = node;
+    document.getElementById(id).scrollIntoView();
+  }, [node]);
+
+  const className = classNames({
+    'outline-h2': node.type === 'header2',
+    'outline-h3': node.type === 'header3',
+    'active': node.id === activeId,
+  });
+
+  return (
+    <div className={className} onClick={onItemClick}>
+      {node.children.map(child => child.text).join('')}
+    </div>
+  );
+};
+
+OutlineItem.propTypes = {
+  node: PropTypes.object,
+};
+
+export default OutlineItem;

package/src/containers/outline/style.css

@@ -0,0 +1,45 @@
+.sf-editor-outline {
+  border-left: 1px solid #ddd;
+  padding: .5rem 1rem .5rem 0;
+}
+
+.sf-editor-outline .outline-h2, 
+.sf-editor-outline .outline-h3 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sf-editor-outline .outline-h2 {
+  margin-left: 20px;
+  line-height: 2.5;
+  color:#364149;
+  white-space: nowrap;
+  cursor:pointer;
+}
+
+.sf-editor-outline .outline-h2:hover {
+  color: #eb8205;
+}
+
+.sf-editor-outline .outline-h3 {
+  margin-left: 40px;
+  line-height: 2.5;
+  color:#364149;
+  white-space: nowrap;
+  cursor:pointer;
+}
+
+.sf-editor-outline .outline-h3:hover {
+  color: #eb8205;
+}
+
+.sf-editor-outline .empty-container {
+  margin-top: 10px;
+  text-align: center;
+}
+
+.sf-editor-outline .outline-h2.active,
+.sf-editor-outline .outline-h3.active {
+  color: #eb8205;
+}

package/src/editors/plain-markdown-editor/code-mirror.css

@@ -0,0 +1,8 @@
+.sf-code-mirror .cm-editor {
+  height: 100vh;
+  font-size: 13px;
+}
+
+.sf-code-mirror .cm-editor .cm-scroller {
+  overflow-x: initial;
+}

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import className from 'classnames';
+import { basicSetup, EditorView } from 'codemirror';
+import { markdown } from '@codemirror/lang-markdown';
+import { languages } from '@codemirror/language-data';
+
+import './code-mirror.css';
+
+const propTypes = {
+  autoFocus: PropTypes.bool,
+  initialValue: PropTypes.string,
+};
+
+class SeafileCodeMirror extends React.Component {
+
+  componentDidMount() {
+    const { initialValue, autoFocus } = this.props;
+    this.view = new EditorView({
+      doc: initialValue,
+      extensions: [
+        basicSetup,
+        markdown({ codeLanguages: languages }),
+        EditorView.updateListener.of((viewUpdate) => {
+          this.onValueChanged(viewUpdate);
+        })
+      ],
+      parent: this.codeMirrorRef,
+    });
+    if (autoFocus) this.focus();
+  }
+
+  componentWillUnmount() {
+    if (this.view) {
+      this.view.destroy();
+    }
+  }
+
+  onValueChanged = (viewUpdate) => {
+    const { onChange } = this.props;
+    if (onChange && viewUpdate.docChanged) {
+      const doc = viewUpdate.state.doc;
+      const value = doc.toString();
+      onChange(value);
+    }
+  };
+
+  focus = () => {
+    this.view.focus();
+  };
+
+  scrollIntoView = (pos) => {
+    EditorView.scrollIntoView(pos);
+  };
+
+
+  setCodeMirrorRef = (ref) => {
+    this.codeMirrorRef = ref;
+  };
+
+  render() {
+    return (
+      <div className={className('sf-code-mirror', this.props.className)}>
+        <div ref={this.setCodeMirrorRef} />
+      </div>
+    );
+  }
+
+}
+
+SeafileCodeMirror.propTypes = propTypes;
+
+export default SeafileCodeMirror;

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

@@ -0,0 +1,136 @@
+import React from 'react';
+import isHotkey from 'is-hotkey';
+import PropTypes from 'prop-types';
+import processor from '../../slate-convert/md-to-html';
+import SeafileCodeMirror from './code-mirror';
+
+import './style.css';
+
+const propTypes = {
+  autoFocus: PropTypes.bool,
+  value: PropTypes.string,
+  onSave: PropTypes.func,
+};
+
+class PlainMarkdownEditor extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      editorValue: props.value,
+      previewValue: '',
+      isMouseInLeftSide: false,
+      isMouseInRightSide: false
+    };
+  }
+
+  /*
+  *   the data about scroll, these variable has nothing to width react
+  *   they are not state
+  * */
+  scrollData = {
+    scrollPercentage: 0,
+    leftPanel: null,
+    rightPanel: null,
+  };
+
+  componentDidMount() {
+    // get relevant dom when component mounted instead of get them when scrolling to improve performance
+    this.scrollData.leftPanel = document.querySelector('.sf-plain-editor-left-panel');
+    this.scrollData.rightPanel = document.querySelector('.sf-plain-editor-right-panel');
+    this.setContent(this.props.value);
+  }
+
+  componentDidUpdate() {
+    // render math formula
+    // window.MathJax.typesetPromise(document.querySelectorAll('.math-display'));
+  }
+
+  setContent = (markdownContent) => {
+    this.setState({ editorValue: markdownContent });
+    processor.process(markdownContent, (error, vfile) => {
+      var html = String(vfile);
+      this.setState({ previewValue: html });
+    });
+  };
+
+  updateCode = (newCode) => {
+    this.setContent(newCode);
+    this.props.onSave && this.props.onSave(newCode);
+  };
+
+  onEnterLeftPanel = () => {
+    this.setState({ isMouseInLeftSide: true });
+  };
+
+  onLeaveLeftPanel = () => {
+    this.setState({ isMouseInLeftSide: false });
+  };
+
+  onLeftScroll = (e) => {
+    const { isMouseInLeftSide } = this.state;
+    if (!isMouseInLeftSide) return;
+    let srcElement = this.scrollData.leftPanel;
+    this.scrollData.scrollPercentage = srcElement.scrollTop / srcElement.scrollHeight;
+    this.scrollData.rightPanel.scrollTop = this.scrollData.scrollPercentage * this.scrollData.rightPanel.scrollHeight;
+  };
+
+  onEnterRightPanel = () => {
+    this.setState({ isMouseInRightSide: true });
+  };
+
+  onLeaveRightPanel = () => {
+    this.setState({ isMouseInRightSide: false });
+  };
+
+  onRightScroll = (e) => {
+    const { isMouseInRightSide } = this.state;
+    if (!isMouseInRightSide) return;
+    let srcElement = this.scrollData.rightPanel;
+    this.scrollData.scrollPercentage = srcElement.scrollTop / srcElement.scrollHeight;
+    this.scrollData.leftPanel.scrollTop = this.scrollData.scrollPercentage * this.scrollData.leftPanel.scrollHeight;
+  };
+
+  onHotKey = (event) => {
+    const { onSave } = this.props;
+    if (isHotkey('mod+s', event)) {
+      event.preventDefault();
+      onSave && onSave(this.state.editorValue);
+      return true;
+    }
+  };
+
+  render() {
+    const { editorValue, previewValue } = this.state;
+
+    return (
+      <div className='sf-plain-editor'>
+        <div className="sf-plain-editor-main d-flex" onKeyDown={this.onHotKey}>
+          <div
+            className="sf-plain-editor-left-panel"
+            onMouseLeave={this.onLeaveLeftPanel}
+            onMouseEnter={this.onEnterLeftPanel}
+            onScroll={this.onLeftScroll}
+          >
+            <SeafileCodeMirror autoFocus={true} initialValue={editorValue} onChange={this.updateCode} />
+          </div>
+          <div
+            className="sf-plain-editor-right-panel"
+            onMouseEnter={this.onEnterRightPanel}
+            onMouseLeave={this.onLeaveRightPanel}
+            onScroll={this.onRightScroll}
+          >
+            <div className="preview">
+              <div className="rendered-markdown article" dangerouslySetInnerHTML={{ __html: previewValue }}></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}
+
+PlainMarkdownEditor.propTypes = propTypes;
+
+export default PlainMarkdownEditor;

package/{dist/assets/editor/plain-editor.css → src/editors/plain-markdown-editor/style.css}

@@ -1,4 +1,4 @@
-.plain-editor {
+.sf-plain-editor {
   flex: 1;
   display: flex;
   min-height: 0;
@@ -7,12 +7,12 @@
 }
 
 /* fix plain editor main height */
-.plain-editor-main {
+.sf-plain-editor-main {
   position: absolute;
   inset: 0;
 }
 
-.plain-editor-left-panel {
+.sf-plain-editor-left-panel {
   height: 100%;
   width: 50%;
   background-color: #fff;
@@ -21,10 +21,18 @@
   overflow-x: hidden;
 }
 
-.plain-editor-right-panel {
+.sf-plain-editor-right-panel {
   height: 100%;
   width: 50%;
   background-color: rgb(250,250,249);
   overflow-y: scroll;
   overflow-x: hidden;
 }
+
+.rendered-markdown.article {
+  padding:0 20px 20px;
+}
+
+.rendered-markdown tbody tr:first-child {
+  font-weight: 400;
+}

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

@@ -0,0 +1,71 @@
+import React, { useCallback, useState, useMemo, useEffect } from 'react';
+import { Editable, Slate } from 'slate-react';
+import { Editor } from 'slate';
+import { baseEditor, Toolbar, renderElement, renderLeaf } from '../../extension';
+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';
+
+export default function SimpleSlateEditor({ value, editorApi, onSave, isSupportFormula }) {
+  const [slateValue, setSlateValue] = useState(value);
+
+  const editor = useMemo(() => withPropsEditor(baseEditor, { editorApi, onSave }), [editorApi, onSave]);
+  const eventProxy = useMemo(() => {
+    return new EventProxy(editor);
+  }, [editor]);
+
+  const onChange = useCallback((value) => {
+    setSlateValue(value);
+    onSave && onSave(value);
+    const eventBus = EventBus.getInstance();
+    eventBus.dispatch('change');
+  }, [onSave]);
+
+  // useMount: focus editor
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      const [firstNode] = editor.children;
+      if (firstNode) {
+        const [firstNodeFirstChild] = firstNode.children;
+
+        if (firstNodeFirstChild) {
+          const endOfFirstNode = Editor.end(editor, [0, 0]);
+          const range = {
+            anchor: endOfFirstNode,
+            focus: endOfFirstNode,
+          };
+          focusEditor(editor, range);
+        }
+      }
+    }, 300);
+    return () => {
+      clearTimeout(timer);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className='sf-slate-editor-container'>
+      <Toolbar editor={editor} isSupportFormula={isSupportFormula} />
+      <div className='sf-slate-editor-content'>
+        <Slate editor={editor} initialValue={slateValue} onChange={onChange}>
+          <div className='sf-slate-scroll-container'>
+            <div className='sf-slate-article-container'>
+              <div className='article'>
+                <Editable
+                  renderElement={renderElement}
+                  renderLeaf={renderLeaf}
+                  onKeyDown={eventProxy.onKeyDown}
+                  onCopy={eventProxy.onCopy}
+                />
+              </div>
+            </div>
+          </div>
+        </Slate>
+      </div>
+    </div >
+  );
+}

package/src/editors/simple-slate-editor /with-props-editor.js

@@ -0,0 +1,15 @@
+
+const withPropsEditor = (editor, props = {}) => {
+  const newEditor = editor;
+  if (props.editorApi) {
+    newEditor.api = props.editorApi;
+  }
+
+  if (props.onSave) {
+    newEditor.onSave = props.onSave;
+  }
+
+  return newEditor;
+};
+
+export default withPropsEditor;

package/src/editors/slate-editor/editor-help/index.js

@@ -0,0 +1,46 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
+import EventBus from '../../../utils/event-bus';
+import { EXTERNAL_EVENTS, INTERNAL_EVENTS } from '../../../constants/event-types';
+import HotKeysHelper from '../../../containers/hotkeys-helper';
+import ArticleInfo from '../../../containers/article-info';
+
+import './style.css';
+
+export default function EditorHelp({ children }) {
+
+  const [isShowHelpInfo, setIsShowHelpInfo] = useState(false);
+  const [isShowArticleInfo, setIsShowArticleInfo] = useState(false);
+
+  const updateArticleInfoState = useCallback((state) => {
+    setIsShowArticleInfo(state);
+    setIsShowHelpInfo(false);
+  }, []);
+
+  const updateHelpInfoState = useCallback((state) => {
+    setIsShowHelpInfo(state);
+    setIsShowArticleInfo(false);
+  }, []);
+
+  useEffect(() => {
+    const eventBus = EventBus.getInstance();
+    const unsubscribeArticleInfo = eventBus.subscribe(INTERNAL_EVENTS.ON_ARTICLE_INFO_TOGGLE, updateArticleInfoState);
+    const unsubscribeHelpInfo = eventBus.subscribe(EXTERNAL_EVENTS.ON_HELP_INFO_TOGGLE, updateHelpInfoState);
+    return () => {
+      unsubscribeHelpInfo();
+      unsubscribeArticleInfo();
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const containerClass = classNames('sf-markdown-help-wrapper', {
+    'active': isShowArticleInfo || isShowHelpInfo
+  });
+
+  return (
+    <div className={containerClass}>
+      {isShowArticleInfo && <ArticleInfo children={children} />}
+      {isShowHelpInfo && <HotKeysHelper />}
+    </div>
+  );
+}

package/src/editors/slate-editor/editor-help/style.css

@@ -0,0 +1,15 @@
+.sf-markdown-help-wrapper {
+  display: none;
+  background-color: #fff;
+  border-left: 1px solid #eee;
+  flex: 0 0 350px;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 250px;
+}
+
+.sf-markdown-help-wrapper.active {
+  display: flex;
+  flex-direction: column;
+}

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

@@ -0,0 +1,77 @@
+import React, { useCallback, useState, useMemo, useEffect, useRef } from 'react';
+import { Editable, Slate } from 'slate-react';
+import { Editor } from 'slate';
+import { baseEditor, Toolbar, renderElement, renderLeaf } from '../../extension';
+import EventBus from '../../utils/event-bus';
+import EventProxy from '../../utils/event-handler';
+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';
+
+export default function SlateEditor({ value, editorApi, onSave, isSupportFormula, children }) {
+  const [slateValue, setSlateValue] = useState(value);
+
+  const scrollRef = useRef(null);
+  const editor = useMemo(() => withPropsEditor(baseEditor, { editorApi, onSave }), [editorApi, onSave]);
+  const eventProxy = useMemo(() => {
+    return new EventProxy(editor);
+  }, [editor]);
+
+  const onChange = useCallback((value) => {
+    setSlateValue(value);
+    onSave && onSave(value);
+    const eventBus = EventBus.getInstance();
+    eventBus.dispatch('change');
+  }, [onSave]);
+
+  // useMount: focus editor
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      const [firstNode] = editor.children;
+      if (firstNode) {
+        const [firstNodeFirstChild] = firstNode.children;
+
+        if (firstNodeFirstChild) {
+          const endOfFirstNode = Editor.end(editor, [0, 0]);
+          const range = {
+            anchor: endOfFirstNode,
+            focus: endOfFirstNode,
+          };
+          focusEditor(editor, range);
+        }
+      }
+    }, 300);
+    return () => {
+      clearTimeout(timer);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className='sf-slate-editor-container'>
+      <Toolbar editor={editor} isRichEditor={true} isSupportFormula={isSupportFormula} />
+      <div className='sf-slate-editor-content'>
+        <ScrollContext.Provider value={{ scrollRef }}>
+          <Slate editor={editor} initialValue={slateValue} onChange={onChange}>
+            <div ref={scrollRef} className='sf-slate-scroll-container'>
+              <div className='sf-slate-article-container'>
+                <div className='article'>
+                  <Editable
+                    renderElement={renderElement}
+                    renderLeaf={renderLeaf}
+                    onKeyDown={eventProxy.onKeyDown}
+                    onCopy={eventProxy.onCopy}
+                  />
+                </div>
+              </div>
+            </div>
+            <EditorHelp children={children}></EditorHelp>
+          </Slate>
+        </ScrollContext.Provider>
+      </div>
+    </div >
+  );
+}

package/src/editors/slate-editor/with-props-editor.js

@@ -0,0 +1,15 @@
+
+const withPropsEditor = (editor, props = {}) => {
+  const newEditor = editor;
+  if (props.editorApi) {
+    newEditor.api = props.editorApi;
+  }
+
+  if (props.onSave) {
+    newEditor.onSave = props.onSave;
+  }
+
+  return newEditor;
+};
+
+export default withPropsEditor;

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

@@ -0,0 +1,35 @@
+import React, { useRef } from 'react';
+import { baseEditor, renderElement, renderLeaf } from '../../extension';
+import { Editable, Slate } from 'slate-react';
+import Outline from '../../containers/outline';
+import { ScrollContext } from '../../hooks/use-scroll-context';
+
+import './style.css';
+
+export default function SlateViewer({ value, isShowOutline  }) {
+
+  const scrollRef = useRef(null);
+
+  return (
+    <Slate editor={baseEditor} initialValue={value}>
+      <ScrollContext.Provider value={{ scrollRef }}>
+        <div ref={scrollRef} className={`sf-slate-viewer-scroll-container ${isShowOutline ? 'outline' : ''}`}>
+          <div className='sf-slate-viewer-article-container'>
+            <div className='article'>
+              <Editable
+                readOnly
+                renderElement={renderElement}
+                renderLeaf={renderLeaf}
+              />
+            </div>
+          </div>
+          {isShowOutline && (
+            <div className='sf-slate-viewer-outline'>
+              <Outline editor={baseEditor} />
+            </div>
+          )}
+        </div>
+      </ScrollContext.Provider>
+    </Slate>
+  );
+}

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

@@ -0,0 +1,40 @@
+.sf-slate-viewer-scroll-container {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+  min-width: 0;
+  overflow: auto;
+  background: #f4f4f4;
+  border: 1px solid #ededed;
+  padding: 30px 0 15px;
+}
+
+.sf-slate-viewer-scroll-container .sf-slate-viewer-article-container {
+  flex: 1;
+  margin: 0 auto 15px;
+}
+
+.sf-slate-viewer-scroll-container.outline .sf-slate-viewer-article-container {
+  margin: 0 340px 15px 40px;
+}
+
+.sf-slate-viewer-scroll-container .sf-slate-viewer-outline {
+  height: 80%;
+  overflow: auto;
+  padding-right: 1rem;
+  position: fixed;
+  right: 0;
+  top: 97px;
+  width: 300px;
+}
+
+.sf-slate-viewer-scroll-container .article {
+  margin: 0 auto;
+  padding: 40px 60px;
+  max-width: 950px;
+  min-height: calc(100% - 15px);
+  border: 1px solid #e6e6dd;
+  background: #fff;
+}
+
+