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

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/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,11 +5,13 @@
  * 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
  */
 
 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 {
@@ -19,9 +21,15 @@ 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 config from '@plone/volto/registry';
 
+const messages = defineMessages({
+  opensInNewTab: {
+    id: 'opensInNewTab',
+    defaultMessage: 'Apre in un nuovo tab',
+  },
+});
 const UniversalLink = ({
   href,
   item = null,
@@ -31,13 +39,30 @@ 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)
+  try {
+    const 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
@@ -75,6 +100,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),
@@ -87,6 +122,16 @@ 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;
+  }
+
   let tag = (
     <Link
       to={flattenToAppURL(url)}
@@ -95,8 +140,10 @@ const UniversalLink = ({
       className={className}
       smooth={config.settings.hashLinkSmoothScroll}
       {...props}
+      aria-label={aria_label}
     >
       {children}
+      {extended_children}
     </Link>
   );
 
@@ -109,9 +156,10 @@ 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'
@@ -120,6 +168,7 @@ const UniversalLink = ({
         rel="noopener noreferrer"
         className={className}
         {...props}
+        aria-label={aria_label}
       >
         {children}
         {!overrideMarkSpecialLinks &&
@@ -141,8 +190,10 @@ const UniversalLink = ({
         title={title}
         className={className}
         {...props}
+        aria-label={aria_label}
       >
         {children}
+        {extended_children}
       </a>
     );
   } else if (isDisplayFile) {
@@ -154,8 +205,10 @@ const UniversalLink = ({
         rel="noopener noreferrer"
         className={className}
         {...props}
+        aria-label={aria_label}
       >
         {children}
+        {extended_children}
       </a>
     );
   }

package/src/customizations/volto-form-block/components/Field.jsx

@@ -6,7 +6,7 @@
  * - customized to use design-react-kit elements instead semantic-ui elements
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl, defineMessages } from 'react-intl';
 import { Input, FormGroup, Label } from 'design-react-kit';
@@ -14,15 +14,21 @@ import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
 import FileWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/FileWidget';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-import WysiwygWidget from '@plone/volto/components/manage/Widgets/WysiwygWidget';
-
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
+import { TextEditorWidget } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import config from '@plone/volto/registry';
 
+import { fromHtml } from 'design-comuni-plone-theme/config/Slate/utils';
+
 const messages = defineMessages({
   select_a_value: {
     id: 'form_select_a_value',
     defaultMessage: 'Seleziona un valore',
   },
+  static_field_placeholder: {
+    id: 'form_static_field_placeholder',
+    defaultMessage: 'Inserisci qui il testo statico da mostrare.',
+  },
   open_menu: {
     id: 'open_menu',
     defaultMessage: 'Apri il menu',
@@ -68,6 +74,8 @@ const Field = ({
   const intl = useIntl();
   const Select = reactSelect.default;
 
+  const [selected, setSelected] = useState(false);
+
   const getLabel = () => {
     return required ? label + ' *' : label;
   };
@@ -85,6 +93,13 @@ const Field = ({
     description
   );
 
+  let static_text_value = value;
+  if (field_type === 'static_text') {
+    if (value?.data) {
+      static_text_value = fromHtml(value);
+    } //per retrocompatibilità con il vecchio widget che usava draftjs
+  }
+
   return (
     <div className="field">
       {field_type === 'text' && (
@@ -322,25 +337,33 @@ const Field = ({
           value={value ?? ''}
         />
       )}
-      {field_type === 'static_text' &&
-        (isOnEdit ? (
-          <WysiwygWidget
-            wrapped={false}
-            id={name}
-            name={name}
-            title={label}
-            description={description}
-            onChange={onChange}
-            value={value}
-          />
-        ) : value?.data ? (
-          <div
-            className="static-text"
-            dangerouslySetInnerHTML={{ __html: value.data }}
-          />
-        ) : (
-          <br />
-        ))}
+
+      {field_type === 'static_text' && (
+        <>
+          {isOnEdit ? (
+            <div className="mb-2">
+              <TextEditorWidget
+                value={static_text_value}
+                selected={selected}
+                setSelected={setSelected}
+                placeholder={intl.formatMessage(
+                  messages.static_field_placeholder,
+                )}
+                showToolbar={true}
+                onChangeBlock={(block, data) => {
+                  onChange(name, data.value);
+                }}
+              />
+            </div>
+          ) : value ? (
+            <div className="static-text">
+              <TextBlockView id={name} data={{ value: static_text_value }} />
+            </div>
+          ) : (
+            <br />
+          )}
+        </>
+      )}
       {config.blocks.blocksConfig.form.additionalFields?.reduce((acc, val) => {
         if (val.id === field_type)
           return [