@seafile/seafile-editor 0.4.8 → 1.0.0

package/src/extension/core/queries/index.js

@@ -0,0 +1,410 @@
+import { Editor, Text, Path, Span, Element, Node, Range } from 'slate';
+import { ReactEditor } from 'slate-react';
+import { match } from '../utils';
+
+// options
+export const getQueryOptions = (editor, options) => {
+  const { match: _match, block } = options;
+  let newMatch = undefined;
+  if (_match || block) {
+    newMatch = (n, path) => match(n, path, _match) && (!block || Editor.isBlock(editor, n));
+  }
+  return {
+    ...options,
+    match: newMatch,
+  };
+};
+
+export const findPath = (editor, node, defaultPath) => {
+  try {
+    return ReactEditor.findPath(editor, node);
+  } catch {
+    return defaultPath;
+  }
+};
+
+// get node
+export const getNode = (editor, path) => {
+  let node = null;
+  try {
+    node = Node.get(editor, path);
+  } catch (err) {
+    node = null;
+  }
+  return node;
+};
+
+export const getNodeType = (node) => {
+  return Element.isElement(node) ? node.type : '';
+};
+
+export const getParentNode = (nodes, nodeId) => {
+  let parentNode;
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    const { children: childrenNodes } = node;
+    if (!Array.isArray(childrenNodes)) continue;
+    if (childrenNodes.find(node => node.id === nodeId)) {
+      parentNode = node;
+    } else {
+      parentNode = getParentNode(childrenNodes, nodeId);
+    }
+    if (!parentNode) continue;
+    break;
+  }
+  return parentNode;
+};
+
+export const getNodes = (node, options) => {
+  return Node.nodes(node, options);
+};
+
+export const getCommonNode = (root, path, ancestor) => {
+  return Node.common(root, path, ancestor);
+};
+
+export const getSelectedNodeByType = (editor, type) => {
+  const match = (n) => getNodeType(n) === type;
+  const [nodeEntry] = Editor.nodes(editor, { match, universal: true });
+
+  return nodeEntry ? nodeEntry[0] : null;
+};
+
+export const getSelectedNodeByTypes = (editor, types) => {
+  const match = (n) => types.includes(getNodeType(n));
+  const [nodeEntry] = Editor.nodes(editor, { match, universal: true });
+  return nodeEntry ? nodeEntry[0] : null;
+};
+
+export const getSelectedNodeEntryByType = (editor, type) => {
+  const match = (n) => getNodeType(n) === type;
+  const [nodeEntry] = Editor.nodes(editor, { match, universal: false });
+
+  return nodeEntry ? nodeEntry : null;
+};
+
+export const getNodeEntries = (editor, options) => {
+  return Editor.nodes(editor, getQueryOptions(editor, options));
+};
+
+export const getEditorString = (editor, at, options) => {
+  if (!at) return '';
+
+  try {
+    return Editor.string(editor, at, options);
+  } catch (error) {
+    return '';
+  }
+};
+
+// children & child
+export const getChildren = (nodeEntry) => {
+  const [node, path] = nodeEntry;
+
+  if (Element.isAncestor(node)) {
+    const { children } = node;
+    return children.map((child, index) => {
+      const childPath = path.concat([index]);
+      return [child, childPath];
+    });
+  }
+  return [];
+};
+
+export const getLastChild = (nodeEntry) => {
+  const [node, path] = nodeEntry;
+  if (Text.isText(node)) return null;
+  if (!node.children.length) return null;
+  const children = node.children;
+
+  return [children[children.length - 1], path.concat([children.length - 1])];
+};
+
+export const getDeepInlineChildren = (editor, { children }) => {
+  const inlineChildren = [];
+  for (let child of children) {
+    if (Editor.isBlock(editor, child[0])) {
+      inlineChildren.push(...getDeepInlineChildren(editor, { children: getChildren(child) }));
+    } else {
+      inlineChildren.push(child);
+    }
+  }
+  return inlineChildren;
+};
+
+export const getLastChildPath = (nodeEntry) => {
+  const lastChild = getLastChild(nodeEntry);
+  if (!lastChild) return nodeEntry[1].concat([-1]);
+
+  return lastChild[1];
+};
+
+export const getPreviousPath = (path) => {
+  if (path.length === 0) return;
+
+  const last = path[path.length - 1];
+  if (last <= 0) return;
+
+  return path.slice(0, -1).concat(last - 1);
+};
+
+export const isLastChild = (nodeEntry, childPath) => {
+  const lastChildPath = getLastChildPath(nodeEntry);
+  return Path.equals(lastChildPath, childPath);
+};
+
+export const getSelectedElems = (editor) => {
+  const elems = [];
+  const nodeEntries = Editor.nodes(editor, { universal: true });
+  for (let nodeEntry of nodeEntries) {
+    const [node] = nodeEntry;
+    if (Element.isElement(node)) elems.push(node);
+  }
+  return elems;
+};
+
+// siblings
+export const getNextSiblingNodes = (ancestorEntry, path) => {
+  const [ancestor, ancestorPath] = ancestorEntry;
+
+  const leafIndex = path[ancestorPath.length];
+
+  const siblings = [];
+  const ancestorChildren = ancestor.children;
+
+  if (leafIndex + 1 < ancestor.children.length) {
+    for (let i = leafIndex + 1; i < ancestor.children.length; i++) {
+      siblings.push(ancestorChildren[i]);
+    }
+  }
+
+  return siblings;
+};
+
+// parent
+export const getAboveNode = (editor, options) => {
+  return Editor.above(editor, getQueryOptions(editor, options));
+};
+
+export const getAboveBlockNode = (editor, options) => {
+  return getAboveNode(editor, { ...options, block: true });
+};
+
+export const getPrevNode = (editor) => {
+  const [lowerNode, lowerPath] = getAboveNode(editor, {
+    mode: 'lowest',
+    match: n => Element.isElement(n) && Editor.isBlock(editor, n),
+  });
+
+  const [heightNode, heightPath] = getAboveNode(editor, {
+    mode: 'highest',
+    match: n => Element.isElement(n) && Editor.isBlock(editor, n),
+  });
+
+  let prevNode = null;
+  try {
+    prevNode = Editor.previous(editor, {
+      at: lowerPath,
+      match: n => Element.isElement(n) && Editor.isBlock(editor, n),
+    });
+  } catch (error) {
+    prevNode = null;
+  }
+
+  if (lowerNode.id !== heightNode.id && !prevNode) {
+    try {
+      prevNode = Editor.previous(editor, {
+        at: heightPath,
+        match: n => Element.isElement(n) && Editor.isBlock(editor, n),
+      });
+    } catch (error) {
+      prevNode = null;
+    }
+  }
+  return prevNode;
+};
+
+export const getNextNode = (editor) => {
+  const [lowerNode, lowerPath] = getAboveNode(editor, {
+    mode: 'lowest',
+    match: n => Element.isElement(n) && Editor.isBlock(editor, n),
+  });
+
+  const [heightNode, heightPath] = getAboveNode(editor, {
+    mode: 'highest',
+    match: n => Element.isElement(n) && Editor.isBlock(editor, n),
+  });
+
+  let nextNode = null;
+  try {
+    nextNode = Editor.next(editor, {
+      at: lowerPath,
+      match: n => Element.isElement(n) && Editor.isBlock(editor, n),
+    });
+  } catch (error) {
+    nextNode = null;
+  }
+
+  if (lowerNode.id !== heightNode.id && !nextNode) {
+    try {
+      nextNode = Editor.next(editor, {
+        at: heightPath,
+        match: n => Element.isElement(n) && Editor.isBlock(editor, n),
+      });
+    } catch (error) {
+      nextNode = null;
+    }
+  }
+  return nextNode;
+};
+
+// find node
+export const findNode = (editor, options) => {
+  const nodeEntries = Editor.nodes(editor, {
+    at: editor.selection || [],
+    ...getQueryOptions(editor, options)
+  });
+
+  const _nodeEntries = Array.from(nodeEntries);
+  if (_nodeEntries[0]) {
+    return _nodeEntries[0];
+  }
+
+  return undefined;
+};
+
+export const findDescendant = (editor, options) => {
+  const { at = editor.selection, reverse = false, voids = false, match: _match } = options;
+  if (!at) return;
+
+  let from;
+  let to;
+  if (Span.isSpan(at)) {
+    [from, to] = at;
+  } else if (Range.isRange(at)) {
+    const first = Editor.first(editor, at);
+    const last = Editor.last(editor, at);
+    from = reverse ? last : first;
+    to = reverse ? first : last;
+  }
+
+  let root = [editor, []];
+  if (Path.isPath(at)) {
+    root = Editor.node(editor, at);
+  }
+
+  const nodeEntries = Node.descendants(root[0], {
+    from,
+    to,
+    reverse,
+    pass: ([n]) => (voids ? false : Editor.isVoid(editor, n))
+  });
+
+  for (const [node, path] of nodeEntries) {
+    if (match(node, path, _match)) {
+      return [node, at.concat(path)];
+    }
+  }
+
+  return undefined;
+};
+
+// is
+export const isStartPoint = (editor, point, at) => {
+  return !!point && Editor.isStart(editor, point, at);
+};
+
+export const isEndPoint = (editor, point, at) => {
+  return !!point && Editor.isEnd(editor, point, at);
+};
+
+export const isBlockTextEmptyAfterSelection = (editor) => {
+  if (!editor.selection) return false;
+
+  const blockAbove = Editor.above(editor, { block: true });
+  if (!blockAbove) return false;
+
+  const cursor = editor.selection.focus;
+
+  const selectionParentEntry = Editor.parent(editor, editor.selection);
+  if (!selectionParentEntry) return false;
+  const [, selectionParentPath] = selectionParentEntry;
+
+  if (!isEndPoint(editor, cursor, selectionParentPath)) return false;
+
+  const siblingNodes = getNextSiblingNodes(blockAbove, cursor.path);
+
+  if (siblingNodes.length) {
+    // 子节点包含 文本节点
+    for (const siblingNode of siblingNodes) {
+      if (Text.isText(siblingNode) && siblingNode.text) {
+        return false;
+      }
+    }
+  } else {
+    return isEndPoint(editor, cursor, blockAbove[1]);
+  }
+
+  return true;
+};
+
+export const isRangeAcrossBlocks = (editor, { at, ...options } = {}) => {
+  if (!at) at = editor.selection;
+  if (!at) return;
+
+  const [start, end] = Range.edges(at);
+  const startBlock = getAboveBlockNode(editor, {
+    at: start,
+    ...options,
+  });
+  const endBlock = getAboveBlockNode(editor, {
+    at: end,
+    ...options,
+  });
+
+  if (!startBlock && !endBlock) return;
+
+  if (!startBlock || !endBlock) return true;
+
+  return !Path.equals(startBlock[1], endBlock[1]);
+};
+
+export const isAncestorEmpty = (editor, node) => {
+  return !Node.string(node) && !node.children.some((n) => Editor.isInline(editor, n));
+};
+
+export const isBlockAboveEmpty = (editor) => {
+  const block = getAboveBlockNode(editor)?.[0];
+  if (!block) return false;
+  return isAncestorEmpty(editor, block);
+};
+
+export const isSelectionAtBlockStart = (editor, options) => {
+  const { selection } = editor;
+  if (!selection) return false;
+
+  const path = getAboveBlockNode(editor, options)?.[1];
+  if (!path) return false;
+
+  return (
+    isStartPoint(editor, selection.focus, path) ||
+    (Range.isExpanded(editor.selection) && isStartPoint(editor, selection.anchor, path))
+  );
+};
+
+export const isSelectionAtBlockEnd = (editor, options) => {
+  const path = getAboveBlockNode(editor, options)?.[1];
+
+  return !!path && isEndPoint(editor, editor.selection?.focus, path);
+};
+
+export const isLastNode = (editor, node) => {
+  const editorChildren = editor.children || [];
+  const editorChildrenLength = editorChildren.length;
+  return editorChildren[editorChildrenLength - 1] === node;
+};
+
+export const isTextNode = (node) => {
+  if (!node) return false;
+  if (Reflect.has(node, 'children')) return false;
+};

package/src/extension/core/transforms/focus-editor.js

@@ -0,0 +1,12 @@
+import { Editor, Transforms } from 'slate';
+import { ReactEditor } from 'slate-react';
+
+export const focusEditor = (editor, target) => {
+  if (target) {
+    Editor.withoutNormalizing(editor, () => {
+      Transforms.deselect(editor);
+      Transforms.select(editor, target);
+    });
+  }
+  ReactEditor.focus(editor);
+};

package/src/extension/core/transforms/index.js

@@ -0,0 +1,4 @@
+export * from './move-children';
+export * from './remove-node-children';
+export * from './focus-editor';
+export * from './replace-node-children';

package/src/extension/core/transforms/move-children.js

@@ -0,0 +1,23 @@
+import { Editor, Path, Transforms } from 'slate';
+import { getNode } from '../queries';
+
+export const moveChildren = (editor, {at, to, match, fromStartIndex = 0}) => {
+  let moved = 0;
+  const parentPath = Path.isPath(at) ? at : at[1];
+  const parentNode = Path.isPath(at) ? getNode(editor, parentPath) : at[0];
+
+  if (!parentNode) return moved;
+  // There have none children in a not block element
+  if (!Editor.isBlock(editor, parentNode)) return moved;
+
+  for (let i = parentNode.children.length - 1; i >= fromStartIndex; i--) {
+    const childPath = [...parentPath, i];
+    const childNode = getNode(editor, childPath);
+    if (!match || (childNode && match([childNode, childPath]))) {
+      Transforms.moveNodes(editor, {at: childPath, to});
+      moved++;
+    }
+  }
+
+  return moved;
+};

package/src/extension/core/transforms/remove-node-children.js

@@ -0,0 +1,8 @@
+import { Transforms, Node } from 'slate';
+
+export const removeNodeChildren = (editor, path, options) => {
+  const nodeChildren = Node.children(editor, path, {reverse: true,});
+  for (const [, childPath] of nodeChildren) {
+    Transforms.removeNodes(editor, { ...options, at: childPath });
+  }
+};

package/src/extension/core/transforms/replace-node-children.js

@@ -0,0 +1,14 @@
+import { Editor, Transforms } from 'slate';
+import { removeNodeChildren } from './remove-node-children';
+
+export const replaceNodeChildren = (editor, {at, nodes, insertOptions, removeOptions}) => {
+
+  Editor.withoutNormalizing(editor, () => {
+    removeNodeChildren(editor, at, removeOptions);
+
+    Transforms.insertNodes(editor, nodes, {
+      ...insertOptions,
+      at: at.concat([0])
+    });
+  });
+};

package/src/extension/core/utils/index.js

@@ -0,0 +1,76 @@
+import slugid from 'slugid';
+import { useTranslation } from 'react-i18next';
+import { PARAGRAPH } from '../../constants/element-types';
+
+export const match = (node, path, predicate) => {
+  if (!predicate) return true;
+  if (typeof predicate === 'object') {
+    return Object.entries(predicate).every(([key, value]) => {
+      if (value && !Array.isArray(value)) {
+        return node[key] === value;
+      }
+
+      value = value ? value : [];
+      return value.includes(node[key]);
+    });
+  }
+
+  return predicate(node, path);
+};
+
+export const generateDefaultText = () => {
+  return { id: slugid.nice(), text: '' };
+};
+
+export const generateDefaultParagraph = () => {
+  return { id: slugid.nice(), type: PARAGRAPH, children: [generateDefaultText()] };
+};
+
+export const generateEmptyElement = (type) => {
+  return { id: slugid.nice(), type, children: [generateDefaultText()] };
+};
+
+
+/**
+ * @param {String} type
+ * @param {Object} options
+ * @param {Node[] | String} [options.childrenOrText = ''] If provide a string,that will generate a text node as children automatically
+ * @param {object} [options.props = {}]
+ * @returns {Node}
+ */
+export const generateElement = (type, options = {}) => {
+  let { childrenOrText = '', props = {} } = options;
+  if (typeof childrenOrText === 'string') {
+    childrenOrText = [{ id: slugid.nice(), text: childrenOrText }];
+  }
+  if (!Array.isArray(childrenOrText)) {
+    throw Error('childrenOrText must be a string or a Node array!');
+  }
+  return { id: slugid.nice(), type, children: childrenOrText, ...props };
+};
+
+export const isEmptyParagraph = (node) => {
+  if (node.type !== 'paragraph') return false;
+  if (node.children.length !== 1) return false;
+  const [child] = node.children;
+  if (Text.isText(child) && child.text === '' && child.type !== 'image') return true;
+  return false;
+};
+
+export const Placeholder = (props) => {
+  const { title } = props;
+  const { t } = useTranslation();
+  return (
+    <span style={{
+      position: 'absolute',
+      top: '0px',
+      color: 'rgba(191,191,191,1)',
+      pointerEvents: 'none',
+      width: '100%',
+      maxWidth: '100%',
+      display: 'block',
+      userSelect: 'none',
+      textDecoration: 'none'
+    }}>{t(title)}</span>
+  );
+};

package/src/extension/editor.js

@@ -0,0 +1,14 @@
+import { createEditor } from 'slate';
+import { withHistory } from 'slate-history';
+import { withReact } from 'slate-react';
+import Plugins from './plugins';
+
+const baseEditor = Plugins.reduce((editor, pluginItem) => {
+  const withPlugin = pluginItem.editorPlugin;
+  if (withPlugin) {
+    return withPlugin(editor);
+  }
+  return editor;
+}, withHistory(withReact(createEditor())));
+
+export default baseEditor;

package/src/extension/index.js

@@ -0,0 +1,15 @@
+import { ELementTypes } from './constants';
+import { isEmptyParagraph } from './core';
+import renderElement from './render/render-element';
+import renderLeaf from './render/render-leaf';
+import { Toolbar } from './toolbar';
+import baseEditor from './editor';
+
+export {
+  ELementTypes,
+  isEmptyParagraph,
+  renderElement,
+  renderLeaf,
+  Toolbar,
+  baseEditor,
+};

package/src/extension/plugins/blockquote/helpers.js

@@ -0,0 +1,65 @@
+import { Editor, Transforms, Element } from 'slate';
+import slugid from 'slugid';
+import { BLOCKQUOTE, CHECK_LIST_ITEM, IMAGE, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST } from '../../constants/element-types';
+import { focusEditor, getNodeType } from '../../core';
+
+export const isMenuDisabled = (editor, readonly) => {
+  if (readonly) return true;
+  if (editor.selection == null) return true;
+
+  const [nodeEntry] = Editor.nodes(editor, {
+    match: n => {
+      const type = getNodeType(n);
+
+      // Only available for p and blockquote
+      if (type === PARAGRAPH) return true;
+      if (type === BLOCKQUOTE) return true;
+      if (type === UNORDERED_LIST) return true;
+      if (type === ORDERED_LIST) return true;
+      if (type === CHECK_LIST_ITEM) return true;
+      if (type && type.startWith && type.startWith('header')) return true;
+      if (type === IMAGE) return true;
+
+      return false;
+    },
+    universal: true,
+    mode: 'highest', // Match top level
+  });
+
+  // Match to p blockquote, do not disable
+  if (nodeEntry) {
+    return false;
+  }
+  return true;
+};
+
+export const getBlockQuoteType = (editor) => {
+  const [match] = Editor.nodes(editor, {
+    match: (n) => getNodeType(n) === BLOCKQUOTE,
+    universal: true,
+  });
+
+  if (!match) return PARAGRAPH;
+  const [n] = match;
+
+  return getNodeType(n);
+};
+
+export const setBlockQuoteType = (editor, active) => {
+  if (!active) {
+    const blockquoteNode = {
+      id: slugid.nice(),
+      type: BLOCKQUOTE,
+    };
+    Transforms.wrapNodes(editor, blockquoteNode, {
+      mode: 'highest',
+      match: n => Element.isElement(n) && Editor.isBlock(editor, n),
+    });
+  } else {
+    Transforms.unwrapNodes(editor, {
+      mode: 'highest',
+      match: (n) => Element.isElement(n) && Editor.isBlock(editor, n),
+    });
+  }
+  focusEditor(editor);
+};

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

@@ -0,0 +1,13 @@
+import { BLOCKQUOTE } from '../../constants/element-types';
+import withBlockquote from './plugin';
+import renderBlockquote from './render-elem';
+
+const BlockquotePlugin = {
+  type: BLOCKQUOTE,
+  nodeType: 'element',
+  editorMenus: [],
+  editorPlugin: withBlockquote,
+  renderElements: [renderBlockquote],
+};
+
+export default BlockquotePlugin;

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

@@ -0,0 +1,31 @@
+import React, { useCallback } from 'react';
+import { MenuItem } from '../../../commons';
+import { MENUS_CONFIG_MAP } from '../../../constants/menus-config';
+import { BLOCKQUOTE } from '../../../constants/element-types';
+import { getBlockQuoteType, isMenuDisabled, setBlockQuoteType } from '../helpers';
+
+const menuConfig = MENUS_CONFIG_MAP[BLOCKQUOTE];
+
+const isActive = (editor) => {
+  return getBlockQuoteType(editor) === BLOCKQUOTE;
+};
+
+export default function BlockquoteMenu({ isRichEditor, className, readonly, editor }) {
+
+  const onMousedown = useCallback((event) => {
+    const active = isActive(editor);
+    setBlockQuoteType(editor, active);
+  }, [editor]);
+
+  return (
+    <MenuItem
+      isRichEditor={isRichEditor}
+      className={className}
+      disabled={isMenuDisabled(editor, readonly)}
+      isActive={isActive(editor)}
+      onMouseDown={onMousedown}
+
+      {...menuConfig}
+    />
+  );
+}