design-comuni-plone-theme 11.29.2 → 12.0.0

package/publiccode.yml

@@ -227,9 +227,9 @@ maintenance:
 name: io-Comune - Il sito AgID per Comuni ed Enti Pubblici
 platforms:
   - web
-releaseDate: '2025-03-26'
+releaseDate: '2025-03-31'
 softwareType: standalone/web
-softwareVersion: 11.29.2
+softwareVersion: 12.0.0
 url: 'https://github.com/italia/design-comuni-plone-theme'
 usedBy:
   - ASP Comuni Modenesi Area Nord

package/src/components/Collapse.jsx

@@ -59,6 +59,7 @@ const Collapse = ({
           className="overlay"
           style={{ display: isOpen ? 'block' : 'none' }}
           onClick={onOverlayClick}
+          onKeyDown={() => {}}
         ></div>
         {/* Deprecato - non viene più utilizzato da v12.0.0 per ragioni di accessibilità
           Close button ora presente in Navigation.jsx

package/src/components/ItaliaTheme/AppExtras/SiteSettingsExtras.jsx

@@ -5,20 +5,16 @@ CUSTOMIZATIONS:
 
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { useSelector } from 'react-redux';
 import { Helmet } from '@plone/volto/helpers';
 import { SiteProperty } from 'volto-site-settings';
 import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
 
 const SiteSettingsExtras = (props) => {
   const intl = useIntl();
-  const subsite = useSelector((state) => state.subsite?.data);
   let siteTitle = SiteProperty({
     property: 'site_title',
     getValue: true,
     defaultValue: getSiteProperty('siteTitle', intl.locale),
-    // TODO DEPRECATED: remove and only use defaultValue in v12
-    forceValue: subsite?.title || getSiteProperty('siteTitle', intl.locale),
   });
 
   const parentSiteTitle = SiteProperty({
@@ -26,8 +22,6 @@ const SiteSettingsExtras = (props) => {
     getValue: true,
     getParent: true,
     defaultValue: getSiteProperty('siteTitle', intl.locale),
-    // TODO DEPRECATED: remove and only use defaultValue in v12
-    forceValue: getSiteProperty('siteTitle', intl.locale),
   });
 
   if (parentSiteTitle !== siteTitle) {

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>
       )}
@@ -73,11 +69,7 @@ const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
           hidden={!isOpen}
         >
           <div className="accordion-inner">
-            {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

@@ -12,14 +12,14 @@ import {
   SubblocksEdit,
   SubblocksWrapper,
 } from 'volto-subblocks';
+import { TextEditorWidget } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
 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';
 
-import { TextEditorWidget } from 'design-comuni-plone-theme/components/ItaliaTheme';
-
 const messages = defineMessages({
   addItem: {
     id: 'Add accordion item',
@@ -40,6 +40,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
@@ -50,60 +112,74 @@ 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">
+              <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'}
+                    setSelected={(f) => {
+                      this.setState({
+                        selectedField: f,
+                        subIndexSelected: -1,
+                      });
+                    }}
+                    placeholder={this.props.intl.formatMessage(messages.title)}
+                    focusNextField={() => {
+                      this.setState({ selectedField: 'description' });
+                    }}
+                  />
+                </div>
+
+                <div className="description">
+                  <TextEditorWidget
+                    {...this.props}
+                    showToolbar={true}
+                    data={this.props.data}
+                    fieldName="description"
+                    selected={this.state.selectedField === 'description'}
+                    setSelected={(f) => {
+                      this.setState({
+                        selectedField: f,
+                        subIndexSelected: -1,
+                      });
+                    }}
+                    placeholder={this.props.intl.formatMessage(
+                      messages.description,
+                    )}
+                    focusPrevField={() => {
+                      this.setState({ selectedField: 'title' });
+                    }}
+                    focusNextField={() => {
+                      this.setState({
+                        selectedField: null,
+                        subIndexSelected: 0,
+                      });
+                    }}
+                  />
+                </div>
+              </div>
               <CardBody tag="div">
-                <TextEditorWidget
-                  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={() => {
-                    this.setState({ selectedField: 'description' });
-                  }}
-                />
-                <TextEditorWidget
-                  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={() => {}}
-                />
                 <SubblocksWrapper node={this.node}>
                   {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/Accordion/View.jsx

@@ -6,10 +6,8 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import ViewBlock from './Block/ViewBlock';
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 import { Container, Card, CardBody } from 'design-react-kit';
-import redraft from 'redraft';
-import config from '@plone/volto/registry';
-import { checkRedraftHasContent } from 'design-comuni-plone-theme/helpers';
 
 /**
  * View Accordion block class.
@@ -29,22 +27,10 @@ const AccordionView = ({ data, block }) => {
           <Container className="px-md-4">
             <Card className="card-bg rounded" noWrapper={false} space tag="div">
               <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/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={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) => {