@plone/volto-slate 18.2.1 → 18.2.2

package/CHANGELOG.md

@@ -8,6 +8,16 @@
 
 <!-- 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plone/volto-slate",
-  "version": "18.2.1",
+  "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/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/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/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>