@plone/volto-slate 18.2.0 → 18.2.2

package/CHANGELOG.md

@@ -8,6 +8,22 @@
 
 <!-- towncrier release notes start -->
 
+## 18.2.2 (2025-02-08)
+
+### Bugfix
+
+- In `RichTextWidget` and `HtmlSlateWidget`, fix breaking a list by typing Enter. @nileshgulia1 [#6570](https://github.com/plone/volto/issues/6570)
+
+### Internal
+
+- Remove hard dependencies on `react`, move to `peerDependencies` @sneridagh [#6728](https://github.com/plone/volto/issues/6728)
+
+## 18.2.1 (2025-01-31)
+
+### Bugfix
+
+- Pass `intl` object to `initialValue` function. @wesleybl [#6529](https://github.com/plone/volto/issues/6529)
+
 ## 18.2.0 (2025-01-24)
 
 ### Feature

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plone/volto-slate",
-  "version": "18.2.0",
+  "version": "18.2.2",
   "description": "Slate.js integration with Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -25,8 +25,6 @@
     "is-url": "1.2.4",
     "jsdom": "^16.6.0",
     "lodash": "4.17.21",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
     "react-intersection-observer": "9.1.0",
     "react-intl": "3.12.1",
     "react-redux": "8.1.2",
@@ -46,6 +44,10 @@
     "babel-plugin-transform-class-properties": "^6.24.1",
     "release-it": "^17.0.0"
   },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
   "scripts": {
     "dry-release": "release-it --dry-run",
     "release": "release-it",

package/src/blocks/Text/DefaultTextBlockEditor.jsx

@@ -142,10 +142,10 @@ export const DefaultTextBlockEditor = (props) => {
       const url = flattenToAppURL(imageId);
       setNewImageId(imageId);
 
-      createImageBlock(url, index, props);
+      createImageBlock(url, index, props, intl);
     }
     prevReq.current = loaded;
-  }, [props, loaded, loading, prevLoaded, imageId, newImageId, index]);
+  }, [props, loaded, loading, prevLoaded, imageId, newImageId, index, intl]);
 
   const handleUpdate = React.useCallback(
     (editor) => {

package/src/blocks/Text/extensions/breakList.js

@@ -11,6 +11,7 @@ import { createEmptyParagraph } from '@plone/volto-slate/utils/blocks';
  * Handles `Enter` key on empty and non-empty list items.
  *
  * @param {Editor} editor The editor which should be modified by this extension
+ * @param {Object} intl intl object.
  * with a new version of the `insertBreak` method of the Slate editor.
  *
  * @description If the selection does not exist or is expanded, handle with the
@@ -20,7 +21,7 @@ import { createEmptyParagraph } from '@plone/volto-slate/utils/blocks';
  * text cursor and then split the editor in two fragments, and convert them to
  * separate Slate Text blocks, based on the selection.
  */
-export const breakList = (editor) => {
+export const breakList = (editor, intl) => {
   const { insertBreak } = editor;
 
   editor.insertBreak = () => {
@@ -84,7 +85,7 @@ export const breakList = (editor) => {
         });
         Transforms.select(editor, Editor.end(editor, []));
       } else {
-        createAndSelectNewBlockAfter(editor, [createEmptyParagraph()]);
+        createAndSelectNewBlockAfter(editor, [createEmptyParagraph()], intl);
         Transforms.removeNodes(editor, { at: ref.current });
       }
       return true;
@@ -96,7 +97,7 @@ export const breakList = (editor) => {
       if (detached) {
         Editor.insertNode(editor, createEmptyParagraph());
       } else {
-        createAndSelectNewBlockAfter(editor, [createEmptyParagraph()]);
+        createAndSelectNewBlockAfter(editor, [createEmptyParagraph()], intl);
       }
       return true;
     }
@@ -104,7 +105,7 @@ export const breakList = (editor) => {
     if (!detached) {
       const [top, bottom] = splitEditorInTwoFragments(editor, ref.current);
       setEditorContent(editor, top);
-      createAndSelectNewBlockAfter(editor, bottom);
+      createAndSelectNewBlockAfter(editor, bottom, intl);
     }
     return true;
   };

package/src/blocks/Text/extensions/breakListInWidget.js

@@ -0,0 +1,67 @@
+import { Editor, Range, Transforms } from 'slate';
+
+import config from '@plone/volto/registry';
+import { isCursorAtBlockEnd } from '@plone/volto-slate/utils/selection';
+import { getCurrentListItem } from '@plone/volto-slate/utils/lists';
+import { createEmptyParagraph } from '@plone/volto-slate/utils/blocks';
+
+export const breakListInWidget = (editor) => {
+  const { insertBreak } = editor;
+
+  editor.insertBreak = () => {
+    if (!(editor.selection && Range.isCollapsed(editor.selection))) {
+      insertBreak();
+      return false;
+    }
+
+    const { slate } = config.settings;
+    const { anchor } = editor.selection;
+
+    const ref = Editor.rangeRef(editor, editor.selection, {
+      affinity: 'inward',
+    });
+
+    const [listItem, listItemPath] = getCurrentListItem(editor);
+    if (listItem) {
+      if (Editor.string(editor, listItemPath)) {
+        Transforms.splitNodes(editor, {
+          at: editor.selection,
+          match: (node) => node.type === slate.listItemType,
+          always: true,
+        });
+
+        return true;
+      }
+    }
+
+    const [parent] = Editor.parent(editor, anchor.path);
+
+    if (parent.type !== slate.listItemType || anchor.offset > 0) {
+      insertBreak();
+      return;
+    }
+
+    Editor.deleteBackward(editor, { unit: 'line' });
+    // also account for empty nodes [{text: ''}]
+    if (Editor.isEmpty(editor, parent)) {
+      Transforms.removeNodes(editor, { at: ref.current });
+
+      Transforms.insertNodes(editor, createEmptyParagraph(), {
+        at: [editor.children.length],
+      });
+      Transforms.select(editor, Editor.end(editor, []));
+
+      return true;
+    }
+
+    Transforms.removeNodes(editor, { at: ref.current });
+
+    if (isCursorAtBlockEnd(editor)) {
+      Editor.insertNode(editor, createEmptyParagraph());
+      return true;
+    }
+    return true;
+  };
+
+  return editor;
+};

package/src/blocks/Text/extensions/index.js

@@ -4,3 +4,4 @@ export * from './breakList';
 export * from './withLists';
 export * from './isSelected';
 export * from './normalizeExternalData';
+export * from './breakListInWidget';

package/src/blocks/Text/extensions/insertBreak.js

@@ -8,6 +8,7 @@ import { rangeIsInSplittableNode } from '@plone/volto-slate/utils/internals';
 
 /**
  * @param {Editor} editor The Slate editor object to extend.
+ * @param {Object} intl intl object.
  * @description If the selection exists and touches with one of its edges a
  * closest-to-root `Text` node (`Path` with length `2`)
  *
@@ -18,7 +19,7 @@ import { rangeIsInSplittableNode } from '@plone/volto-slate/utils/internals';
  * and if the selection does not exist or does not touch with one of its edges a
  * closest-to-root `Text` node, call the default behavior.
  */
-export const withSplitBlocksOnBreak = (editor) => {
+export const withSplitBlocksOnBreak = (editor, intl) => {
   const { insertBreak } = editor;
 
   editor.insertBreak = () => {
@@ -40,7 +41,7 @@ export const withSplitBlocksOnBreak = (editor) => {
         ReactDOM.unstable_batchedUpdates(() => {
           const [top, bottom] = splitEditorInTwoFragments(editor);
           // ReactEditor.blur(editor);
-          createAndSelectNewBlockAfter(editor, bottom);
+          createAndSelectNewBlockAfter(editor, bottom, intl);
           setEditorContent(editor, top);
         });
       }

package/src/blocks/Text/index.jsx

@@ -22,6 +22,7 @@ import {
 import { withDeleteSelectionOnEnter } from '@plone/volto-slate/editor/extensions';
 import {
   breakList,
+  breakListInWidget,
   withDeserializers,
   withLists,
   withSplitBlocksOnBreak,
@@ -47,6 +48,7 @@ export default function applyConfig(config) {
       breakList,
       normalizeExternalData,
     ],
+    slateWidgetExtensions: [breakListInWidget],
 
     // Pluggable handlers for the onKeyDown event of <Editable />
     // Order matters here. A handler can return `true` to stop executing any

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

@@ -26,7 +26,7 @@ import {
  * @param {Editor} editor
  * @param {KeyboardEvent} event
  */
-export function joinWithPreviousBlock({ editor, event }) {
+export function joinWithPreviousBlock({ editor, event }, intl) {
   if (!isCursorAtBlockStart(editor)) return;
 
   const blockProps = editor.getBlockProps();
@@ -60,7 +60,7 @@ export function joinWithPreviousBlock({ editor, event }) {
   const text = Editor.string(editor, []);
   if (!text) {
     const cursor = getBlockEndAsRange(otherBlock);
-    const newFormData = deleteBlock(properties, block);
+    const newFormData = deleteBlock(properties, block, intl);
 
     ReactDOM.unstable_batchedUpdates(() => {
       saveSlateBlockSelection(otherBlockId, cursor);
@@ -89,7 +89,7 @@ export function joinWithPreviousBlock({ editor, event }) {
     value: combined,
     plaintext: serializeNodesToText(combined || []),
   });
-  const newFormData = deleteBlock(formData, block);
+  const newFormData = deleteBlock(formData, block, intl);
 
   ReactDOM.unstable_batchedUpdates(() => {
     saveSlateBlockSelection(otherBlockId, cursor);
@@ -107,7 +107,7 @@ export function joinWithPreviousBlock({ editor, event }) {
  * @param {Editor} editor
  * @param {KeyboardEvent} event
  */
-export function joinWithNextBlock({ editor, event }) {
+export function joinWithNextBlock({ editor, event }, intl) {
   if (!isCursorAtBlockEnd(editor)) return;
 
   const blockProps = editor.getBlockProps();
@@ -146,7 +146,7 @@ export function joinWithNextBlock({ editor, event }) {
     value: combined,
     plaintext: serializeNodesToText(combined || []),
   });
-  const newFormData = deleteBlock(formData, block);
+  const newFormData = deleteBlock(formData, block, intl);
 
   ReactDOM.unstable_batchedUpdates(() => {
     // saveSlateBlockSelection(otherBlockId, cursor);

package/src/utils/volto-blocks.js

@@ -118,7 +118,7 @@ export function syncCreateSlateBlock(value) {
   return [id, block];
 }
 
-export function createImageBlock(url, index, props) {
+export function createImageBlock(url, index, props, intl) {
   const { properties, onChangeField, onSelectBlock } = props;
   const blocksFieldname = getBlocksFieldname(properties);
   const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
@@ -128,7 +128,7 @@ export function createImageBlock(url, index, props) {
   let id, newFormData;
 
   if (currBlockHasValue) {
-    [id, newFormData] = addBlock(properties, 'image', index + 1);
+    [id, newFormData] = addBlock(properties, 'image', index + 1, {}, intl);
     newFormData = changeBlock(newFormData, id, { '@type': 'image', url });
   } else {
     [id, newFormData] = insertBlock(properties, currBlockId, {
@@ -144,12 +144,18 @@ export function createImageBlock(url, index, props) {
   });
 }
 
-export const createAndSelectNewBlockAfter = (editor, blockValue) => {
+export const createAndSelectNewBlockAfter = (editor, blockValue, intl) => {
   const blockProps = editor.getBlockProps();
 
   const { onSelectBlock, properties, index, onChangeField } = blockProps;
 
-  const [blockId, formData] = addBlock(properties, 'slate', index + 1);
+  const [blockId, formData] = addBlock(
+    properties,
+    'slate',
+    index + 1,
+    {},
+    intl,
+  );
 
   const options = {
     '@type': 'slate',

package/src/widgets/HtmlSlateWidget.jsx

@@ -12,6 +12,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import { FormFieldWrapper } from '@plone/volto/components/manage/Widgets';
 import SlateEditor from '@plone/volto-slate/editor/SlateEditor';
 import { serializeNodes } from '@plone/volto-slate/editor/render';
+import { handleKeyDetached } from '@plone/volto-slate/blocks/Text/keyboard';
 import { makeEditor } from '@plone/volto-slate/utils/editor';
 import deserialize from '@plone/volto-slate/editor/deserialize';
 
@@ -19,6 +20,8 @@ import {
   createEmptyParagraph,
   normalizeExternalData,
 } from '@plone/volto-slate/utils';
+import config from '@plone/volto/registry';
+
 import { ErrorBoundary } from './ErrorBoundary';
 
 import './style.css';
@@ -44,6 +47,8 @@ const HtmlSlateWidget = (props) => {
     intl,
   } = props;
 
+  const { slateWidgetExtensions } = config.settings.slate;
+
   const [selected, setSelected] = React.useState(focus);
 
   const editor = React.useMemo(() => makeEditor(), []);
@@ -127,7 +132,10 @@ const HtmlSlateWidget = (props) => {
             block={block}
             selected={selected}
             properties={properties}
+            extensions={slateWidgetExtensions}
+            onKeyDown={handleKeyDetached}
             placeholder={placeholder}
+            editableProps={{ 'aria-multiline': 'true' }}
           />
         </ErrorBoundary>
       </div>

package/src/widgets/RichTextWidget.jsx

@@ -7,7 +7,9 @@ import React from 'react';
 import isUndefined from 'lodash/isUndefined';
 import isString from 'lodash/isString';
 import { FormFieldWrapper } from '@plone/volto/components/manage/Widgets';
+import { handleKeyDetached } from '@plone/volto-slate/blocks/Text/keyboard';
 import SlateEditor from '@plone/volto-slate/editor/SlateEditor';
+import config from '@plone/volto/registry';
 
 import { createEmptyParagraph, createParagraph } from '../utils/blocks';
 
@@ -37,6 +39,7 @@ const SlateRichTextWidget = (props) => {
     readOnly = false,
   } = props;
   const [selected, setSelected] = React.useState(focus);
+  const { slateWidgetExtensions } = config.settings.slate;
 
   return (
     <FormFieldWrapper {...props} draggable={false} className="slate_wysiwyg">
@@ -62,7 +65,10 @@ const SlateRichTextWidget = (props) => {
           block={block}
           selected={selected}
           properties={properties}
+          extensions={slateWidgetExtensions}
+          onKeyDown={handleKeyDetached}
           placeholder={placeholder}
+          editableProps={{ 'aria-multiline': 'true' }}
         />
       </div>
     </FormFieldWrapper>