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

package/packages/volto-slate/src/utils/editor.js

@@ -1,31 +0,0 @@
-import { Transforms, createEditor } from 'slate'; // , Transforms
-import { withReact, ReactEditor } from 'slate-react';
-
-import config from '@plone/volto/registry';
-
-export function setEditorContent(editor, block) {
-  Transforms.removeNodes(editor, { at: [0] }); // TODO: at: [] needs rethinking
-  Transforms.insertNodes(editor, block);
-}
-
-export function makeEditor(options = {}) {
-  const { extensions = [] } = options;
-  const { slate } = config.settings;
-  const defaultExtensions = slate.extensions;
-
-  const editor = withReact(createEditor());
-
-  // TODO: also look for MIME Types in the files case
-  editor.dataTransferFormatsOrder = [
-    'application/x-slate-fragment',
-    'text/html',
-    'files',
-    'text/plain',
-  ];
-  editor.dataTransferHandlers = {};
-
-  const plugins = [...defaultExtensions, ...extensions];
-  editor.isSelected = () => ReactEditor.isFocused(editor);
-
-  return plugins.reduce((acc, extender) => extender(acc), editor);
-}

package/packages/volto-slate/src/utils/image.js

@@ -1,25 +0,0 @@
-export function srcToDataUri(url, callback) {
-  // Based on https://github.com/ianstormtaylor/slate-plugins
-  const canvas = window.document.createElement('canvas');
-  const img = window.document.createElement('img');
-
-  if (!canvas.getContext) {
-    return setTimeout(callback, 0, new Error('Canvas is not supported.'));
-  }
-
-  img.onload = () => {
-    const ctx = canvas.getContext('2d');
-    canvas.width = img.width;
-    canvas.height = img.height;
-    ctx.drawImage(img, 0, 0);
-    const dataUri = canvas.toDataURL('image/png');
-    callback(null, dataUri);
-  };
-
-  img.ononerror = () => {
-    callback(new Error('Failed to load image.'));
-  };
-
-  img.setAttribute('crossOrigin', 'anonymous');
-  img.src = url;
-}

package/packages/volto-slate/src/utils/index.js

@@ -1,11 +0,0 @@
-export * from './blocks';
-export * from './editor';
-export * from './internals';
-export * from './lists';
-export * from './marks';
-export * from './nodes';
-export * from './ops';
-export * from './random';
-export * from './selection';
-export * from './volto-blocks';
-export * from './mime-types';

package/packages/volto-slate/src/utils/internals.js

@@ -1,46 +0,0 @@
-import { Editor } from 'slate';
-
-/**
- * @param {Point} point The point to verify.
- * @returns {boolean} Whether it refers to a (leaf) Text node in the closest-to-root level it can be.
- */
-export const isPointAtRoot = (point) => point.path.length === 2;
-
-/**
- * @summary Returns true if the specified range has any of its edges at the
- * closest-to-root level a Point can be (a Point can only reffer to Text
- * nodes).
- * @description It does not assure the caller about whether the contents of the
- * range are at block level, but it does assure that one of the edges of the
- * given range is at closest-to-root level it can be. A range can cover inner
- * node children though. If through "inner node child" we also understand the
- * closest-to-root level Leaf nodes can be (taking into account this: Editor
- * - level 0, blocks - level 1, blocks and leaves - level 2, it is level 2)
- *   then the cursor specified by the given range can include inner node
- *   childs and the return value can be true at the same time. Practically the
- *   cursor is always at block level since nothing exists outside blocks in
- *   Slate and is always in Text nodes since a Point can only reffer to an
- *   offset in a Text node.
- * @param {Range} range Must be a valid `Range`, not `null` or `undefined`.
- * @returns {boolean}
- */
-export const isRangeAtRoot = (range) => {
-  return isPointAtRoot(range.anchor) || isPointAtRoot(range.focus);
-};
-
-/**
- * The block in a valid Slate document according to our schema can be here
- * either a Slate block that touches the root or a Slate inline (the other
- * possibility, a leaf Text node is excluded because we are taking the
- * parent of the selection).
- *
- * @param {Editor} editor
- * @param {Range} range
- *
- * @returns {boolean} true if the range (usually the selection) can be split
- * into two editors (usually Volto Slate Text blocks)
- */
-export const rangeIsInSplittableNode = (editor, range) => {
-  const [block] = Editor.parent(editor, range);
-  return range && (isRangeAtRoot(range) || editor.isInline(block));
-};

package/packages/volto-slate/src/utils/lists.js

@@ -1,92 +0,0 @@
-import { Editor, Range, Transforms, Path } from 'slate';
-import config from '@plone/volto/registry';
-
-export function isCursorInList(editor) {
-  const { slate } = config.settings;
-
-  const result = Editor.above(editor, {
-    match: (n) => n.type === slate.listItemType,
-  });
-
-  if (!result) {
-    return false;
-  }
-
-  const [listItemWithSelection] = result;
-
-  // whether the selection is inside a list item
-  const listItemCase =
-    Range.isCollapsed(editor.selection) && listItemWithSelection;
-
-  return listItemCase;
-}
-
-export function isCursorAtListBlockStart(editor) {
-  if (editor.selection && Range.isCollapsed(editor.selection)) {
-    const { anchor } = editor.selection;
-    return anchor.offset > 0
-      ? false
-      : anchor.path.length === 3 &&
-          anchor.path.reduce((acc, x) => acc + x, 0) === 0;
-  }
-}
-
-const getPreviousSiblingPath = function (path) {
-  // Doesn't raise an error if no previous sibling exists
-  const last = path[path.length - 1];
-
-  if (last <= 0) {
-    return null;
-  }
-
-  return path.slice(0, -1).concat(last - 1);
-};
-
-export function mergeWithPreviousList(editor, listPath) {
-  const { slate } = config.settings;
-  const prevSiblingPath = getPreviousSiblingPath(listPath);
-  const [currentList] = Editor.node(editor, listPath);
-  if (prevSiblingPath) {
-    const [prevSibling] = Editor.node(editor, prevSiblingPath);
-
-    if (slate.listTypes.includes(prevSibling.type)) {
-      Transforms.mergeNodes(editor, {
-        // match: (node) => slate.listTypes.includes(node.type),
-        match: (node) => node === prevSibling || node === currentList,
-        mode: 'highest',
-        at: listPath,
-      });
-    }
-  }
-}
-
-export function mergeWithNextList(editor, listPath) {
-  const { slate } = config.settings;
-  const [currentList] = Editor.node(editor, listPath);
-  const [parent] = Editor.parent(editor, listPath);
-
-  if (parent.children.length - 1 > listPath[listPath.length - 1]) {
-    const nextSiblingPath = Path.next(listPath);
-    const [nextSibling] = Editor.node(editor, nextSiblingPath);
-
-    if (slate.listTypes.includes(nextSibling.type)) {
-      Transforms.mergeNodes(editor, {
-        match: (node) => {
-          return node === currentList || node === nextSibling;
-        },
-        at: nextSiblingPath,
-        mode: 'highest',
-      });
-    }
-  }
-}
-
-export function getCurrentListItem(editor) {
-  const { slate } = config.settings;
-  const [match] = Editor.nodes(editor, {
-    at: editor.selection.anchor.path,
-    match: (n) => n.type === slate.listItemType,
-    mode: 'lowest',
-  });
-  return match || []; // empty entry if nothing is found
-}

package/packages/volto-slate/src/utils/marks.js

@@ -1,104 +0,0 @@
-import React from 'react';
-import { Editor, Transforms, Range, Text } from 'slate';
-
-export function isMarkActive(editor, format) {
-  // TODO: this implementation is not ok. LibreOffice Writer only shows
-  // mark button as active if the mark is applied to the entire selected range
-  // Here, it seems, the mark doesn't need to cover the entire selection,
-  // which is wrong
-  let marks;
-  try {
-    marks = Editor.marks(editor);
-  } catch (ex) {
-    // bug in Slate, recently appears only in Cypress context, more exactly when I press Enter inside a numbered list first item to produce a split (resulting two list items) (not sure if manually inside the Cypress browser but automatically it surely appears)
-    // if (
-    //   ex.message ===
-    //   'Cannot get the leaf node at path [0,0] because it refers to a non-leaf node: [object Object]' // also with [0,1]
-    // ) {
-    marks = null;
-    // } else {
-    //   throw ex;
-    // }
-  }
-  return marks ? marks[format] === true : false;
-}
-
-function addMark(editor, key, value) {
-  const { selection } = editor;
-
-  if (selection) {
-    if (Range.isExpanded(selection)) {
-      Transforms.setNodes(
-        editor,
-        { [key]: value },
-        {
-          match: (node) => {
-            // console.log('node', node);
-            return Text.isText(node) || editor.isVoid(node);
-          },
-          split: true,
-        },
-      );
-    } else {
-      const marks = {
-        ...(Editor.marks(editor) || {}),
-        [key]: value,
-      };
-
-      editor.marks = marks;
-      editor.onChange();
-    }
-  }
-}
-
-export function toggleMark(editor, format) {
-  const isActive = isMarkActive(editor, format);
-
-  if (isActive) {
-    Editor.removeMark(editor, format);
-  } else {
-    // don't apply marks inside inlines (such as footnote) because
-    // that splits the footnote into multiple footnotes
-    addMark(editor, format, true);
-    // if (isSelectionInline(editor)) {
-    //   addMark(editor, format, true);
-    // }
-  }
-}
-
-/*
- * Replaces inline text elements with a wrapper result:
- *
- * Leaves are wrapped and non-leaves are cloned. Empty leaves are removed.
- */
-export function wrapInlineMarkupText(children, wrapper) {
-  if (typeof children === 'string') {
-    return children ? wrapper(children) : null;
-  }
-
-  // TODO: find the deepest child that needs to be replaced.
-  // TODO: note: this might trigger warnings about keys
-  if (Array.isArray(children)) {
-    return children
-      .map((child) => {
-        if (typeof child === 'string' && child.length >= 1) {
-          return wrapper(children);
-        }
-        if (typeof child === 'string' && child.length === 0) {
-          return null;
-        }
-        return React.cloneElement(
-          child,
-          child.props,
-          wrapInlineMarkupText(child.props.children, wrapper),
-        );
-      })
-      .filter((child) => !!child);
-  }
-
-  return React.cloneElement(
-    children,
-    children.props,
-    wrapInlineMarkupText(children.props.children, wrapper),
-  );
-}

package/packages/volto-slate/src/utils/mime-types.js

@@ -1,24 +0,0 @@
-export class MIMETypeName {
-  constructor(name) {
-    if (name.includes('/')) {
-      this.name = name;
-      this.firstName = name.split('/')[0];
-      this.secondName = name.split('/')[1];
-    } else {
-      this.firstName = name;
-      this.secondName = null;
-    }
-  }
-
-  /**
-   * @param {MIMETypeName} mt
-   */
-  matches(mt) {
-    return (
-      this.firstName === mt.firstName &&
-      (this.secondName && mt.secondName
-        ? this.secondName === mt.secondName
-        : true)
-    );
-  }
-}

package/packages/volto-slate/src/utils/nodes.js

@@ -1,4 +0,0 @@
-/**
- * Is it the first child of the parent
- */
-export const isFirstChild = (path) => path[path.length - 1] === 0;

package/packages/volto-slate/src/utils/ops.js

@@ -1,20 +0,0 @@
-import {
-  getFragmentFromBeginningOfEditorToStartOfSelection,
-  getFragmentFromStartOfSelectionToEndOfEditor,
-} from './selection';
-
-/*
- * Gets two fragments: left, right: before selection, after selection
- */
-export function splitEditorInTwoFragments(editor, initialSelection) {
-  initialSelection = initialSelection || editor.selection;
-  let left = getFragmentFromBeginningOfEditorToStartOfSelection(
-    editor,
-    initialSelection,
-  );
-  let right = getFragmentFromStartOfSelectionToEndOfEditor(
-    editor,
-    initialSelection,
-  );
-  return [left, right];
-}

package/packages/volto-slate/src/utils/random.js

@@ -1,17 +0,0 @@
-// Based on https://github.com/ai/nanoid/blob/master/non-secure/index.js
-
-// This alphabet uses `A-Za-z0-9_-` symbols. The genetic algorithm helped
-// optimize the gzip compression for this alphabet.
-const urlAlphabet =
-  'ModuleSymbhasOwnPr-0123456789ABCDEFGHNRVfgctiUvz_KqYTJkLxpZXIjQW';
-
-export const nanoid = (size = 21) => {
-  let id = '';
-  // A compact alternative for `for (var i = 0; i < step; i++)`.
-  let i = size;
-  while (i--) {
-    // `| 0` is more compact and faster than `Math.floor()`.
-    id += urlAlphabet[(Math.random() * 64) | 0];
-  }
-  return id;
-};

package/packages/volto-slate/src/utils/selection.js

@@ -1,236 +0,0 @@
-import { castArray, cloneDeep } from 'lodash';
-import { Editor, Transforms, Range, Node } from 'slate';
-import { ReactEditor } from 'slate-react';
-import { isCursorInList, makeEditor } from '@plone/volto-slate/utils';
-import { LI } from '@plone/volto-slate/constants';
-import config from '@plone/volto/registry';
-
-/**
- * Get the nodes with a type included in `types` in the selection (from root to leaf).
- *
- * @param {} editor
- * @param {} types
- * @param {} options
- */
-export function getSelectionNodesByType(editor, types, options = {}) {
-  types = castArray(types);
-
-  return Editor.nodes(editor, {
-    match: (n) => {
-      return types.includes(n.type);
-    },
-    ...options,
-  });
-}
-
-/**
- * Is there a node with a type included in `types` in the selection (from root to leaf).
- */
-export function isNodeInSelection(editor, types, options = {}) {
-  const [match] = getSelectionNodesByType(editor, types, options);
-  return !!match;
-}
-
-/**
- * getSelectionNodesArrayByType.
- *
- * @param {} editor
- * @param {} types
- * @param {} options
- */
-export function getSelectionNodesArrayByType(editor, types, options = {}) {
-  return Array.from(getSelectionNodesByType(editor, types, options));
-}
-
-/**
- * getMaxRange.
- *
- * @param {} editor
- *
- * TODO: is [0] ok as a path?
- */
-export function getMaxRange(editor) {
-  const maxRange = {
-    anchor: Editor.start(editor, [0]),
-    focus: Editor.end(editor, [0]),
-  };
-  return maxRange;
-}
-
-/**
- * selectAll.
- *
- * @param {} editor
- */
-export function selectAll(editor) {
-  Transforms.select(editor, getMaxRange(editor));
-}
-
-// In the isCursorAtBlockStart/End functions maybe use a part of these pieces of code:
-// Range.isCollapsed(editor.selection) &&
-// Point.equals(editor.selection.anchor, Editor.start(editor, []))
-
-/**
- * isCursorAtBlockStart.
- *
- * @param {} editor
- */
-export function isCursorAtBlockStart(editor) {
-  // It does not work properly with lists
-
-  if (editor.selection && Range.isCollapsed(editor.selection)) {
-    const { anchor } = editor.selection;
-    return anchor.offset > 0
-      ? false
-      : anchor.path.reduce((acc, x) => acc + x, 0) === 0;
-    // anchor.path.length === 2 &&
-  }
-  return false;
-}
-
-/**
- * isCursorAtBlockEnd.
- *
- * @param {} editor
- */
-export function isCursorAtBlockEnd(editor) {
-  // fixSelection(editor);
-
-  // if the selection is collapsed
-  if (editor.selection && Range.isCollapsed(editor.selection)) {
-    const anchor = editor.selection?.anchor || {};
-
-    // the last block node in the editor
-    const [node] = Node.last(editor, []);
-
-    if (
-      // if the node with the selection is the last block node
-      Node.get(editor, anchor.path) === node &&
-      // if the collapsed selection is at the end of the last block node
-      anchor.offset === node.text.length
-    ) {
-      return true;
-    }
-  }
-  return false;
-}
-
-const defaultListItemValue = () => {
-  const { slate } = config.settings;
-  const dv = slate.defaultValue();
-  dv[0].type = LI;
-  return dv;
-};
-
-/**
- * getFragmentFromStartOfSelectionToEndOfEditor.
- *
- * @param {} editor
- */
-export function getFragmentFromStartOfSelectionToEndOfEditor(
-  editor,
-  initialSelection,
-) {
-  if (typeof initialSelection === 'undefined') {
-    initialSelection = editor.selection;
-  }
-
-  const { slate } = config.settings;
-  const range = Editor.range(
-    editor,
-    Range.isBackward(initialSelection)
-      ? initialSelection.focus
-      : initialSelection.anchor,
-    Editor.end(editor, []),
-  );
-
-  // this is the case when the fragment is empty, and we must return
-  // empty fragment but without formatting
-  if (Range.isCollapsed(range)) {
-    if (isCursorInList(editor)) {
-      return defaultListItemValue();
-    } else {
-      return slate.defaultValue();
-    }
-  }
-
-  // immer doesn't like editor.savedSelection
-  const newEditor = makeEditor();
-  newEditor.children = cloneDeep(editor.children);
-  return Editor.fragment(newEditor, range);
-}
-
-/**
- * getFragmentFromBeginningOfEditorToStartOfSelection.
- *
- * @param {} editor
- */
-export function getFragmentFromBeginningOfEditorToStartOfSelection(
-  editor,
-  initialSelection,
-) {
-  if (typeof initialSelection === 'undefined') {
-    initialSelection = editor.selection;
-  }
-
-  // immer doesn't like editor.savedSelection
-  // TODO: there's a bug here related to splitting lists
-  const newEditor = makeEditor();
-  newEditor.children = cloneDeep(editor.children);
-
-  return Editor.fragment(
-    newEditor,
-    Editor.range(
-      newEditor,
-      [],
-      Range.isBackward(initialSelection)
-        ? initialSelection.focus
-        : initialSelection.anchor,
-    ),
-  );
-}
-
-/**
- * @returns {boolean} true if editor contains a range selection (active
- * selection or at least a saved selection)
- * @param {Editor} editor
- */
-export function hasRangeSelection(editor, useSavedSelection = true) {
-  const { selection } = editor;
-  const savedSelection = editor.getSavedSelection();
-
-  const range = ReactEditor.isFocused(editor)
-    ? selection || (useSavedSelection ? savedSelection : null)
-    : savedSelection;
-
-  if (!range) {
-    // console.log('no range', editor);
-    return;
-  }
-
-  const res = Range.isExpanded(range);
-  // console.log('call hasRange', res);
-  return res;
-}
-
-export function parseDefaultSelection(editor, defaultSelection) {
-  if (defaultSelection) {
-    if (defaultSelection === 'start') {
-      const [, path] = Node.first(editor, []);
-      const newSel = {
-        anchor: { path, offset: 0 },
-        focus: { path, offset: 0 },
-      };
-      return newSel;
-    }
-    if (defaultSelection === 'end') {
-      const [leaf, path] = Node.last(editor, []);
-      const newSel = {
-        anchor: { path, offset: (leaf.text || '').length },
-        focus: { path, offset: (leaf.text || '').length },
-      };
-      return newSel;
-    }
-    return defaultSelection;
-  }
-}