@seafile/seafile-editor 0.4.7 → 1.0.0

package/src/extension/plugins/code-block/plugin.js

@@ -0,0 +1,210 @@
+import isHotkey from 'is-hotkey';
+import { Transforms, Node, Range, Editor } from 'slate';
+import { getNodeType, isLastNode, getSelectedNodeByType, generateEmptyElement, generateElement } from '../../core';
+import { getCodeBlockNodeEntry } from './helpers';
+import { CODE_BLOCK, CODE_LINE, PARAGRAPH } from '../../constants/element-types';
+
+const withCodeBlock = (editor) => {
+  const { normalizeNode, insertFragment, insertText, insertBreak, insertData, insertNode, onHotKeyDown } = editor;
+  const newEditor = editor;
+
+  newEditor.insertData = (data) => {
+    if (data.types.includes('text/code-block') && !getSelectedNodeByType(editor, CODE_BLOCK)) {
+      const codeBlockNode = JSON.parse(data.getData('text/code-block'));
+      return insertNode(codeBlockNode);
+    }
+    insertData(data);
+  };
+
+  newEditor.insertFragment = (data) => {
+    // only selected code block content
+    if (data.length === 1 && data[0].type === CODE_BLOCK && !getSelectedNodeByType(editor, CODE_BLOCK)) {
+      data.forEach((node, index) => {
+        if (node.type === CODE_BLOCK) {
+          const newBlock = node.children.map(line => {
+            const text = Node.string(line);
+            const children = generateElement(PARAGRAPH, { childrenOrText: text });
+            return children;
+          });
+          data.splice(index, 1, ...newBlock);
+        }
+      });
+      return insertFragment(data);
+    } else {
+      if (getSelectedNodeByType(editor, CODE_BLOCK)) {
+        // Paste into code block
+
+        // Pasted data is code block split with code-line
+        data.forEach((node, index) => {
+          if (node.type === CODE_BLOCK) {
+            const codeLineArr = node.children.map(line => line);
+            data.splice(index, 1, ...codeLineArr);
+          }
+        });
+        const insertCodeLines = data.map(node => {
+          const text = Node.string(node);
+          const codeLine = generateElement(CODE_LINE, { childrenOrText: text });
+          return codeLine;
+        });
+
+        // Current focus code-line string not empty
+        const string = Editor.string(newEditor, newEditor.selection.focus.path);
+        if (string.length !== 0 && Range.isCollapsed(newEditor.selection)) {
+          const [node, ...restNode] = insertCodeLines;
+          const text = Node.string(node);
+          insertText(text);
+          if (restNode.length !== 0) {
+            insertBreak();
+            insertFragment(restNode);
+          }
+          return;
+        }
+        return insertFragment(insertCodeLines);
+      } else {
+        // Paste into not a code block
+        return insertFragment(data);
+      }
+    }
+  };
+
+  // Rewrite normalizeNode
+  newEditor.normalizeNode = ([node, path]) => {
+    const type = getNodeType(node);
+
+    if (type === CODE_LINE && path.length <= 1) {
+      Transforms.setNodes(newEditor, { type: PARAGRAPH }, { at: path });
+      return;
+    }
+
+    if (type === CODE_BLOCK) {
+      if (node.children.length === 0) {
+        Transforms.delete(newEditor, { at: path });
+        return;
+      }
+
+      // code-block is the last node in the editor and needs to be followed by a p node
+      const isLast = isLastNode(newEditor, node);
+      if (isLast) {
+        const paragraph = generateEmptyElement(PARAGRAPH);
+        Transforms.insertNodes(newEditor, paragraph, { at: [path[0] + 1] });
+      }
+
+      // Here must be a code node below code-block
+      if (getNodeType(node.children[0]) !== CODE_LINE) {
+        Transforms.unwrapNodes(newEditor);
+        Transforms.setNodes(newEditor, { type: PARAGRAPH }, { mode: 'highest' });
+      }
+
+      if (node.children.length > 1) {
+        node.children.forEach((child, index) => {
+          if (child.type !== CODE_LINE) {
+            Transforms.setNodes(newEditor, { type: CODE_LINE }, { at: [...path, index] });
+          }
+        });
+      }
+    }
+
+    // Perform default behavior
+    return normalizeNode([node, path]);
+  };
+
+  newEditor.onHotKeyDown = (event) => {
+    const wrapperCodeBlock = getCodeBlockNodeEntry(newEditor);
+    if (!wrapperCodeBlock) return onHotKeyDown && onHotKeyDown(event);
+
+    if (isHotkey('mod+enter', event)) {
+      event.preventDefault();
+      if (newEditor.selection && !Range.isExpanded(newEditor.selection)) {
+        const path = Editor.path(newEditor, newEditor.selection);
+        const newParagraphPath = [path[0] + 1];
+        const newParagraph = generateEmptyElement(PARAGRAPH);
+        Transforms.insertNodes(newEditor, newParagraph, { at: newParagraphPath });
+        Transforms.select(newEditor, newParagraphPath);
+      }
+      return true;
+    }
+
+    if (isHotkey('tab', event)) {
+      event.preventDefault();
+      const nodeEntries = Editor.nodes(newEditor, {
+        mode: 'lowest',
+        match: node => node.type === CODE_LINE,
+      });
+      const nodeEntryList = Array.from(nodeEntries);
+      for (const nodeEntry of nodeEntryList) {
+        const [, path] = nodeEntry;
+        // Insert 4 spaces for easier remove space
+        Transforms.insertText(newEditor, ' '.repeat(4), { at: { path: [...path, 0], offset: 0 } });
+      }
+      const firstCodeLinePath = nodeEntryList.at(0)[1].concat(0);
+      const lastCodeLinePath = nodeEntryList.at(-1)[1].concat(0);
+      const newRange = Editor.range(newEditor, firstCodeLinePath, lastCodeLinePath);
+      nodeEntryList.length > 1 ? Transforms.select(newEditor, newRange) : Transforms.select(newEditor);
+      return true;
+    }
+
+    if (isHotkey('shift+tab', event)) {
+      event.preventDefault();
+      // Match the beginning of the line space, delete up to 4 spaces at a time
+      const originSelection = newEditor.selection;
+      const matchBeginSpace = /^\s*/;
+      const nodeEntries = Editor.nodes(newEditor, {
+        mode: 'lowest',
+        match: node => node.type === CODE_LINE,
+      });
+      const nodeEntryList = Array.from(nodeEntries);
+      let removedSpaceCount = 0;
+
+      for (const nodeEntry of nodeEntryList) {
+        const [node, path] = nodeEntry;
+        const spaceNum = Node.string(node).match(matchBeginSpace);
+        // skip empty line and no space begining line
+        if (!spaceNum || !spaceNum[0].length) continue;
+        const deleteNum = Math.min(spaceNum[0].length, 4);
+        removedSpaceCount += deleteNum;
+        for (let i = 0; i < deleteNum; i++) {
+          Transforms.select(newEditor, { path: [...path, 0], offset: 0 });
+          Editor.deleteForward(newEditor, { unit: 'character' });
+        }
+      }
+      // Select multiple rows when operating more then one line
+      // Keep cursor location when operating one line
+      if (nodeEntryList.length > 1) {
+        const firstCodeLinePath = nodeEntryList.at(0)[1].concat(0);
+        const lastCodeLinePath = nodeEntryList.at(-1)[1].concat(0);
+        const selectLocation = Editor.range(newEditor, firstCodeLinePath, lastCodeLinePath);
+        Transforms.select(newEditor, selectLocation);
+      } else {
+        const { anchor, focus } = originSelection;
+        const isCollapsed = Range.isCollapsed(originSelection);
+        if (isCollapsed) {
+          const selectLocation = { ...originSelection.focus, offset: originSelection.focus.offset - removedSpaceCount };
+          Transforms.select(newEditor, selectLocation);
+        } else {
+          const selectLocation = {
+            anchor: { ...anchor, offset: anchor.offset - removedSpaceCount },
+            focus: { ...focus, offset: focus.offset - removedSpaceCount }
+          };
+          Transforms.select(newEditor, selectLocation);
+        }
+      }
+      return true;
+    }
+
+    if (isHotkey('mod+a', event)) {
+      event.preventDefault();
+      const codeBlockEntry = Editor.nodes(newEditor, {
+        mode: 'highest',
+        match: node => node.type === CODE_BLOCK,
+      });
+      if (!codeBlockEntry) return;
+      const codeBlockEntryList = Array.from(...codeBlockEntry);
+      Transforms.select(newEditor, codeBlockEntryList[1]);
+      return true;
+    }
+  };
+
+  return newEditor;
+};
+
+export default withCodeBlock;

package/src/extension/plugins/code-block/render-elem/constant.js

@@ -0,0 +1,17 @@
+// Default language key name
+export const EXPLAIN_TEXT = 'none';
+
+export const LANGUAGE_MAP = {
+  [EXPLAIN_TEXT]: ' Text',
+  html: ' HTML',
+  css: ' CSS',
+  javascript: ' Javascript',
+  c: ' C',
+  cpp: ' C++',
+  csharp: ' C#',
+  java: ' Java',
+  python: ' Python',
+  sql: ' Sql',
+  swift: ' Swift',
+  json: ' JSON'
+};

package/src/extension/plugins/code-block/render-elem/index.js

@@ -0,0 +1,55 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useSlate } from 'slate-react';
+import LanguageSelector from './language-selector';
+import { isInCodeBlock } from '../helpers';
+
+const renderCodeBlock = ({ attributes, children, element }) => {
+  const editor = useSlate();
+  const [isShowLanguageSelector, setIsShowLanguageSelector] = useState(true);
+  const codeBlockRef = useRef(null);
+
+  useEffect(() => {
+    if (isShowLanguageSelector && !isInCodeBlock(editor)) onHideLanguageSelector();
+    if (!isShowLanguageSelector && isInCodeBlock(editor)) registerEventHandler();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor.selection]);
+
+  const onHideLanguageSelector = useCallback((e) => {
+    if (codeBlockRef?.current?.contains(e?.target)) return;
+    setIsShowLanguageSelector(false);
+    unregisterEventHandler();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setIsShowLanguageSelector]);
+  const registerEventHandler = useCallback(() => {
+    setIsShowLanguageSelector(true);
+    document.addEventListener('click', onHideLanguageSelector, true);
+  }, [onHideLanguageSelector]);
+
+  const unregisterEventHandler = useCallback(() => {
+    document.removeEventListener('click', onHideLanguageSelector);
+  }, [onHideLanguageSelector]);
+
+  return (
+    <div
+      ref={codeBlockRef}
+      className='sf-code-block-container'
+    >
+      <pre {...attributes}>
+        <code>{children}</code>
+      </pre>
+      {isShowLanguageSelector && <LanguageSelector lang={element.lang} />}
+    </div>
+  );
+};
+
+export default renderCodeBlock;
+
+export const renderCodeLine = (props, editor) => {
+  const { element, attributes, children } = props;
+  return (
+    <div data-id={element.id} {...attributes} className={'sf-code-line'}>
+      {children}
+    </div>
+  );
+};

package/src/extension/plugins/code-block/render-elem/language-selector.js

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+import { useSlate } from 'slate-react';
+import PropTypes from 'prop-types';
+import { EXPLAIN_TEXT, LANGUAGE_MAP } from './constant';
+import { setCodeBlockLanguage } from '../helpers';
+
+import './style.css';
+
+const LanguageSelector = ({ lang = EXPLAIN_TEXT }) => {
+  const editor = useSlate();
+  const langOptions = useMemo(() => {
+    const options = [];
+    for (const value in LANGUAGE_MAP) {
+      if (Object.hasOwnProperty.call(LANGUAGE_MAP, value)) {
+        const name = LANGUAGE_MAP[value];
+        options.push(<option key={value} value={value}>{name}</option>);
+      }
+    }
+    return options;
+  }, []);
+
+  return (
+    <select
+      name='language'
+      className='sf-lang-selector'
+      value={lang}
+      onChange={e => setCodeBlockLanguage(editor, e.target.value)}
+    >
+      {langOptions}
+    </select>
+  );
+};
+
+LanguageSelector.propTypes = {
+  lang: PropTypes.string.isRequired,
+};
+
+export default LanguageSelector;

package/src/extension/plugins/code-block/render-elem/style.css

@@ -0,0 +1,27 @@
+.sf-code-block-container {
+  position: relative;
+  margin: 0 0 20px;
+  padding: 0;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #f5f7fa;
+}
+
+.sf-lang-selector {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  padding: 2px 5px;
+  width: max-content;
+  border: none;
+  border-radius: 3px;
+  appearance: none;
+  align-items: center;
+  line-height: 1;
+  font-size: 12px;
+  background: #eeeeee;
+  cursor: pointer;
+  transition: all 0.3s;
+  outline: none;
+}

package/src/extension/plugins/formula/formula.css

@@ -0,0 +1,22 @@
+/* formula */
+.sf-selected-formula {
+  display: block;
+  user-select: none;
+  outline: 2px solid #007bff;
+  cursor: pointer;
+}
+
+.sf-selected-formula .MathJax {
+  margin: 0;
+}
+
+.formula-dialog-wrapper .form-check-label {
+  margin-bottom: 4px;
+}
+
+.formula-dialog-wrapper .formula-preview {
+  padding: 10px;
+  border: 2px dashed #ebebeb;
+  min-height: 40px;
+  overflow-x: auto;
+}

package/src/extension/plugins/formula/helper.js

@@ -0,0 +1,68 @@
+import { Editor, Transforms } from 'slate';
+import slugid from 'slugid';
+import { getNodeType, getSelectedElems } from '../../core/queries';
+import { focusEditor } from '../../core/transforms/focus-editor';
+import { ELementTypes } from '../../constants';
+import { FORMULA } from '../../constants/element-types';
+import { generateDefaultText } from '../../core';
+
+export const isMenuDisabled = (editor, readonly = false) => {
+  if (readonly) return true;
+  const { selection } = editor;
+  if (!selection) return false;
+  const selectedElems = getSelectedElems(editor);
+  // Check if the selected element is illegal
+  const isSelectedIllegalElement = selectedElems.some(elem => {
+    const { type } = elem;
+    if (editor.isVoid(elem)) return true;
+    const unSupportTypes = [
+      ELementTypes.CODE_BLOCK,
+      ELementTypes.CODE_LINE,
+      ELementTypes.TABLE,
+      ELementTypes.TABLE_CELL,
+      ELementTypes.TABLE_ROW,
+      ELementTypes.HEADER1,
+      ELementTypes.HEADER2,
+      ELementTypes.HEADER3,
+      ELementTypes.HEADER4,
+      ELementTypes.HEADER5,
+      ELementTypes.HEADER6,
+      ELementTypes.LIST_ITEM,
+      ELementTypes.UNORDERED_LIST,
+      ELementTypes.ORDERED_LIST,
+    ];
+    if (unSupportTypes.includes(type)) return true;
+    return false;
+  });
+  if (isSelectedIllegalElement) return true;
+  return false;
+};
+
+export const isFormulaActive = (editor) => {
+  return isFormulaType(editor);
+};
+
+export const isFormulaType = (editor) => {
+  const [match] = Editor.nodes(editor, {
+    match: n => getNodeType(n) === ELementTypes.FORMULA,
+    universal: true,
+  });
+  return !!match;
+};
+
+export const insertFormula = (editor, data) => {
+  const formula = {
+    id: slugid.nice(),
+    type: FORMULA,
+    data: { formula: data.formula },
+    children: [generateDefaultText()],
+  };
+  Transforms.insertNodes(editor, formula, { at: data.at, void: true });
+  focusEditor(editor);
+};
+
+export const updateFormula = (editor, data) => {
+  const { formula, at } = data;
+  Transforms.setNodes(editor, { data: { formula } }, { at: at, void: true });
+  focusEditor(editor);
+};

package/src/extension/plugins/formula/index.js

@@ -0,0 +1,14 @@
+import { FORMULA } from '../../constants/element-types';
+import FormulaMenu from './menu';
+import withFormula from './plugin';
+import renderFormula from './render-elem';
+
+const FormulaPlugin = {
+  type: FORMULA,
+  nodeType: 'element',
+  editorMenus: [FormulaMenu],
+  editorPlugin: withFormula,
+  renderElements: [renderFormula],
+};
+
+export default FormulaPlugin;

package/src/extension/plugins/formula/menu/formula-modal.js

@@ -0,0 +1,73 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input } from 'reactstrap';
+import { useTranslation } from 'react-i18next';
+import { insertFormula, updateFormula } from '../helper';
+import { getAboveBlockNode } from '../../../core';
+
+const FormulaModal = ({ editor, formula, onCloseModal }) => {
+  const oldFormulaRef = useRef(formula);
+  const [newFormula, setNewFormula] = useState(formula);
+  const [modifyPath, setModifyPath] = useState(null);
+  const [isDisabled, setIsDisabled] = useState(true);
+  const formulaPreviewRef = useRef(null);
+  const { t } = useTranslation('seafile-editor');
+
+  // record current selection position
+  useEffect(() => {
+    const node = getAboveBlockNode(editor);
+    if (node) {
+      setModifyPath(node[1]);
+      return;
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (formulaPreviewRef.current) {
+      formulaPreviewRef.current.innerHTML = '';
+      const dom = window.MathJax.tex2svg(newFormula);
+      formulaPreviewRef.current.appendChild(dom);
+    }
+  });
+
+  const onFormulaChange = useCallback((event) => {
+    setIsDisabled(false);
+    setNewFormula(event.target.value);
+  }, []);
+
+  const handleUpdateFormula = useCallback(() => {
+
+    const data = { formula: newFormula, at: modifyPath };
+    if (oldFormulaRef.current) {
+      updateFormula(editor, data);
+    } else {
+      insertFormula(editor, data);
+    }
+    onCloseModal();
+  }, [editor, modifyPath, newFormula, onCloseModal]);
+
+  return (
+    <Modal isOpen={true} toggle={onCloseModal} autoFocus={false} wrapClassName='formula-dialog-wrapper'>
+      <ModalHeader toggle={onCloseModal}>{t('insert_formula')}</ModalHeader>
+      <ModalBody>
+        <div className="form-group">
+          <label className="form-check-label">{t('Formula')}</label>
+          <Input
+            type="textarea"
+            className="form-control"
+            value={newFormula}
+            autoFocus={true}
+            onChange={onFormulaChange}
+          />
+        </div>
+        <div ref={formulaPreviewRef} className="formula-preview"></div>
+      </ModalBody>
+      <ModalFooter>
+        <Button color="secondary" onClick={onCloseModal}>{t('Cancel')}</Button>
+        <Button color="primary" disabled={isDisabled} onClick={handleUpdateFormula}>{t('Insert_formula')}</Button>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export default FormulaModal;

package/src/extension/plugins/formula/menu/index.js

@@ -0,0 +1,63 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { INTERNAL_EVENTS } from '../../../../constants/event-types';
+import { MENUS_CONFIG_MAP } from '../../../constants/menus-config';
+import { FORMULA } from '../../../constants/element-types';
+import MenuItem from '../../../commons/menu/menu-item';
+import { isFormulaActive, isMenuDisabled } from '../helper';
+import EventBus from '../../../../utils/event-bus';
+import FormulaModal from './formula-modal';
+
+const menuConfig = MENUS_CONFIG_MAP[FORMULA];
+
+const FormulaMenu = ({ isRichEditor, className, readonly, editor }) => {
+  const [isOpenFormulaModal, setIsOpenFormulaModal] = useState(false);
+  const [formula, setFormula] = useState('');
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const isMenuActive = useMemo(() => isFormulaActive(editor), [editor.selection]);
+
+  useEffect(() => {
+    const eventBus = EventBus.getInstance();
+    const unsubscribe = eventBus.subscribe(INTERNAL_EVENTS.ON_OPEN_FORMULA_DIALOG, handleOpenLinkModal);
+    return () => unsubscribe();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onMouseDown = useCallback(() => {
+    setIsOpenFormulaModal(true);
+  }, []);
+
+  const handleOpenLinkModal = useCallback((formulaElement) => {
+    if (formulaElement) {
+      const { formula } = formulaElement.data || {};
+      setFormula(formula);
+      setIsOpenFormulaModal(true);
+    }
+  }, []);
+
+  const onCloseModal = useCallback(() => {
+    setIsOpenFormulaModal(false);
+    setFormula('');
+  }, []);
+
+  return (
+    <>
+      <MenuItem
+        isRichEditor={isRichEditor}
+        className={className}
+        disabled={isMenuDisabled(editor, readonly)}
+        isActive={isMenuActive}
+        onMouseDown={onMouseDown}
+        {...menuConfig}
+      />
+      {isOpenFormulaModal && (
+        <FormulaModal
+          editor={editor}
+          formula={formula}
+          onCloseModal={onCloseModal}
+        />
+      )}
+    </>
+  );
+};
+
+export default FormulaMenu;

package/src/extension/plugins/formula/plugin.js

@@ -0,0 +1,18 @@
+import { ELementTypes } from '../../constants';
+
+const withFormula = (editor) => {
+  const { isVoid } = editor;
+  const newEditor = editor;
+
+
+  newEditor.isVoid = (element) => {
+    const { type } = element;
+
+    if (type === ELementTypes.FORMULA) return true;
+    return isVoid(element);
+  };
+
+  return newEditor;
+};
+
+export default withFormula;

package/src/extension/plugins/formula/render-elem.js

@@ -0,0 +1,40 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { useSelected } from 'slate-react';
+import { INTERNAL_EVENTS } from '../../../constants/event-types';
+import EventBus from '../../../utils/event-bus';
+
+import './formula.css';
+
+const Formula = ({ attributes, element, children }) => {
+
+  const isSelected = useSelected();
+  const formulaContainerRef = useRef(null);
+
+  useEffect(() => {
+    const { formula = '' } = element.data || {};
+    if (!formula) return;
+    if (formulaContainerRef.current && window.MathJax) {
+      formulaContainerRef.current.innerHTML = '';
+      const dom = window.MathJax.tex2svg(formula);
+      formulaContainerRef.current.appendChild(dom);
+    }
+  }, [element]);
+
+  const toggleFormulaEditor = useCallback(() => {
+    const eventBus = EventBus.getInstance();
+    eventBus.dispatch(INTERNAL_EVENTS.ON_OPEN_FORMULA_DIALOG, element);
+  }, [element]);
+
+  return (
+    <span onDoubleClick={toggleFormulaEditor} className={'sf-block-formula ' + (isSelected ? ' sf-selected-formula' : '')} {...attributes}>
+      <span contentEditable={false} ref={formulaContainerRef}></span>
+      <span contentEditable={false}>{children}</span>
+    </span>
+  );
+};
+
+const renderFormula = (props) => {
+  return <Formula {...props} />;
+};
+
+export default renderFormula;