design-comuni-plone-theme 11.29.2 → 12.0.0

package/src/customizations/volto/components/manage/Blocks/HeroImageLeft/Edit.jsx

@@ -1,6 +1,7 @@
 /*
 CUSTOMIZATIONS:
 - Added stores link
+- Added slate
 */
 
 /**
@@ -17,8 +18,7 @@ import { Button, Dimmer, Loader, Message } from 'semantic-ui-react';
 import { isEqual } from 'lodash';
 import { defineMessages, injectIntl } from 'react-intl';
 import cx from 'classnames';
-
-import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import { handleKeyDownOwnFocusManagement } from 'design-comuni-plone-theme/helpers/blocks';
 import {
   flattenToAppURL,
   getBaseUrl,
@@ -29,6 +29,7 @@ import { Icon, SidebarPortal } from '@plone/volto/components';
 
 import clearSVG from '@plone/volto/icons/clear.svg';
 
+import { TextEditorWidget } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import StoresButtons from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/HeroImageLeft/StoresButtons';
 import HeroSidebar from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/HeroImageLeft/HeroSidebar';
 
@@ -104,7 +105,7 @@ class EditComponent extends Component {
    * Constructor
    * @method constructor
    * @param {Object} props Component properties
-   * @constructs WysiwygEditor
+   * @constructs Hero Image left edit
    */
   constructor(props) {
     super(props);
@@ -114,58 +115,20 @@ class EditComponent extends Component {
       uploading: false,
     };
 
-    const { Map } = this.props.immutableLib;
-
     if (!__SERVER__) {
-      const { DefaultDraftBlockRenderMap, EditorState } = props.draftJs;
-      const { stateFromHTML } = props.draftJsImportHtml;
-
-      const blockTitleRenderMap = Map({
-        unstyled: {
-          element: 'h1',
-        },
-      });
-
-      const blockDescriptionRenderMap = Map({
-        unstyled: {
-          element: 'div',
-        },
-      });
-
-      this.extendedBlockRenderMap =
-        DefaultDraftBlockRenderMap.merge(blockTitleRenderMap);
-
-      this.extendedDescripBlockRenderMap = DefaultDraftBlockRenderMap.merge(
-        blockDescriptionRenderMap,
-      );
-
-      let titleEditorState;
-      let descriptionEditorState;
-      if (props.data && props.data.title) {
-        titleEditorState = EditorState.createWithContent(
-          stateFromHTML(props.data.title),
-        );
-      } else {
-        titleEditorState = EditorState.createEmpty();
-      }
-      if (props.data && props.data.description) {
-        descriptionEditorState = EditorState.createWithContent(
-          stateFromHTML(props.data.description),
-        );
-      } else {
-        descriptionEditorState = EditorState.createEmpty();
-      }
       this.state = {
         uploading: false,
-        titleEditorState,
-        descriptionEditorState,
         currentFocused: 'title',
       };
     }
-
-    this.onChangeTitle = this.onChangeTitle.bind(this);
-    this.onChangeDescription = this.onChangeDescription.bind(this);
   }
+  blockRef = React.createRef();
+
+  handleEnter = (e) => {
+    if (this.props.selected) {
+      handleKeyDownOwnFocusManagement(e, this.props);
+    }
+  };
 
   /**
    * Component did mount
@@ -174,7 +137,22 @@ class EditComponent extends Component {
    */
   componentDidMount() {
     if (this.props.selected) {
-      this.titleEditor.focus();
+      this.setState(() => ({ currentFocused: 'title' }));
+    }
+
+    const blockNode = this.props.blockNode;
+
+    if (this.props.selected && this.node) {
+      this.node.focus();
+    }
+    if (blockNode && blockNode.current) {
+      blockNode.current.addEventListener('keydown', this.handleEnter, false);
+    } else if (this.blockRef && this.blockRef.current) {
+      this.blockRef.current.addEventListener(
+        'keydown',
+        this.handleEnter,
+        false,
+      );
     }
   }
 
@@ -199,44 +177,14 @@ class EditComponent extends Component {
       });
     }
 
-    const { EditorState } = this.props.draftJs;
-    const { stateFromHTML } = this.props.draftJsImportHtml;
-
-    if (
-      nextProps.data.title &&
-      this.props.data.title !== nextProps.data.title &&
-      !this.props.selected
-    ) {
-      const contentState = stateFromHTML(nextProps.data.title);
-      this.setState({
-        titleEditorState: nextProps.data.title
-          ? EditorState.createWithContent(contentState)
-          : EditorState.createEmpty(),
-      });
-    }
-
-    if (
-      nextProps.data.description &&
-      this.props.data.description !== nextProps.data.description &&
-      !this.props.selected
-    ) {
-      const contentState = stateFromHTML(nextProps.data.description);
-      this.setState({
-        descriptionEditorState: nextProps.data.description
-          ? EditorState.createWithContent(contentState)
-          : EditorState.createEmpty(),
-      });
-    }
-
-    if (nextProps.selected !== this.props.selected) {
-      if (this.state.currentFocused === 'title') {
-        this.titleEditor.focus();
-      } else {
-        this.descriptionEditor.focus();
+    if (nextProps.selected) {
+      if (!this.props.selected) {
+        this.setState({ currentFocused: 'title' });
       }
+    } else {
+      this.setState({ currentFocused: null });
     }
   }
-
   /**
    * @param {*} nextProps
    * @param {*} nextState
@@ -247,36 +195,6 @@ class EditComponent extends Component {
     return this.props.selected || !isEqual(this.props.data, nextProps.data);
   }
 
-  /**
-   * Change Title handler
-   * @method onChangeTitle
-   * @param {object} titleEditorState Editor state.
-   * @returns {undefined}
-   */
-  onChangeTitle(titleEditorState) {
-    this.setState({ titleEditorState }, () => {
-      this.props.onChangeBlock(this.props.block, {
-        ...this.props.data,
-        title: titleEditorState.getCurrentContent().getPlainText(),
-      });
-    });
-  }
-
-  /**
-   * Change Description handler
-   * @method onChangeDescription
-   * @param {object} descriptionEditorState Editor state.
-   * @returns {undefined}
-   */
-  onChangeDescription(descriptionEditorState) {
-    this.setState({ descriptionEditorState }, () => {
-      this.props.onChangeBlock(this.props.block, {
-        ...this.props.data,
-        description: descriptionEditorState.getCurrentContent().getPlainText(),
-      });
-    });
-  }
-
   /**
    * Upload image handler
    * @method onUploadImage
@@ -315,13 +233,21 @@ class EditComponent extends Component {
     if (__SERVER__) {
       return <div />;
     }
-    const { Editor } = this.props.draftJs;
+
     const placeholder =
       this.props.data.placeholder ||
       this.props.intl.formatMessage(messages.placeholder);
 
     return (
-      <div className="public-ui">
+      <div
+        className="public-ui"
+        tabIndex="-1"
+        ref={(node) => {
+          if (node) {
+            this.blockRef.current = node;
+          }
+        }}
+      >
         <div
           className={cx('block hero', {
             selected: this.props.selected,
@@ -392,92 +318,43 @@ class EditComponent extends Component {
               })}
             >
               <div className="edit-title">
-                <Editor
-                  ref={(node) => {
-                    this.titleEditor = node;
-                  }}
-                  readOnly={!this.props.editable}
-                  onChange={this.onChangeTitle}
-                  editorState={this.state.titleEditorState}
-                  blockRenderMap={this.extendedBlockRenderMap}
-                  handleReturn={() => true}
-                  placeholder={this.props.intl.formatMessage(messages.title)}
-                  blockStyleFn={() => 'title-editor'}
-                  onUpArrow={() => {
-                    const selectionState =
-                      this.state.titleEditorState.getSelection();
-                    const { titleEditorState } = this.state;
-                    if (
-                      titleEditorState
-                        .getCurrentContent()
-                        .getBlockMap()
-                        .first()
-                        .getKey() === selectionState.getFocusKey()
-                    ) {
-                      this.props.onFocusPreviousBlock(
-                        this.props.block,
-                        this.props.blockNode.current,
-                      );
-                    }
-                  }}
-                  onDownArrow={() => {
-                    const selectionState =
-                      this.state.titleEditorState.getSelection();
-                    const { titleEditorState } = this.state;
-                    if (
-                      titleEditorState
-                        .getCurrentContent()
-                        .getBlockMap()
-                        .last()
-                        .getKey() === selectionState.getFocusKey()
-                    ) {
+                <h1>
+                  <TextEditorWidget
+                    {...this.props}
+                    showToolbar={false}
+                    data={this.props.data}
+                    fieldName="title"
+                    selected={this.state.currentFocused === 'title'}
+                    placeholder={this.props.intl.formatMessage(messages.title)}
+                    setSelected={(f) => {
+                      this.setState(() => ({ currentFocused: f }));
+                    }}
+                    focusNextField={() => {
                       this.setState(() => ({ currentFocused: 'description' }));
-                      this.descriptionEditor.focus();
-                    }
-                  }}
-                />
+                    }}
+                  />
+                </h1>
               </div>
-              <Editor
-                ref={(node) => {
-                  this.descriptionEditor = node;
-                }}
-                readOnly={!this.props.editable}
-                onChange={this.onChangeDescription}
-                editorState={this.state.descriptionEditorState}
-                blockRenderMap={this.extendedDescripBlockRenderMap}
-                handleReturn={() => true}
-                placeholder={this.props.intl.formatMessage(
-                  messages.description,
-                )}
-                blockStyleFn={() => 'description-editor'}
-                onUpArrow={() => {
-                  const selectionState =
-                    this.state.descriptionEditorState.getSelection();
-                  const currentCursorPosition = selectionState.getStartOffset();
 
-                  if (currentCursorPosition === 0) {
+              <p>
+                <TextEditorWidget
+                  {...this.props}
+                  showToolbar={false}
+                  data={this.props.data}
+                  fieldName="description"
+                  selected={this.state.currentFocused === 'description'}
+                  placeholder={this.props.intl.formatMessage(
+                    messages.description,
+                  )}
+                  setSelected={(f) => {
+                    this.setState(() => ({ currentFocused: f }));
+                  }}
+                  focusPrevField={() => {
                     this.setState(() => ({ currentFocused: 'title' }));
-                    this.titleEditor.focus();
-                  }
-                }}
-                onDownArrow={() => {
-                  const selectionState =
-                    this.state.descriptionEditorState.getSelection();
-                  const { descriptionEditorState } = this.state;
-                  const currentCursorPosition = selectionState.getStartOffset();
-                  const blockLength = descriptionEditorState
-                    .getCurrentContent()
-                    .getFirstBlock()
-                    .getLength();
+                  }}
+                />
+              </p>
 
-                  if (currentCursorPosition === blockLength) {
-                    this.props.onFocusNextBlock(
-                      this.props.block,
-                      this.props.blockNode.current,
-                    );
-                  }
-                }}
-              />
               <StoresButtons data={this.props.data} />
             </div>
           </div>
@@ -490,9 +367,7 @@ class EditComponent extends Component {
   }
 }
 
-const Edit = injectLazyLibs(['draftJs', 'immutableLib', 'draftJsImportHtml'])(
-  EditComponent,
-);
+const Edit = EditComponent;
 
 export default compose(
   injectIntl,

package/src/customizations/volto/components/manage/Blocks/Video/Body.jsx

@@ -34,7 +34,6 @@ const Body = ({ data, isEditMode }) => {
   let placeholder = null;
   let videoID = null;
   let listID = null;
-
   if (data.url) {
     const [computedID, computedPlaceholder] = videoUrlHelper(
       data.url,

package/src/customizations/volto/components/manage/Blocks/Video/Edit.jsx

@@ -74,7 +74,7 @@ class Edit extends Component {
    * Constructor
    * @method constructor
    * @param {Object} props Component properties
-   * @constructs WysiwygEditor
+   * @constructs Video block edit
    */
   constructor(props) {
     super(props);

package/src/customizations/volto/components/manage/Form/BlocksToolbar.jsx

@@ -17,7 +17,7 @@ import { Icon } from '@plone/volto/components';
 import { Plug } from '@plone/volto/components/manage/Pluggable';
 import { load } from 'redux-localstorage-simple';
 import { isEqual, omit, without } from 'lodash';
-import { cloneBlock } from 'design-comuni-plone-theme/config/Blocks/ListingOptions';
+import { cloneBlock } from 'design-comuni-plone-theme/helpers/blocks';
 import { setBlocksClipboard, resetBlocksClipboard } from '@plone/volto/actions';
 import config from '@plone/volto/registry';
 

package/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx

@@ -5,12 +5,14 @@
  * CUSTOMIZATIONS:
  * - aggiunto icona per link esterni
  * - aggiunto title informativo per link esterni
+ * - aggiunta la dimensione del file se il link punta a un file (enhanced_link_infos)
+ * - aggiunto il parametro hideFileFormat per nascondere il formato del file dall'enhance link
  * - aggiunta la condizione su @@display-file e @download-file per gestire i casi in cui questi parametri vengono imposti a monte
  */
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
+import { useIntl, defineMessages } from 'react-intl';
 import { HashLink as Link } from 'react-router-hash-link';
 import { useSelector } from 'react-redux';
 import {
@@ -20,9 +22,16 @@ import {
 } from '@plone/volto/helpers/Url/Url';
 import { matchPath } from 'react-router';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
-
+import { EnhanceLink } from 'design-comuni-plone-theme/helpers';
+import cx from 'classnames';
 import config from '@plone/volto/registry';
 
+const messages = defineMessages({
+  opensInNewTab: {
+    id: 'opensInNewTab',
+    defaultMessage: 'Apre in un nuovo tab',
+  },
+});
 const UniversalLink = ({
   href,
   item = null,
@@ -32,13 +41,31 @@ const UniversalLink = ({
   className = null,
   title = null,
   overrideMarkSpecialLinks = false,
+  hideFileFormat = false,
   ...props
 }) => {
-  const intl = useIntl();
+  let translations = {
+    opensInNewTab: {
+      defaultMessage: messages.opensInNewTab.defaultMessage,
+    },
+  };
+  //questo perchè il provider di intl non è sempre definito, ad esempio in slate_wysiwyg_box (Slate RichTextWidget)
+  let intl = null;
+  try {
+    intl = useIntl();
+    Object.keys(translations).forEach(
+      (k) => (translations[k].message = intl.formatMessage(messages[k])),
+    );
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.log('Cannot use intl here. View default messages.', e);
+  }
   const token = useSelector((state) => state.userSession?.token);
   const { openExternalLinkInNewTab } = config.settings;
 
   let url = href;
+  let enhanced_link_infos = null;
+
   if (!href && item) {
     if (!item['@id']) {
       // eslint-disable-next-line no-console
@@ -79,6 +106,16 @@ const UniversalLink = ({
     }
   }
 
+  if (item && item['@id']) {
+    /*enhance link*/
+    if (item && item.enhanced_links_enabled) {
+      enhanced_link_infos = { ...item };
+      if (!enhanced_link_infos.filename) {
+        enhanced_link_infos.filename = item['@id'];
+      }
+    }
+  }
+
   const isBlacklisted =
     (config.settings.externalRoutes ?? []).find((route) =>
       matchPath(flattenToAppURL(url), route.match),
@@ -91,6 +128,18 @@ const UniversalLink = ({
   const checkedURL = URLUtils.checkAndNormalizeUrl(url);
   url = checkedURL.url;
 
+  let aria_label = props['aria-label'] ?? item?.title ?? null;
+  let enhanced_link = null;
+  let extended_children = <></>;
+
+  if (enhanced_link_infos) {
+    enhanced_link = EnhanceLink({ enhanced_link_infos, aria_label });
+    extended_children = enhanced_link.children;
+    aria_label = enhanced_link.aria_label;
+  }
+  const showExternalIcon =
+    !overrideMarkSpecialLinks &&
+    config.settings.siteProperties.markSpecialLinks;
   let tag = (
     <Link
       to={flattenToAppURL(url)}
@@ -99,8 +148,10 @@ const UniversalLink = ({
       className={className}
       smooth={config.settings.hashLinkSmoothScroll}
       {...props}
+      aria-label={aria_label}
     >
       {children}
+      {extended_children}
     </Link>
   );
 
@@ -113,30 +164,33 @@ const UniversalLink = ({
     tag = (
       <a
         href={url}
-        title={`${title ? title + ' - ' : ''}${intl.formatMessage({
-          id: 'opensInNewTab',
-        })}`}
+        title={`${title ? title + ' - ' : ''}${
+          translations.opensInNewTab.message ??
+          translations.opensInNewTab.defaultMessage
+        }`}
         target={
           !checkedURL.isMail && !checkedURL.isTelephone && openInNewTab
             ? '_blank'
             : null
         }
         rel="noopener noreferrer"
-        className={className}
+        className={cx(className, {
+          'with-external-link-icon': showExternalIcon,
+        })}
         {...props}
+        aria-label={aria_label}
       >
         {children}
-        {!overrideMarkSpecialLinks &&
-          config.settings.siteProperties.markSpecialLinks && (
-            <Icon
-              icon="it-external-link"
-              title={`${title ? title + ' - ' : ''}${intl.formatMessage({
-                id: 'opensInNewTab',
-              })}`}
-              size="xs"
-              className="ms-1 align-sub external-link"
-            />
-          )}
+        {showExternalIcon && (
+          <Icon
+            icon="it-external-link"
+            title={`${title ? title + ' - ' : ''}${intl?.formatMessage({
+              id: 'opensInNewTab',
+            })}`}
+            size="xs"
+            className="ms-1 align-sub external-link"
+          />
+        )}
       </a>
     );
   } else if (isDownload) {
@@ -147,8 +201,10 @@ const UniversalLink = ({
         title={title}
         className={className}
         {...props}
+        aria-label={aria_label}
       >
         {children}
+        {extended_children}
       </a>
     );
   } else if (isDisplayFile) {
@@ -160,8 +216,10 @@ const UniversalLink = ({
         rel="noopener noreferrer"
         className={className}
         {...props}
+        aria-label={aria_label}
       >
         {children}
+        {extended_children}
       </a>
     );
   }

package/src/customizations/volto/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.jsx

@@ -1008,6 +1008,7 @@ class RecurrenceWidget extends Component {
                               onChange={this.onChangeRule}
                             />
                           )}
+
                           {/***** byday *****/}
                           {OPTIONS.frequences[formValues.freq].byday && (
                             <ByDayField
@@ -1016,6 +1017,7 @@ class RecurrenceWidget extends Component {
                               onChange={this.onChangeRule}
                             />
                           )}
+
                           {/***** bymonth *****/}
                           {OPTIONS.frequences[formValues.freq].bymonth && (
                             <ByMonthField
@@ -1029,6 +1031,7 @@ class RecurrenceWidget extends Component {
                               onChange={this.onChangeRule}
                             />
                           )}
+
                           {/***** byyear *****/}
                           {OPTIONS.frequences[formValues.freq].byyear && (
                             <ByYearField
@@ -1043,6 +1046,7 @@ class RecurrenceWidget extends Component {
                               onChange={this.onChangeRule}
                             />
                           )}
+
                           {/*-- ends after N recurrence or date --*/}
                           <EndField
                             value={formValues.recurrenceEnds}