@seafile/seafile-editor 1.0.0 → 1.0.2

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

@@ -1,210 +0,0 @@
-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

@@ -1,17 +0,0 @@
-// 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

@@ -1,55 +0,0 @@
-/* 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

@@ -1,38 +0,0 @@
-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/formula/helper.js

@@ -1,68 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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;

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

@@ -1,47 +0,0 @@
-import { Editor, Transforms } from 'slate';
-import { getNodeType, getParentNode, isTextNode } from '../../core/queries';
-import { ELementTypes } from '../../constants';
-import { focusEditor } from '../../core';
-
-export const isMenuDisabled = (editor, readonly = false) => {
-  if (readonly) return true;
-  if (!editor.selection) return true;
-  const [match] = Editor.nodes(
-    editor,
-    {
-      match(node, path) {
-        let type = getNodeType(node);
-        if (!type && isTextNode(node) && node.id) {
-          const parentNode = getParentNode(node, node.id);
-          type = getNodeType(parentNode);
-        }
-        if (type === ELementTypes.PARAGRAPH) return true;
-        if (type.startsWith(ELementTypes.HEADER)) return true;
-        return false;
-      },
-      universal: true,
-      mode: 'highest',
-    },
-  );
-  return !match;
-};
-
-export const getHeaderType = (editor) => {
-  const [match] = Editor.nodes(editor, {
-    match: node => {
-      const nodeType = getNodeType(node);
-      if (nodeType.includes(ELementTypes.HEADER)) return true;
-      return false;
-    },
-    universal: true,
-  });
-  if (!match) return;
-  const [matchedNode] = match;
-  return getNodeType(matchedNode);
-};
-
-export const setHeaderType = (editor, type) => {
-  if (!type) return;
-  Transforms.setNodes(editor, { type });
-  focusEditor(editor);
-};

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

@@ -1,14 +0,0 @@
-import { ELementTypes } from '../../constants';
-import { renderHeader } from './render-elem';
-import withHeader from './plugin';
-import HeaderMenu from './menu';
-
-const HeaderPlugin = {
-  type: ELementTypes.HEADER,
-  nodeType: 'element',
-  editorMenus: [HeaderMenu],
-  editorPlugin: withHeader,
-  renderElements: [renderHeader],
-};
-
-export default HeaderPlugin;