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

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

@@ -38,7 +38,7 @@ class EditBlock extends SubblockEdit {
    * Constructor
    * @method constructor
    * @param {Object} props Component properties
-   * @constructs WysiwygEditor
+   * @constructs Accordion Edit
    */
   constructor(props) {
     super(props);
@@ -87,30 +87,33 @@ class EditBlock extends SubblockEdit {
               }}
             >
               <TextEditorWidget
+                {...this.props}
+                key="title"
+                showToolbar={false}
                 data={this.props.data}
                 fieldName="title"
-                selected={this.props.selected && this.state.focusOn === 'title'}
-                block={this.props.block}
-                onChangeBlock={this.onChange}
+                onChangeBlock={(block, _data) => {
+                  this.onChange(_data);
+                }}
                 placeholder={this.props.intl.formatMessage(
                   messages.titlePlaceholder,
                 )}
-                onSelectBlock={() => {}}
-                onAddBlock={() => {
-                  this.setState({ focusOn: 'text' });
+                selected={this.props.selected && this.state.focusOn === 'title'}
+                setSelected={(f) => {
+                  this.setState({
+                    focusOn: f,
+                  });
                 }}
-                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,31 +126,33 @@ class EditBlock extends SubblockEdit {
             >
               <div className="accordion-inner">
                 <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,
                   )}
-                  onAddBlock={this.props.onFocusNextBlock}
-                  onFocusNextBlock={
-                    this.props.isLast
-                      ? this.props.onFocusNextBlock
-                      : () => {
-                          this.setState({ focusOn: null });
-                          this.props.onSubblockChangeFocus(
-                            this.props.index + 1,
-                          );
+                  onChangeBlock={(block, _data) => {
+                    this.onChange(_data);
+                  }}
+                  setSelected={(f) => this.setState({ focusOn: f })}
+                  focusNextField={
+                    !this.props.isLast
+                      ? () => {
+                          this.setState({
+                            focusOn: null,
+                            subIndexSelected: this.props.index + 1,
+                          });
                         }
+                      : null //default go to next block
                   }
-                  onFocusPreviousBlock={() => {
+                  focusPrevField={() => {
                     this.setState({ focusOn: 'title' });
                   }}
-                  key="text"
                 />
               </div>
               {this.props.data.href && (

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

@@ -5,12 +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 config from '@plone/volto/registry';
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 
 const messages = defineMessages({
   vedi: {
@@ -34,6 +33,7 @@ const messages = defineMessages({
  */
 const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
   const intl = useIntl();
+
   return (
     <div className="accordion-item subblock-view">
       {data.title && (
@@ -55,11 +55,7 @@ const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
               }
             />
 
-            {redraft(
-              data.title,
-              config.settings.richtextViewSettings.ToHTMLRenderers,
-              config.settings.richtextViewSettings.ToHTMLOptions,
-            )}
+            {data.title}
           </button>
         </h3>
       )}
@@ -72,11 +68,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">

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

@@ -14,6 +14,7 @@ import {
 } from 'volto-subblocks';
 
 import { SidebarPortal } from '@plone/volto/components';
+import { handleKeyDownOwnFocusManagement } from 'design-comuni-plone-theme/helpers/blocks';
 import Sidebar from './Sidebar.jsx';
 
 import { defineMessages } from 'react-intl';
@@ -30,6 +31,68 @@ const messages = defineMessages({
  * @extends Component
  */
 class Edit extends SubblocksEdit {
+  constructor(props) {
+    super(props);
+    this.nodeF = React.createRef();
+  }
+
+  UNSAFE_componentWillReceiveProps(newProps) {
+    if (newProps.selected) {
+      if (!this.props.selected) {
+        if (this.state.subIndexSelected < 0) {
+          this.onSubblockChangeFocus(0);
+        }
+      }
+    } else {
+      this.onSubblockChangeFocus(-1);
+    }
+  }
+
+  handleEnter = (e) => {
+    if (this.props.selected && this.state.subIndexSelected < 0) {
+      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
@@ -40,7 +103,7 @@ class Edit extends SubblocksEdit {
       return <div />;
     }
     return (
-      <div className="public-ui">
+      <div className="public-ui" tabIndex="-1" ref={this.nodeF}>
         <div className="full-width section section-muted section-inset-shadow py-5 is-edit-mode">
           <Container className="px-md-4">
             <Card className="card-bg rounded" noWrapper={false} space tag="div">
@@ -49,17 +112,15 @@ class Edit extends SubblocksEdit {
                   {this.state.subblocks.map((subblock, subindex) => (
                     <div className="accordion-item" key={subblock.id}>
                       <EditBlock
+                        {...this.props}
+                        {...this.subblockProps}
+                        onChangeFocus={this.onSubblockChangeFocus}
                         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}
                       />

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

@@ -3,18 +3,14 @@
  * @module components/manage/Blocks/Image/Edit
  */
 
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
+import React, { useEffect } from 'react';
 
 import cx from 'classnames';
 import { Container, Row, Col } from 'design-react-kit';
 
-import { createContent } from '@plone/volto/actions';
 import { SidebarPortal } from '@plone/volto/components';
-import { defineMessages, injectIntl } from 'react-intl';
-
+import { defineMessages, useIntl } from 'react-intl';
+import { useHandleDetachedBlockFocus } from 'design-comuni-plone-theme/helpers/blocks';
 import {
   AlertSidebar,
   TextEditorWidget,
@@ -26,116 +22,67 @@ const messages = defineMessages({
     defaultMessage: 'Digita il testo…',
   },
 });
-/**
- * Edit Alert block class.
- * @class Edit
- * @extends Component
- */
-class Edit extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    selected: PropTypes.bool.isRequired,
-    block: PropTypes.string.isRequired,
-    index: PropTypes.number.isRequired,
-    data: PropTypes.objectOf(PropTypes.any).isRequired,
-    content: PropTypes.objectOf(PropTypes.any).isRequired,
-    request: PropTypes.shape({
-      loading: PropTypes.bool,
-      loaded: PropTypes.bool,
-    }).isRequired,
-    pathname: PropTypes.string.isRequired,
-    onChangeBlock: PropTypes.func.isRequired,
-    onSelectBlock: PropTypes.func.isRequired,
-    onDeleteBlock: PropTypes.func.isRequired,
-    onFocusPreviousBlock: PropTypes.func.isRequired,
-    onFocusNextBlock: PropTypes.func.isRequired,
-    handleKeyDown: PropTypes.func.isRequired,
-    createContent: PropTypes.func.isRequired,
-  };
 
-  constructor(props) {
-    super(props);
-    if (!this.props.data.bg_color) {
-      this.props.data.bg_color = this.props.data.color ?? 'warning'; // backwards compatibility with previous background-color variable name 'color'
-    }
-    this.blockNode = React.createRef();
-  }
+const Edit = (props) => {
+  const { data, onChangeBlock, block, selected } = props;
+  const intl = useIntl();
+  const { selectedField, setSelectedField } = useHandleDetachedBlockFocus(
+    props,
+    'text',
+  );
 
-  render() {
-    if (__SERVER__) {
-      return <div />;
+  useEffect(() => {
+    if (!data.bg_color) {
+      onChangeBlock(block, {
+        ...data,
+        bg_color: data.color ?? 'warning',
+      });
     }
-    return (
-      <div className="public-ui">
-        <div
-          className={cx('alertblock', {
-            selected: this.props.selected,
-          })}
-        >
-          <Row
-            className={cx(
-              'full-width p-5',
-              'bg-alert-' + this.props.data.bg_color,
-            )}
-          >
-            <Container className="ui">
-              <Row className="align-items-start">
-                {this.props.data.image?.data && (
-                  <Col sm={2} className="pb-3 image-col">
-                    <img
-                      src={`data:${this.props.data.image['content-type']};${this.props.data.image.encoding},${this.props.data.image.data}`}
-                      alt=""
-                      className={cx('left-image', [
-                        this.props.data.sizeImage
-                          ? 'size-' + this.props.data.sizeImage
-                          : 'size-l',
-                      ])}
-                    />
-                  </Col>
-                )}
-                <Col>
-                  <TextEditorWidget
-                    data={this.props.data}
-                    fieldName="text"
-                    selected={this.props.selected}
-                    block={this.props.block}
-                    onChangeBlock={(data) =>
-                      this.props.onChangeBlock(this.props.block, data)
-                    }
-                    placeholder={this.props.intl.formatMessage(
-                      messages.content_placeholder,
-                    )}
-                    showToolbar={true}
-                    onSelectBlock={this.props.onSelectBlock}
-                    onAddBlock={this.props.onAddBlock}
-                    index={this.props.index}
-                    onFocusNextBlock={this.props.onFocusNextBlock}
-                    onFocusPreviousBlock={this.props.onFocusPreviousBlock}
+  }, [data, onChangeBlock, block]);
+
+  return __SERVER__ ? (
+    <div />
+  ) : (
+    <div className="public-ui" tabIndex="-1">
+      <div
+        className={cx('alertblock', {
+          selected: selected,
+        })}
+      >
+        <Row className={cx('full-width p-5', 'bg-alert-' + data.bg_color)}>
+          <Container className="ui">
+            <Row className="align-items-start">
+              {data.image?.data && (
+                <Col sm={2} className="pb-3 image-col">
+                  <img
+                    src={`data:${data.image['content-type']};${data.image.encoding},${data.image.data}`}
+                    alt=""
+                    className={cx('left-image', [
+                      data.sizeImage ? 'size-' + data.sizeImage : 'size-l',
+                    ])}
                   />
                 </Col>
-              </Row>
-            </Container>
-          </Row>
-        </div>
-        <SidebarPortal selected={this.props.selected}>
-          <AlertSidebar {...this.props} />
-        </SidebarPortal>
+              )}
+              <Col>
+                <TextEditorWidget
+                  {...props}
+                  data={data}
+                  fieldName="text"
+                  selected={selectedField === 'text'}
+                  setSelected={setSelectedField}
+                  placeholder={intl.formatMessage(messages.content_placeholder)}
+                  showToolbar={true}
+                />
+              </Col>
+            </Row>
+          </Container>
+        </Row>
       </div>
-    );
-  }
-}
+      <SidebarPortal selected={selected}>
+        <AlertSidebar {...props} />
+      </SidebarPortal>
+    </div>
+  );
+};
 
-export default compose(
-  injectIntl,
-  connect(
-    (state) => ({
-      request: state.content.create,
-      content: state.content.data,
-    }),
-    { createContent },
-  ),
-)(Edit);
+export default Edit;

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

@@ -68,6 +68,7 @@ class Sidebar extends Component {
         <Segment className="form">
           <ColorListWidget
             id="bg_color"
+            className="alert-colors-widget"
             title={this.props.intl.formatMessage(messages.Color)}
             value={this.props.data.bg_color}
             onChange={(id, value) => {

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

@@ -6,27 +6,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import redraft from 'redraft';
 import { Container, Row, Col } from 'design-react-kit';
 //import { isCmsUi } from '@plone/volto/helpers';
-import config from '@plone/volto/registry';
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 
 /**
  * View Alert block class.
  * @class View
  * @extends Component
  */
-const View = ({ data, pathname }) => {
-  //const isCmsUI = pathname ? isCmsUi(pathname) : false
-
-  const content = data.text
-    ? redraft(
-        data.text,
-        config.settings.richtextViewSettings.ToHTMLRenderers,
-        config.settings.richtextViewSettings.ToHTMLOptions,
-      )
-    : '';
-
+const View = ({ data, id }) => {
   const background_color = data.bg_color ?? data.color; // backwards compatibility with previous background-color variable name 'color'
 
   return (
@@ -47,7 +36,9 @@ const View = ({ data, pathname }) => {
                 />
               </Col>
             )}
-            <Col>{content}</Col>
+            <Col>
+              <TextBlockView id={id} data={{ value: data.text }} />
+            </Col>
           </Row>
         </Container>
       </div>

package/src/components/ItaliaTheme/Blocks/ArgumentsInEvidence/Block.jsx

@@ -8,11 +8,11 @@ import {
   CardText,
   CardReadMore,
 } from 'design-react-kit';
-import redraft from 'redraft';
+
 import { UniversalLink } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { ArgumentIcon } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
-import config from '@plone/volto/registry';
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 
 const messages = defineMessages({
   text: {
@@ -33,10 +33,11 @@ const Block = ({
   data,
   inEditMode,
   selected,
-  focusOn,
   block,
   onChange,
   intl,
+  index,
+  ...otherProps
 }) => {
   const argument = data?.argument ? data?.argument[0] : null;
 
@@ -49,21 +50,25 @@ const Block = ({
           <CardText tag="p">{argument?.description}</CardText>
           {inEditMode ? (
             <TextEditorWidget
+              {...otherProps}
               data={data}
+              block={block}
               fieldName="title"
               selected={selected}
-              block={block}
-              onChangeBlock={onChange}
               placeholder={intl.formatMessage(messages.text)}
-              focusOn={focusOn}
+              onChangeBlock={(block, _data) => {
+                onChange(_data);
+              }}
+              setSelected={() => {
+                otherProps.onSubblockChangeFocus(index);
+              }}
             />
           ) : (
             <div>
-              {redraft(
-                data.title,
-                config.settings.richtextViewSettings.ToHTMLRenderers,
-                config.settings.richtextViewSettings.ToHTMLOptions,
-              )}
+              <TextBlockView
+                id={otherProps.id + '-' + index}
+                data={{ value: data.title }}
+              />
             </div>
           )}
           {argument && (

package/src/components/ItaliaTheme/Blocks/ArgumentsInEvidence/Body.jsx

@@ -23,13 +23,14 @@ class Body extends SubblockEdit {
     return (
       <Subblock subblock={this} className="subblock-edit">
         <Block
+          {...this.props}
           data={this.props.data}
           index={this.props.index}
           key={this.props.index}
           inEditMode={this.props.inEditMode}
           selected={this.props.selected || this.state.focusOn === 'title'}
           block={this.props.block}
-          focusOn={this.props.focusOn}
+          focusOn={this.state.focusOn}
           intl={this.props.intl}
           onChange={this.onChange}
         />

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

@@ -11,20 +11,58 @@ import {
 import { SidebarPortal } from '@plone/volto/components';
 import Sidebar from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/ArgumentsInEvidence/Sidebar.jsx';
 import { ArgumentsInEvidenceBackground } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { handleKeyDownOwnFocusManagement } from 'design-comuni-plone-theme/helpers/blocks';
 
 class Edit extends SubblocksEdit {
+  handleEnter = (e) => {
+    if (this.props.selected) {
+      handleKeyDownOwnFocusManagement(e, this.props);
+    }
+  };
+
+  componentDidMount() {
+    const blockNode = this.props.blockNode;
+
+    if (this.props.selected && this.node) {
+      this.node.focus();
+    }
+    if (this.state.subblocks.length === 0) {
+      this.addSubblock();
+    }
+
+    if (blockNode && blockNode.current) {
+      blockNode.current.addEventListener('keydown', this.handleEnter, false);
+    }
+  }
+
+  /**
+   * Component will receive props
+   * @method componentWillUnmount
+   * @returns {undefined}
+   */
+  componentWillUnmount() {
+    if (this.props.selected && this.node) {
+      this.node.focus();
+    }
+    const blockNode = this.props.blockNode;
+    if (blockNode && blockNode.current) {
+      blockNode.current.removeEventListener('keydown', this.handleEnter, false);
+    }
+  }
+
   render() {
     const hasArguments = this.props.data.subblocks?.some((subblock) => {
       return subblock.argument?.length > 0;
     });
 
     return (
-      <div className="argumentInEvidence public-ui">
+      <div className="argumentInEvidence public-ui" tabIndex="-1">
         {hasArguments && <ArgumentsInEvidenceBackground inEditMode={true} />}
         <SubblocksWrapper node={this.node}>
           <BodyWrapper data={this.props.data} inEditMode={false}>
             {this.state.subblocks.map((subblock, subindex) => (
               <Body
+                {...this.props}
                 data={subblock}
                 index={subindex}
                 key={subblock.id}