design-comuni-plone-theme 11.29.2 → 12.0.0

package/src/components/ItaliaTheme/Blocks/CountDown/View.jsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import redraft from 'redraft';
-import { checkRedraftHasContent } from 'design-comuni-plone-theme/helpers';
+import { checkRichTextHasContent } from 'design-comuni-plone-theme/helpers';
 import { Container, Row, Col } from 'design-react-kit';
 import { addAppURL, flattenToAppURL } from '@plone/volto/helpers';
 import cx from 'classnames';
 import CountDown from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/CountDown/CountDown';
-import config from '@plone/volto/registry';
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 
 const View = ({ data, id }) => {
   return (
@@ -37,7 +36,7 @@ const View = ({ data, id }) => {
           )}
           <Container className="px-md-4">
             <Row>
-              {checkRedraftHasContent(data.text) && (
+              {checkRichTextHasContent(data.text) && (
                 <Col
                   xs={{
                     size: 12,
@@ -48,11 +47,7 @@ const View = ({ data, id }) => {
                   }}
                   className="text"
                 >
-                  {redraft(
-                    data.text,
-                    config.settings.richtextViewSettings.ToHTMLRenderers,
-                    config.settings.richtextViewSettings.ToHTMLOptions,
-                  )}
+                  <TextBlockView data={{ value: data.text }} />
                 </Col>
               )}
               <Col
@@ -71,13 +66,9 @@ const View = ({ data, id }) => {
                   showMinutes={data.showMinutes}
                   showSeconds={data.showSeconds}
                 />
-                {checkRedraftHasContent(data.countdown_text) && (
+                {checkRichTextHasContent(data.countdown_text) && (
                   <div className="countdown_text">
-                    {redraft(
-                      data.countdown_text,
-                      config.settings.richtextViewSettings.ToHTMLRenderers,
-                      config.settings.richtextViewSettings.ToHTMLOptions,
-                    )}
+                    <TextBlockView data={{ value: data.countdown_text }} />
                   </div>
                 )}
               </Col>

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

@@ -42,7 +42,7 @@ class EditBlock extends SubblockEdit {
    * Constructor
    * @method constructor
    * @param {Object} props Component properties
-   * @constructs WysiwygEditor
+   * @constructs Icons Blocks edit
    */
   constructor(props) {
     super(props);
@@ -54,13 +54,13 @@ class EditBlock extends SubblockEdit {
 
   componentDidMount() {
     // eslint-disable-next-line no-unused-expressions
-    this.subblock_ref?.current?.addEventListener('keydown', (e) => {
-      if (e.keyCode === 13) {
-        if (!(this.state.focusOn === 'text')) {
-          this.setState({ focusOn: 'text' });
-        }
-      }
-    });
+    // this.subblock_ref?.current?.addEventListener('keydown', (e) => {
+    //   if (e.keyCode === 13) {
+    //     if (!(this.state.focusOn === 'text')) {
+    //       this.setState({ focusOn: 'text' });
+    //     }
+    //   }
+    // });
   }
   /**
    * Render method.
@@ -101,23 +101,36 @@ class EditBlock extends SubblockEdit {
                 }}
               >
                 <TextEditorWidget
+                  {...this.props}
+                  showToolbar={false}
                   data={this.props.data}
                   fieldName="title"
                   selected={
                     this.props.selected && this.state.focusOn === 'title'
                   }
+                  setSelected={(f) => {
+                    this.setState({ focusOn: f });
+                  }}
                   block={this.props.block}
-                  onChangeBlock={this.onChange}
+                  index={this.props.blockIndex}
+                  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 +143,38 @@ class EditBlock extends SubblockEdit {
               }}
             >
               <TextEditorWidget
+                {...this.props}
                 data={this.props.data}
+                key="text"
                 fieldName="text"
                 selected={this.props.selected && this.state.focusOn === 'text'}
+                setSelected={(f) => {
+                  if (!this.props.selected) {
+                    //a11y - per il focus del blocco da tastiera con navigazione inversa
+                    this.props.onSubblockChangeFocus(this.props.index);
+                    this.props.onSelectBlock(this.props.block);
+                  }
+                  this.setState({ focusOn: f });
+                }}
+                onChangeBlock={(block, _data) => {
+                  this.props.onChangeBlock(this.props.index, _data);
+                }}
                 block={this.props.block}
-                onChangeBlock={this.onChange}
+                index={this.props.blockIndex}
                 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>
 

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

@@ -1,17 +1,17 @@
 /**
  * ViewBlock.
- * @module components/ItaliaTheme/Blocks/Accordion/Block/ViewBlock
+ * @module components/ItaliaTheme/Blocks/IconBlocks/Block/ViewBlock
  */
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import redraft from 'redraft';
 import { useIntl, defineMessages } from 'react-intl';
 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,21 +25,9 @@ const messages = defineMessages({
  * @class ViewBlock
  * @extends Component
  */
-const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
-  const rawStringRenderer = {
-    blocks: {
-      unstyled: (children) => {
-        const text = children.map((child) => child[1]).join(''); // Join the text elements
-        return text.trim(); // Remove leading/trailing whitespace
-      },
-    },
-  };
-
-  const cardTitle = redraft(data.title, rawStringRenderer, {
-    cleanup: false,
-  });
-
+const ViewBlock = ({ data, isOpen, toggle, id, index, blockHasTitle }) => {
   const intl = useIntl();
+
   return (
     <Card
       className="card-bg rounded subblock-view"
@@ -50,26 +38,18 @@ const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
       <CardBody tag="div">
         {data.icon?.length > 0 && (
           <div className="iconblock-icon">
-            <Icon icon={data.icon} aria-hidden={true} title={cardTitle} />
+            <Icon icon={data.icon} aria-hidden={true} title={data.title} />
           </div>
         )}
 
         {data.title && (
           <div className="iconblock-title">
-            {redraft(
-              data.title,
-              config.settings.richtextViewSettings.ToHTMLRenderers,
-              config.settings.richtextViewSettings.ToHTMLOptions,
-            )}
+            {blockHasTitle ? <h3>{data.title}</h3> : 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 && (
@@ -80,7 +60,7 @@ const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
             text={data.linkMoreTitle || intl.formatMessage(messages.vedi)}
             aria-label={`${
               data.linkMoreTitle || intl.formatMessage(messages.vedi)
-            } ${data.title ? cardTitle[0] : ''}`}
+            } ${data.title ?? ''}`}
           />
         )}
       </CardBody>

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

@@ -10,7 +10,7 @@ import { Container, Row, Col } from 'design-react-kit';
 import { SidebarPortal } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { UniversalLink } from '@plone/volto/components';
-
+import { handleKeyDownOwnFocusManagement } from 'design-comuni-plone-theme/helpers/blocks';
 import {
   withDNDContext,
   SubblocksEdit,
@@ -46,7 +46,71 @@ class Edit extends SubblocksEdit {
   constructor(props) {
     super(props);
     this.state.selectedField = 'title';
+    this.nodeF = React.createRef();
+  }
+
+  UNSAFE_componentWillReceiveProps(newProps) {
+    if (newProps.selected) {
+      if (!this.props.selected) {
+        if (!this.state.selectedField && this.state.subIndexSelected < 0) {
+          //a11y - test subIndexSelected<0 per gestire il focus con navigazione da tastiera al contrario (dal blocco successivo a questo blocco)
+          this.setState({ selectedField: 'title' });
+        }
+      }
+    } else {
+      this.setState({ selectedField: null });
+    }
+  }
+
+  handleEnter = (e) => {
+    if (
+      this.props.selected &&
+      this.state.subIndexSelected < 0 &&
+      !this.state.selectedField
+    ) {
+      handleKeyDownOwnFocusManagement(e, this.props);
+    }
+  };
+
+  handleClick = (e) => {
+    const hasParent = (element, className) => {
+      if (!element.parentNode) {
+        return false;
+      }
+
+      if (element.classList.contains(className)) {
+        return true;
+      }
+
+      return hasParent(element.parentNode, className);
+    };
+    const clickOutsideSubblocks =
+      !e.target.classList.contains('volto-subblocks-wrapper') &&
+      !hasParent(e.target, 'volto-subblocks-wrapper');
+
+    if (clickOutsideSubblocks) {
+      this.setState({ subIndexSelected: -1 });
+    }
+  };
+
+  componentDidMount() {
+    if (this.props.selected && this.node) {
+      this.node.focus();
+    }
+    if (this.props.selected && this.nodeF.current) {
+      this.nodeF.current.focus();
+    }
+
+    if (this.state.subblocks.length === 0) {
+      this.addSubblock();
+    }
+
+    if (this.nodeF && this.nodeF.current) {
+      this.nodeF.current.addEventListener('keydown', this.handleEnter, false);
+      this.nodeF.current.addEventListener('click', this.handleClick, false);
+    }
   }
+
   /**
    * Render method.
    * @method render
@@ -59,8 +123,12 @@ class Edit extends SubblocksEdit {
     const Image = config.getComponent({ name: 'Image' }).component;
 
     return (
-      <div className="public-ui">
-        <div className="full-width section py-5">
+      <div className="public-ui" tabIndex="-1" ref={this.nodeF}>
+        <div
+          className="full-width section py-5"
+          role="form"
+          aria-label={this.props.blocksConfig[this.props.type].title}
+        >
           {this.props.data.background?.[0] ? (
             <div className="background-image">
               <Image
@@ -79,19 +147,24 @@ 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={(f) => {
+                    this.setState({
+                      selectedField: f,
+                      subIndexSelected: -1,
                     });
+                    if (!this.props.selected) {
+                      //a11y - per il focus del blocco da tastiera
+                      this.props.onSelectBlock(this.props.block);
+                    }
                   }}
                   placeholder={this.props.intl.formatMessage(messages.title)}
-                  showToolbar={false}
-                  onSelectBlock={() => {}}
-                  onAddBlock={() => {
+                  focusNextField={() => {
                     this.setState({ selectedField: 'description' });
                   }}
                 />
@@ -99,35 +172,50 @@ class Edit extends SubblocksEdit {
 
               <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={(f) => {
+                    this.setState({
+                      selectedField: f,
+                      subIndexSelected: -1,
+                    });
+                  }}
                   placeholder={this.props.intl.formatMessage(
                     messages.description,
                   )}
-                  showToolbar={true}
-                  onSelectBlock={() => {}}
-                  onAddBlock={() => {}}
+                  focusPrevField={() => {
+                    this.setState({ selectedField: 'title' });
+                  }}
+                  focusNextField={() => {
+                    this.setState({ selectedField: null, subIndexSelected: 0 });
+                  }}
                 />
               </div>
             </div>
-
             <SubblocksWrapper node={this.node}>
               <Row>
                 {this.state.subblocks.map((subblock, subindex) => (
                   <Col lg="4" xl="3" key={subblock.id}>
                     <EditBlock
+                      {...this.props}
                       data={subblock}
                       index={subindex}
+                      blockIndex={this.props.index}
                       selected={this.isSubblockSelected(subindex)}
                       {...this.subblockProps}
+                      onChangeFocus={this.onSubblockChangeFocus}
+                      isFirst={subindex === 0}
+                      isLast={subindex === this.state.subblocks?.length - 1}
                       openObjectBrowser={this.props.openObjectBrowser}
+                      onFocusPreviousBlock={() => {
+                        this.setState({
+                          selectedField: 'description',
+                          subIndexSelected: -1,
+                        });
+                      }}
                     />
                   </Col>
                 ))}
@@ -141,7 +229,6 @@ class Edit extends SubblocksEdit {
                 )}
               </Row>
             </SubblocksWrapper>
-
             {this.props.data.href && this.props.data.linkMoreTitle && (
               <div className="link-button text-center my-4">
                 <UniversalLink

package/src/components/ItaliaTheme/Blocks/IconBlocks/Sidebar.jsx

@@ -3,8 +3,6 @@ import PropTypes from 'prop-types';
 import { defineMessages, useIntl } from 'react-intl';
 import { Segment, Accordion } from 'semantic-ui-react';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import redraft from 'redraft';
-
 import { TextWidget, Icon, ObjectBrowserWidget } from '@plone/volto/components';
 import upSVG from '@plone/volto/icons/up-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';
@@ -104,13 +102,7 @@ const Sidebar = ({
                   index={index}
                   onClick={() => setSelected(selected === index ? null : index)}
                 >
-                  {subblock.title
-                    ? redraft(
-                        subblock.title,
-                        config.settings.richtextViewSettings.ToHTMLRenderers,
-                        config.settings.richtextViewSettings.ToHTMLOptions,
-                      )
-                    : `Blocco ${index + 1}`}
+                  {subblock.title ?? `Blocco ${index + 1}`}
                   {selected === index ? (
                     <Icon name={upSVG} size="20px" />
                   ) : (

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

@@ -5,13 +5,12 @@
 
 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 } from '@plone/volto/helpers';
 import { UniversalLink } from '@plone/volto/components';
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 import config from '@plone/volto/registry';
-import { checkRedraftHasContent } from 'design-comuni-plone-theme/helpers';
 
 /**
  * View IconsBlock block class.
@@ -41,22 +40,14 @@ const IconsBlockView = ({ data, block }) => {
           )}
           <Container className="px-md-4">
             <div className="block-header">
-              {checkRedraftHasContent(data.title) && (
+              {data.title && (
                 <div className="title">
-                  {redraft(
-                    data.title,
-                    config.settings.richtextViewSettings.ToHTMLRenderers,
-                    config.settings.richtextViewSettings.ToHTMLOptions,
-                  )}
+                  <h2>{data.title}</h2>
                 </div>
               )}
-              {checkRedraftHasContent(data.description) && (
+              {data.description && (
                 <div className="description">
-                  {redraft(
-                    data.description,
-                    config.settings.richtextViewSettings.ToHTMLRenderers,
-                    config.settings.richtextViewSettings.ToHTMLOptions,
-                  )}
+                  <TextBlockView data={{ value: data.description }} />
                 </div>
               )}
             </div>
@@ -68,6 +59,7 @@ const IconsBlockView = ({ data, block }) => {
                     key={index}
                     id={id}
                     index={index}
+                    blockHasTitle={!!data.title}
                   />
                 </Col>
               ))}

package/src/components/ItaliaTheme/Blocks/Listing/CardWithSlideUpTextTemplate.jsx

@@ -103,7 +103,6 @@ const CardWithSlideUpTextTemplate = (props) => {
                     {title.substring(0, 50)}
                   </h3>
                 </UniversalLink>
-
                 <div className="box-slide-up">
                   {show_description && item.description && (
                     <p>{item.description}</p>

package/src/components/ItaliaTheme/Blocks/NumbersBlock/Block/EditBlock.jsx

@@ -31,7 +31,7 @@ class EditBlock extends SubblockEdit {
    * Constructor
    * @method constructor
    * @param {Object} props Component properties
-   * @constructs WysiwygEditor
+   * @constructs Numbers Block edit
    */
   constructor(props) {
     super(props);
@@ -51,6 +51,7 @@ class EditBlock extends SubblockEdit {
     //   }
     // });
   }
+
   /**
    * Render method.
    * @method render
@@ -72,25 +73,36 @@ class EditBlock extends SubblockEdit {
               }}
             >
               <TextEditorWidget
+                {...this.props}
+                showToolbar={false}
                 data={this.props.data}
                 fieldName="title"
                 selected={this.props.selected && this.state.focusOn === 'title'}
+                setSelected={(f) => {
+                  this.setState({ focusOn: f });
+                }}
                 block={this.props.block}
-                onChangeBlock={this.onChange}
+                index={this.props.blockIndex}
+                onChangeBlock={(block, _data) => {
+                  this.props.onChangeBlock(this.props.index, _data);
+                }}
                 placeholder={this.props.intl.formatMessage(
                   messages.numberPlaceholder,
                 )}
-                prevFocus="text"
-                nextFocus="text"
-                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>
           </div>
-
           <div
             className="subblock-text"
             onClick={() => {
@@ -98,21 +110,39 @@ class EditBlock extends SubblockEdit {
             }}
           >
             <TextEditorWidget
+              {...this.props}
+              showToolbar={false}
               data={this.props.data}
+              key="text"
               fieldName="text"
               selected={this.props.selected && this.state.focusOn === 'text'}
+              setSelected={(f) => {
+                if (!this.props.selected) {
+                  //a11y - per il focus del blocco da tastiera con navigazione inversa
+                  this.props.onSubblockChangeFocus(this.props.index);
+                  this.props.onSelectBlock(this.props.block);
+                }
+                this.setState({ focusOn: f });
+              }}
               block={this.props.block}
-              onChangeBlock={this.onChange}
+              index={this.props.blockIndex}
+              onChangeBlock={(block, _data) => {
+                this.props.onChangeBlock(this.props.index, _data);
+              }}
               placeholder={this.props.intl.formatMessage(
                 messages.descriptionPlaceholder,
               )}
-              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' });
               }}
-              showToolbar={false}
-              key="text"
             />
           </div>
         </div>

package/src/components/ItaliaTheme/Blocks/NumbersBlock/Block/ViewBlock.jsx

@@ -5,8 +5,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import redraft from 'redraft';
-import config from '@plone/volto/registry';
 
 /**
  * ViewBlock class.
@@ -17,23 +15,9 @@ const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
   return (
     <div className="block-number">
       {data.title && (
-        <div className="subblock-title font-monospace">
-          {redraft(
-            data.title,
-            config.settings.richtextViewSettings.ToHTMLRenderers,
-            config.settings.richtextViewSettings.ToHTMLOptions,
-          )}
-        </div>
-      )}
-      {data.text && (
-        <div className="subblock-text">
-          {redraft(
-            data.text,
-            config.settings.richtextViewSettings.ToHTMLRenderers,
-            config.settings.richtextViewSettings.ToHTMLOptions,
-          )}
-        </div>
+        <div className="subblock-title font-monospace">{data.title}</div>
       )}
+      {data.text && <div className="subblock-text">{data.text}</div>}
     </div>
   );
 };