feat: handle breakList in detached TextBlockEditor

packages/volto-slate/news/6106.feature

@@ -0,0 +1 @@
+Handle breakList in DetachedTextBlockEditor. @giuliaghisini

packages/volto-slate/src/blocks/Text/DetachedTextBlockEditor.jsx

@@ -4,6 +4,7 @@ import { useInView } from 'react-intersection-observer';
 import { SlateEditor } from '@plone/volto-slate/editor';
 import { serializeNodesToText } from '@plone/volto-slate/editor/render';
 import { handleKeyDetached } from './keyboard';
+import config from '@plone/volto/registry';
 
 const DEBUG = false;
 
@@ -29,6 +30,7 @@ export const DetachedTextBlockEditor = (props) => {
   const { value } = data;
 
   const intl = useIntl();
+  const { textblockExtensions } = config.settings.slate;
   const placeholder =
     data.placeholder || formTitle || intl.formatMessage(messages.text);
   let instructions = data?.instructions?.data || data?.instructions;
@@ -41,13 +43,22 @@ export const DetachedTextBlockEditor = (props) => {
     rootMargin: '0px 0px 200px 0px',
   });
 
+  const withBlockProperties = React.useCallback(
+    (editor) => {
+      editor.getBlockProps = () => props;
+      return editor;
+    },
+    [props],
+  );
+
   return (
     <div className="text-slate-editor-inner detached-slate-editor" ref={ref}>
       <SlateEditor
         index={index}
         readOnly={!inView}
         properties={properties}
-        renderExtensions={[]}
+        extensions={textblockExtensions}
+        renderExtensions={[withBlockProperties]}
         value={value}
         block={block /* is this needed? */}
         debug={DEBUG}

packages/volto-slate/src/blocks/Text/extensions/breakList.js

@@ -35,6 +35,8 @@ export const breakList = (editor) => {
 
     const { slate } = config.settings;
     const { anchor } = editor.selection;
+    const blockProps = editor.getBlockProps();
+    const detached = blockProps.detached;
 
     const ref = Editor.rangeRef(editor, editor.selection, {
       affinity: 'inward',
@@ -65,8 +67,7 @@ export const breakList = (editor) => {
       return; // applies default behaviour, as defined in insertBreak.js extension
     }
 
-    if (parent) {
-      const blockProps = editor.getBlockProps();
+    if (parent && !detached) {
       const { data } = blockProps;
       // Don't add new block if not allowed
       if (data?.disableNewBlocks) {
@@ -77,22 +78,36 @@ export const breakList = (editor) => {
     Editor.deleteBackward(editor, { unit: 'line' });
     // also account for empty nodes [{text: ''}]
     if (Editor.isEmpty(editor, parent)) {
-      createAndSelectNewBlockAfter(editor, [createEmptyParagraph()]);
-      Transforms.removeNodes(editor, { at: ref.current });
+      if (detached) {
+        Transforms.removeNodes(editor, { at: ref.current });
+
+        Transforms.insertNodes(editor, createEmptyParagraph(), {
+          at: [editor.children.length],
+        });
+        Transforms.select(editor, Editor.end(editor, []));
+      } else {
+        createAndSelectNewBlockAfter(editor, [createEmptyParagraph()]);
+        Transforms.removeNodes(editor, { at: ref.current });
+      }
       return true;
     }
 
     Transforms.removeNodes(editor, { at: ref.current });
 
     if (isCursorAtBlockEnd(editor)) {
-      createAndSelectNewBlockAfter(editor, [createEmptyParagraph()]);
+      if (detached) {
+        Editor.insertNode(editor, createEmptyParagraph());
+      } else {
+        createAndSelectNewBlockAfter(editor, [createEmptyParagraph()]);
+      }
       return true;
     }
 
-    const [top, bottom] = splitEditorInTwoFragments(editor, ref.current);
-    setEditorContent(editor, top);
-    createAndSelectNewBlockAfter(editor, bottom);
-
+    if (!detached) {
+      const [top, bottom] = splitEditorInTwoFragments(editor, ref.current);
+      setEditorContent(editor, top);
+      createAndSelectNewBlockAfter(editor, bottom);
+    }
     return true;
   };
 

packages/volto-slate/src/blocks/Text/extensions/insertBreak.js

@@ -34,7 +34,7 @@ export const withSplitBlocksOnBreak = (editor) => {
         const { data } = blockProps;
 
         // Don't add new block if not allowed
-        if (data?.disableNewBlocks) {
+        if (data?.disableNewBlocks || blockProps.detached) {
           return insertBreak();
         }
 

packages/volto/src/components/theme/Logo/Logo.jsx

@@ -27,8 +27,9 @@
   const navroot = useSelector((state) => state.navroot.data);
   const dispatch = useDispatch();
   const intl = useIntl();
+  return <></>;
 
   const messages = defineMessages({
     home: {
       id: 'Home',
       defaultMessage: 'Home',
@@ -45,7 +46,7 @@
     }
   }, [dispatch, pathname]);
 
   const navRootPath = flattenToAppURL(navroot?.navroot?.['@id']) || '/';
 
   return (
     <Link to={navRootPath} aria-label={intl.formatMessage(messages.home)}>