@plone/volto 18.6.0 → 18.8.0

package/src/components/manage/WorkingCopyToastsFactory/WorkingCopyToastsFactory.jsx

@@ -7,7 +7,6 @@ import { defineMessages, useIntl } from 'react-intl';
 import Toast from '@plone/volto/components/manage/Toast/Toast';
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import FormattedDate from '@plone/volto/components/theme/FormattedDate/FormattedDate';
-import config from '@plone/volto/registry';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 
 const messages = defineMessages({
@@ -39,48 +38,28 @@ const WorkingCopyToastsFactory = (props) => {
   };
 
   useDeepCompareEffect(() => {
-    if (content && config.settings.hasWorkingCopySupport) {
-      if (working_copy) {
-        let toastMessage, toastTitle;
-        if (content.working_copy_of) {
-          // I'm a working copy
-          toastMessage = messages.thisIsAWorkingCopyOf;
-          toastTitle = (
-            <Link to={flattenToAppURL(content.working_copy_of['@id'])}>
-              {content.working_copy_of?.title}
-            </Link>
-          );
-        } else {
-          // I'm a baseline
-          toastMessage = messages.workingCopyIs;
-          toastTitle = (
-            <Link to={flattenToAppURL(working_copy['@id'])}>
-              {working_copy?.title}
-            </Link>
-          );
-        }
-        if (toast.isActive('workingcopyinfo')) {
-          toast.update('workingcopyinfo', {
-            render: (
-              <Toast
-                info
-                title={intl.formatMessage(toastMessage, {
-                  title: toastTitle,
-                })}
-                content={intl.formatMessage(messages.workingCopyCreatedBy, {
-                  creator: working_copy?.creator_name,
-                  date: (
-                    <FormattedDate
-                      date={working_copy?.created}
-                      format={dateOptions}
-                    />
-                  ),
-                })}
-              />
-            ),
-          });
-        } else {
-          toast.info(
+    if (working_copy) {
+      let toastMessage, toastTitle;
+      if (content.working_copy_of) {
+        // I'm a working copy
+        toastMessage = messages.thisIsAWorkingCopyOf;
+        toastTitle = (
+          <Link to={flattenToAppURL(content.working_copy_of['@id'])}>
+            {content.working_copy_of?.title}
+          </Link>
+        );
+      } else {
+        // I'm a baseline
+        toastMessage = messages.workingCopyIs;
+        toastTitle = (
+          <Link to={flattenToAppURL(working_copy['@id'])}>
+            {working_copy?.title}
+          </Link>
+        );
+      }
+      if (toast.isActive('workingcopyinfo')) {
+        toast.update('workingcopyinfo', {
+          render: (
             <Toast
               info
               title={intl.formatMessage(toastMessage, {
@@ -95,20 +74,38 @@ const WorkingCopyToastsFactory = (props) => {
                   />
                 ),
               })}
-            />,
-            {
-              toastId: 'workingcopyinfo',
-              autoClose: false,
-              closeButton: false,
-              transition: null,
-            },
-          );
-        }
+            />
+          ),
+        });
+      } else {
+        toast.info(
+          <Toast
+            info
+            title={intl.formatMessage(toastMessage, {
+              title: toastTitle,
+            })}
+            content={intl.formatMessage(messages.workingCopyCreatedBy, {
+              creator: working_copy?.creator_name,
+              date: (
+                <FormattedDate
+                  date={working_copy?.created}
+                  format={dateOptions}
+                />
+              ),
+            })}
+          />,
+          {
+            toastId: 'workingcopyinfo',
+            autoClose: false,
+            closeButton: false,
+            transition: null,
+          },
+        );
       }
-      if (!working_copy) {
-        if (toast.isActive('workingcopyinfo')) {
-          toast.dismiss('workingcopyinfo');
-        }
+    }
+    if (!working_copy) {
+      if (toast.isActive('workingcopyinfo')) {
+        toast.dismiss('workingcopyinfo');
       }
     }
   }, [pathname, content, title, working_copy, intl, lang, dateOptions]);

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/Image/Image.jsx

@@ -54,7 +54,14 @@ export default function Image({
     attrs.className = cx(className, { responsive });
 
     if (!isSvg && image.scales && Object.keys(image.scales).length > 0) {
-      const sortedScales = Object.values(image.scales).sort((a, b) => {
+      const sortedScales = Object.values({
+        ...image.scales,
+        original: {
+          download: `${image.download}`,
+          width: image.width,
+          height: image.height,
+        },
+      }).sort((a, b) => {
         if (a.width > b.width) return 1;
         else if (a.width < b.width) return -1;
         else return 0;

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/config/ControlPanels.js

@@ -76,7 +76,6 @@ export const unwantedControlPanelsFields = {
     'site_favicon_mimetype',
     'exposeDCMetaTags',
     'enable_sitemap',
-    'robots_txt',
     'webstats_js',
   ],
   editing: ['available_editors', 'default_editor', 'ext_editor'],

package/src/config/index.js

@@ -163,7 +163,6 @@ let config = {
     showSelfRegistration: false,
     contentMetadataTagsImageField: 'image',
     contentPropertiesSchemaEnhancer: null,
-    hasWorkingCopySupport: false,
     maxUndoLevels: 200, // undo history size for the main form
     addonsInfo: addonsInfo,
     workflowMapping,

package/src/express-middleware/robotstxt.js

@@ -4,13 +4,12 @@ import { generateRobots } from '@plone/volto/helpers/Robots/Robots';
 /*
 robots.txt - priority order:
 
-1) robots.txt in /public folder
-2) VOLTO_ROBOTSTXT var in .env
-3) default: plone robots.txt
+1) VOLTO_ROBOTSTXT var in .env
+2) robots.txt setting in the site control panel
 
 */
 
-const ploneRobots = function (req, res, next) {
+const siteRobots = function (req, res, next) {
   generateRobots(req).then((robots) => {
     res.set('Content-Type', 'text/plain');
     res.send(robots);
@@ -27,7 +26,7 @@ export default function robotstxtMiddleware() {
   if (process.env.VOLTO_ROBOTSTXT) {
     middleware.all('**/robots.txt', envRobots);
   } else {
-    middleware.all('**/robots.txt', ploneRobots);
+    middleware.all('**/robots.txt', siteRobots);
   }
   middleware.id = 'robots.txt';
   return middleware;

package/src/helpers/Api/Api.js

@@ -17,7 +17,7 @@ const methods = ['get', 'post', 'put', 'patch', 'del'];
  * @param {string} path Path (or URL) to be formatted.
  * @returns {string} Formatted path.
  */
-function formatUrl(path) {
+export function formatUrl(path) {
   const { settings } = config;
   const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
 

package/src/helpers/Blocks/Blocks.js

@@ -120,9 +120,10 @@ export function moveBlock(formData, source, destination) {
  * @function deleteBlock
  * @param {Object} formData Form data
  * @param {string} blockId Block uid
+ * @param {Object} intl intl object.
  * @return {Object} New form data
  */
-export function deleteBlock(formData, blockId) {
+export function deleteBlock(formData, blockId, intl) {
   const blocksFieldname = getBlocksFieldname(formData);
   const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
 
@@ -135,7 +136,13 @@ export function deleteBlock(formData, blockId) {
   };
 
   if (newFormData[blocksLayoutFieldname].items.length === 0) {
-    newFormData = addBlock(newFormData, config.settings.defaultBlockType, 0);
+    newFormData = addBlock(
+      newFormData,
+      config.settings.defaultBlockType,
+      0,
+      {},
+      intl,
+    );
   }
 
   return newFormData;
@@ -147,9 +154,11 @@ export function deleteBlock(formData, blockId) {
  * @param {Object} formData Form data
  * @param {string} type Block type
  * @param {number} index Destination index
+ * @param {Object} blocksConfig Blocks configuration.
+ * @param {Object} intl intl object.
  * @return {Array} New block id, New form data
  */
-export function addBlock(formData, type, index, blocksConfig) {
+export function addBlock(formData, type, index, blocksConfig, intl) {
   const { settings } = config;
   const id = uuid();
   const idTrailingBlock = uuid();
@@ -192,6 +201,7 @@ export function addBlock(formData, type, index, blocksConfig) {
         },
         selected: id,
       },
+      intl,
     }),
   ];
 }
@@ -208,6 +218,7 @@ export const applyBlockInitialValue = ({
   value,
   blocksConfig,
   formData,
+  intl,
 }) => {
   const type = value['@type'];
   blocksConfig = blocksConfig || config.blocks.blocksConfig;
@@ -217,6 +228,7 @@ export const applyBlockInitialValue = ({
       id,
       value,
       formData,
+      intl,
     });
     const blocksFieldname = getBlocksFieldname(formData);
     formData[blocksFieldname][id] = value;
@@ -231,9 +243,11 @@ export const applyBlockInitialValue = ({
  * @param {Object} formData Form data
  * @param {string} id Block uid to mutate
  * @param {number} value Block's new value
+ * @param {Object} blocksConfig Blocks configuration.
+ * @param {Object} intl intl object.
  * @return {Object} New form data
  */
-export function mutateBlock(formData, id, value, blocksConfig) {
+export function mutateBlock(formData, id, value, blocksConfig, intl) {
   const { settings } = config;
   const blocksFieldname = getBlocksFieldname(formData);
   const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
@@ -260,6 +274,7 @@ export function mutateBlock(formData, id, value, blocksConfig) {
           [id]: value || null,
         },
       },
+      intl,
     });
     if (!blockHasValue(block)) {
       return newFormData;
@@ -288,6 +303,7 @@ export function mutateBlock(formData, id, value, blocksConfig) {
         ],
       },
     },
+    intl,
   });
   return newFormData;
 }
@@ -298,6 +314,10 @@ export function mutateBlock(formData, id, value, blocksConfig) {
  * @param {Object} formData Form data
  * @param {string} id Insert new block before the block with this id
  * @param {number} value New block's value
+ * @param {Object} current Current block
+ * @param {number} offset offset position
+ * @param {Object} blocksConfig Blocks configuration.
+ * @param {Object} intl intl object.
  * @return {Array} New block id, New form data
  */
 export function insertBlock(
@@ -307,6 +327,7 @@ export function insertBlock(
   current = {},
   offset = 0,
   blocksConfig,
+  intl,
 ) {
   const blocksFieldname = getBlocksFieldname(formData);
   const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
@@ -340,6 +361,7 @@ export function insertBlock(
         ],
       },
     },
+    intl,
   });
 
   return [newBlockId, newFormData];

package/src/helpers/Blocks/Blocks.test.js

@@ -568,6 +568,52 @@ describe('Blocks', () => {
         marker: true,
       });
     });
+
+    it('initialValue with intl', () => {
+      // Mock intl with formatMessage function
+      const intl = {
+        formatMessage: jest.fn(({ id }) => id),
+      };
+
+      const messages = {
+        intl: {
+          id: 'intl',
+          defaultMessage: 'intl',
+        },
+      };
+
+      config.blocks.blocksConfig.text.initialValue = ({
+        id,
+        value,
+        formData,
+        intl,
+      }) => {
+        return {
+          ...formData.blocks[id],
+          intl: intl.formatMessage(messages.intl),
+        };
+      };
+      const [newId, form] = addBlock(
+        {
+          blocks: { a: { value: 1 }, b: { value: 2 } },
+          blocks_layout: { items: ['a', 'b'] },
+        },
+        'text',
+        1,
+        config.blocks.blocksConfig,
+        intl,
+      );
+
+      delete config.blocks.blocksConfig.text.initialValue;
+
+      expect(form.blocks[newId]).toStrictEqual({
+        '@type': 'text',
+        booleanField: false,
+        description: 'Default description',
+        title: 'Default title',
+        intl: 'intl',
+      });
+    });
   });
 
   describe('moveBlock', () => {

package/src/helpers/FormValidation/validators.ts

@@ -171,7 +171,9 @@ export const patternValidator = ({
   }
   const regex = new RegExp(field.pattern);
   const isValid = regex.test(value);
-  return !isValid ? formatMessage(messages.pattern) : null;
+  return !isValid
+    ? formatMessage(messages.pattern, { pattern: field.pattern })
+    : null;
 };
 
 export const maxItemsValidator = ({

package/src/helpers/Robots/Robots.js

@@ -1,10 +1,12 @@
 /**
- * Sitemap helper.
- * @module helpers/Sitemap
+ * Robots helper.
+ * @module helpers/Robots
  */
 
 import superagent from 'superagent';
+
 import config from '@plone/volto/registry';
+import { formatUrl } from '@plone/volto/helpers/Api/Api';
 import { addHeadersFactory } from '@plone/volto/helpers/Proxy/Proxy';
 
 /**
@@ -15,43 +17,22 @@ import { addHeadersFactory } from '@plone/volto/helpers/Proxy/Proxy';
  */
 export const generateRobots = (req) =>
   new Promise((resolve) => {
-    const internalUrl =
-      config.settings.internalApiPath ??
-      config.settings.devProxyToApiPath ??
-      config.settings.apiPath;
-    const request = superagent.get(`${internalUrl}/robots.txt`);
-    request.set('Accept', 'text/plain');
+    const request = superagent.get(formatUrl('@site'));
+    request.set('Accept', 'application/json');
     const authToken = req.universalCookies.get('auth_token');
     if (authToken) {
       request.set('Authorization', `Bearer ${authToken}`);
     }
     request.use(addHeadersFactory(req));
-    request.end((error, { text }) => {
+    request.end((error, { text, body }) => {
       if (error) {
         resolve(text || error);
       } else {
-        // It appears that express does not take the x-forwarded headers into
-        // consideration, so we do it ourselves.
-        const {
-          'x-forwarded-proto': forwardedProto,
-          'x-forwarded-host': forwardedHost,
-          'x-forwarded-port': forwardedPort,
-        } = req.headers;
-        const proto = forwardedProto ?? req.protocol;
-        const host = forwardedHost ?? req.get('Host');
-        const portNum = forwardedPort ?? req.get('Port');
-        const port =
-          (proto === 'https' && '' + portNum === '443') ||
-          (proto === 'http' && '' + portNum === '80')
-            ? ''
-            : `:${portNum}`;
-        // Plone has probably returned the sitemap link with the internal url.
-        // If so, let's replace it with the current one.
-        const url = `${proto}://${host}${port}`;
-        text = text.replace(internalUrl, url);
-        // Replace the sitemap with the sitemap index.
-        text = text.replace('sitemap.xml.gz', 'sitemap-index.xml');
-        resolve(text);
+        resolve(
+          body['plone.robots_txt']
+            .replace('{portal_url}', config.settings.publicURL)
+            .replace('sitemap.xml.gz', 'sitemap-index.xml'),
+        );
       }
     });
   });

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/helpers/Api/Api.d.ts

@@ -1,3 +1,10 @@
+/**
+ * Format the url.
+ * @function formatUrl
+ * @param {string} path Path (or URL) to be formatted.
+ * @returns {string} Formatted path.
+ */
+export function formatUrl(path: string): string;
 export default Api;
 /**
  * Api class.