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

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

@@ -1,171 +0,0 @@
-import React from 'react';
-import redraft from 'redraft';
-import TextBlockView from './TextBlockView';
-import TextBlockEdit from './TextBlockEdit';
-import TextBlockSchema from './TextBlockSchema';
-
-import {
-  goDown,
-  goUp,
-  backspaceInList,
-  indentListItems,
-  joinWithNextBlock,
-  joinWithPreviousBlock,
-  softBreak,
-  moveListItemDown,
-  moveListItemUp,
-  traverseBlocks,
-  unwrapEmptyString,
-  slashMenu,
-  cancelEsc,
-} from './keyboard';
-import { withDeleteSelectionOnEnter } from '@plone/volto-slate/editor/extensions';
-import {
-  breakList,
-  withDeserializers,
-  withLists,
-  withSplitBlocksOnBreak,
-  withIsSelected,
-  normalizeExternalData,
-} from './extensions';
-import { extractImages } from '@plone/volto-slate/editor/plugins/Image/deconstruct';
-import { extractTables } from '@plone/volto-slate/blocks/Table/deconstruct';
-
-import textSVG from '@plone/volto/icons/subtext.svg';
-
-export { TextBlockView, TextBlockEdit, TextBlockSchema };
-
-export default function applyConfig(config) {
-  config.settings.slate = {
-    // TODO: should we inverse order? First here gets executed last
-    textblockExtensions: [
-      withLists,
-      withSplitBlocksOnBreak, // TODO: do we still need this one?
-      withDeleteSelectionOnEnter,
-      withDeserializers,
-      withIsSelected,
-      breakList,
-      normalizeExternalData,
-    ],
-
-    // Pluggable handlers for the onKeyDown event of <Editable />
-    // Order matters here. A handler can return `true` to stop executing any
-    // following handler
-    textblockKeyboardHandlers: {
-      Backspace: [
-        unwrapEmptyString,
-        backspaceInList, // Backspace in list item lifts node and breaks Volto blocks
-        joinWithPreviousBlock, // Backspace at beginning of block joins with previous block
-      ],
-      Delete: [
-        unwrapEmptyString,
-        joinWithNextBlock, // Delete at end of block joins with next block
-      ],
-      Enter: [
-        slashMenu,
-        unwrapEmptyString,
-        softBreak, // Handles shift+Enter as a newline (<br/>)
-      ],
-      ArrowUp: [
-        slashMenu,
-        moveListItemUp, // Move up a list with with Ctrl+up
-        goUp, // Select previous block
-      ],
-      ArrowDown: [
-        slashMenu,
-        moveListItemDown, // Move down a list item with Ctrl+down
-        goDown, // Select next block
-      ],
-      Tab: [
-        indentListItems, // <tab> and <c-tab> behaviour for list items
-        traverseBlocks,
-      ],
-      Escape: [cancelEsc],
-    },
-    textblockDetachedKeyboardHandlers: {
-      Enter: [
-        softBreak, // Handles shift+Enter as a newline (<br/>)
-      ],
-    },
-    // Used by deconstructToVoltoBlocks to transform tags such as <img> to a Volto image block
-    // These emiters receive (editor, pathRef), emit [blockid, blockoptions] and
-    // are allowed to change the editor contents (for the given path)
-    voltoBlockEmiters: [
-      ...(config.settings.slate.voltoBlockEmiters || []),
-      extractImages,
-      extractTables,
-    ],
-
-    // These elements will get an id, to make them targets in TOC
-    topLevelTargetElements: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
-
-    ...config.settings.slate, // TODO: is this correct for volto-slate addons?
-  };
-
-  const slateBlockConfig = {
-    id: 'slate',
-    title: 'Text',
-    icon: textSVG,
-    group: 'text',
-    view: TextBlockView,
-    edit: TextBlockEdit,
-    schema: TextBlockSchema,
-    restricted: false,
-    mostUsed: false,
-    blockHasOwnFocusManagement: true,
-    sidebarTab: 0,
-    security: {
-      addPermission: [],
-      view: [],
-    },
-    blockHasValue: (data) => {
-      // TODO: this should be handled better
-      return data && !!data.plaintext?.trim();
-    },
-    tocEntry: (block = {}) => {
-      const { value, override_toc, entry_text, level, plaintext } = block;
-      const type = value?.[0]?.type;
-      return override_toc && level
-        ? [parseInt(level.slice(1)), entry_text]
-        : config.settings.slate.topLevelTargetElements.includes(type)
-        ? [parseInt(type.slice(1)), plaintext]
-        : null;
-    },
-  };
-
-  // Make draft js compatible with ToC
-  config.blocks.blocksConfig.text = {
-    ...config.blocks.blocksConfig.text,
-    restricted: true,
-    tocEntry: (block = {}) => {
-      const draft = redraft(
-        block.text,
-        config.settings.richtextViewSettings.ToHTMLRenderers,
-        config.settings.richtextViewSettings.ToHTMLOptions,
-      );
-      const type = draft?.[0]?.[0]?.type;
-
-      return config.settings.slate.topLevelTargetElements.includes(type)
-        ? [parseInt(type.slice(1)), block.text.blocks[0].text]
-        : null;
-    },
-  };
-
-  config.blocks.blocksConfig.slate = slateBlockConfig;
-  config.blocks.blocksConfig.detachedSlate = {
-    ...config.blocks.blocksConfig.slate,
-    id: 'detachedSlate',
-    title: 'Detached Slate',
-    edit: (props) => <TextBlockEdit {...props} detached />,
-    restricted: true,
-  };
-
-  if (config.blocks.blocksConfig.gridBlock) {
-    // This is required in order to initialize the inner blocksConfig
-    // for the grid block, since the slate block lives in an add-on
-    // it should be responsible to fill itself into the grid configuration
-    config.blocks.blocksConfig.gridBlock.blocksConfig.slate = slateBlockConfig;
-  }
-
-  return config;
-}

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

@@ -1,58 +0,0 @@
-import { Transforms } from 'slate';
-import config from '@plone/volto/registry';
-import {
-  isCursorInList,
-  isCursorAtListBlockStart,
-  deconstructToVoltoBlocks,
-} from '@plone/volto-slate/utils';
-
-/**
- * Handle the new Volto blocks created by `deconstructToVoltoBlocks`.
- * @param {Editor} editor The Slate editor object
- * @param {string[]} newIds The IDs of the newly created Volto blocks.
- */
-const handleNewVoltoBlocks = (editor, newIds) => {
-  const props = editor.getBlockProps();
-  props.onSelectBlock(newIds[0]);
-};
-
-/**
- * Handles the Backspace key press event in the given `editor`.
- *
- * @param {Editor} editor
- * @param {Event} event
- */
-export function backspaceInList({ editor, event }) {
-  // If the cursor is not in a list, nothing special.
-  if (!isCursorInList(editor)) return false;
-
-  if (isCursorAtListBlockStart(editor)) {
-    const { slate } = config.settings;
-    const blockProps = editor.getBlockProps();
-    const { data } = blockProps;
-
-    // Can't split if block is required
-    if (data?.required) return;
-
-    // Raise all LI-s as direct children of the editor.
-    // TODO: add check for path depth
-    // Error: Cannot lift node at a path [0] because it has a depth of less
-    // than `2`.
-    Transforms.liftNodes(editor, {
-      match: (n, path) => {
-        // console.log('lift', n, path);
-        return path.length > 1 && n.type === slate.listItemType;
-      },
-    });
-
-    // Convert all the selection to be of type `slate.defaultBlockType` (by
-    // default 'p' or paragraph).
-    Transforms.setNodes(editor, { type: slate.defaultBlockType });
-
-    deconstructToVoltoBlocks(editor).then((newIds) => {
-      handleNewVoltoBlocks(editor, newIds);
-    });
-
-    return true;
-  }
-}

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

@@ -1,3 +0,0 @@
-export function breakBlocks({ editor, event }) {
-  return true;
-}

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

@@ -1,7 +0,0 @@
-export const cancelEsc = ({ editor, event }) => {
-  // TODO: this doesn't work, escape canceling doesn't work.
-  event.stopPropagation();
-  event.nativeEvent.stopImmediatePropagation();
-  event.preventDefault();
-  return true;
-};

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

@@ -1,240 +0,0 @@
-import { Editor, Path, Transforms } from 'slate';
-import {
-  isCursorInList,
-  deconstructToVoltoBlocks,
-  getCurrentListItem,
-  mergeWithNextList,
-  mergeWithPreviousList,
-} from '@plone/volto-slate/utils';
-import config from '@plone/volto/registry';
-
-/**
- * @function indentListItems
- * @param {Editor} editor
- * @param {Event} event
- *
- * This bit is quite involved. You need a good understanding of Slate API and
- * Slate's DOM-like behaviour.
- *
- * The markup we're trying to produce is like:
- *
- * ```
- *  <ul>
- *    <li>something</li>
- *    <ul>
- *      <li>else</li>
- *    </ul>
- *  </ul>
- * ```
- *
- * Although not the cleanest, there are numerous advantages to having lists like
- * this:
- * - Code is a lot cleaner, easy to understand and maintain
- * - Google Docs produces the same type of lists
- * - HTML produced by LibreWriter (as witnesed in clipboard transfer) is same
- *
- * See https://github.com/eea/volto-slate/releases/tag/ul_inside_li for an
- * implementation that "inlines" the <ul> tags inside <li>. It's not pretty.
- */
-export function indentListItems({ editor, event }) {
-  // TODO: test if the cursor is at the beginning of the list item
-
-  // If the text cursor is not in a list, then do nothing.
-  if (!isCursorInList(editor)) {
-    return;
-  } else {
-    // Else prevent the default event handling and bubbling.
-    event.preventDefault();
-    event.stopPropagation();
-
-    // If Shift & Ctrl, decrease multiple items depth. If Shift & !Ctrl,
-    // decrease item depth. If !Shift & Ctrl, increase multiple item depth. If
-    // !Shift & !Ctrl, increase item depth.
-    return event.shiftKey
-      ? event.ctrlKey
-        ? decreaseMultipleItemsDepth(editor, event)
-        : decreaseItemDepth(editor, event)
-      : event.ctrlKey
-      ? increaseMultipleItemDepth(editor, event)
-      : increaseItemDepth(editor, event);
-  }
-}
-
-/**
- * Handle the new Volto blocks created by `deconstructToVoltoBlocks`.
- * @param {Editor} editor The Slate editor object as customized by the
- * volto-slate addon.
- * @param {string[]} newIds The IDs of the newly created Volto blocks.
- */
-const handleNewVoltoBlocks = (editor, blockIds) => {
-  const props = editor.getBlockProps();
-  props.onSelectBlock(blockIds[blockIds.length - 1]);
-};
-
-/**
- * @function decreaseItemDepth
- *
- * Decreases indent level of a single list item.
- *
- * @param {Editor} editor
- * @param {Event} event
- */
-export function decreaseItemDepth(editor, event) {
-  const { slate } = config.settings;
-
-  // Current list item being unindented
-  const [listItemNode, listItemPath] = getCurrentListItem(editor);
-
-  // The ul/ol that holds the current list item
-  const [, parentListPath] = Editor.parent(editor, listItemPath);
-
-  // TODO: when unindenting a sublist item, it should take its next siblings
-  // with it as a sublist
-  const listItemRef = Editor.pathRef(editor, listItemPath);
-
-  // TODO: please clarify, we unwrap at list item path but we only unwrap nodes
-  // that match list types, but list item type is different from all list types:
-  Transforms.unwrapNodes(editor, {
-    at: listItemPath,
-    split: true,
-    mode: 'lowest',
-    match: (node) => slate.listTypes.includes(node.type),
-  });
-
-  /**
-   * This condition is the same as "listItemRef.current is not the root editor
-   * node or one if its children".
-   */
-  function getCondition1() {
-    return listItemRef.current.length > 1;
-  }
-
-  /**
-   * @returns The current parent Node of the PathRef linked to the initial list
-   * item that we want deindented.
-   */
-  function getParent() {
-    return Path.parent(listItemRef.current);
-  }
-
-  // Merge with any previous <ul/ol> list
-  if (getCondition1()) mergeWithPreviousList(editor, getParent());
-
-  // Merge with any next <ul/ol> list
-  if (getCondition1()) mergeWithNextList(editor, getParent());
-
-  if (parentListPath.length === 1) {
-    // Our parent is at root, just under the Editor, where just block nodes can
-    // be, and the user wants to break out so we unwrap the list item. Usually
-    // this means making the list item a `p` just below the Editor in the
-    // document tree, keeping its contents.
-    Transforms.setNodes(
-      editor,
-      { type: slate.defaultBlockType },
-      {
-        at: listItemRef.current,
-        match: (node) => node === listItemNode,
-      },
-    );
-  }
-
-  listItemRef.unref();
-
-  // If we have more then one child in the editor root, break to volto blocks
-  if (editor.children.length > 1) {
-    deconstructToVoltoBlocks(editor).then((newIds) => {
-      handleNewVoltoBlocks(editor, newIds);
-    });
-  }
-
-  return true;
-}
-
-/**
- * Increases the depth (indent level) of a single list item.
- *
- * @param {Editor} editor
- * @param {Event} event
- */
-export function increaseItemDepth(editor, event) {
-  // test if there's a sibling ul element above (in this case we insert at end)
-  // or below (then we insert at top)
-
-  // Get the current list item's path.
-  const [, listItemPath] = getCurrentListItem(editor);
-
-  // Get the current list item's parent Node.
-  const [parentList] = Editor.parent(editor, listItemPath);
-
-  const { slate } = config.settings;
-  const { type } = parentList;
-
-  // If the parent is not a list
-  if (!slate.listTypes.includes(type)) {
-    // Do not increase any indent level. And also, this situation shows that
-    // there is a LI inside something that is not a list, and this means that
-    // something broke the data in the Slate document. TODO: Maybe throw an
-    // exception?
-    return false; // false means that the event was not practically handled
-  }
-
-  /**
-   * Create a list of the same type as the parent list and put the specified
-   * list item in it, then put the new list inside the parent list.
-   */
-  function wrapListItem() {
-    Transforms.wrapNodes(
-      editor,
-      // `children` property is added automatically as an empty array then
-      // normalized
-      { type: type },
-      {
-        at: listItemPath,
-      },
-    );
-  }
-
-  // If the parent list is just below the Editor node
-  if (parentList.children.length === 1) {
-    // There should be just one block node inside the Editor node in volto-slate
-    // (what about table cells? currently they allow multiple paragraphs in
-    // them), so there should be no previous or next sibling.
-    wrapListItem();
-    return true;
-  }
-
-  wrapListItem();
-
-  // listItemPath was wrapped in a node, so it now points to a list
-  const currentListRef = Editor.pathRef(editor, listItemPath);
-
-  // Merge with any previous <ul/ol> list
-  mergeWithPreviousList(editor, currentListRef.current);
-
-  // Merge with any next <ul/ol> list
-  mergeWithNextList(editor, currentListRef.current);
-
-  currentListRef.unref();
-
-  return true;
-}
-
-/**
- * [Not implemented] Indents current list item + plus siblings that come after
- * it.
- * @param {Editor} editor
- * @param {Event} event
- */
-export function increaseMultipleItemDepth(editor, event) {
-  // TODO: implement
-}
-
-/**
- * [Not implemented] Un-indents current list item + plus siblings that come
- * after it.
- * @param {Editor} editor
- * @param {Event} event
- */
-export function decreaseMultipleItemsDepth(editor, event) {
-  // TODO: implement
-}

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

@@ -1,52 +0,0 @@
-import config from '@plone/volto/registry';
-
-export * from './backspaceInList';
-export * from './breakBlocks';
-export * from './indentListItems';
-export * from './joinBlocks';
-export * from './moveListItems';
-export * from './softBreak';
-export * from './traverseBlocks';
-export * from './unwrapEmptyString';
-export * from './slashMenu';
-export * from './cancelEsc';
-
-/**
- * Takes all the handlers from `slate.textblockKeyboardHandlers` that are
- * associated with the key that was pressed to generate the `event` and runs
- * them all until one of them returns `true`, moment when the rest of the
- * handlers are skipped.
- * @param {Editor} editor
- * @param {KeyboardEvent} event
- */
-export function handleKey({ editor, event }) {
-  const { slate } = config.settings;
-
-  const handlers = slate.textblockKeyboardHandlers[event.key];
-
-  if (handlers) {
-    // a handler can return `true` to signify it has handled the event in this
-    // case, the execution flow is stopped
-    return handlers.find((handler) => handler({ editor, event }));
-  }
-}
-
-/**
- * Takes all the handlers from `slate.textblockDetachedKeyboardHandlers` that are
- * associated with the key that was pressed to generate the `event` and runs
- * them all until one of them returns `true`, moment when the rest of the
- * handlers are skipped.
- * @param {Editor} editor
- * @param {KeyboardEvent} event
- */
-export function handleKeyDetached({ editor, event }) {
-  const { slate } = config.settings;
-
-  const handlers = slate.textblockDetachedKeyboardHandlers[event.key];
-
-  if (handlers) {
-    // a handler can return `true` to signify it has handled the event in this
-    // case, the execution flow is stopped
-    return handlers.find((handler) => handler({ editor, event }));
-  }
-}