@eeacms/volto-eea-website-theme 3.19.1 → 4.0.1

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

@@ -1,26 +1,35 @@
 /**
  * ObjectBrowserWidget component.
  * @module components/manage/Widgets/ObjectBrowserWidget
+ *
+ * EEA customization: preserves hash anchors in pasted internal URLs.
+ * When a URL like `/path/to/page#section` is entered, the hash is stored in
+ * `linkWithHash` on the selected item so the link renders with the anchor.
  */
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
-import { compact, isArray, isEmpty, remove } from 'lodash';
+import compact from 'lodash/compact';
+import includes from 'lodash/includes';
+import isArray from 'lodash/isArray';
+import isEmpty from 'lodash/isEmpty';
+import remove from 'lodash/remove';
 import { connect } from 'react-redux';
 import { Label, Popup, Button } from 'semantic-ui-react';
 import {
   flattenToAppURL,
   isInternalURL,
-  isUrl,
   normalizeUrl,
   removeProtocol,
 } from '@plone/volto/helpers/Url/Url';
+import { messages as validationMessages } from '@plone/volto/helpers/MessageLabels/MessageLabels';
 import { searchContent } from '@plone/volto/actions/search/search';
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
 import { defineMessages, injectIntl } from 'react-intl';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+import config from '@plone/volto/registry';
 
 import navTreeSVG from '@plone/volto/icons/nav.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
@@ -28,6 +37,7 @@ import homeSVG from '@plone/volto/icons/home.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import blankSVG from '@plone/volto/icons/blank.svg';
 import { withRouter } from 'react-router';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const messages = defineMessages({
   placeholder: {
@@ -48,6 +58,24 @@ const messages = defineMessages({
   },
 });
 
+// Volto 17 does not expose the Volto 18 core helper
+// `urlValidator` from `@plone/volto/helpers/FormValidation/validators`.
+// When Volto 17 support is dropped, replace this fallback with that import.
+const validateExternalUrl = ({ value, formatMessage }) => {
+  const urlRegex = new RegExp(
+    '^(https?:\\/\\/)?' +
+      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' +
+      '((\\d{1,3}\\.){3}\\d{1,3}))|' +
+      '(localhost)' +
+      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' +
+      '(\\?[;&a-z\\d%_.~+=-]*)?' +
+      '(\\#[-a-z\\d_]*)?$',
+    'i',
+  );
+  const isValid = urlRegex.test(value);
+  return !isValid ? formatMessage(validationMessages.isValidURL) : null;
+};
+
 /**
  * ObjectBrowserWidget component class.
  * @class ObjectBrowserWidget
@@ -76,6 +104,7 @@ export class ObjectBrowserWidgetComponent extends Component {
     openObjectBrowser: PropTypes.func.isRequired,
     allowExternals: PropTypes.bool,
     placeholder: PropTypes.string,
+    onlyFolderishSelectable: PropTypes.bool,
   };
 
   /**
@@ -92,11 +121,13 @@ export class ObjectBrowserWidgetComponent extends Component {
     return: 'multiple',
     initialPath: '',
     allowExternals: false,
+    onlyFolderishSelectable: false,
   };
 
   state = {
     manualLinkInput: '',
     validURL: false,
+    errors: [],
   };
 
   constructor(props) {
@@ -105,7 +136,7 @@ export class ObjectBrowserWidgetComponent extends Component {
     this.placeholderRef = React.createRef();
   }
   renderLabel(item) {
-    // show linkWithHash if available, otherwise @id
+    // EEA: use linkWithHash if available so the anchor is preserved in the label
     const href = item['linkWithHash'] || item['@id'];
     return (
       <Popup
@@ -123,7 +154,16 @@ export class ObjectBrowserWidgetComponent extends Component {
         }
         trigger={
           <Label>
-            <div className="item-title">{item.title}</div>
+            <div className="item-title">
+              {includes(config.settings.imageObjects, item['@type']) ? (
+                <Image
+                  className="small ui image"
+                  src={`${item['@id']}/@@images/image/thumb`}
+                />
+              ) : (
+                item.title
+              )}
+            </div>
             <div>
               {this.props.mode === 'multiple' && (
                 <Icon
@@ -164,7 +204,6 @@ export class ObjectBrowserWidgetComponent extends Component {
     }
     let exists = false;
     let index = -1;
-
     value.forEach((_item, _index) => {
       if (flattenToAppURL(_item['@id']) === flattenToAppURL(item['@id'])) {
         exists = true;
@@ -183,8 +222,8 @@ export class ObjectBrowserWidgetComponent extends Component {
           ...this.props.selectedItemAttrs,
           // Add the required attributes for the widget to work
           '@id',
-          'linkWithHash', // add linkWithHash to the allowed attributes
           'title',
+          'linkWithHash', // EEA: preserve anchor hash stored by onSubmitManualLink
         ];
         resultantItem = Object.keys(item)
           .filter((key) => allowedItemKeys.includes(key))
@@ -218,17 +257,25 @@ export class ObjectBrowserWidgetComponent extends Component {
   };
 
   validateManualLink = (url) => {
-    if (this.props.allowExternals) {
-      return isUrl(url);
+    if (this.props.allowExternals && !url.startsWith('/')) {
+      const error = validateExternalUrl({
+        value: url,
+        formatMessage: this.props.intl.formatMessage,
+      });
+      if (error && url !== '') {
+        this.setState({ errors: [error] });
+      } else {
+        this.setState({ errors: [] });
+      }
+      return !Boolean(error);
     } else {
       return isInternalURL(url);
     }
   };
 
   /**
-   * Splits a URL into its link and hash components.
-   * @param {string} url - The URL to split.
-   * @returns {[string, string]} - An array containing the link and hash components of the URL.
+   * EEA: splits a URL into its path and hash components.
+   * e.g. '/path/to/page#section' → ['/path/to/page', 'section']
    */
   getHashAndLinkFromUrl = (url) => {
     return url.split('#');
@@ -237,6 +284,7 @@ export class ObjectBrowserWidgetComponent extends Component {
   onSubmitManualLink = () => {
     if (this.validateManualLink(this.state.manualLinkInput)) {
       if (isInternalURL(this.state.manualLinkInput)) {
+        // EEA: split off any hash anchor before searching
         const [link, hash] = this.getHashAndLinkFromUrl(
           this.state.manualLinkInput,
         );
@@ -256,7 +304,7 @@ export class ObjectBrowserWidgetComponent extends Component {
           )
           .then((resp) => {
             if (resp.items?.length > 0) {
-              // if there is a hash within the url, add it to the item as linkWithHash
+              // EEA: if there is a hash, store it as linkWithHash on the item
               if (hash) {
                 resp.items[0]['linkWithHash'] = `${relative_link}#${hash}`;
               }
@@ -309,6 +357,9 @@ export class ObjectBrowserWidgetComponent extends Component {
       maximumSelectionSize:
         this.props.widgetOptions?.pattern_options?.maximumSelectionSize ||
         this.props.maximumSelectionSize,
+      onlyFolderishSelectable:
+        this.props.widgetOptions?.pattern_options?.onlyFolderishSelectable ||
+        this.props.onlyFolderishSelectable,
     });
   };
 
@@ -349,6 +400,8 @@ export class ObjectBrowserWidgetComponent extends Component {
     return (
       <FormFieldWrapper
         {...this.props}
+        // At the moment, OBW handles its own errors and validation
+        error={this.state.errors}
         className={description ? 'help text' : 'text'}
       >
         <div
@@ -377,6 +430,7 @@ export class ObjectBrowserWidgetComponent extends Component {
               items.length === 0 &&
               this.props.mode !== 'multiple' && (
                 <input
+                  onBlur={this.onSubmitManualLink}
                   onKeyDown={this.onKeyDownManualLink}
                   onChange={this.onManualLinkInput}
                   value={this.state.manualLinkInput}

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

@@ -2,24 +2,25 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
-import { uniqBy } from 'lodash';
+import uniqBy from 'lodash/uniqBy';
 import { toast } from 'react-toastify';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
-import { Icon, Toast } from '@plone/volto/components';
-import { FormFieldWrapper } from '@plone/volto/components';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import Toast from '@plone/volto/components/manage/Toast/Toast';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import {
-  flattenToAppURL,
   getWorkflowOptions,
   getCurrentStateMapping,
-} from '@plone/volto/helpers';
+} from '@plone/volto/helpers//Workflows/Workflows';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
+import { getContent } from '@plone/volto/actions/content/content';
 import {
-  getContent,
   getWorkflow,
   transitionWorkflow,
-} from '@plone/volto/actions';
+} from '@plone/volto/actions/workflow/workflow';
 import downSVG from '@plone/volto/icons/down-key.svg';
 import upSVG from '@plone/volto/icons/up-key.svg';
 import checkSVG from '@plone/volto/icons/check.svg';
@@ -150,8 +151,8 @@ const customSelectStyles = {
     color: state.isSelected
       ? '#007bc1'
       : state.isFocused
-      ? '#4a4a4a'
-      : 'inherit',
+        ? '#4a4a4a'
+        : 'inherit',
     ':active': {
       backgroundColor: null,
     },

package/src/customizations/volto/components/theme/Breadcrumbs/Breadcrumbs.jsx

@@ -7,8 +7,9 @@ import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { useLocation } from 'react-router';
-import { getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
-import { getBreadcrumbs } from '@plone/volto/actions';
+import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import { hasApiExpander } from '@plone/volto/helpers/Utils/Utils';
+import { getBreadcrumbs } from '@plone/volto/actions/breadcrumbs/breadcrumbs';
 import config from '@plone/volto/registry';
 
 import EEABreadcrumbs from '@eeacms/volto-eea-design-system/ui/Breadcrumbs/Breadcrumbs';

package/src/customizations/volto/components/theme/Comments/Comments.jsx

@@ -3,14 +3,15 @@
  * @module components/theme/Comments/Comments
  */
 
-import {
-  addComment,
-  deleteComment,
-  listComments,
-  listMoreComments,
-} from '@plone/volto/actions';
-import { Avatar, CommentEditModal, Form } from '@plone/volto/components';
-import { flattenToAppURL, getBaseUrl, getColor } from '@plone/volto/helpers';
+import { addComment } from '@plone/volto/actions/comments/comments';
+import { deleteComment } from '@plone/volto/actions/comments/comments';
+import { listComments } from '@plone/volto/actions/comments/comments';
+import { listMoreComments } from '@plone/volto/actions/comments/comments';
+import Avatar from '@plone/volto/components/theme/Avatar/Avatar';
+import CommentEditModal from '@plone/volto/components/theme/Comments/CommentEditModal';
+import Form from '@plone/volto/components/manage/Form/Form';
+import { flattenToAppURL, getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import { getColor } from '@plone/volto/helpers/Utils/Utils';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';

package/src/customizations/volto/components/theme/Comments/Comments.test.jsx

@@ -5,7 +5,7 @@ import configureStore from 'redux-mock-store';
 import Comments from './Comments';
 import thunk from 'redux-thunk';
 import renderer from 'react-test-renderer';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 const middleware = [thunk];
 const mockStore = configureStore(middleware);
@@ -17,6 +17,31 @@ jest.mock('moment', () =>
   })),
 );
 
+jest.mock('@plone/volto/components/theme/Avatar/Avatar', () => ({
+  __esModule: true,
+  default: ({ title }) => <div className="avatar">{title}</div>,
+}));
+
+jest.mock('@plone/volto/components/theme/Comments/CommentEditModal', () => ({
+  __esModule: true,
+  default: ({ open }) => (open ? <div className="comment-edit-modal" /> : null),
+}));
+
+jest.mock('@plone/volto/components/manage/Form/Form', () => ({
+  __esModule: true,
+  default: ({ onSubmit, submitLabel }) => (
+    <form onSubmit={(event) => event.preventDefault()}>
+      <button
+        type="button"
+        aria-label={submitLabel}
+        onClick={(event) => onSubmit?.(event)}
+      >
+        {submitLabel}
+      </button>
+    </form>
+  ),
+}));
+
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(
   async () =>
@@ -97,8 +122,7 @@ describe('Comments', () => {
         <Comments {...props} />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    expect(component.toJSON()).toBeTruthy();
   });
 
   it('renders a comments component withour viewing the comments', () => {
@@ -174,8 +198,7 @@ describe('Comments', () => {
         <Comments {...props} />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    expect(component.toJSON()).toBeFalsy();
   });
 
   it('renders a comments component without permissions', () => {
@@ -248,8 +271,7 @@ describe('Comments', () => {
         <Comments {...props} />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    expect(component.toJSON()).toBeFalsy();
   });
 
   it('renders a comments component, fires onClick events on comment and rerenders', () => {

package/src/customizations/volto/components/theme/ContactForm/ContactForm.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { UniversalLink } from '@plone/volto/components';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import { FormattedMessage } from 'react-intl';
 import { Container } from 'semantic-ui-react';
 import config from '@plone/volto/registry';

package/src/customizations/volto/components/theme/ContactForm/ContactForm.test.js

@@ -9,6 +9,11 @@ jest.mock('react-portal', () => ({
   Portal: jest.fn(() => <div id="Portal" />),
 }));
 
+jest.mock('@plone/volto/components/manage/UniversalLink/UniversalLink', () => ({
+  __esModule: true,
+  default: ({ href, children }) => <a href={href}>{children}</a>,
+}));
+
 const mockStore = configureStore();
 
 describe('Contact form', () => {

package/src/customizations/volto/components/theme/ContentMetadataTags/ContentMetadataTags.jsx

@@ -1,11 +1,9 @@
 import React, { useEffect } from 'react';
-import {
-  toPublicURL,
-  Helmet,
-  hasApiExpander,
-  getBaseUrl,
-} from '@plone/volto/helpers';
-import { getNavroot } from '@plone/volto/actions';
+import { toPublicURL } from '@plone/volto/helpers/Url/Url';
+import Helmet from '@plone/volto/helpers/Helmet/Helmet';
+import { hasApiExpander } from '@plone/volto/helpers/Utils/Utils';
+import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import { getNavroot } from '@plone/volto/actions//navroot/navroot';
 import config from '@plone/volto/registry';
 import { useDispatch, useSelector } from 'react-redux';
 

package/src/customizations/volto/components/theme/EventDetails/EventDetails.jsx

@@ -5,8 +5,8 @@ import {
   When,
   Recurrence,
 } from '@plone/volto/components/theme/View/EventDatesInfo';
-import { Icon } from '@plone/volto/components';
-import { expandToBackendURL } from '@plone/volto/helpers';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import { expandToBackendURL } from '@plone/volto/helpers/Url/Url';
 
 import calendarSVG from '@plone/volto/icons/calendar.svg';
 

package/src/customizations/volto/components/theme/Footer/Footer.jsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 import { useSelector, shallowEqual } from 'react-redux';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import EEAFooter from '@eeacms/volto-eea-design-system/ui/Footer/Footer';
 import config from '@plone/volto/registry';
 import isArray from 'lodash/isArray';

package/src/customizations/volto/components/theme/Header/Header.jsx

@@ -8,22 +8,24 @@ import { Dropdown, Image } from 'semantic-ui-react';
 import { connect, useDispatch, useSelector } from 'react-redux';
 
 import { withRouter } from 'react-router-dom';
-import { UniversalLink } from '@plone/volto/components';
-import { getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
-import { getNavigation } from '@plone/volto/actions';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import { hasApiExpander } from '@plone/volto/helpers/Utils/Utils';
+import { getNavigation } from '@plone/volto/actions/navigation/navigation';
 import { getNavigationSettings } from '@eeacms/volto-eea-website-theme/actions';
-import { Header } from '@eeacms/volto-eea-design-system/ui';
+import Header from '@eeacms/volto-eea-design-system/ui/Header/Header';
 import EEALogo from '@eeacms/volto-eea-website-theme/components/theme/Logo';
 import { usePrevious } from '@eeacms/volto-eea-design-system/helpers';
 import eeaFlag from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/eea.png';
 
 import config from '@plone/volto/registry';
-import { compose } from 'recompose';
+import { compose } from 'redux';
 
 import cx from 'classnames';
 import loadable from '@loadable/component';
 
 const LazyLanguageSwitcher = loadable(() => import('./LanguageSwitcher'));
+const EMPTY_NAVIGATION_SETTINGS = {};
 
 function removeTrailingSlash(path) {
   return path.replace(/\/+$/, '');
@@ -60,9 +62,9 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
   const width = useSelector((state) => state.screen?.width);
   const dispatch = useDispatch();
   const previousToken = usePrevious(token);
-  const navigationSettings = useSelector(
-    (state) => state.navigationSettings?.settings || {},
-  );
+  const navigationSettings =
+    useSelector((state) => state.navigationSettings?.settings) ||
+    EMPTY_NAVIGATION_SETTINGS;
   const updateRequest = useSelector((state) => state.content.update);
 
   // Combine navigation settings from backend with config fallback

package/src/customizations/volto/components/theme/Header/Header.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, fireEvent, getByText } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import configureStore from 'redux-mock-store';
 import { Router } from 'react-router-dom';
 import { createMemoryHistory } from 'history';

package/src/customizations/volto/components/theme/Header/LanguageSwitcher.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { Dropdown, Image } from 'semantic-ui-react';
-import { flattenToAppURL } from '@plone/volto/helpers';
-import { find } from 'lodash';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import find from 'lodash/find';
 import globeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/global-line.svg';
 import config from '@plone/volto/registry';
-import { Header } from '@eeacms/volto-eea-design-system/ui';
+import Header from '@eeacms/volto-eea-design-system/ui/Header/Header';
 
 /**
  * LanguageSwitcher component.

package/src/customizations/volto/components/theme/Image/Image.jsx

@@ -1,6 +1,7 @@
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import { flattenScales, flattenToAppURL } from '@plone/volto/helpers';
+import { flattenScales } from '@plone/volto/helpers/Url/Url';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 
 /**
  * Determines the image scale name based on the provided data.
@@ -42,10 +43,10 @@ export default function Image({
   // TypeScript hints for editor autocomplete :)
   /** @type {React.ImgHTMLAttributes<HTMLImageElement>} */
   const attrs = {};
+  attrs.className = cx(className, { responsive }) || undefined;
 
   if (!item && src) {
     attrs.src = src;
-    attrs.className = cx(className, { responsive });
   } else {
     const isFromRealObject = !item.image_scales;
     const imageFieldWithDefault = imageField || item.image_field || 'image';
@@ -68,7 +69,6 @@ export default function Image({
     attrs.src = `${relativeBasePath}/${image.download}`;
     attrs.width = image.width;
     attrs.height = image.height;
-    attrs.className = cx(className, { responsive });
 
     const original = {
       download: `${image.download}`,
@@ -112,6 +112,7 @@ export default function Image({
     attrs.fetchpriority = 'high';
   }
 
+  // eslint-disable-next-line no-restricted-syntax
   return <img {...attrs} alt={alt} {...imageProps} />;
 }
 

package/src/customizations/volto/components/theme/Unauthorized/Unauthorized.jsx

@@ -4,7 +4,7 @@
 
 import React, { useEffect } from 'react';
 import { useLocation, Link, useHistory } from 'react-router-dom';
-import { getBaseUrl } from '@plone/volto/helpers';
+import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
 import { Container, Button } from 'semantic-ui-react';
 
 import { FormattedMessage } from 'react-intl';

package/src/customizations/volto/components/theme/View/DefaultView.jsx

@@ -13,11 +13,12 @@ import {
   Label,
 } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
-import { getSchema } from '@plone/volto/actions';
+import { getSchema } from '@plone/volto/actions/schema/schema';
 import { getWidget } from '@plone/volto/helpers/Widget/utils';
-import { RenderBlocks } from '@plone/volto/components';
+import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 
-import { hasBlocksData, getBaseUrl } from '@plone/volto/helpers';
+import { hasBlocksData } from '@plone/volto/helpers/Blocks/Blocks';
+import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
 import { useDispatch, shallowEqual, useSelector } from 'react-redux';
 
 import isEqual from 'lodash/isEqual';

package/src/customizations/volto/components/theme/View/EventView.jsx

@@ -5,10 +5,11 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { hasBlocksData, flattenHTMLToAppURL } from '@plone/volto/helpers';
+import { hasBlocksData } from '@plone/volto/helpers/Blocks/Blocks';
+import { flattenHTMLToAppURL } from '@plone/volto/helpers/Url/Url';
 import { Image } from 'semantic-ui-react';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
-import { EventDetails } from '@plone/volto/components';
+import EventDetails from '@plone/volto/components/theme/EventDetails/EventDetails';
 import './style.less';
 
 const EventTextfieldView = ({ content }) => (

package/src/customizations/volto/helpers/Html/Html.jsx

@@ -7,7 +7,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Helmet from '@plone/volto/helpers/Helmet/Helmet';
 import serialize from 'serialize-javascript';
-import { join } from 'lodash';
+import join from 'lodash/join';
 import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 import { runtimeConfig } from '@plone/volto/runtime_config';
 import config from '@plone/volto/registry';
@@ -104,6 +104,13 @@ class Html extends Component {
           {head.link.toComponent()}
           {head.script.toComponent()}
 
+          {config.settings.cssLayers && (
+            // Load the CSS layers from config, if any
+            <style>{`@layer ${config.settings.cssLayers.join(', ')};`}</style>
+          )}
+
+          {head.style.toComponent()}
+
           {React.createElement('script', {
             nonce: nonce,
             dangerouslySetInnerHTML: {
@@ -118,6 +125,9 @@ class Html extends Component {
                   ...(publicURL && {
                     publicURL,
                   }),
+                  ...(process.env.SITE_DEFAULT_LANGUAGE && {
+                    defaultLanguage: process.env.SITE_DEFAULT_LANGUAGE,
+                  }),
                 },
                 { space: 2 },
               )};`,
@@ -134,7 +144,7 @@ class Html extends Component {
           <link rel="manifest" href="/site.webmanifest" />
           <meta name="generator" content="Plone 6 - https://plone.org" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
-          <meta name="apple-mobile-web-app-capable" content="yes" />
+          <meta name="mobile-web-app-capable" content="yes" />
           {process.env.NODE_ENV === 'production' && criticalCss && (
             <style
               dangerouslySetInnerHTML={{ __html: this.props.criticalCss }}
@@ -148,8 +158,8 @@ class Html extends Component {
               rel: !criticalCss
                 ? elem.props.rel
                 : elem.props.as === 'style'
-                ? 'prefetch'
-                : elem.props.rel,
+                  ? 'prefetch'
+                  : elem.props.rel,
             }),
           )}
           {/* Styles in development are loaded with Webpack's style-loader, in production,
@@ -162,8 +172,8 @@ class Html extends Component {
                     __html: CRITICAL_CSS_TEMPLATE,
                   }}
                 ></script>
-                {extractor.getStyleElements().map((elem) => (
-                  <noscript>
+                {extractor.getStyleElements().map((elem, index) => (
+                  <noscript key={elem.key ?? `noscript-style-${index}`}>
                     {React.cloneElement(elem, {
                       rel: 'stylesheet',
                       crossOrigin:

package/src/customizations/volto/helpers/Html/Readme.md

@@ -1 +1,7 @@
-Customized for CSP support. Copy of https://github.com/plone/volto/blob/8b0f2af98ce0362f6975ce9c50137f6bd7cc3bb8/src/helpers/Html/Html.jsx Volto 17.x.x branch
+Customized for CSP support: adds a `nonce` prop that is applied to both inline
+`<script>` tags (`window.env` and `window.__data`) and to all extracted script
+elements, enabling a strict Content-Security-Policy `script-src 'nonce-...'`
+header generated by the paired `server.jsx` customization.
+
+Rebased against Volto 18 — also includes cssLayers support, head.style.toComponent(),
+SITE_DEFAULT_LANGUAGE in window.env, and mobile-web-app-capable meta tag.