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

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

@@ -38,7 +38,7 @@ class EditBlock extends SubblockEdit {
    * Constructor
    * @method constructor
    * @param {Object} props Component properties
-   * @constructs WysiwygEditor
+   * @constructs Contacts Blocks edit
    */
   constructor(props) {
     super(props);
@@ -58,6 +58,18 @@ class EditBlock extends SubblockEdit {
       }
     });
   }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (!this.props.selected && nextProps.focusOn) {
+      this.props.onSelectBlock(this.props.block);
+    }
+
+    if (nextProps.selected && !this.state.focusOn) {
+      this.setState({ focusOn: 'title' });
+    } else if (!nextProps.selected) {
+      this.setState({ focusOn: null });
+    }
+  }
   /**
    * Render method.
    * @method render
@@ -69,7 +81,7 @@ class EditBlock extends SubblockEdit {
     }
 
     return (
-      <Subblock subblock={this} className="subblock-edit">
+      <Subblock subblock={this} className="subblock-edit" tabIndex="-1">
         <Card
           className="card-bg rounded"
           noWrapper={false}
@@ -81,104 +93,113 @@ class EditBlock extends SubblockEdit {
           <CardBody tag="div">
             <div className="contact-title">
               {/* eslint-disable */}
-              <div
-                onClick={() => {
-                  this.setState({ focusOn: 'title' });
+              <TextEditorWidget
+                {...this.props}
+                key="title"
+                showToolbar={false}
+                data={this.props.data}
+                fieldName="title"
+                onChangeBlock={(block, _data) => {
+                  this.props.onChangeBlock(this.props.index, _data);
                 }}
-              >
-                <TextEditorWidget
-                  data={this.props.data}
-                  fieldName="title"
-                  selected={
-                    this.props.selected && this.state.focusOn === 'title'
-                  }
-                  block={this.props.block}
-                  onChangeBlock={this.onChange}
-                  placeholder={this.props.intl.formatMessage(
-                    messages.titlePlaceholder,
-                  )}
-                  nextFocus="text"
-                  setFocus={(f) => {
-                    this.setState({ focusOn: f });
-                  }}
-                  showToolbar={false}
-                  key="title"
-                />
-              </div>
+                placeholder={this.props.intl.formatMessage(
+                  messages.titlePlaceholder,
+                )}
+                selected={this.props.selected && this.state.focusOn === 'title'}
+                setSelected={(f) => {
+                  this.setState({ focusOn: f });
+                }}
+                focusNextField={() => {
+                  this.setState({ focusOn: 'text' });
+                }}
+                focusPrevField={
+                  this.props.isFirst
+                    ? this.props.onFocusPreviousBlock
+                    : () => {
+                        this.props.onSubblockChangeFocus(this.props.index - 1);
+                      }
+                }
+              />
             </div>
 
-            <div
-              className="contact-text"
-              onClick={() => {
-                this.setState({ focusOn: 'text' });
-              }}
-            >
+            <div className="contact-text">
               <TextEditorWidget
+                {...this.props}
+                key="text"
                 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,
                 )}
-                prevFocus="title"
-                nextFocus="tel"
-                setFocus={(f) => {
-                  this.setState({ focusOn: f });
+                onChangeBlock={(block, _data) => {
+                  this.props.onChangeBlock(this.props.index, _data);
+                }}
+                selected={this.props.selected && this.state.focusOn === 'text'}
+                setSelected={(f) => this.setState({ focusOn: f })}
+                focusPrevField={() => {
+                  this.setState({ focusOn: 'title' });
+                }}
+                focusNextField={() => {
+                  this.setState({ focusOn: 'tel' });
                 }}
-                key="text"
               />
             </div>
 
-            <div
-              className="contact-info"
-              onClick={() => {
-                this.setState({ focusOn: 'tel' });
-              }}
-            >
+            <div className="contact-info">
               <div className="icon-wrapper">
                 <Icon icon="phone-alt" />
               </div>
               <TextEditorWidget
+                {...this.props}
+                key="tel"
                 data={this.props.data}
                 fieldName="tel"
+                wrapClass="tel"
                 selected={this.props.selected && this.state.focusOn === 'tel'}
-                block={this.props.block}
-                onChangeBlock={this.onChange}
+                onChangeBlock={(block, _data) => {
+                  this.props.onChangeBlock(this.props.index, _data);
+                }}
                 placeholder={this.props.intl.formatMessage(
                   messages.textPlaceholder,
                 )}
-                prevFocus="text"
-                setFocus={(f) => {
-                  this.setState({ focusOn: f });
+                setSelected={(f) => this.setState({ focusOn: f })}
+                focusPrevField={() => {
+                  this.setState({ focusOn: 'text' });
+                }}
+                focusNextField={() => {
+                  this.setState({ focusOn: 'email' });
                 }}
-                key="tel"
               />
             </div>
-            <div
-              className="contact-info"
-              onClick={() => {
-                this.setState({ focusOn: 'email' });
-              }}
-            >
+            <div className="contact-info">
               <div className="icon-wrapper">
                 <Icon icon="envelope" />
               </div>
               <TextEditorWidget
+                {...this.props}
+                key="email"
+                wrapClass="email"
                 data={this.props.data}
                 fieldName="email"
                 selected={this.props.selected && this.state.focusOn === 'email'}
-                block={this.props.block}
-                onChangeBlock={this.onChange}
+                onChangeBlock={(block, _data) => {
+                  this.props.onChangeBlock(this.props.index, _data);
+                }}
                 placeholder={this.props.intl.formatMessage(
                   messages.textPlaceholder,
                 )}
-                prevFocus="email"
-                setFocus={(f) => {
-                  this.setState({ focusOn: f });
+                setSelected={(f) => this.setState({ focusOn: f })}
+                focusPrevField={() => {
+                  this.setState({ focusOn: 'tel' });
                 }}
-                key="email"
+                focusNextField={
+                  !this.props.isLast
+                    ? () => {
+                        this.setState({ focusOn: null });
+                        this.props.onSubblockChangeFocus(this.props.index + 1);
+                      }
+                    : null //default go to next block
+                }
               />
             </div>
           </CardBody>

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

@@ -5,12 +5,10 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import redraft from 'redraft';
-
-import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { Card, CardBody } from 'design-react-kit';
-import config from '@plone/volto/registry';
-import { checkRedraftHasContent } from 'design-comuni-plone-theme/helpers';
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
+import { checkRichTextHasContent } from 'design-comuni-plone-theme/helpers';
+import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
 /**
  * ViewBlock class.
@@ -18,6 +16,16 @@ import { checkRedraftHasContent } from 'design-comuni-plone-theme/helpers';
  * @extends Component
  */
 const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
+  const text = checkRichTextHasContent(data.text) ? (
+    <TextBlockView data={{ value: data.text }} />
+  ) : null;
+  const tel = checkRichTextHasContent(data.tel) ? (
+    <TextBlockView data={{ value: data.tel }} />
+  ) : null;
+  const email = checkRichTextHasContent(data.email) ? (
+    <TextBlockView data={{ value: data.email }} />
+  ) : null;
+
   return (
     <Card
       className="card-bg rounded subblock-view "
@@ -26,52 +34,24 @@ const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
       tag="div"
     >
       <CardBody tag="div">
-        {checkRedraftHasContent(data.title) && (
-          <div className="contact-title">
-            {redraft(
-              data.title,
-              config.settings.richtextViewSettings.ToHTMLRenderers,
-              config.settings.richtextViewSettings.ToHTMLOptions,
-            )}
-          </div>
-        )}
-        {checkRedraftHasContent(data.text) && (
-          <div className="contact-text">
-            {redraft(
-              data.text,
-              config.settings.richtextViewSettings.ToHTMLRenderers,
-              config.settings.richtextViewSettings.ToHTMLOptions,
-            )}
-          </div>
-        )}
+        {data.title && <div className="contact-title">{data.title}</div>}
+        {text && <div className="contact-text">{text}</div>}
 
-        {checkRedraftHasContent(data.tel) && (
+        {tel && (
           <div className="contact-info">
             <div className="icon-wrapper">
               <Icon icon="phone-alt" />
             </div>
-            <div className="tel">
-              {redraft(
-                data.tel,
-                config.settings.richtextViewSettings.ToHTMLRenderers,
-                config.settings.richtextViewSettings.ToHTMLOptions,
-              )}
-            </div>
+            <div className="tel">{tel}</div>
           </div>
         )}
 
-        {checkRedraftHasContent(data.email) && (
+        {email && (
           <div className="contact-info">
             <div className="icon-wrapper">
               <Icon icon="envelope" />
             </div>
-            <div className="email">
-              {redraft(
-                data.email,
-                config.settings.richtextViewSettings.ToHTMLRenderers,
-                config.settings.richtextViewSettings.ToHTMLOptions,
-              )}
-            </div>
+            <div className="email">{email}</div>
           </div>
         )}
       </CardBody>

package/src/components/ItaliaTheme/Blocks/ContactsBlock/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,
@@ -44,7 +44,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
@@ -56,7 +117,7 @@ class Edit extends SubblocksEdit {
     }
 
     return (
-      <div className="public-ui">
+      <div className="public-ui" tabIndex="-1" ref={this.nodeF}>
         <div
           className={`full-width section bg-${
             this.props.data.bg_color ?? 'primary'
@@ -66,19 +127,18 @@ class Edit extends SubblocksEdit {
             <div className="block-header">
               <div className="title">
                 <TextEditorWidget
+                  {...this.props}
+                  key="title"
+                  showToolbar={false}
                   data={this.props.data}
                   fieldName="title"
                   selected={this.state.selectedField === 'title'}
-                  block={this.props.block}
-                  onChangeBlock={(data) => {
-                    this.props.onChangeBlock(this.props.block, {
-                      ...data,
-                    });
-                  }}
                   placeholder={this.props.intl.formatMessage(messages.title)}
-                  showToolbar={false}
                   onSelectBlock={() => {}}
-                  onAddBlock={() => {
+                  setSelected={(f) => {
+                    this.setState({ selectedField: f, subIndexSelected: -1 });
+                  }}
+                  focusNextField={() => {
                     this.setState({ selectedField: 'description' });
                   }}
                 />
@@ -86,21 +146,24 @@ class Edit extends SubblocksEdit {
 
               <div className="description">
                 <TextEditorWidget
+                  {...this.props}
+                  key="description"
                   data={this.props.data}
                   fieldName="description"
                   selected={this.state.selectedField === 'description'}
-                  block={this.props.block}
-                  onChangeBlock={(data) =>
-                    this.props.onChangeBlock(this.props.block, {
-                      ...data,
-                    })
-                  }
                   placeholder={this.props.intl.formatMessage(
                     messages.description,
                   )}
-                  showToolbar={true}
                   onSelectBlock={() => {}}
-                  onAddBlock={() => {}}
+                  setSelected={(f) => {
+                    this.setState({ selectedField: f, subIndexSelected: -1 });
+                  }}
+                  focusPrevField={() => {
+                    this.setState({ selectedField: 'title' });
+                  }}
+                  focusNextField={() => {
+                    this.setState({ selectedField: null, subIndexSelected: 0 });
+                  }}
                 />
               </div>
             </div>
@@ -116,11 +179,22 @@ class Edit extends SubblocksEdit {
                 {this.state.subblocks.map((subblock, subindex) => (
                   <Col lg="4" key={subblock.id} className="pb-3">
                     <EditBlock
+                      {...this.props}
                       data={subblock}
                       index={subindex}
                       selected={this.isSubblockSelected(subindex)}
                       {...this.subblockProps}
                       openObjectBrowser={this.props.openObjectBrowser}
+                      onSubblockChangeFocus={this.onSubblockChangeFocus}
+                      onChangeFocus={this.onSubblockChangeFocus}
+                      isLast={this.state.subblocks.length - 1 === subindex}
+                      isFirst={subindex === 0}
+                      onFocusPreviousBlock={() => {
+                        this.setState({
+                          selectedField: 'description',
+                          subIndexSelected: -1,
+                        });
+                      }}
                     />
                   </Col>
                 ))}
@@ -134,7 +208,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/ContactsBlock/View.jsx

@@ -5,43 +5,35 @@
 
 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 config from '@plone/volto/registry';
-
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 /**
  * View Accordion block class.
  * @class View
  * @extends Component
  */
-const AccordionView = ({ data, block }) => {
-  const id = new Date().getTime();
+const AccordionView = ({ data, block, id }) => {
+  const now = new Date().getTime();
   return (
-    <div className="block contacts">
+    <div className="block contacts" id={id}>
       <div className="public-ui">
         <div
           className={`full-width section bg-${data.bg_color ?? 'primary'} py-5`}
         >
           <Container className="px-md-4">
-            <div className="block-header">
-              <div className="title">
-                {redraft(
-                  data.title,
-                  config.settings.richtextViewSettings.ToHTMLRenderers,
-                  config.settings.richtextViewSettings.ToHTMLOptions,
-                )}
-              </div>
-              <div className="description">
-                {redraft(
-                  data.description,
-                  config.settings.richtextViewSettings.ToHTMLRenderers,
-                  config.settings.richtextViewSettings.ToHTMLOptions,
+            {(data.title || data.description) && (
+              <div className="block-header">
+                {data.title && <div className="title">{data.title}</div>}
+                {data.description && (
+                  <div className="description">
+                    <TextBlockView id={id} data={{ value: data.description }} />
+                  </div>
                 )}
               </div>
-            </div>
+            )}
             <Row
               className={
                 data.subblocks.length > 3
@@ -54,7 +46,7 @@ const AccordionView = ({ data, block }) => {
                   <ViewBlock
                     data={subblock}
                     key={index}
-                    id={id}
+                    id={now}
                     index={index}
                   />
                 </Col>

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

@@ -8,6 +8,7 @@ import cx from 'classnames';
 import { TextEditorWidget } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import Sidebar from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/CountDown/Sidebar';
 import CountDown from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/CountDown/CountDown';
+import { useHandleDetachedBlockFocus } from 'design-comuni-plone-theme/helpers/blocks';
 
 const messages = defineMessages({
   text: {
@@ -17,20 +18,16 @@ const messages = defineMessages({
 });
 
 const Edit = (props) => {
-  const {
-    data,
-    block,
-    onChangeBlock,
-    selected,
-    onSelectBlock,
-    onAddBlock,
-    index,
-  } = props;
+  const { data, block, selected, ...otherProps } = props;
   const intl = useIntl();
+  const { selectedField, setSelectedField } = useHandleDetachedBlockFocus(
+    props,
+    'text',
+  );
 
   return (
     <>
-      <div className="public-ui">
+      <div className="public-ui" tabIndex="-1">
         <div
           className={cx('block-content', { 'full-width': data.showFullWidth })}
         >
@@ -68,17 +65,16 @@ const Edit = (props) => {
                 className="text"
               >
                 <TextEditorWidget
+                  {...otherProps}
                   data={data}
                   fieldName="text"
-                  selected={selected}
+                  selected={selectedField === 'text'}
                   block={block}
-                  onChangeBlock={(data) => onChangeBlock(block, data)}
                   placeholder={intl.formatMessage(messages.text)}
-                  showToolbar={true}
-                  onSelectBlock={onSelectBlock}
-                  onAddBlock={onAddBlock}
-                  index={index}
-                  disableMoveToNearest={true}
+                  setSelected={setSelectedField}
+                  focusNextField={() => {
+                    setSelectedField('countdown_text');
+                  }}
                 />
               </Col>
               <Col
@@ -99,17 +95,17 @@ const Edit = (props) => {
                   showSeconds={data.showSeconds}
                 />
                 <TextEditorWidget
+                  {...otherProps}
+                  showToolbar={true}
                   data={data}
-                  fieldName="countdown_text"
-                  selected={selected}
                   block={block}
-                  onChangeBlock={(data) => onChangeBlock(block, data)}
+                  fieldName="countdown_text"
+                  selected={selectedField === 'countdown_text'}
                   placeholder={intl.formatMessage(messages.text)}
-                  showToolbar={true}
-                  onSelectBlock={onSelectBlock}
-                  onAddBlock={onAddBlock}
-                  index={index}
-                  disableMoveToNearest={true}
+                  setSelected={setSelectedField}
+                  focusPrevField={() => {
+                    setSelectedField('text');
+                  }}
                 />
               </Col>
             </Row>

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>