@plone/volto-slate 18.7.0 → 18.8.0

package/CHANGELOG.md

@@ -8,6 +8,22 @@
 
 <!-- towncrier release notes start -->
 
+## 18.8.0 (2025-12-02)
+
+### Feature
+
+- cross language support and umlaut fix for slash menu @Tishasoumya-02 [#7657](https://github.com/plone/volto/issues/7657)
+
+### Bugfix
+
+- Ensure Delete at end of a text block merges the next text block and removes it; if the next block is non-text (e.g., Description), do nothing. @aryan7081 [#7263](https://github.com/plone/volto/issues/7263)
+
+## 18.7.1 (2025-10-10)
+
+### Bugfix
+
+- Fix Backspace at start of a text block: merge current block into previous inline (no extra newline), delete the current block, and place the caret before the first character of the merged content. Also handle Enter immediately after such inline merge by splitting back into two blocks. @aryan7081 [#7373](https://github.com/plone/volto/issues/7373)
+
 ## 18.7.0 (2025-10-07)
 
 ### Feature

package/package.json

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

package/src/blocks/Text/SlashMenu.jsx

@@ -120,7 +120,7 @@ const PersistentSlashMenu = ({ editor }) => {
   const slashCommand = data.plaintext
     ?.toLowerCase()
     .trim()
-    .match(/^\/([a-z]*)$/);
+    .match(/^\/([\p{L}]*)$/u);
 
   const availableBlocks = React.useMemo(
     () =>
@@ -141,10 +141,12 @@ const PersistentSlashMenu = ({ editor }) => {
         .filter((block) => {
           // typed text is a substring of the title or id
           const title = translateBlockTitle(block, intl).toLowerCase();
+          const originalTitle = block.title.toLowerCase();
           return (
             block.id !== 'slate' &&
             slashCommand &&
-            title.indexOf(slashCommand[1]) !== -1
+            (title.includes(slashCommand[1]) ||
+              originalTitle.includes(slashCommand[1]))
           );
         })
         .sort((a, b) => {

package/src/blocks/Text/index.jsx

@@ -19,6 +19,7 @@ import {
   slashMenu,
   cancelEsc,
 } from './keyboard';
+import { splitAtSeam } from './keyboard/splitAtSeam';
 import { withDeleteSelectionOnEnter } from '@plone/volto-slate/editor/extensions';
 import {
   breakList,
@@ -66,6 +67,7 @@ export default function applyConfig(config) {
       Enter: [
         slashMenu,
         unwrapEmptyString,
+        splitAtSeam,
         softBreak, // Handles shift+Enter as a newline (<br/>)
       ],
       ArrowUp: [

package/src/blocks/Text/keyboard/joinBlocks.js

@@ -5,8 +5,8 @@ import { Editor } from 'slate';
 import {
   getPreviousVoltoBlock,
   getNextVoltoBlock,
-  mergeSlateWithBlockBackward,
   mergeSlateWithBlockForward,
+  mergeSlateWithBlockBackward,
 } from '@plone/volto-slate/utils/volto-blocks';
 import {
   isCursorAtBlockStart,
@@ -48,8 +48,7 @@ export function joinWithPreviousBlock({ editor, event }, intl) {
   const [otherBlock = {}, otherBlockId] = prev;
 
   // Don't join with required blocks
-  if (data?.required || otherBlock?.required || otherBlock['@type'] !== 'slate')
-    return;
+  if (data?.required || otherBlock?.required) return;
 
   event.stopPropagation();
   event.preventDefault();
@@ -76,21 +75,22 @@ export function joinWithPreviousBlock({ editor, event }, intl) {
 
   // Else the editor contains characters, so we merge the current block's
   // `editor` with the block before, `otherBlock`.
-  const cursor = mergeSlateWithBlockBackward(editor, otherBlock);
+  const cursor = mergeSlateWithBlockBackward(editor, otherBlock, event);
 
-  const combined = JSON.parse(JSON.stringify(editor.children));
+  // Get the merged content from the editor
+  const merged = 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 || []),
+    value: merged,
+    plaintext: serializeNodesToText(merged || []),
   });
   const newFormData = deleteBlock(formData, block, intl);
-
   ReactDOM.unstable_batchedUpdates(() => {
     saveSlateBlockSelection(otherBlockId, cursor);
     onChangeField(blocksFieldname, newFormData[blocksFieldname]);
@@ -122,6 +122,10 @@ export function joinWithNextBlock({ editor, event }, intl) {
   const { properties, onChangeField } = editor.getBlockProps();
   const [otherBlock = {}, otherBlockId] = getNextVoltoBlock(index, properties);
 
+  if (!otherBlockId) {
+    return false;
+  }
+
   // Don't join with required blocks
   if (data?.required || otherBlock?.required || otherBlock['@type'] !== 'slate')
     return;
@@ -129,30 +133,51 @@ export function joinWithNextBlock({ editor, event }, intl) {
   event.stopPropagation();
   event.preventDefault();
 
-  mergeSlateWithBlockForward(editor, otherBlock);
+  const blocksFieldname = getBlocksFieldname(properties);
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
 
-  // const cursor = JSON.parse(JSON.stringify(editor.selection));
-  const combined = JSON.parse(JSON.stringify(editor.children));
+  // If next block is not a slate text block, do nothing
+  if (otherBlock['@type'] !== 'slate') {
+    return;
+  }
 
-  // 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 nextValue = otherBlock?.value;
+  const nextPlaintext =
+    otherBlock?.plaintext ?? serializeNodesToText(nextValue || []);
+  // Treat the next block as empty if both its structured value and plaintext representation
+  // indicate no content. In that case we can delete it instead of attempting a merge.
+  const isEmptySlateBlock =
+    !Array.isArray(nextValue) ||
+    nextValue.length === 0 ||
+    !nextPlaintext ||
+    nextPlaintext.trim().length === 0;
+
+  if (isEmptySlateBlock) {
+    const newFormData = deleteBlock(properties, otherBlockId, intl);
+    ReactDOM.unstable_batchedUpdates(() => {
+      onChangeField(blocksFieldname, newFormData[blocksFieldname]);
+      onChangeField(blocksLayoutFieldname, newFormData[blocksLayoutFieldname]);
+      onSelectBlock(block);
+    });
+    return true;
+  }
+  // Merge next text block into current one and delete the next block
+  mergeSlateWithBlockForward(editor, otherBlock);
 
-  const blocksFieldname = getBlocksFieldname(properties);
-  const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
+  const combined = JSON.parse(JSON.stringify(editor.children));
 
-  const formData = changeBlock(properties, otherBlockId, {
-    // TODO: use a constant specified in src/constants.js instead of 'slate'
+  const formData = changeBlock(properties, block, {
     '@type': 'slate',
     value: combined,
     plaintext: serializeNodesToText(combined || []),
   });
-  const newFormData = deleteBlock(formData, block, intl);
+
+  const newFormData = deleteBlock(formData, otherBlockId, intl);
 
   ReactDOM.unstable_batchedUpdates(() => {
-    // saveSlateBlockSelection(otherBlockId, cursor);
     onChangeField(blocksFieldname, newFormData[blocksFieldname]);
     onChangeField(blocksLayoutFieldname, newFormData[blocksLayoutFieldname]);
-    onSelectBlock(otherBlockId);
+    onSelectBlock(block);
   });
   return true;
 }

package/src/blocks/Text/keyboard/splitAtSeam.js

@@ -0,0 +1,44 @@
+import ReactDOM from 'react-dom';
+import { Editor, Range } from 'slate';
+import { splitEditorInTwoFragments } from '@plone/volto-slate/utils/ops';
+import { setEditorContent } from '@plone/volto-slate/utils/editor';
+import { createAndSelectNewBlockAfter } from '@plone/volto-slate/utils/volto-blocks';
+
+/**
+ * Handle Enter after an inline Backspace-merge seam.
+ *
+ * Detects when the caret is at offset 0 of a leaf that is not the first
+ * leaf of a top-level node (e.g., after merging two blocks of same type),
+ * and splits the current Slate block into two Volto Slate blocks.
+ */
+export function splitAtSeam({ editor, event }, intl) {
+  const { selection } = editor;
+  if (!selection || !Range.isCollapsed(selection)) return;
+
+  const point = selection.anchor;
+  if (point.offset !== 0) return;
+
+  // We are interested in positions like [paragraphIndex, leafIndex]
+  // where leafIndex > 0 (caret at the beginning of a subsequent leaf)
+  if (!point.path || point.path.length < 2) return;
+
+  const leafIndex = point.path[1];
+  if (leafIndex <= 0) return; // first leaf, let default handlers run
+
+  // Ensure parent is a top-level block (parent path length 1)
+  const parentEntry = Editor.parent(editor, point);
+  if (!parentEntry) return;
+  const parentPath = parentEntry[1];
+  if (!parentPath || parentPath.length !== 1) return;
+
+  event.preventDefault();
+  event.stopPropagation();
+
+  ReactDOM.unstable_batchedUpdates(() => {
+    const [top, bottom] = splitEditorInTwoFragments(editor);
+    createAndSelectNewBlockAfter(editor, bottom, intl);
+    setEditorContent(editor, top);
+  });
+
+  return true;
+}

package/src/utils/selection.js

@@ -82,10 +82,8 @@ export function isCursorAtBlockStart(editor) {
 
   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 &&
+    // Check if cursor is at offset 0 of any leaf node (not just the first one)
+    return anchor.offset === 0;
   }
   return false;
 }

package/src/utils/volto-blocks.js

@@ -8,7 +8,7 @@ import {
   getBlocksFieldname,
   getBlocksLayoutFieldname,
 } from '@plone/volto/helpers/Blocks/Blocks';
-import { Transforms, Editor, Node, Text, Path } from 'slate';
+import { Transforms, Editor, Node } from 'slate';
 import { serializeNodesToText } from '@plone/volto-slate/editor/render';
 import omit from 'lodash/omit';
 import config from '@plone/volto/registry';
@@ -21,74 +21,64 @@ function fromEntries(pairs) {
   return res;
 }
 
-// TODO: should be made generic, no need for "prevBlock.value"
 export function mergeSlateWithBlockBackward(editor, prevBlock, event) {
-  // To work around current architecture limitations, read the value from
-  // previous block. Replace it in the current editor (over which we have
-  // control), join with current block value, then use this result for previous
-  // block, delete current block
-
-  const prev = prevBlock.value;
-
-  // collapse the selection to its start point
-  Transforms.collapse(editor, { edge: 'start' });
-
-  let rangeRef;
-  let end;
-
-  Editor.withoutNormalizing(editor, () => {
-    // insert block #0 contents in block #1 contents, at the beginning
-    Transforms.insertNodes(editor, prev, {
-      at: Editor.start(editor, []),
-    });
-
-    // the contents that should be moved into the `ul`, as the last `li`
-    rangeRef = Editor.rangeRef(editor, {
-      anchor: Editor.start(editor, [1]),
-      focus: Editor.end(editor, [1]),
-    });
-
-    const source = rangeRef.current;
-
-    end = Editor.end(editor, [0]);
-
-    let endPoint;
-
-    Transforms.insertNodes(editor, { text: '' }, { at: end });
-
-    end = Editor.end(editor, [0]);
-
-    Transforms.splitNodes(editor, {
-      at: end,
-      always: true,
-      height: 1,
-      mode: 'highest',
-      match: (n) => n.type === 'li' || Text.isText(n),
-    });
-
-    endPoint = Editor.end(editor, [0]);
-
-    Transforms.moveNodes(editor, {
-      at: source,
-      to: endPoint.path,
-      mode: 'all',
-      match: (n, p) => p.length === 2,
-    });
-  });
+  // Merge the current block content into the previous block
+  // The current block content should be appended to the previous block
+  // and the cursor should be positioned at the start of what was the current block content
+
+  const prevValue = [...prevBlock.value];
+  const currentValue = [...editor.children];
+
+  const lastNode = prevValue[prevValue.length - 1];
+  const firstNode = currentValue[0];
+  let merged;
+  let cursor;
+
+  if (lastNode && firstNode && lastNode.type === firstNode.type) {
+    // If the last node of previous block and first node of current block have the same type,
+    // merge their children together
+    const mergedFirstNode = {
+      ...lastNode,
+      children: [...lastNode.children, ...firstNode.children],
+    };
 
-  const [n] = Editor.node(editor, [1]);
+    merged = [
+      ...prevValue.slice(0, -1),
+      mergedFirstNode,
+      ...currentValue.slice(1),
+    ];
 
-  if (Editor.isEmpty(editor, n)) {
-    Transforms.removeNodes(editor, { at: [1] });
+    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];
+    // Position cursor at the start of the merged content (where current block was inserted)
+    // The current block content starts at index prevValue.length in the merged array
+    cursor = {
+      anchor: {
+        path: [prevValue.length, 0],
+        offset: 0,
+      },
+      focus: {
+        path: [prevValue.length, 0],
+        offset: 0,
+      },
+    };
   }
 
-  rangeRef.unref();
+  // Update the editor with the merged content
+  editor.children = merged;
 
-  const [, lastPath] = Editor.last(editor, [0]);
-
-  end = Editor.start(editor, Path.parent(lastPath));
-
-  return end;
+  return cursor;
 }
 
 export function mergeSlateWithBlockForward(editor, nextBlock, event) {
@@ -97,7 +87,11 @@ export function mergeSlateWithBlockForward(editor, nextBlock, event) {
   // with current block value, then use this result for next block, delete
   // current block
 
-  const next = nextBlock.value;
+  const next = nextBlock?.value;
+  // Safeguard: if next block has no value or an empty value, there is nothing to merge
+  if (!Array.isArray(next) || next.length === 0) {
+    return;
+  }
 
   // collapse the selection to its start point
   Transforms.collapse(editor, { edge: 'end' });