@eeacms/volto-eea-website-theme 4.3.8 → 4.4.0

package/src/customizations/@plone/volto-slate/utils/selection.js

@@ -0,0 +1,271 @@
+import castArray from 'lodash/castArray';
+import cloneDeep from 'lodash/cloneDeep';
+import { Editor, Transforms, Range, Node, Text } from 'slate';
+import { ReactEditor } from 'slate-react';
+import { isCursorInList } from '@plone/volto-slate/utils/lists';
+import { makeEditor } from '@plone/volto-slate/utils/editor';
+import { LI } from '@plone/volto-slate/constants';
+import config from '@plone/volto/registry';
+
+// Shadow patch for #8347: Backspace behaving erratically near a styled or
+// link text.  This file replaces @plone/volto-slate/src/utils/selection.js
+// (v18.10.0) with the fixed isCursorAtBlockStart that only returns true when
+// the caret is at the very first leaf of the block, not at offset 0 of any
+// leaf.  Remove this shadow once a volto-slate release containing the fix
+// is published and the dependency is bumped in frontend/package.json.
+
+/**
+ * firstLeafPath.
+ *
+ * @param {} editor
+ */
+function firstLeafPath(editor) {
+  if (!editor.children?.length) return null;
+  let [node, path] = Node.first(editor, []);
+  while (!Text.isText(node)) {
+    if (!node.children?.length) return null;
+    [node, path] = Node.first(editor, path);
+  }
+  return path;
+}
+
+/**
+ * isAtFirstLeaf.
+ *
+ * @param {} editor
+ * @param {} path
+ */
+function isAtFirstLeaf(editor, path) {
+  const first = firstLeafPath(editor);
+  if (!first) return false;
+  return path.length === first.length && path.every((n, i) => n === first[i]);
+}
+
+/**
+ * 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;
+    if (anchor.offset !== 0) return false;
+    if (!editor.children?.length) return false;
+    return isAtFirstLeaf(editor, anchor.path);
+  }
+  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;
+  }
+}

package/src/customizations/@plone/volto-slate/utils/selection.js.diff

@@ -0,0 +1,63 @@
+--- a/selection.js
++++ b/selection.js
+@@ -1,12 +1,46 @@
+ import castArray from 'lodash/castArray';
+ import cloneDeep from 'lodash/cloneDeep';
+-import { Editor, Transforms, Range, Node } from 'slate';
++import { Editor, Transforms, Range, Node, Text } from 'slate';
+ import { ReactEditor } from 'slate-react';
+ import { isCursorInList } from '@plone/volto-slate/utils/lists';
+ import { makeEditor } from '@plone/volto-slate/utils/editor';
+ import { LI } from '@plone/volto-slate/constants';
+ import config from '@plone/volto/registry';
+
++// Shadow patch for #8347: Backspace behaving erratically near a styled or
++// link text.  This file replaces @plone/volto-slate/src/utils/selection.js
++// (v18.10.0) with the fixed isCursorAtBlockStart that only returns true when
++// the caret is at the very first leaf of the block, not at offset 0 of any
++// leaf.  Remove this shadow once a volto-slate release containing the fix
++// is published and the dependency is bumped in frontend/package.json.
++
++/**
++ * firstLeafPath.
++ *
++ * @param {} editor
++ */
++function firstLeafPath(editor) {
++  if (!editor.children?.length) return null;
++  let [node, path] = Node.first(editor, []);
++  while (!Text.isText(node)) {
++    if (!node.children?.length) return null;
++    [node, path] = Node.first(editor, path);
++  }
++  return path;
++}
++
++/**
++ * isAtFirstLeaf.
++ *
++ * @param {} editor
++ * @param {} path
++ */
++function isAtFirstLeaf(editor, path) {
++  const first = firstLeafPath(editor);
++  if (!first) return false;
++  return path.length === first.length && path.every((n, i) => n === first[i]);
++}
++
+ /**
+  * Get the nodes with a type included in `types` in the selection (from root to leaf).
+  *
+@@ -82,8 +116,9 @@
+
+   if (editor.selection && Range.isCollapsed(editor.selection)) {
+     const { anchor } = editor.selection;
+-    // Check if cursor is at offset 0 of any leaf node (not just the first one)
+-    return anchor.offset === 0;
++    if (anchor.offset !== 0) return false;
++    if (!editor.children?.length) return false;
++    return isAtFirstLeaf(editor, anchor.path);
+   }
+   return false;
+ }
+ 

package/src/customizations/@plone/volto-slate/utils/selection.js.md

@@ -0,0 +1,7 @@
+Shadow patch for #8347: Backspace behaving erratically near a styled or link text. See:
+
+- https://github.com/plone/volto/issues/8347
+- https://github.com/plone/volto/pull/8355
+
+Remove this shadow once a @plone/volto-slate release containing the fix
+is published and the dependency is bumped in frontend/package.json.

package/src/customizations/@plone/volto-slate/utils/selection.test.js

@@ -0,0 +1,116 @@
+import { isCursorAtBlockStart } from './selection';
+
+// `isCursorAtBlockStart` only inspects `editor.selection` and `editor.children`,
+// so plain editor-shaped objects are enough (no full Volto config registry).
+const makeEditor = (children, selection) => ({ children, selection });
+const at = (path, offset) => ({ path, offset });
+const collapsed = (path, offset) => ({
+  anchor: at(path, offset),
+  focus: at(path, offset),
+});
+
+describe('isCursorAtBlockStart (shadow patch for #8347)', () => {
+  it('returns true when the caret is at the first leaf of the block', () => {
+    const editor = makeEditor(
+      [{ type: 'p', children: [{ text: 'Hello' }] }],
+      collapsed([0, 0], 0),
+    );
+    expect(isCursorAtBlockStart(editor)).toBe(true);
+  });
+
+  it('returns true for the first leaf of a nested list item (path [0,0,0])', () => {
+    const editor = makeEditor(
+      [
+        {
+          type: 'ul',
+          children: [
+            {
+              type: 'li',
+              children: [{ text: 'first item' }],
+            },
+          ],
+        },
+      ],
+      collapsed([0, 0, 0], 0),
+    );
+    expect(isCursorAtBlockStart(editor)).toBe(true);
+  });
+
+  it('returns false at offset 0 of a non-first leaf inside a list item (#8347)', () => {
+    // A list item: {text:""} + link + {text:""} — the empty text leaf after
+    // the link is at path [0,0,2]. Backspace there must NOT count as block start.
+    const editor = makeEditor(
+      [
+        {
+          type: 'ul',
+          children: [
+            {
+              type: 'li',
+              children: [
+                { text: '' },
+                {
+                  type: 'link',
+                  data: { url: 'https://demo.plone.org/' },
+                  children: [{ text: 'Plone 6 (this site)' }],
+                },
+                { text: '' },
+              ],
+            },
+          ],
+        },
+      ],
+      collapsed([0, 0, 2], 0),
+    );
+    expect(isCursorAtBlockStart(editor)).toBe(false);
+  });
+
+  it('returns false at offset 0 of a non-first leaf of a plain paragraph', () => {
+    const editor = makeEditor(
+      [
+        {
+          type: 'p',
+          children: [
+            { text: 'before' },
+            {
+              type: 'link',
+              data: { url: 'https://example.com' },
+              children: [{ text: 'link' }],
+            },
+            { text: 'after' },
+          ],
+        },
+      ],
+      collapsed([0, 2], 0),
+    );
+    expect(isCursorAtBlockStart(editor)).toBe(false);
+  });
+
+  it('returns false when the offset is greater than 0', () => {
+    const editor = makeEditor(
+      [{ type: 'p', children: [{ text: 'Hello' }] }],
+      collapsed([0, 0], 2),
+    );
+    expect(isCursorAtBlockStart(editor)).toBe(false);
+  });
+
+  it('returns false when there is no selection', () => {
+    const editor = makeEditor(
+      [{ type: 'p', children: [{ text: 'Hi' }] }],
+      null,
+    );
+    expect(isCursorAtBlockStart(editor)).toBe(false);
+  });
+
+  it('returns false when the selection is expanded', () => {
+    const editor = makeEditor([{ type: 'p', children: [{ text: 'Hello' }] }], {
+      anchor: at([0, 0], 0),
+      focus: at([0, 0], 3),
+    });
+    expect(isCursorAtBlockStart(editor)).toBe(false);
+  });
+
+  it('returns false when the editor has no children', () => {
+    const editor = makeEditor([], collapsed([0, 0], 0));
+    expect(isCursorAtBlockStart(editor)).toBe(false);
+  });
+});