Fix slate RichTextwidget to allow support slate extensions refs#6570

packages/volto-slate/news/6570.bugfix

@@ -0,0 +1 @@
+fix: add extensions in RichtextWidget @nileshgulia1

packages/volto-slate/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;
+};

packages/volto-slate/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';

packages/volto-slate/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

packages/volto-slate/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>