fix: Slate in blocks

src/components/ItaliaTheme/Blocks/CTABlock/Block.jsx

@@ -44,7 +44,7 @@ const Block = ({ data, block, inEditMode, selected, ...otherProps }) => {
   }, [selected]);
 
   useEffect(() => {
-    if (!selected && selectedField) {
+    if (!selected && selectedField && otherProps?.onSelectBlock) {
       otherProps.onSelectBlock(block);
     }
   }, [selectedField]);

src/components/ItaliaTheme/Blocks/IconBlocks/Block/EditBlock.jsx

@@ -71,7 +71,7 @@ class EditBlock extends SubblockEdit {
     if (__SERVER__) {
       return <div />;
     }
-
+    console.log(this.props);
     return (
       <Subblock subblock={this} className="subblock-edit">
         <Card
@@ -101,23 +101,33 @@ class EditBlock extends SubblockEdit {
                 }}
               >
                 <TextEditorWidget
+                  {...this.props}
+                  showToolbar={false}
                   data={this.props.data}
                   fieldName="title"
                   selected={
                     this.props.selected && this.state.focusOn === 'title'
                   }
+                  setSelected={() => this.setState({ focusOn: 'title' })}
                   block={this.props.block}
-                  onChangeBlock={this.onChange}
+                  onChangeBlock={(block, _data) => {
+                    this.props.onChangeBlock(this.props.index, _data);
+                  }}
                   placeholder={this.props.intl.formatMessage(
                     messages.titlePlaceholder,
                   )}
-                  prevFocus="text"
-                  nextFocus="text"
-                  disableMoveToNearest={true}
-                  setFocus={(f) => {
-                    this.setState({ focusOn: f });
+                  focusPrevField={() => {
+                    this.props.isFirst
+                      ? this.props.onFocusPreviousBlock
+                      : () => {
+                          this.props.onSubblockChangeFocus(
+                            this.props.index - 1,
+                          );
+                        };
+                  }}
+                  focusNextField={() => {
+                    this.setState({ focusOn: 'text' });
                   }}
-                  showToolbar={false}
                   key="title"
                 />
               </div>
@@ -130,21 +140,29 @@ class EditBlock extends SubblockEdit {
               }}
             >
               <TextEditorWidget
+                {...this.props}
                 data={this.props.data}
+                key="text"
                 fieldName="text"
                 selected={this.props.selected && this.state.focusOn === 'text'}
-                block={this.props.block}
-                onChangeBlock={this.onChange}
+                setSelected={() => this.setState({ focusOn: 'text' })}
+                onChangeBlock={(block, _data) => {
+                  this.props.onChangeBlock(this.props.index, _data);
+                }}
                 placeholder={this.props.intl.formatMessage(
                   messages.textPlaceholder,
                 )}
-                disableMoveToNearest={true}
-                prevFocus="title"
-                nextFocus="title"
-                setFocus={(f) => {
-                  this.setState({ focusOn: f });
+                focusNextField={
+                  !this.props.isLast
+                    ? () => {
+                        this.setState({ focusOn: null });
+                        this.props.onSubblockChangeFocus(this.props.index + 1);
+                      }
+                    : null //default go to next block
+                }
+                focusPrevField={() => {
+                  this.setState({ focusOn: 'title' });
                 }}
-                key="text"
               />
             </div>
 

src/components/ItaliaTheme/Blocks/IconBlocks/Block/ViewBlock.jsx

@@ -12,6 +12,7 @@ import { UniversalLink } from '@plone/volto/components';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { Card, CardBody, CardReadMore } from 'design-react-kit';
 import config from '@plone/volto/registry';
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 
 const messages = defineMessages({
   vedi: {
@@ -25,8 +26,9 @@ const messages = defineMessages({
  * @class ViewBlock
  * @extends Component
  */
-const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
+const ViewBlock = ({ data }) => {
   const intl = useIntl();
+  console.log(data);
   return (
     <Card
       className="card-bg rounded subblock-view"
@@ -41,22 +43,10 @@ const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
           </div>
         )}
 
-        {data.title && (
-          <div className="iconblock-title">
-            {redraft(
-              data.title,
-              config.settings.richtextViewSettings.ToHTMLRenderers,
-              config.settings.richtextViewSettings.ToHTMLOptions,
-            )}
-          </div>
-        )}
+        {data.title && <div className="iconblock-title">{data.title}</div>}
         {data.text && (
           <div className="iconblock-text">
-            {redraft(
-              data.text,
-              config.settings.richtextViewSettings.ToHTMLRenderers,
-              config.settings.richtextViewSettings.ToHTMLOptions,
-            )}
+            <TextBlockView data={{ value: data.text }} />
           </div>
         )}
         {data.href && (

src/components/ItaliaTheme/Blocks/IconBlocks/Edit.jsx

@@ -77,41 +77,44 @@ class Edit extends SubblocksEdit {
             <div className="block-header">
               <div className="title">
                 <TextEditorWidget
+                  {...this.props}
+                  showToolbar={false}
                   data={this.props.data}
+                  key={'title'}
                   fieldName="title"
                   selected={this.state.selectedField === 'title'}
-                  block={this.props.block}
-                  onChangeBlock={(data) => {
-                    this.props.onChangeBlock(this.props.block, {
-                      ...data,
-                    });
+                  setSelected={() => {
+                    this.setState({ selectedField: 'title' });
+                    this.onSubblockChangeFocus(-1);
                   }}
                   placeholder={this.props.intl.formatMessage(messages.title)}
-                  showToolbar={false}
-                  onSelectBlock={() => {}}
-                  onAddBlock={() => {
+                  focusNextField={() => {
                     this.setState({ selectedField: 'description' });
                   }}
                 />
               </div>
 
               <div className="description">
                 <TextEditorWidget
+                  {...this.props}
+                  showToolbar={true}
                   data={this.props.data}
                   fieldName="description"
                   selected={this.state.selectedField === 'description'}
-                  block={this.props.block}
-                  onChangeBlock={(data) =>
-                    this.props.onChangeBlock(this.props.block, {
-                      ...data,
-                    })
-                  }
+                  setSelected={() => {
+                    this.setState({ selectedField: 'description' });
+                    this.onSubblockChangeFocus(-1);
+                  }}
                   placeholder={this.props.intl.formatMessage(
                     messages.description,
                   )}
-                  showToolbar={true}
-                  onSelectBlock={() => {}}
-                  onAddBlock={() => {}}
+                  focusPrevField={() => {
+                    this.setState({ selectedField: 'title' });
+                  }}
+                  focusNextField={() => {
+                    this.onSubblockChangeFocus(0);
+                    this.setState({ selectedField: null });
+                  }}
                 />
               </div>
             </div>
@@ -121,11 +124,17 @@ class Edit extends SubblocksEdit {
                 {this.state.subblocks.map((subblock, subindex) => (
                   <Col lg="4" xl="3" key={subblock.id}>
                     <EditBlock
+                      {...this.props}
                       data={subblock}
                       index={subindex}
                       selected={this.isSubblockSelected(subindex)}
                       {...this.subblockProps}
+                      isFirst={subindex === 0}
+                      isLast={subindex === this.state.subblocks?.length - 1}
                       openObjectBrowser={this.props.openObjectBrowser}
+                      onFocusPreviousBlock={() => {
+                        this.setState({ selectedField: 'description' });
+                      }}
                     />
                   </Col>
                 ))}

src/components/ItaliaTheme/Blocks/IconBlocks/View.jsx

@@ -5,12 +5,11 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import redraft from 'redraft';
 import ViewBlock from './Block/ViewBlock';
 import { Container, Row, Col } from 'design-react-kit';
 import { flattenToAppURL, addAppURL } from '@plone/volto/helpers';
 import { UniversalLink } from '@plone/volto/components';
-import config from '@plone/volto/registry';
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 
 /**
  * View Accordion block class.
@@ -39,22 +38,10 @@ const AccordionView = ({ data, block }) => {
           )}
           <Container className="px-md-4">
             <div className="block-header">
-              {data.title && (
-                <div className="title">
-                  {redraft(
-                    data.title,
-                    config.settings.richtextViewSettings.ToHTMLRenderers,
-                    config.settings.richtextViewSettings.ToHTMLOptions,
-                  )}
-                </div>
-              )}
+              {data.title && <div className="title">{data.title}</div>}
               {data.description && (
                 <div className="description">
-                  {redraft(
-                    data.description,
-                    config.settings.richtextViewSettings.ToHTMLRenderers,
-                    config.settings.richtextViewSettings.ToHTMLOptions,
-                  )}
+                  <TextBlockView data={{ value: data.description }} />
                 </div>
               )}
             </div>

src/config/Blocks/blocks.js

@@ -297,6 +297,7 @@ const italiaBlocks = {
       view: [],
     },
     sidebarTab: 1,
+    blockHasOwnFocusManagement: true,
   },
   contacts: {
     id: 'contacts',