@plone/volto 18.5.0 → 18.7.0

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/constants/Languages.cjs

@@ -19,7 +19,6 @@ module.exports = {
   pt: 'Português',
   pt_BR: 'Português (Brasil)',
   zh_CN: '中文',
-  sv: 'Svenska',
 };
 
 // export default languages;

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 {};

package/types/constants/Languages.d.cts

@@ -13,4 +13,3 @@ export let ja: string;
 export let pt: string;
 export let pt_BR: string;
 export let zh_CN: string;
-export let sv: string;