@plone/volto 18.0.0-alpha.3 → 18.0.0-alpha.4

package/packages/volto-slate/src/blocks/Text/keyboard/joinBlocks.js

@@ -1,180 +0,0 @@
-import ReactDOM from 'react-dom';
-import { cloneDeep } from 'lodash';
-import { serializeNodesToText } from '@plone/volto-slate/editor/render';
-import { Editor } from 'slate';
-import {
-  getPreviousVoltoBlock,
-  getNextVoltoBlock,
-  isCursorAtBlockStart,
-  isCursorAtBlockEnd,
-  mergeSlateWithBlockBackward,
-  mergeSlateWithBlockForward,
-  makeEditor,
-} from '@plone/volto-slate/utils';
-import {
-  changeBlock,
-  deleteBlock,
-  getBlocksFieldname,
-  getBlocksLayoutFieldname,
-} from '@plone/volto/helpers';
-/**
- * Joins the current block (which has an active Slate Editor)
- * with the previous block, to make a single block.
- *
- * @param {Editor} editor
- * @param {KeyboardEvent} event
- */
-export function joinWithPreviousBlock({ editor, event }) {
-  if (!isCursorAtBlockStart(editor)) return;
-
-  const blockProps = editor.getBlockProps();
-  const {
-    block,
-    index,
-    saveSlateBlockSelection,
-    onSelectBlock,
-    data,
-    properties,
-    onChangeField,
-  } = blockProps;
-
-  const blocksFieldname = getBlocksFieldname(properties);
-  const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
-
-  const prev = getPreviousVoltoBlock(index, properties);
-  if (!prev) return;
-  const [otherBlock = {}, otherBlockId] = prev;
-
-  // Don't join with required blocks
-  if (data?.required || otherBlock?.required || otherBlock['@type'] !== 'slate')
-    return;
-
-  event.stopPropagation();
-  event.preventDefault();
-
-  // If the Editor contains no characters TODO: clarify if this special case
-  // really needs to be handled or not. In `joinWithNextBlock` it is not
-  // handled.
-  const text = Editor.string(editor, []);
-  if (!text) {
-    const cursor = getBlockEndAsRange(otherBlock);
-    const newFormData = deleteBlock(properties, block);
-
-    ReactDOM.unstable_batchedUpdates(() => {
-      saveSlateBlockSelection(otherBlockId, cursor);
-
-      onChangeField(blocksFieldname, newFormData[blocksFieldname]);
-      onChangeField(blocksLayoutFieldname, newFormData[blocksLayoutFieldname]);
-
-      onSelectBlock(otherBlockId);
-    });
-
-    return true;
-  }
-
-  // Else the editor contains characters, so we merge the current block's
-  // `editor` with the block before, `otherBlock`.
-  const cursor = mergeSlateWithBlockBackward(editor, otherBlock);
-
-  const combined = JSON.parse(JSON.stringify(editor.children));
-
-  // // TODO: don't remove undo history, etc Should probably save both undo
-  // // histories, so that the blocks are split, the undos can be restored??
-
-  // const cursor = getBlockEndAsRange(otherBlock);
-  const formData = changeBlock(properties, otherBlockId, {
-    '@type': 'slate', // TODO: use a constant specified in src/constants.js instead of 'slate'
-    value: combined,
-    plaintext: serializeNodesToText(combined || []),
-  });
-  const newFormData = deleteBlock(formData, block);
-
-  ReactDOM.unstable_batchedUpdates(() => {
-    saveSlateBlockSelection(otherBlockId, cursor);
-    onChangeField(blocksFieldname, newFormData[blocksFieldname]);
-    onChangeField(blocksLayoutFieldname, newFormData[blocksLayoutFieldname]);
-    onSelectBlock(otherBlockId);
-  });
-
-  return true;
-}
-
-/**
- * Joins the current block (which has the cursor) with the next block to make a
- * single block.
- * @param {Editor} editor
- * @param {KeyboardEvent} event
- */
-export function joinWithNextBlock({ editor, event }) {
-  if (!isCursorAtBlockEnd(editor)) return;
-
-  const blockProps = editor.getBlockProps();
-  const {
-    block,
-    index,
-    // saveSlateBlockSelection,
-    onSelectBlock,
-    data,
-  } = blockProps;
-
-  const { properties, onChangeField } = editor.getBlockProps();
-  const [otherBlock = {}, otherBlockId] = getNextVoltoBlock(index, properties);
-
-  // Don't join with required blocks
-  if (data?.required || otherBlock?.required || otherBlock['@type'] !== 'slate')
-    return;
-
-  event.stopPropagation();
-  event.preventDefault();
-
-  mergeSlateWithBlockForward(editor, otherBlock);
-
-  // const cursor = JSON.parse(JSON.stringify(editor.selection));
-  const combined = JSON.parse(JSON.stringify(editor.children));
-
-  // TODO: don't remove undo history, etc Should probably save both undo
-  // histories, so that the blocks are split, the undos can be restored??
-
-  const blocksFieldname = getBlocksFieldname(properties);
-  const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
-
-  const formData = changeBlock(properties, otherBlockId, {
-    // TODO: use a constant specified in src/constants.js instead of 'slate'
-    '@type': 'slate',
-    value: combined,
-    plaintext: serializeNodesToText(combined || []),
-  });
-  const newFormData = deleteBlock(formData, block);
-
-  ReactDOM.unstable_batchedUpdates(() => {
-    // saveSlateBlockSelection(otherBlockId, cursor);
-    onChangeField(blocksFieldname, newFormData[blocksFieldname]);
-    onChangeField(blocksLayoutFieldname, newFormData[blocksLayoutFieldname]);
-    onSelectBlock(otherBlockId);
-  });
-  return true;
-}
-
-/**
- * @param {object} block The Volto object representing the configuration and
- * contents of a Volto Block of type Slate Text.
- * @returns {Range} The collapsed Slate Range that represents the last position
- * the text cursor can take inside the given block.
- */
-function getBlockEndAsRange(block) {
-  const { value } = block;
-  const location = [value.length - 1]; // adress of root node
-  const editor = { children: value };
-  const newEditor = makeEditor();
-  newEditor.children = cloneDeep(editor.children);
-  const path = Editor.last(newEditor, location)[1]; // last Node in the block
-  // The last Text node (leaf node) entry inside the path computed just above.
-  const [leaf, leafpath] = Editor.leaf(newEditor, path);
-  // The offset of the Points in the collapsed Range computed below:
-  const offset = (leaf.text || '').length;
-
-  return {
-    anchor: { path: leafpath, offset },
-    focus: { path: leafpath, offset },
-  };
-}

package/packages/volto-slate/src/blocks/Text/keyboard/moveListItems.js

@@ -1,124 +0,0 @@
-import { Editor, Path, Transforms, Node } from 'slate';
-import { isCursorInList, getCurrentListItem } from '@plone/volto-slate/utils';
-import config from '@plone/volto/registry';
-
-/**
- * Move up a list with with `Ctrl+Up`. (The Up key is supposed here to be
- * pressed.)
- * @param {Editor} Editor
- * @param {KeyboardEvent} event
- */
-export function moveListItemUp({ editor, event }) {
-  // If Ctrl is not pressed or the cursor is not in a list, do nothing.
-  if (!(event.ctrlKey && isCursorInList(editor))) return;
-
-  // Else prevent the default behavior of Slate, React and DOM and stop the
-  // propagation of this event.
-  const { anchor } = editor.selection;
-  const { slate } = config.settings;
-
-  event.preventDefault();
-  event.stopPropagation();
-
-  // Store the current list item's path.
-  const [, listItemPath] = getCurrentListItem(editor);
-
-  // Don't allow in first line list item Check if the current list item is first
-  // in its parent
-  if (
-    // If the selection starts at the beginning of a root-level block node
-    anchor.path.slice(1).reduce((acc, n) => acc + n, 0) === 0 ||
-    // or the current list item is the first in the list that contains it
-    listItemPath[listItemPath.length - 1] === 0
-  ) {
-    // Mark the event as handled and do nothing.
-    return true;
-  }
-
-  // Take the Node in the selection that is LI and is farthest-from-root.
-  const [match] = Editor.nodes(editor, {
-    match: (n) => n.type === slate.listItemType,
-    // Explanation of the three modes:
-    // * 'all' - take all the nodes from the root Editor node to the selected
-    //   leaf Text node
-    // * 'highest' - take the root Editor node (if there is a selection, in case
-    //   no `at` option is given)
-    // * 'lowest' - take the farthest-from-root selected leaf Text node
-    // (Replace the "leaf Text node" expressions in the above list with
-    // whatever matching function you use.)
-    mode: 'lowest',
-  });
-
-  // Get the Path of the above-found Node.
-  const [, at] = match;
-
-  // Get the Path that represents the previous sibling node of the Path above.
-  // TODO: handle the exception that this can throw, when `at` has the last
-  // number in it a `0`. This case is possible because the condition above that
-  // uses the Array.prototype.reduce method checks only the sum but the last 2
-  // items can be [2, 0], their sum is 2 but the last item is 0, so the
-  // exception is thrown.
-  const to = Path.previous(at);
-
-  // If the Path does not exist, mark the event as handled and do nothing.
-  if (!Node.has(editor, to)) return true;
-
-  // Move the Node in the selection that is LI and is farthest-from-root to the
-  // existing Path just before its current location.
-  Transforms.moveNodes(editor, { at, to });
-
-  // Mark the event as handled.
-  return true;
-}
-
-/**
- * Move down a list with with `Ctrl+Down`. (The Down key is supposed here to be
- * pressed.)
- * @param {Editor} Editor
- * @param {KeyboardEvent} event
- */
-export function moveListItemDown({ editor, event }) {
-  // If Ctrl is not pressed or the cursor is not in a list, do nothing.
-  if (!event.ctrlKey) return;
-  if (!isCursorInList(editor)) return false;
-
-  // Else
-  const { slate } = config.settings;
-
-  // Take the Node in the selection that is LI and is farthest-from-root.
-  const [match] = Editor.nodes(editor, {
-    // Explanation of the three modes:
-    // * 'all' - take all the nodes from the root Editor node to the selected
-    //   leaf Text node
-    // * 'highest' - take the root Editor node (if there is a selection, in case
-    //   no `at` option is given)
-    // * 'lowest' - take the farthest-from-root selected leaf Text node
-    // (Replace the "leaf Text node" expressions in the above list with
-    // whatever matching function you use.)
-    match: (n) => n.type === slate.listItemType,
-    reverse: true,
-    mode: 'lowest',
-  });
-
-  // Get the Path of the above-found Node.
-  const [, at] = match;
-
-  // Get the Path that represents the next sibling node of the Path above.
-  const to = Path.next(at);
-
-  // Prevent the default behavior of Slate, React and DOM and stop the
-  // propagation of this event.
-  event.preventDefault();
-  event.stopPropagation();
-
-  // If the Path does not exist, mark the event as handled and do nothing.
-  if (!Node.has(editor, to)) return true;
-
-  // Move the Node in the selection that is LI and is farthest-from-root to the
-  // existing Path just after its current location, if there is a place for it
-  // at the same depth.
-  Transforms.moveNodes(editor, { at, to });
-
-  // Mark the event as handled.
-  return true;
-}

package/packages/volto-slate/src/blocks/Text/keyboard/slashMenu.js

@@ -1,19 +0,0 @@
-export const slashMenu = ({ editor, event }) => {
-  if (!editor.showSlashMenu) return;
-
-  const { slashArrowUp, slashArrowDown, slashEnter } = editor;
-
-  const handlers = {
-    ArrowUp: slashArrowUp,
-    ArrowDown: slashArrowDown,
-    Enter: slashEnter,
-  };
-
-  const handler = handlers[event.key];
-  if (handler) {
-    event.preventDefault();
-    handler();
-  }
-
-  return true;
-};

package/packages/volto-slate/src/blocks/Text/keyboard/softBreak.js

@@ -1,7 +0,0 @@
-export const softBreak = ({ editor, event }) => {
-  if (event.key === 'Enter' && event.shiftKey) {
-    event.preventDefault();
-    editor.insertText('\n');
-    return true;
-  }
-};

package/packages/volto-slate/src/blocks/Text/keyboard/traverseBlocks.js

@@ -1,81 +0,0 @@
-import { Node } from 'slate';
-import {
-  isCursorAtBlockStart,
-  isCursorAtBlockEnd,
-  getNextVoltoBlock,
-  getPreviousVoltoBlock,
-  createDefaultBlock,
-} from '@plone/volto-slate/utils';
-
-/**
- * goUp.
- *
- * @param {}
- */
-export function goUp({ editor, event }) {
-  if (isCursorAtBlockStart(editor)) {
-    const props = editor.getBlockProps();
-    const { onFocusPreviousBlock, block, blockNode } = props;
-
-    // const { formContext } = editor;
-    // const properties = formContext.contextData.formData;
-    const { properties } = editor.getBlockProps();
-
-    const prev = getPreviousVoltoBlock(props.index, properties);
-    if (!prev || prev[0]?.['@type'] !== 'slate')
-      return onFocusPreviousBlock(block, blockNode.current);
-
-    const [slateBlock, id] = prev;
-    const pseudoEditor = {
-      children: slateBlock.value || [createDefaultBlock()],
-    };
-    const match = Node.last(pseudoEditor, []);
-    if (!match) return onFocusPreviousBlock(block, blockNode.current);
-
-    const [node, path] = match;
-    const point = { path, offset: (node?.text || '').length };
-    const selection = { anchor: point, focus: point };
-    props.saveSlateBlockSelection(id, selection);
-    return onFocusPreviousBlock(block, blockNode.current);
-  }
-}
-
-/**
- * goDown.
- *
- * @param {}
- */
-export function goDown({ editor, event }) {
-  if (isCursorAtBlockEnd(editor)) {
-    const props = editor.getBlockProps();
-    const { onFocusNextBlock, block, blockNode } = props;
-
-    // const { formContext } = editor;
-    // const properties = formContext.contextData.formData;
-    const { properties } = editor.getBlockProps();
-
-    const next = getNextVoltoBlock(props.index, properties);
-    if (!next || next[0]?.['@type'] !== 'slate')
-      return onFocusNextBlock(block, blockNode.current);
-
-    const [slateBlock, id] = next;
-    const pseudoEditor = {
-      children: slateBlock.value || [createDefaultBlock()],
-    };
-    const match = Node.first(pseudoEditor, []);
-    if (!match) return onFocusNextBlock(block, blockNode.current);
-
-    const path = match[1];
-    const point = { path, offset: 0 };
-    const selection = { anchor: point, focus: point };
-    props.saveSlateBlockSelection(id, selection);
-    return onFocusNextBlock(block, blockNode.current);
-  }
-}
-
-export function traverseBlocks(opts) {
-  const { event } = opts;
-  event.preventDefault();
-  // return event.shiftKey ? goUp(opts) : goDown(opts);
-  return true;
-}

package/packages/volto-slate/src/blocks/Text/keyboard/unwrapEmptyString.js

@@ -1,26 +0,0 @@
-import { Node } from 'slate';
-import {
-  _unwrapElement,
-  _getActiveElement,
-} from '@plone/volto-slate/elementEditor/utils';
-import config from '@plone/volto/registry';
-
-/**
- * Handles empty string cases in the given `editor`.
- * It will unwrap empty strings for any major type (ex: a, mentions, footnote, zotero).
- * @param {Editor} editor
- * @param {Event} event
- */
-export function unwrapEmptyString(props) {
-  const { nodeTypesToHighlight } = config.settings.slate;
-  const uniqueNodeTypesToHighligh = [...new Set(nodeTypesToHighlight)];
-  const getActiveElement = _getActiveElement(uniqueNodeTypesToHighligh);
-  const unwrapElement = _unwrapElement(uniqueNodeTypesToHighligh);
-
-  const { editor } = props;
-  const actEl = getActiveElement(editor);
-
-  if (actEl && Node.string(actEl[0]).length === 1) {
-    unwrapElement(editor);
-  }
-}

package/packages/volto-slate/src/blocks/Text/schema.js

@@ -1,39 +0,0 @@
-const TextBlockSchema = (data) => {
-  const { override_toc } = data;
-  return {
-    title: 'Advanced settings',
-    fieldsets: [
-      {
-        id: 'default',
-        title: 'Default',
-        fields: [
-          'override_toc',
-          ...(override_toc ? ['level', 'entry_text'] : []),
-        ],
-      },
-    ],
-    properties: {
-      override_toc: {
-        title: 'Override TOC entry',
-        type: 'boolean',
-      },
-      level: {
-        title: 'TOC entry level',
-        choices: [
-          ['h1', 'h1'],
-          ['h2', 'h2'],
-          ['h3', 'h3'],
-          ['h4', 'h4'],
-          ['h5', 'h5'],
-          ['h6', 'h6'],
-        ],
-      },
-      entry_text: {
-        title: 'Entry text for TOC',
-      },
-    },
-    required: [],
-  };
-};
-
-export default TextBlockSchema;

package/packages/volto-slate/src/constants.js

@@ -1,123 +0,0 @@
-// action types
-export const SAVE_SLATE_BLOCK_SELECTION = 'SAVE_SLATE_BLOCK_SELECTION';
-export const SLATE_PLUGINS = 'SLATE_PLUGINS';
-export const UPLOAD_CONTENT = 'UPLOAD_CONTENT';
-
-// element 'types'. Useful to identify element types across codebase
-export const IMAGE = 'img';
-// export const FOOTNOTE = 'footnote';
-export const LINK = 'a';
-export const SIMPLELINK = 'link';
-
-export const TABLE = 'table';
-export const THEAD = 'thead';
-export const TBODY = 'tbody';
-export const TFOOT = 'tbody';
-export const TR = 'tr';
-export const TH = 'th';
-export const TD = 'td';
-
-export const P = 'p';
-
-export const LI = 'li';
-export const UL = 'ul';
-export const OL = 'ol';
-
-// dom parsing node information
-export const TEXT_NODE = 3;
-export const ELEMENT_NODE = 1;
-export const COMMENT = 8;
-
-export const INLINE_ELEMENTS = [
-  'A',
-  'ABBR',
-  'ACRONYM',
-  'AUDIO',
-  'B',
-  'BDI',
-  'BDO',
-  'BIG',
-  'BR',
-  'BUTTON',
-  'CANVAS',
-  'CITE',
-  'CODE',
-  'DATA',
-  'DATALIST',
-  'DEL',
-  'DFN',
-  'EM',
-  'EMBED',
-  'I',
-  'IFRAME',
-  'IMG',
-  'INPUT',
-  'INS',
-  'KBD',
-  'LABEL',
-  'MAP',
-  'MARK',
-  'METER',
-  'NOSCRIPT',
-  'OBJECT',
-  'OUTPUT',
-  'PICTURE',
-  'PROGRESS',
-  'Q',
-  'RUBY',
-  'S',
-  'SAMP',
-  'SCRIPT',
-  'SELECT',
-  'SLOT',
-  'SMALL',
-  'SPAN',
-  'STRONG',
-  'SUB',
-  'SUP',
-  'SVG',
-  'TEMPLATE',
-  'TEXTAREA',
-  'TIME',
-  'U',
-  'TT',
-  'VAR',
-  'VIDEO',
-  'WBR',
-];
-
-export const BLOCK_ELEMENTS = [
-  'ADDRESS',
-  'ARTICLE',
-  'ASIDE',
-  'BLOCKQUOTE',
-  'DETAILS',
-  'DIALOG',
-  'DD',
-  'DIV',
-  'DL',
-  'DT',
-  'FIELDSET',
-  'FIGCAPTION',
-  'FIGURE',
-  'FOOTER',
-  'FORM',
-  'H1',
-  'H2',
-  'H3',
-  'H4',
-  'H5',
-  'H6',
-  'HEADER',
-  'HGROUP',
-  'HR',
-  'LI',
-  'MAIN',
-  'NAV',
-  'OL',
-  'P',
-  'PRE',
-  'SECTION',
-  'TABLE',
-  'UL',
-];

package/packages/volto-slate/src/editor/EditorContext.jsx

@@ -1,5 +0,0 @@
-import React from 'react';
-
-const EditorContext = React.createContext();
-
-export default EditorContext;

package/packages/volto-slate/src/editor/EditorReference.jsx

@@ -1,22 +0,0 @@
-import React from 'react'; // , useState
-import { useSlate } from 'slate-react';
-
-/**
- * A component that can lift the editor to higher level
- *
- * Use like:
- * <SlateEditor ...><EditorReference onHasEditor=((editor) =>
- * this.setState({editor}) /></SlateEditor>
- *
- * With this you have access to the Slate editor "out of tree".
- */
-
-const EditorReference = ({ onHasEditor }) => {
-  const editor = useSlate();
-  React.useEffect(() => {
-    onHasEditor(editor);
-  }, [onHasEditor, editor]);
-  return null;
-};
-
-export default EditorReference;