@plone/volto 18.6.0 → 18.7.0

package/.registry.loader.js

@@ -0,0 +1,36 @@
+/*
+This file is autogenerated. Don't change it directly.
+Instead, change the "addons" setting in your package.json file.
+*/
+
+const addonsInfo = [];
+export { addonsInfo };
+
+const safeWrapper = (func) => (config) => {
+  const res = func(config);
+  if (typeof res === 'undefined') {
+    throw new Error("Configuration function doesn't return config");
+  }
+  return res;
+};
+
+const projectConfigLoader = false;
+const projectConfig = (config) => {
+  return projectConfigLoader &&
+    typeof projectConfigLoader.default === 'function'
+    ? projectConfigLoader.default(config)
+    : config;
+};
+
+const load = (config) => {
+  const addonLoaders = [];
+  if (!addonLoaders.every((el) => typeof el === 'function')) {
+    throw new TypeError(
+      'Each addon has to provide a function applying its configuration to the projects configuration.',
+    );
+  }
+  return projectConfig(
+    addonLoaders.reduce((acc, apply) => safeWrapper(apply)(acc), config),
+  );
+};
+export default load;

package/CHANGELOG.md

@@ -17,6 +17,29 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 18.7.0 (2025-01-24)
+
+### Feature
+
+- - Fixed handling of the site logo preview to appear after upload. @Shyam-Raghuwanshi [#6591](https://github.com/plone/volto/issues/6591)
+- Provide language alternate links @erral [#6602](https://github.com/plone/volto/issues/6602)
+- feat(cypress):Add custom check Accessibility command @Tishasoumya-02 [#6606](https://github.com/plone/volto/issues/6606)
+
+### Bugfix
+
+- Improve the usability of the `ObjectBrowser` when inputting a manual value, checking it on blur, and adding a local validator. @sneridagh [#6576](https://github.com/plone/volto/issues/6576)
+- fix(useClipboard): Do not have a pending promise in a boolean state @nileshgulia1 [#6585](https://github.com/plone/volto/issues/6585)
+
+### Internal
+
+- Add Seven convenience Makefile commands. @sneridagh [#6599](https://github.com/plone/volto/issues/6599)
+- Restore pull request previews on Read the Docs. @stevepiercy [#6612](https://github.com/plone/volto/issues/6612)
+- Fix lint-staged throwing warnings when a file is checked-in and ignored. @sneridagh [#6614](https://github.com/plone/volto/issues/6614)
+
+### Documentation
+
+- Enhancements of the upgrade guide for Volto 18, since we detected some inconsistencies. @sneridagh [#6609](https://github.com/plone/volto/issues/6609)
+
 ## 18.6.0 (2025-01-11)
 
 ### Feature

package/cypress/support/commands.js

@@ -967,3 +967,25 @@ Cypress.Commands.add('queryCounter', (path, steps, number = 1) => {
 
   cy.get('@counterName').its('callCount').should('equal', number);
 });
+
+// Print cypress-axe violations to the terminal
+function printAccessibilityViolations(violations) {
+  cy.task(
+    'table',
+    violations.map(({ id, impact, description, nodes }) => ({
+      impact,
+      description: `${description} (${id})`,
+      nodes: nodes.length,
+    })),
+  );
+}
+
+Cypress.Commands.add(
+  'checkAccessibility',
+  (subject, { skipFailures = false } = {}) => {
+    cy.checkA11y(subject, null, printAccessibilityViolations, skipFailures);
+  },
+  {
+    prevSubject: 'optional',
+  },
+);

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "18.6.0",
+  "version": "18.7.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -236,8 +236,8 @@
     "url": "^0.11.3",
     "use-deep-compare-effect": "1.8.1",
     "uuid": "^8.3.2",
-    "@plone/registry": "2.2.0",
-    "@plone/volto-slate": "18.1.0",
+    "@plone/volto-slate": "18.2.0",
+    "@plone/registry": "2.3.0",
     "@plone/scripts": "3.8.1"
   },
   "devDependencies": {
@@ -358,7 +358,7 @@
     "webpack-dev-server": "4.11.1",
     "webpack-node-externals": "3.0.0",
     "why": "0.6.2",
-    "@plone/types": "1.2.0",
+    "@plone/types": "1.3.0",
     "@plone/volto-coresandbox": "1.0.0"
   },
   "volta": {

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

@@ -16,10 +16,10 @@ import { Image, Label, Popup, Button } from 'semantic-ui-react';
 import {
   flattenToAppURL,
   isInternalURL,
-  isUrl,
   normalizeUrl,
   removeProtocol,
 } from '@plone/volto/helpers/Url/Url';
+import { urlValidator } from '@plone/volto/helpers/FormValidation/validators';
 import { searchContent } from '@plone/volto/actions/search/search';
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
 import { defineMessages, injectIntl } from 'react-intl';
@@ -102,6 +102,7 @@ export class ObjectBrowserWidgetComponent extends Component {
   state = {
     manualLinkInput: '',
     validURL: false,
+    errors: [],
   };
 
   constructor(props) {
@@ -230,7 +231,16 @@ export class ObjectBrowserWidgetComponent extends Component {
 
   validateManualLink = (url) => {
     if (this.props.allowExternals) {
-      return isUrl(url);
+      const error = urlValidator({
+        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);
     }
@@ -344,6 +354,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
@@ -372,6 +384,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/components/manage/Widgets/RegistryImageWidget.jsx

@@ -3,7 +3,7 @@
  * @module components/manage/Widgets/RegistryImageWidget
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Image, Dimmer } from 'semantic-ui-react';
 import { readAsDataURL } from 'promise-file-reader';
@@ -76,12 +76,15 @@ const RegistryImageWidget = (props) => {
   const { id, value, onChange, isDisabled } = props;
   const intl = useIntl();
 
-  const fileName = value?.split(';')[0];
-  const imgsrc = fileName
-    ? `${toPublicURL('/')}@@site-logo/${atob(
-        fileName.replace('filenameb64:', ''),
-      )}`
-    : '';
+  // State to manage the preview image source
+  const [previewSrc, setPreviewSrc] = useState(() => {
+    const fileName = value?.split(';')[0];
+    return fileName
+      ? `${toPublicURL('/')}@@site-logo/${atob(
+          fileName.replace('filenameb64:', ''),
+        )}`
+      : '';
+  });
 
   /**
    * Drop handler
@@ -102,8 +105,7 @@ const RegistryImageWidget = (props) => {
     reader.onload = function () {
       const fields = reader.result.match(/^data:(.*);(.*),(.*)$/);
       if (imageMimetypes.includes(fields[1])) {
-        let imagePreview = document.getElementById(`field-${id}-image`);
-        imagePreview.src = reader.result;
+        setPreviewSrc(reader.result);
       }
     };
     reader.readAsDataURL(files[0]);
@@ -115,12 +117,12 @@ const RegistryImageWidget = (props) => {
         {({ getRootProps, getInputProps, isDragActive }) => (
           <div className="file-widget-dropzone" {...getRootProps()}>
             {isDragActive && <Dimmer active></Dimmer>}
-            {imgsrc ? (
+            {previewSrc ? (
               <Image
                 className="image-preview"
                 id={`field-${id}-image`}
                 size="small"
-                src={imgsrc}
+                src={previewSrc}
               />
             ) : (
               <div className="dropzone-placeholder">
@@ -139,7 +141,6 @@ const RegistryImageWidget = (props) => {
                 )}
               </div>
             )}
-
             <label className="label-file-widget-input">
               {value
                 ? intl.formatMessage(messages.replaceFile)
@@ -168,6 +169,7 @@ const RegistryImageWidget = (props) => {
             disabled={isDisabled}
             onClick={() => {
               onChange(id, '');
+              setPreviewSrc(''); // Clear the preview image
             }}
           >
             <Icon name={deleteSVG} size="20px" />
@@ -189,10 +191,7 @@ RegistryImageWidget.propTypes = {
   description: PropTypes.string,
   required: PropTypes.bool,
   error: PropTypes.arrayOf(PropTypes.string),
-  value: PropTypes.shape({
-    '@type': PropTypes.string,
-    title: PropTypes.string,
-  }),
+  value: PropTypes.string,
   onChange: PropTypes.func.isRequired,
   wrapped: PropTypes.bool,
 };

package/src/components/theme/AlternateHrefLangs/AlternateHrefLangs.jsx

@@ -0,0 +1,23 @@
+import config from '@plone/volto/registry';
+import Helmet from '@plone/volto/helpers/Helmet/Helmet';
+
+const AlternateHrefLangs = (props) => {
+  const { content } = props;
+  return (
+    <Helmet>
+      {config.settings.isMultilingual &&
+        content['@components']?.translations?.items?.map((item, key) => {
+          return (
+            <link
+              key={key}
+              rel="alternate"
+              hrefLang={item.language}
+              href={item['@id']}
+            />
+          );
+        })}
+    </Helmet>
+  );
+};
+
+export { AlternateHrefLangs };

package/src/components/theme/AlternateHrefLangs/AlternateHrefLangs.test.jsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import Helmet from '@plone/volto/helpers/Helmet/Helmet';
+
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import config from '@plone/volto/registry';
+
+import { AlternateHrefLangs } from './AlternateHrefLangs';
+
+const mockStore = configureStore();
+
+describe('AlternateHrefLangs', () => {
+  beforeEach(() => {});
+  it('non multilingual site, renders nothing', () => {
+    config.settings.isMultilingual = false;
+    const content = {
+      '@id': '/',
+      '@components': {},
+    };
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    // We need to force the component rendering
+    // to fill the Helmet
+    renderer.create(
+      <Provider store={store}>
+        <AlternateHrefLangs content={content} />
+      </Provider>,
+    );
+
+    const helmetLinks = Helmet.peek().linkTags;
+    expect(helmetLinks.length).toBe(0);
+  });
+  it('multilingual site, with some translations', () => {
+    config.settings.isMultilingual = true;
+    config.settings.supportedLanguages = ['en', 'es', 'eu'];
+
+    const content = {
+      '@components': {
+        translations: {
+          items: [
+            { '@id': '/en', language: 'en' },
+            { '@id': '/es', language: 'es' },
+          ],
+        },
+      },
+    };
+
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    // We need to force the component rendering
+    // to fill the Helmet
+    renderer.create(
+      <Provider store={store}>
+        <>
+          <AlternateHrefLangs content={content} />
+        </>
+      </Provider>,
+    );
+    const helmetLinks = Helmet.peek().linkTags;
+
+    expect(helmetLinks.length).toBe(2);
+
+    expect(helmetLinks).toContainEqual({
+      rel: 'alternate',
+      href: '/es',
+      hrefLang: 'es',
+    });
+    expect(helmetLinks).toContainEqual({
+      rel: 'alternate',
+      href: '/en',
+      hrefLang: 'en',
+    });
+  });
+  it('multilingual site, with all available translations', () => {
+    config.settings.isMultilingual = true;
+    config.settings.supportedLanguages = ['en', 'es', 'eu'];
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const content = {
+      '@components': {
+        translations: {
+          items: [
+            { '@id': '/en', language: 'en' },
+            { '@id': '/eu', language: 'eu' },
+            { '@id': '/es', language: 'es' },
+          ],
+        },
+      },
+    };
+
+    // We need to force the component rendering
+    // to fill the Helmet
+    renderer.create(
+      <Provider store={store}>
+        <AlternateHrefLangs content={content} />
+      </Provider>,
+    );
+
+    const helmetLinks = Helmet.peek().linkTags;
+
+    // We expect having 3 links
+    expect(helmetLinks.length).toBe(3);
+
+    expect(helmetLinks).toContainEqual({
+      rel: 'alternate',
+      href: '/eu',
+      hrefLang: 'eu',
+    });
+    expect(helmetLinks).toContainEqual({
+      rel: 'alternate',
+      href: '/es',
+      hrefLang: 'es',
+    });
+    expect(helmetLinks).toContainEqual({
+      rel: 'alternate',
+      href: '/en',
+      hrefLang: 'en',
+    });
+  });
+});

package/src/components/theme/View/View.jsx

@@ -21,6 +21,7 @@ import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 import { getBaseUrl, flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import { getLayoutFieldname } from '@plone/volto/helpers/Content/Content';
 import { hasApiExpander } from '@plone/volto/helpers/Utils/Utils';
+import { AlternateHrefLangs } from '@plone/volto/components/theme/AlternateHrefLangs/AlternateHrefLangs';
 
 import config from '@plone/volto/registry';
 import SlotRenderer from '../SlotRenderer/SlotRenderer';
@@ -234,6 +235,7 @@ class View extends Component {
     return (
       <div id="view" tabIndex="-1">
         <ContentMetadataTags content={this.props.content} />
+        <AlternateHrefLangs content={this.props.content} />
         {/* Body class if displayName in component is set */}
         <BodyClass
           className={

package/src/hooks/clipboard/useClipboard.js

@@ -13,9 +13,13 @@ export default function useClipboard(clipboardText = '') {
     }
   };
 
-  const copyAction = useCallback(() => {
-    const copiedString = copyToClipboard(stringToCopy.current);
-    setCopied(copiedString);
+  const copyAction = useCallback(async () => {
+    try {
+      await copyToClipboard(stringToCopy.current);
+      setCopied(true);
+    } catch (error) {
+      setCopied(false);
+    }
   }, [stringToCopy]);
 
   useEffect(() => {

package/types/components/manage/Widgets/ObjectBrowserWidget.d.ts

@@ -43,6 +43,7 @@ export class ObjectBrowserWidgetComponent extends React.Component<any, any, any>
     state: {
         manualLinkInput: string;
         validURL: boolean;
+        errors: any[];
     };
     selectedItemsRef: React.RefObject<any>;
     placeholderRef: React.RefObject<any>;

package/types/components/theme/AlternateHrefLangs/AlternateHrefLangs.d.ts

@@ -0,0 +1 @@
+export function AlternateHrefLangs(props: any): import("react/jsx-runtime").JSX.Element;

package/types/components/theme/AlternateHrefLangs/AlternateHrefLangs.test.d.ts

@@ -0,0 +1 @@
+export {};