fix: Accordion Block to use Slate

RedTurtle · Oct 6, 2023 · a71b16b · a71b16b
1 parent 5111da9
commit a71b16b
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 31 deletions.
diff --git a/src/components/ItaliaTheme/Blocks/Accordion/Block/EditBlock.jsx b/src/components/ItaliaTheme/Blocks/Accordion/Block/EditBlock.jsx
@@ -87,30 +87,31 @@ class EditBlock extends SubblockEdit {
               }}
             >
               <TextEditorWidget
+                {...this.props}
+                key="title"
+                showToolbar={false}
                 data={this.props.data}
                 fieldName="title"
+                onChangeBlock={(block, _data) => {
+                  this.onChange({ ...this.props.data, title: _data.value });
+                }}
                 selected={this.props.selected && this.state.focusOn === 'title'}
-                block={this.props.block}
-                onChangeBlock={this.onChange}
                 placeholder={this.props.intl.formatMessage(
                   messages.titlePlaceholder,
                 )}
-                onSelectBlock={() => {}}
-                onAddBlock={() => {
-                  this.setState({ focusOn: 'text' });
+                setSelected={() => {
+                  this.setState({ focusOn: 'title' });
                 }}
-                onFocusNextBlock={() => {
+                focusNextField={() => {
                   this.setState({ focusOn: 'text' });
                 }}
-                onFocusPreviousBlock={
+                focusPrevField={
                   this.props.isFirst
                     ? this.props.onFocusPreviousBlock
                     : () => {
                         this.props.onSubblockChangeFocus(this.props.index - 1);
                       }
                 }
-                showToolbar={false}
-                key="title"
               />
             </div>
           </h3>
@@ -123,28 +124,30 @@ class EditBlock extends SubblockEdit {
             >
               <div className="accordion-inner">
                 <TextEditorWidget
+                  {...this.props}
                   data={this.props.data}
                   fieldName="text"
                   selected={
                     this.props.selected && this.state.focusOn === 'text'
                   }
-                  block={this.props.block}
-                  onChangeBlock={this.onChange}
                   placeholder={this.props.intl.formatMessage(
                     messages.textPlaceholder,
                   )}
-                  onAddBlock={this.props.onFocusNextBlock}
-                  onFocusNextBlock={
-                    this.props.isLast
-                      ? this.props.onFocusNextBlock
-                      : () => {
+                  onChangeBlock={(block, _data) => {
+                    this.onChange({ ...this.props.data, text: _data.value });
+                  }}
+                  setSelected={() => this.setState({ focusOn: 'text' })}
+                  focusNextField={
+                    !this.props.isLast
+                      ? () => {
                           this.setState({ focusOn: null });
                           this.props.onSubblockChangeFocus(
                             this.props.index + 1,
                           );
                         }
+                      : null //default go to next block
                   }
-                  onFocusPreviousBlock={() => {
+                  focusPrevField={() => {
                     this.setState({ focusOn: 'title' });
                   }}
                   key="text"

diff --git a/src/components/ItaliaTheme/Blocks/Accordion/Block/ViewBlock.jsx b/src/components/ItaliaTheme/Blocks/Accordion/Block/ViewBlock.jsx
@@ -5,11 +5,11 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import redraft from 'redraft';
 import { useIntl, defineMessages } from 'react-intl';
 import cx from 'classnames';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { UniversalLink } from '@plone/volto/components';
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 import config from '@plone/volto/registry';
 
 const messages = defineMessages({
@@ -26,6 +26,7 @@ const messages = defineMessages({
  */
 const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
   const intl = useIntl();
+
   return (
     <div className="accordion-item subblock-view">
       {data.title && (
@@ -42,11 +43,7 @@ const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
               padding={false}
             />
 
-            {redraft(
-              data.title,
-              config.settings.richtextViewSettings.ToHTMLRenderers,
-              config.settings.richtextViewSettings.ToHTMLOptions,
-            )}
+            {data.title}
           </button>
         </h3>
       )}
@@ -59,11 +56,7 @@ const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
           aria-labelledby={`${id}-${index}`}
         >
           <div className="accordion-inner" onFocus={toggle()}>
-            {redraft(
-              data.text,
-              config.settings.richtextViewSettings.ToHTMLRenderers,
-              config.settings.richtextViewSettings.ToHTMLOptions,
-            )}
+            <TextBlockView id={id} data={{ value: data.text }} />
           </div>
           {data.href && (
             <div className="link-more">

diff --git a/src/components/ItaliaTheme/Blocks/Accordion/Edit.jsx b/src/components/ItaliaTheme/Blocks/Accordion/Edit.jsx
@@ -49,16 +49,14 @@ class Edit extends SubblocksEdit {
                   {this.state.subblocks.map((subblock, subindex) => (
                     <div className="accordion-item" key={subblock.id}>
                       <EditBlock
+                        {...this.props}
                         data={subblock}
                         index={subindex}
                         selected={
                           this.props.selected &&
                           this.isSubblockSelected(subindex)
                         }
                         {...this.subblockProps}
-                        openObjectBrowser={this.props.openObjectBrowser}
-                        onFocusPreviousBlock={this.props.onFocusPreviousBlock}
-                        onFocusNextBlock={this.props.onFocusNextBlock}
                         onSubblockChangeFocus={this.onSubblockChangeFocus}
                         isLast={this.state.subblocks.length - 1 === subindex}
                         isFirst={subindex === 0}