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

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

@@ -10,7 +10,7 @@ import { Container, Row, Col } from 'design-react-kit';
 import { SidebarPortal } from '@plone/volto/components';
 import { addAppURL, flattenToAppURL } from '@plone/volto/helpers';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
-
+import { handleKeyDownOwnFocusManagement } from 'design-comuni-plone-theme/helpers/blocks';
 import {
   withDNDContext,
   SubblocksEdit,
@@ -48,6 +48,66 @@ 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);
+    }
   }
 
   /**
@@ -61,7 +121,7 @@ class Edit extends SubblocksEdit {
     }
 
     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
@@ -119,22 +179,24 @@ class Edit extends SubblocksEdit {
 
                     <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 });
                         }}
+                        onChangeBlock={this.props.onChangeBlock}
                         placeholder={this.props.intl.formatMessage(
                           messages.title,
                         )}
-                        showToolbar={false}
-                        onSelectBlock={() => {}}
-                        onAddBlock={() => {
-                          this.setState({ selectedField: 'description' });
+                        focusNextField={() => {
+                          this.setState({
+                            selectedField: null,
+                            subIndexSelected: 0,
+                          });
                         }}
                       />
                     </div>
@@ -144,11 +206,22 @@ class Edit extends SubblocksEdit {
                 {this.state.subblocks.map((subblock, subindex) => (
                   <Col sm="6" lg="4" 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: 'title',
+                          subIndexSelected: -1,
+                        });
+                      }}
                     />
                   </Col>
                 ))}

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

@@ -5,12 +5,11 @@
 
 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 { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { addAppURL, flattenToAppURL } from '@plone/volto/helpers';
-import config from '@plone/volto/registry';
 
 /**
  * View block class.
@@ -62,15 +61,7 @@ const NumbersView = ({ data, block }) => {
                     </div>
                   )}
 
-                  {data.title && (
-                    <div className="title">
-                      {redraft(
-                        data.title,
-                        config.settings.richtextViewSettings.ToHTMLRenderers,
-                        config.settings.richtextViewSettings.ToHTMLOptions,
-                      )}
-                    </div>
-                  )}
+                  {data.title && <div className="title">{data.title}</div>}
                 </div>
               </Col>
 

package/src/components/ItaliaTheme/Blocks/TextCard/CardWithImage/Block.jsx

@@ -1,12 +1,12 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { Card, CardBody, Container, Row, Col } from 'design-react-kit';
 import { defineMessages, useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import redraft from 'redraft';
 import { TextEditorWidget } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import config from '@plone/volto/registry';
+import { useHandleDetachedBlockFocus } from 'design-comuni-plone-theme/helpers/blocks';
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 import cx from 'classnames';
 
 const messages = defineMessages({
@@ -44,63 +44,35 @@ const renderImage = (image, showImage, sizeNatural, altText = '') =>
     </div>
   ) : null;
 
-const Block = ({
-  data,
-  block,
-  inEditMode,
-  onChange,
-  onSelectBlock,
-  onAddBlock,
-  onFocusPreviousBlock,
-  onFocusNextBlock,
-  index,
-  selected,
-}) => {
+const Block = (props) => {
+  const { data, block, inEditMode, onChange, selected, ...otherProps } = props;
   const intl = useIntl();
-  const title = data?.image_card_title?.blocks[0]?.text;
+  const title = data?.image_card_title;
   const hasImage = data?.showImage;
   const content = data?.image_card_content;
 
-  const [selectedField, setSelectedField] = useState('title');
-
-  useEffect(() => {
-    if (selected) {
-      setSelectedField('title');
-    } else {
-      setSelectedField(null);
-    }
-  }, [selected]);
-
+  const { selectedField, setSelectedField } = useHandleDetachedBlockFocus(
+    props,
+    'image_card_title',
+  );
   return (
     <div className="image-text-card-wrapper">
       <h2 className="mb-4 mt-5" id={block.id + 'title'}>
         {inEditMode ? (
-          <div
-            onClick={() => {
-              setSelectedField('title');
-            }}
-            onFocus={() => {
-              setSelectedField('title');
+          <TextEditorWidget
+            {...otherProps}
+            showToolbar={false}
+            data={data}
+            block={block}
+            fieldName="image_card_title"
+            selected={selectedField === 'image_card_title'}
+            onChangeBlock={(block, data) => onChange(data)}
+            placeholder={intl.formatMessage(messages.image_card_title)}
+            setSelected={setSelectedField}
+            focusNextField={() => {
+              setSelectedField('image_card_content');
             }}
-          >
-            <TextEditorWidget
-              data={data}
-              fieldName="image_card_title"
-              selected={selectedField === 'title'}
-              block={block}
-              onChangeBlock={(data) => onChange(data)}
-              placeholder={intl.formatMessage(messages.image_card_title)}
-              showToolbar={false}
-              onSelectBlock={() => {}}
-              onAddBlock={() => {
-                setSelectedField('content');
-              }}
-              onFocusNextBlock={() => {
-                setSelectedField('content');
-              }}
-              onFocusPreviousBlock={onFocusPreviousBlock}
-            />
-          </div>
+          />
         ) : (
           title
         )}
@@ -139,28 +111,26 @@ const Block = ({
                 >
                   <div
                     onClick={() => {
-                      setSelectedField('content');
+                      setSelectedField('image_card_content');
                     }}
                     onFocus={() => {
-                      setSelectedField('content');
+                      setSelectedField('image_card_content');
                     }}
                   >
                     <TextEditorWidget
+                      {...otherProps}
+                      showToolbar={true}
                       data={data}
                       fieldName="image_card_content"
-                      selected={selectedField === 'content'}
                       block={block}
-                      onChangeBlock={(data) => onChange(data)}
+                      selected={selectedField === 'image_card_content'}
+                      onChangeBlock={(block, data) => onChange(data)}
                       placeholder={intl.formatMessage(
                         messages.image_card_content,
                       )}
-                      showToolbar={true}
-                      onSelectBlock={onSelectBlock}
-                      onAddBlock={onAddBlock}
-                      index={index}
-                      onFocusNextBlock={onFocusNextBlock}
-                      onFocusPreviousBlock={() => {
-                        setSelectedField('title');
+                      setSelected={setSelectedField}
+                      focusPrevField={() => {
+                        setSelectedField('image_card_title');
                       }}
                     />
                   </div>
@@ -195,11 +165,7 @@ const Block = ({
                     'ps-0': data?.rightImage,
                   })}
                 >
-                  {redraft(
-                    content,
-                    config.settings.richtextViewSettings.ToHTMLRenderers,
-                    config.settings.richtextViewSettings.ToHTMLOptions,
-                  )}
+                  <TextBlockView data={{ value: content }} />
                 </div>
               </Row>
             </Container>

package/src/components/ItaliaTheme/Blocks/TextCard/CardWithImage/Edit.jsx

@@ -89,19 +89,13 @@ class Edit extends Component {
       return <div />;
     }
     return (
-      <div>
+      <div tabIndex="-1">
         <BodyWrapper data={this.state.currentBlockData} inEditMode={true}>
           <Block
+            {...this.props}
             data={this.state.currentBlockData}
-            block={this.props.block}
             onChange={(obj) => this.onChange(obj)}
             inEditMode={true}
-            onSelectBlock={this.props.onSelectBlock}
-            onAddBlock={this.props.onAddBlock}
-            index={this.props.index}
-            selected={this.props.selected}
-            onFocusPreviousBlock={this.props.onFocusPreviousBlock}
-            onFocusNextBlock={this.props.onFocusNextBlock}
           />
         </BodyWrapper>
         <SidebarPortal selected={this.props.selected || false}>

package/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/BodyWrapper.jsx

@@ -7,8 +7,9 @@ const BodyWrapper = ({ inEditMode, children }) => {
       className={cx('block simple-text-block', {
         'public-ui': inEditMode,
       })}
+      {...(inEditMode ? { tabIndex: '-1' } : {})}
     >
-      <div>{children}</div>
+      {children}
     </div>
   );
 };

package/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/Edit.jsx

@@ -3,98 +3,112 @@
  * @module components/Blocks/TitleVM/Edit
  */
 
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import Block from './Block';
-import { injectIntl } from 'react-intl';
-import { isEqual } from 'lodash';
+import { defineMessages, useIntl } from 'react-intl';
+import { Card, CardBody, CardTitle } from 'design-react-kit';
+import { TextEditorWidget } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import BodyWrapper from './BodyWrapper';
+import { useHandleDetachedBlockFocus } from 'design-comuni-plone-theme/helpers/blocks';
+import { Divider } from 'semantic-ui-react';
 
+const messages = defineMessages({
+  simple_card_title: {
+    id: 'Type the title…',
+    defaultMessage: 'Type the title…',
+  },
+  simple_card_content: {
+    id: 'Type description…',
+    defaultMessage: 'Digita la descrizione…',
+  },
+  simple_card_click: {
+    id: 'Type text…',
+    defaultMessage: 'Digita il testo…',
+  },
+});
 /**
- * Edit title block class.
+ * Edit Calloout block class.
  * @class Edit
  * @extends Component
  */
-class Edit extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    properties: PropTypes.objectOf(PropTypes.any).isRequired,
-    selected: PropTypes.bool.isRequired,
-    index: PropTypes.number.isRequired,
-    onChangeField: PropTypes.func.isRequired,
-    onSelectBlock: PropTypes.func.isRequired,
-    onDeleteBlock: PropTypes.func.isRequired,
-    onAddBlock: PropTypes.func.isRequired,
-    onFocusPreviousBlock: PropTypes.func.isRequired,
-    onFocusNextBlock: PropTypes.func.isRequired,
-    block: PropTypes.string.isRequired,
-  };
+const Edit = (props) => {
+  const { data, onChangeBlock, block, onSelectBlock, selected, ...otherProps } =
+    props;
+  const intl = useIntl();
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs SimpleCard Edit block
-   */
-  constructor(props) {
-    super(props);
+  const { selectedField, setSelectedField } = useHandleDetachedBlockFocus(
+    props,
+    'simple_card_title',
+  );
 
-    if (!__SERVER__) {
-    }
-  }
+  return __SERVER__ ? (
+    <div />
+  ) : (
+    <BodyWrapper data={data} inEditMode={true}>
+      <div className="simple-text-card-wrapper">
+        <Card
+          color="white"
+          className="card-bg rounded"
+          noWrapper={false}
+          space
+          tag="div"
+        >
+          <CardBody>
+            <div className="simple-text-card cms-ui">
+              <CardTitle tag="h3" className="h4">
+                <TextEditorWidget
+                  {...otherProps}
+                  showToolbar={false}
+                  data={data}
+                  block={block}
+                  fieldName="simple_card_title"
+                  selected={selectedField === 'simple_card_title'}
+                  onChangeBlock={onChangeBlock}
+                  onSelectBlock={onSelectBlock}
+                  placeholder={intl.formatMessage(messages.simple_card_title)}
+                  setSelected={setSelectedField}
+                  focusNextField={() => {
+                    setSelectedField('simple_card_content');
+                  }}
+                />
+              </CardTitle>
+              <Divider />
+              <div>
+                <TextEditorWidget
+                  {...otherProps}
+                  showToolbar={true}
+                  data={data}
+                  fieldName="simple_card_content"
+                  selected={selectedField === 'simple_card_content'}
+                  setSelected={setSelectedField}
+                  block={block}
+                  onChangeBlock={onChangeBlock}
+                  onSelectBlock={onSelectBlock}
+                  placeholder={intl.formatMessage(messages.simple_card_content)}
+                  focusPrevField={() => {
+                    setSelectedField('simple_card_title');
+                  }}
+                />
+              </div>
+            </div>
+          </CardBody>
+        </Card>
+      </div>
+    </BodyWrapper>
+  );
+};
 
-  /**
-   * Component did mount lifecycle method
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {}
+Edit.propTypes = {
+  properties: PropTypes.objectOf(PropTypes.any).isRequired,
+  selected: PropTypes.bool.isRequired,
+  index: PropTypes.number.isRequired,
+  onChangeField: PropTypes.func.isRequired,
+  onSelectBlock: PropTypes.func.isRequired,
+  onDeleteBlock: PropTypes.func.isRequired,
+  onAddBlock: PropTypes.func.isRequired,
+  onFocusPreviousBlock: PropTypes.func.isRequired,
+  onFocusNextBlock: PropTypes.func.isRequired,
+  block: PropTypes.string.isRequired,
+};
 
-  /**
-   * Change handler
-   * @method onChange
-   * @param {object} editorState Editor state.
-   * @returns {undefined}
-   */
-  onChange(obj, fieldname) {
-    if (!isEqual(obj[fieldname], this.props.data[fieldname])) {
-      this.props.onChangeBlock(this.props.block, {
-        ...this.props.data,
-        [fieldname]: obj[fieldname],
-      });
-    }
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    if (__SERVER__) {
-      return <div />;
-    }
-    return (
-      <BodyWrapper data={this.props.data} inEditMode={true}>
-        <Block
-          data={this.props.data}
-          block={this.props.block}
-          onChange={(obj, fieldname) => this.onChange(obj, fieldname)}
-          inEditMode={true}
-          onSelectBlock={this.props.onSelectBlock}
-          onAddBlock={this.props.onAddBlock}
-          index={this.props.index}
-          selected={this.props.selected}
-          onFocusPreviousBlock={this.props.onFocusPreviousBlock}
-          onFocusNextBlock={this.props.onFocusNextBlock}
-        />
-      </BodyWrapper>
-    );
-  }
-}
-
-export default injectIntl(Edit);
+export default Edit;

package/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/View.jsx

@@ -5,8 +5,9 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import Block from './Block';
+import { Card, CardBody, CardTitle } from 'design-react-kit';
 import BodyWrapper from './BodyWrapper';
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 
 /**
  * View title block class.
@@ -14,10 +15,26 @@ import BodyWrapper from './BodyWrapper';
  * @extends Component
  */
 
-const TextCardView = ({ data, id }) => {
+const TextCardView = ({ data, id, block }) => {
   return (
     <BodyWrapper data={data} inEditMode={false}>
-      <Block data={data} inEditMode={false} block={{ id: id }} />
+      <div className="simple-text-card-wrapper">
+        <Card
+          color="white"
+          className="card-bg rounded"
+          noWrapper={false}
+          space
+          tag="div"
+        >
+          <CardBody>
+            <CardTitle tag="h3" className="h4" id={id + '-title'}>
+              {data.simple_card_title}
+            </CardTitle>
+            <hr />
+            <TextBlockView data={{ value: data.simple_card_content }} />
+          </CardBody>
+        </Card>
+      </div>
     </BodyWrapper>
   );
 };

package/src/components/ItaliaTheme/Blocks/__tests__/Accordion.test.jsx

@@ -18,34 +18,17 @@ const mock_fields = {
       href: '/',
       id: '1675245121000',
       linkMoreTitle: 'Caught in a landside',
-      text: {
-        blocks: [
-          {
-            data: {},
-            depth: 0,
-            entityRanges: [],
-            inlineStyleRanges: [],
-            key: 'b6vem',
-            text: 'Is this just fantasy',
-            type: 'unstyled',
-          },
-        ],
-        entityMap: {},
-      },
-      title: {
-        blocks: [
-          {
-            data: {},
-            depth: 0,
-            entityRanges: [],
-            inlineStyleRanges: [],
-            key: '2ikdv',
-            text: 'Accordion 1',
-            type: 'unstyled',
-          },
-        ],
-        entityMap: {},
-      },
+      text: [
+        {
+          children: [
+            {
+              text: 'Is this just fantasy?',
+            },
+          ],
+          type: 'p',
+        },
+      ],
+      title: 'Accordion 1',
     },
   ],
 };

package/src/components/ItaliaTheme/Blocks/__tests__/Alert.test.jsx

@@ -18,20 +18,16 @@ const mock_fields = {
     encoding: 'base64',
     filename: 'insalata-1280x720.jpeg',
   },
-  text: {
-    blocks: [
-      {
-        data: {},
-        depth: 0,
-        entityRanges: [],
-        inlineStyleRanges: [],
-        key: 'ctqrv',
-        text: 'Ciao',
-        type: 'unstyled',
-      },
-    ],
-    entityMap: {},
-  },
+  text: [
+    {
+      children: [
+        {
+          text: 'Ciao',
+        },
+      ],
+      type: 'p',
+    },
+  ],
 };
 
 const store = mockStore({