design-comuni-plone-theme 11.10.2 → 12.0.0-alpha.1

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);
@@ -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,33 @@ 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) => {
+                  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

@@ -5,14 +5,14 @@
 
 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 { RichTextRender } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 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: {
@@ -36,11 +36,8 @@ const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
     },
   };
 
-  const cardTitle = redraft(data.title, rawStringRenderer, {
-    cleanup: false,
-  });
-
   const intl = useIntl();
+
   return (
     <Card
       className="card-bg rounded subblock-view"
@@ -55,22 +52,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 && (
@@ -81,7 +66,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,68 @@ 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) {
+        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,7 +120,7 @@ class Edit extends SubblocksEdit {
     const Image = config.getComponent({ name: 'Image' }).component;
 
     return (
-      <div className="public-ui">
+      <div className="public-ui" tabIndex="-1" ref={this.nodeF}>
         <div className="full-width section py-5">
           {this.props.data.background?.[0] ? (
             <div className="background-image">
@@ -79,19 +140,20 @@ 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,
                     });
                   }}
                   placeholder={this.props.intl.formatMessage(messages.title)}
-                  showToolbar={false}
-                  onSelectBlock={() => {}}
-                  onAddBlock={() => {
+                  focusNextField={() => {
                     this.setState({ selectedField: 'description' });
                   }}
                 />
@@ -99,35 +161,47 @@ 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' });
+                      }}
                     />
                   </Col>
                 ))}
@@ -141,7 +215,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,10 @@ const IconsBlockView = ({ data, block }) => {
           )}
           <Container className="px-md-4">
             <div className="block-header">
-              {checkRedraftHasContent(data.title) && (
-                <div className="title">
-                  {redraft(
-                    data.title,
-                    config.settings.richtextViewSettings.ToHTMLRenderers,
-                    config.settings.richtextViewSettings.ToHTMLOptions,
-                  )}
-                </div>
-              )}
-              {checkRedraftHasContent(data.description) && (
+              {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>

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,39 @@ 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 });
+                  if (!f) {
+                    this.props.onSubblockChangeFocus(-1);
+                  }
+                }}
                 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 +113,37 @@ 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) => {
+                this.setState({ focusOn: f });
+                if (!f) {
+                  this.props.onSubblockChangeFocus(-1);
+                }
+              }}
               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>
   );
 };