@seafile/seafile-editor 0.4.8 → 1.0.0

package/src/extension/render/render-element.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import { useSlateStatic } from 'slate-react';
+import * as ElementType from '../constants/element-types';
+import { BlockquotePlugin, HeaderPlugin, ParagraphPlugin, ImagePlugin, LinkPlugin, CodeBlockPlugin, CheckListPlugin, ListPlugin, TablePlugin, FormulaPlugin } from '../plugins';
+
+const SlateElement = (props) => {
+  const { element } = props;
+
+  const editor = useSlateStatic();
+
+  switch (element.type) {
+    case ElementType.BLOCKQUOTE: {
+      const [renderBlockquote] = BlockquotePlugin.renderElements;
+      return renderBlockquote(props);
+    }
+    case ElementType.HEADER1:
+    case ElementType.HEADER2:
+    case ElementType.HEADER3:
+    case ElementType.HEADER4:
+    case ElementType.HEADER5:
+    case ElementType.HEADER6: {
+      const [renderHeader] = HeaderPlugin.renderElements;
+      return renderHeader(props, editor);
+    }
+    case ElementType.IMAGE: {
+      const [renderImage] = ImagePlugin.renderElements;
+      return renderImage(props, editor);
+    }
+    case ElementType.LINK: {
+      const [renderLink] = LinkPlugin.renderElements;
+      return renderLink(props, editor);
+    }
+    case ElementType.CODE_BLOCK: {
+      const [renderCodeBlock] = CodeBlockPlugin.renderElements;
+      return renderCodeBlock(props);
+    }
+    case ElementType.CODE_LINE: {
+      const [, renderCodeLine] = CodeBlockPlugin.renderElements;
+      return renderCodeLine(props, editor);
+    }
+    case ElementType.CHECK_LIST_ITEM: {
+      const [renderCheckListItem] = CheckListPlugin.renderElements;
+      return renderCheckListItem(props, editor);
+    }
+    case ElementType.ORDERED_LIST:
+    case ElementType.UNORDERED_LIST: {
+      const [renderList] = ListPlugin.renderElements;
+      return renderList(props, editor);
+    }
+    case ElementType.LIST_ITEM: {
+      const [, renderListItem] = ListPlugin.renderElements;
+      return renderListItem(props, editor);
+    }
+    case ElementType.TABLE_CELL: {
+      const [renderTableCell] = TablePlugin.renderElements;
+      return renderTableCell(props);
+    }
+    case ElementType.TABLE_ROW: {
+      const [, renderTableRow] = TablePlugin.renderElements;
+      return renderTableRow(props);
+    }
+    case ElementType.TABLE: {
+      const [, , renderTable] = TablePlugin.renderElements;
+      return renderTable(props, editor);
+    }
+    case ElementType.FORMULA: {
+      const [renderFormula] = FormulaPlugin.renderElements;
+      return renderFormula(props, editor);
+    }
+    default: {
+      const [renderParagraph] = ParagraphPlugin.renderElements;
+      return renderParagraph(props);
+    }
+  }
+
+};
+
+const renderElement = (props) => {
+  return <SlateElement {...props} />;
+};
+
+export default renderElement;

package/src/extension/render/render-leaf.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useSlateStatic } from 'slate-react';
+import { TextPlugin } from '../plugins';
+
+const CustomLeaf = (props) => {
+  const editor = useSlateStatic();
+  const [renderText] = TextPlugin.renderElements;
+  return renderText(props, editor);
+};
+
+const renderLeaf = (props) => {
+  return <CustomLeaf {...props} />;
+};
+
+export default renderLeaf;
+

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

@@ -0,0 +1,129 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { EXTERNAL_EVENTS, INTERNAL_EVENTS } from '../../../constants/event-types';
+import useSelectionUpdate from '../../../hooks/use-selection-update';
+import EventBus from '../../../utils/event-bus';
+import { MenuGroup } from '../../commons';
+import QuoteMenu from '../../plugins/blockquote/menu';
+import HeaderMenu from '../../plugins/header/menu';
+import TextStyleMenu from '../../plugins/text-style/menu';
+import LinkMenu from '../../plugins/link/menu';
+import { TEXT_STYLE_MAP } from '../../constants';
+import ImageMenu from '../../plugins/image/menu';
+import CodeBlockMenu from '../../plugins/code-block/menu';
+import CheckListMenu from '../../plugins/check-list/menu';
+import ListMenu from '../../plugins/list/menu';
+import { ORDERED_LIST, UNORDERED_LIST } from '../../constants/element-types';
+import TableMenu from '../../plugins/table/menu';
+import { AlignmentDropDown, ColumnOperationDropDownList, RowOperationDropDownList, RemoveTableMenu } from '../../plugins/table/menu/table-operator';
+import { isInTable } from '../../plugins/table/helper';
+import FormulaMenu from '../../plugins/formula/menu';
+import ClearFormatMenu from '../../plugins/clear-format/menu';
+import KeyboardShortcuts from '../user-help/shortcut-dialog';
+
+import './style.css';
+
+const Toolbar = ({ editor, readonly = false, isRichEditor = false, isSupportFormula = false }) => {
+  useSelectionUpdate();
+
+  const [isShowArticleInfo, setIsShowArticleInfo] = useState(false);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const isShowSubTableMenu = useMemo(() => isInTable(editor), [editor.selection]);
+  const updateArticleInfoState = useCallback(() => {
+    const newState = !isShowArticleInfo;
+    setIsShowArticleInfo(newState);
+    const eventBus = EventBus.getInstance();
+    eventBus.dispatch(INTERNAL_EVENTS.ON_ARTICLE_INFO_TOGGLE, newState);
+  }, [isShowArticleInfo]);
+
+  const onHelpInfoToggle = useCallback((state) => {
+    if (state) setIsShowArticleInfo(false);
+  }, []);
+
+  useEffect(() => {
+    const eventBus = EventBus.getInstance();
+    // Trigger external events and close article info
+    const unsubscribeHelpInfo = eventBus.subscribe(EXTERNAL_EVENTS.ON_HELP_INFO_TOGGLE, onHelpInfoToggle);
+    return () => {
+      unsubscribeHelpInfo();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const [isShowHelpModal, setIsShowHelpModal] = useState(false);
+  const onHelpIconToggle = useCallback(() => {
+    setIsShowHelpModal(!isShowHelpModal);
+  }, [isShowHelpModal]);
+
+  const sideIconClass = classNames('iconfont', {
+    'icon-angle-double-left': !isShowArticleInfo,
+    'icon-angle-double-right': isShowArticleInfo,
+  });
+
+  const commonProps = { editor, readonly, isRichEditor };
+
+  return (
+    <div className='sf-slate-editor-toolbar'>
+      <MenuGroup></MenuGroup>
+      <MenuGroup >
+        <HeaderMenu {...commonProps} />
+      </MenuGroup>
+      <MenuGroup >
+        <TextStyleMenu {...commonProps} type={TEXT_STYLE_MAP.BOLD} />
+        <TextStyleMenu {...commonProps} type={TEXT_STYLE_MAP.ITALIC} />
+        <TextStyleMenu {...commonProps} type={TEXT_STYLE_MAP.CODE} />
+        <LinkMenu {...commonProps} />
+      </MenuGroup>
+      <MenuGroup>
+        <QuoteMenu {...commonProps} />
+        <CheckListMenu {...commonProps} />
+        <ListMenu {...commonProps} type={ORDERED_LIST} />
+        <ListMenu {...commonProps} type={UNORDERED_LIST} />
+      </MenuGroup>
+      <MenuGroup>
+        <CodeBlockMenu {...commonProps} />
+        <TableMenu {...commonProps} />
+        <ImageMenu {...commonProps} />
+        {isSupportFormula && <FormulaMenu {...commonProps} />}
+      </MenuGroup>
+      {isShowSubTableMenu && (
+        <MenuGroup>
+          <AlignmentDropDown {...commonProps} />
+          <ColumnOperationDropDownList {...commonProps} />
+          <RowOperationDropDownList {...commonProps} />
+          <RemoveTableMenu {...commonProps} />
+        </MenuGroup>
+      )}
+      <MenuGroup>
+        <ClearFormatMenu {...commonProps} />
+      </MenuGroup>
+      {isRichEditor && (
+        <div className='sf-slate-article-info-control' onClick={updateArticleInfoState}>
+          <span className={sideIconClass}></span>
+        </div>
+      )}
+      {!isRichEditor && (
+        <div className='sf-slate-help-info-control' onClick={onHelpIconToggle}>
+          <span className="iconfont icon-use-help"></span>
+        </div>
+      )}
+      {isShowHelpModal && (
+        <KeyboardShortcuts
+          toggleShortcutDialog={onHelpIconToggle}
+        />
+      )}
+    </div>
+  );
+};
+
+Toolbar.defaultProps = {
+  readonly: false,
+};
+
+Toolbar.propTypes = {
+  readonly: PropTypes.bool,
+  editor: PropTypes.object,
+};
+
+export default Toolbar;

package/src/extension/toolbar/header-toolbar/style.css

@@ -0,0 +1,41 @@
+.sf-slate-editor-toolbar {
+  position: relative;
+  background-color: #fcfcfc;
+}
+
+.sf-slate-editor-toolbar .sf-slate-article-info-control {
+  position: absolute;
+  right: 20px;
+  height: 30px;
+  width: 30px;
+  line-height: 30px;
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
+  color: #555;
+}
+
+.sf-slate-editor-toolbar .sf-slate-article-info-control:hover {
+  background-color: #e5e5e5;
+}
+
+.sf-slate-editor-toolbar .sf-slate-help-info-control {
+  position: absolute;
+  right: 20px;
+  height: 30px;
+  width: 30px;
+  line-height: 30px;
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
+  color: #555;
+}
+
+.sf-slate-editor-toolbar .sf-slate-help-info-control > span:hover {
+  cursor: pointer;
+  color: #333;
+}
+
+.sf-slate-editor-toolbar .sf-slate-article-info-control .iconfont {
+  font-size: 14px;
+}

package/src/extension/toolbar/index.js

@@ -0,0 +1,5 @@
+import Toolbar from './header-toolbar';
+
+export {
+  Toolbar
+};

package/src/extension/toolbar/user-help/shortcut-dialog.js

@@ -0,0 +1,144 @@
+import React, { Fragment } from 'react';
+import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { withTranslation } from 'react-i18next';
+
+import './style.css';
+
+const isMac = window.navigator.platform.indexOf('Win') < 0 ? true : false;
+const controlKey = isMac ? '⌘' : 'CTRL';
+
+class KeyboardShortcuts extends React.PureComponent {
+
+  renderShortcut = (keys) => {
+    return (
+      <Fragment>
+        <span className="keyboard-shortcut">
+          {keys.map((key, index) => {
+            return <kbd key={index}>{key}</kbd>;
+          })}
+        </span><br/>
+      </Fragment>
+    );
+  };
+
+  renderContainer = (keys, description) => {
+    return (
+      <div className="keyboard-shortcut-container">
+        <div className="col-4">{this.renderShortcut(keys)}</div>
+        <div className="col-8">{description}</div>
+      </div>
+    );
+  };
+
+  render() {
+    let { t, toggleShortcutDialog } = this.props;
+    const userHelp = t('userHelp', { returnObjects: true });
+    const userHelpData = userHelp.userHelpData;
+    return (
+      <Modal isOpen={true} toggle={toggleShortcutDialog}  className="keyboard-shortcut-dialog" zIndex={1071}>
+        <ModalHeader toggle={toggleShortcutDialog}>
+          <span className="mr-2">{t(userHelp.title)}</span>
+        </ModalHeader>
+        <ModalBody>
+          <div>
+            {/* Title */}
+            <div className="pb-2">
+              <div className="keyboard-shortcut-title pb-1">{t(userHelpData[1]['shortcutType'])}</div>
+              {this.renderContainer(['#', 'space'], t(userHelpData[1].shortcutData['Heading_1']))}
+              {this.renderContainer(['##', 'space'], t(userHelpData[1].shortcutData['Heading_2']))}
+              {this.renderContainer(['###', 'space'], t(userHelpData[1].shortcutData['Heading_3']))}
+              {this.renderContainer(['####', 'space'], t(userHelpData[1].shortcutData['Heading_4']))}
+              {this.renderContainer(['#####', 'space'], t(userHelpData[1].shortcutData['Heading_5']))}
+              {this.renderContainer(['######', 'space'], t(userHelpData[1].shortcutData['Heading_6']))}
+            </div>
+            {/* List */}
+            <div className="pb-2">
+              <div className="keyboard-shortcut-title pb-1">{t(userHelpData[0]['shortcutType'])}</div>
+              <div className="keyboard-shortcut-container">
+                <div className="col-4">
+                  {this.renderShortcut(['*', 'space'])}
+                  {this.renderShortcut(['-', 'space'])}
+                </div>
+                <div className="col-8">{t(userHelpData[0].shortcutData['Make_list'])}</div>
+              </div>
+              <div className="keyboard-shortcut-container">
+                <div className="col-4">
+                  {this.renderShortcut(['1.', 'space'])}
+                </div>
+                <div className="col-8">{t(userHelpData[0].shortcutData['Make_ordered_list'])}</div>
+              </div>
+              {this.renderContainer(['Tab'], t(userHelpData[0].shortcutData['Increase_depth']))}
+              {this.renderContainer(['Shift', 'Enter'], t(userHelpData[0].shortcutData['Insert_child_in_item']))}
+              {this.renderContainer(['Enter'], t(userHelpData[0].shortcutData['Insert_new_item']))}
+            </div>
+            {/* Inline */}
+            <div className="pb-2">
+              <div className="keyboard-shortcut-title pb-1">{t(userHelpData[6]['shortcutType'])}</div>
+              <div className="keyboard-shortcut-container">
+                <div className="col-4">
+                  {this.renderShortcut(['**bold**', 'space'])}
+                  {this.renderShortcut(['__bold__', 'space'])}
+                </div>
+                <div className="col-8">{t(userHelpData[6].shortcutData['Bold'])}</div>
+              </div>
+              <div className="keyboard-shortcut-container">
+                <div className="col-4">
+                  {this.renderShortcut(['*italic*', 'space'])}
+                  {this.renderShortcut(['_italic_', 'space'])}
+                </div>
+                <div className="col-8">{t(userHelpData[6].shortcutData['Italic'])}</div>
+              </div>
+              <div className="keyboard-shortcut-container">
+                <div className="col-4">
+                  {this.renderShortcut(['***italic***', 'space'])}
+                  {this.renderShortcut(['___italic___', 'space'])}
+                </div>
+                <div className="col-8">{t(userHelpData[6].shortcutData['Italic_Bold'])}</div>
+              </div>
+              {this.renderContainer(['`code`', 'space'], t(userHelpData[6].shortcutData['Inline_code']))}
+            </div>
+            {/* Code block */}
+            <div className="pb-2">
+              <div className="keyboard-shortcut-title pb-1">{t(userHelpData[2]['shortcutType'])}</div>
+              <div className="keyboard-shortcut-container">
+                <div className="col-4">
+                  {this.renderShortcut(['```'])}
+                  {this.renderShortcut(['space*4'])}
+                </div>
+                <div className="col-8">{t(userHelpData[2].shortcutData['Make_code_block'])}</div>
+              </div>
+              {this.renderContainer(['Tab'], t(userHelpData[2].shortcutData['Insert_indent']))}
+              {this.renderContainer(['Enter'], t(userHelpData[2].shortcutData['Insert_new_line']))}
+              {this.renderContainer([controlKey, 'Enter'], t(userHelpData[2].shortcutData['Escape_code_block']))}
+            </div>
+            {/* Block quote */}
+            <div className="pb-2">
+              <div className="keyboard-shortcut-title pb-1">{t(userHelpData[3]['shortcutType'])}</div>
+              {this.renderContainer(['>', 'space'], t(userHelpData[3].shortcutData['Make_Block_quote']))}
+              {this.renderContainer(['Enter'], t(userHelpData[3].shortcutData['Escape_Block_quote']))}
+            </div>
+            {/* Table */}
+            <div className="pb-2">
+              <div className="keyboard-shortcut-title pb-1">{t(userHelpData[4]['shortcutType'])}</div>
+              {this.renderContainer(['Enter'], t(userHelpData[4].shortcutData['Insert_Table_Row']))}
+              {this.renderContainer([controlKey, 'Enter'], t(userHelpData[4].shortcutData['Escape_table']))}
+            </div>
+            {/* Save */}
+            <div className="pb-2">
+              <div className="keyboard-shortcut-title pb-1">{t(userHelpData[7]['shortcutType'])}</div>
+              {this.renderContainer([controlKey, 's'], t(userHelpData[7].shortcutData['Save_file']))}
+            </div>
+            {/* Image */}
+            <div className="pb-2">
+              <div className="keyboard-shortcut-title pb-1">{t(userHelpData[8]['shortcutType'])}</div>
+              {this.renderContainer([controlKey, 'v'], t(userHelpData[8].shortcutData['Paste_screen_shot']))}
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    );
+  }
+}
+
+export default withTranslation('seafile-editor')(KeyboardShortcuts);
+

package/src/hooks/use-mathjax.js

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+
+const useMathJax = (mathJaxSource) => {
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    if (!mathJaxSource)  {
+      setIsLoading(false);
+      return;
+    }
+    window.MathJax = {
+      options: {
+        enableMenu: false
+      },
+      tex: {
+        inlineMath: [['$', '$']],
+        displayMath: [['$$', '$$']]
+      },
+      svg: {
+        fontCache: 'global'
+      }
+    };
+    if (!document.querySelector('#mathjax')) {
+      const script = document.createElement('script');
+      script.src = mathJaxSource;
+      script.id = 'mathjax';
+      document.body.appendChild(script);
+      script.onload = () => {
+        setIsLoading(false);
+      };
+    }
+
+    return () => {
+      const script = document.getElementById('mathjax');
+      script && script.parentNode.removeChild(script);
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return {
+    isLoadingMathJax: isLoading,
+  };
+};
+
+export default useMathJax;

package/src/hooks/use-scroll-context.js

@@ -0,0 +1,14 @@
+import React, { useContext } from 'react';
+
+export const ScrollContext = React.createContext(null);
+
+export const useScrollContext = () => {
+  const context = useContext(ScrollContext);
+
+  if (!context) {
+    throw new Error('The \`useScrollContext\` hook must be used inside the <ScrollContext> component\'s context.');
+  }
+
+  const { scrollRef } = context;
+  return scrollRef;
+};

package/src/hooks/use-selection-update.js

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react';
+import EventBus from '../utils/event-bus';
+
+export default function useSelectionUpdate() {
+  const [, update] = useState({});
+  useEffect(() => {
+    const onChange = () => update({});
+    const eventBus = EventBus.getInstance();
+    const unsubscribe = eventBus.subscribe('change', onChange);
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+}

package/src/index.js

@@ -0,0 +1,22 @@
+import { EXTERNAL_EVENTS } from './constants/event-types';
+import PlainMarkdownEditor from './editors/plain-markdown-editor';
+import RichMarkdownEditor from './pages/rich-markdown-editor';
+import MarkdownEditor from './pages/markdown-editor';
+import MarkdownViewer from './pages/markdown-view';
+import SimpleEditor from './pages/simple-editor';
+import EventBus from './utils/event-bus';
+import { mdStringToSlate, slateToMdString, deserializeHtml, processor } from './slate-convert';
+
+export {
+  MarkdownEditor,
+  PlainMarkdownEditor,
+  RichMarkdownEditor,
+  MarkdownViewer,
+  SimpleEditor,
+  EXTERNAL_EVENTS,
+  EventBus,
+  mdStringToSlate,
+  slateToMdString,
+  deserializeHtml,
+  processor,
+};

package/src/pages/markdown-editor.js

@@ -0,0 +1,53 @@
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react';
+import Loading from '../containers/loading';
+import { mdStringToSlate, slateToMdString } from '../slate-convert';
+import useMathJax from '../hooks/use-mathjax';
+import SlateEditor from '../editors/slate-editor';
+
+const SimpleEditor = forwardRef(({ isFetching, value, editorApi, mathJaxSource, onValueChanged = () => {}, children }, ref) => {
+
+  const [richValue, setRichValue] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const { isLoadingMathJax } = useMathJax(mathJaxSource);
+
+  useImperativeHandle(ref, () => {
+    return {
+      getValue: () => {
+        const mdStringValue = slateToMdString(richValue);
+        return mdStringValue;
+      },
+    };
+  }, [richValue]);
+
+  useEffect(() => {
+    if (!isFetching) {
+      const richValue = mdStringToSlate(value);
+      setRichValue(richValue);
+      setIsLoading(false);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFetching]);
+
+  const onSave = useCallback((content) => {
+    setRichValue(content);
+    onValueChanged && onValueChanged();
+  }, [onValueChanged]);
+
+  const props = {
+    isSupportFormula: !!mathJaxSource,
+    value: richValue,
+    editorApi: editorApi,
+    onSave: onSave,
+    children: children,
+  };
+
+  if (isFetching || isLoading || isLoadingMathJax) {
+    return <Loading />;
+  }
+
+  return (
+    <SlateEditor {...props} />
+  );
+});
+
+export default SimpleEditor;

package/src/pages/markdown-view.js

@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from 'react';
+import Loading from '../containers/loading';
+import { mdStringToSlate } from '../slate-convert';
+import useMathJax from '../hooks/use-mathjax';
+import SlateViewer from '../editors/slate-viewer';
+
+export default function MarkdownViewer({ isFetching, value, mathJaxSource, isShowOutline, beforeRenderCallback }) {
+
+  const [richValue, setRichValue] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const { isLoadingMathJax } = useMathJax(mathJaxSource);
+
+  useEffect(() => {
+    if (!isFetching) {
+      const richValue = mdStringToSlate(value);
+      beforeRenderCallback && beforeRenderCallback(richValue);
+      setRichValue(richValue);
+      setIsLoading(false);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFetching]);
+
+  const props = {
+    isSupportFormula: !!mathJaxSource,
+    value: richValue,
+    isShowOutline: isShowOutline,
+  };
+
+  if (isFetching || isLoading || isLoadingMathJax) {
+    return <Loading />;
+  }
+
+  return (
+    <SlateViewer {...props} />
+  );
+}