@plone/volto-slate 19.0.3 → 19.0.4

package/CHANGELOG.md

@@ -8,6 +8,12 @@
 
 <!-- towncrier release notes start -->
 
+## 19.0.4 (2026-07-16)
+
+### Bugfix
+
+- Fix Backspace behaving erratically near a styled or link text and fix cursor position after merging two same-type slate blocks via Backspace. @avoinea [#8347](https://github.com/plone/volto/issues/8347)
+
 ## 19.0.3 (2026-07-01)
 
 ### Bugfix

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plone/volto-slate",
-  "version": "19.0.3",
+  "version": "19.0.4",
   "description": "Slate.js integration with Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/utils/selection.js

@@ -1,12 +1,34 @@
 import castArray from 'lodash/castArray';
 import cloneDeep from 'lodash/cloneDeep';
-import { Editor, Transforms, Range, Node } from 'slate';
+import { Editor, Transforms, Range, Node, Path } 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';
 
+/**
+ * firstLeafPath.
+ *
+ * @param {} editor
+ */
+function firstLeafPath(editor) {
+  if (!editor.children?.length) return null;
+  return Node.first(editor, [])[1];
+}
+
+/**
+ * isAtFirstLeaf.
+ *
+ * @param {} editor
+ * @param {} path
+ */
+function isAtFirstLeaf(editor, path) {
+  const first = firstLeafPath(editor);
+  if (!first) return false;
+  return Path.equals(path, first);
+}
+
 /**
  * Get the nodes with a type included in `types` in the selection (from root to leaf).
  *
@@ -82,8 +104,9 @@ export function isCursorAtBlockStart(editor) {
 
   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/utils/selection.test.js

@@ -0,0 +1,117 @@
+import { describe, it, expect } from 'vitest';
+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', () => {
+  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);
+  });
+});

package/src/utils/volto-blocks.js

@@ -8,7 +8,7 @@ import {
   getBlocksFieldname,
   getBlocksLayoutFieldname,
 } from '@plone/volto/helpers/Blocks/Blocks';
-import { Transforms, Editor, Node } from 'slate';
+import { Transforms, Editor, Node, Text } from 'slate';
 import { serializeNodesToText } from '@plone/volto-slate/editor/render';
 import omit from 'lodash/omit';
 import config from '@plone/volto/registry';
@@ -48,16 +48,30 @@ export function mergeSlateWithBlockBackward(editor, prevBlock, event) {
       ...currentValue.slice(1),
     ];
 
-    cursor = {
-      anchor: {
-        path: [prevValue.length - 1, lastNode.children.length],
-        offset: 0,
-      },
-      focus: {
-        path: [prevValue.length - 1, lastNode.children.length],
-        offset: 0,
-      },
-    };
+    const lastChild = lastNode.children[lastNode.children.length - 1];
+    if (Text.isText(lastChild)) {
+      cursor = {
+        anchor: {
+          path: [prevValue.length - 1, lastNode.children.length - 1],
+          offset: lastChild.text.length,
+        },
+        focus: {
+          path: [prevValue.length - 1, lastNode.children.length - 1],
+          offset: lastChild.text.length,
+        },
+      };
+    } else {
+      cursor = {
+        anchor: {
+          path: [prevValue.length - 1, lastNode.children.length],
+          offset: 0,
+        },
+        focus: {
+          path: [prevValue.length - 1, lastNode.children.length],
+          offset: 0,
+        },
+      };
+    }
   } else {
     // Otherwise, just append the current block content to the previous block
     merged = [...prevValue, ...currentValue];