@eeacms/volto-eea-website-theme 1.26.2 → 1.27.1

package/{.project.eslintrc.js → .eslintrc.js}

@@ -44,5 +44,13 @@ module.exports = {
       },
     },
   },
+  rules: {
+    'react/jsx-no-target-blank': [
+      'error',
+      {
+        allowReferrer: true,
+      },
+    ],
+  },
 };
 

package/CHANGELOG.md

@@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.27.1](https://github.com/eea/volto-eea-website-theme/compare/1.27.0...1.27.1) - 18 January 2024
+
+#### :bug: Bug Fixes
+
+- fix: remove norefferer for seo purposes - refs #263008 [Gabriel - [`fab8094`](https://github.com/eea/volto-eea-website-theme/commit/fab80944fa3267ee4c584d2c4f77480d2270242c)]
+
+### [1.27.0](https://github.com/eea/volto-eea-website-theme/compare/1.26.2...1.27.0) - 17 January 2024
+
+#### :rocket: New Features
+
+- feat: Put cloneData function for slate block, in order to change the uuids of fragments  - refs #261770 [dobri1408 - [`069bffc`](https://github.com/eea/volto-eea-website-theme/commit/069bffcf114a886690408bbc2c2909c298b5e1aa)]
+
+#### :bug: Bug Fixes
+
+- fix: noreferrer on links - refs #263008 [ichim-david - [`d8f81e0`](https://github.com/eea/volto-eea-website-theme/commit/d8f81e01d9d2666e834ac92b2f34976f25156ea2)]
+- fix: History diff page overlap - refs #262216 [dobri1408 - [`f580b16`](https://github.com/eea/volto-eea-website-theme/commit/f580b16f24faacb9318402699a1b616814840d63)]
+
 ### [1.26.2](https://github.com/eea/volto-eea-website-theme/compare/1.26.1...1.26.2) - 4 January 2024
 
 ### [1.26.1](https://github.com/eea/volto-eea-website-theme/compare/1.26.0...1.26.1) - 14 December 2023

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "1.26.2",
+  "version": "1.27.1",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/manage/Blocks/Title/schema.js

@@ -133,7 +133,7 @@ export default {
           Ex. ri-copyright-line. See{' '}
           <a
             target="_blank"
-            rel="noopener noreferrer"
+            rel="noopener"
             href="https://eea.github.io/volto-eea-design-system/docs/webdev/Guidelines/iconography/#icon-set"
           >
             Remix Icon set

package/src/customizations/volto/components/manage/Blocks/Image/schema.js

@@ -80,7 +80,7 @@ export function ImageSchema({ formData, intl }) {
               href="https://www.w3.org/WAI/tutorials/images/decision-tree/"
               title={intl.formatMessage(messages.openLinkInNewTab)}
               target="_blank"
-              rel="noopener noreferrer"
+              rel="noopener"
             >
               {intl.formatMessage(messages.AltTextHintLinkText)}
             </a>{' '}
@@ -117,7 +117,7 @@ export function ImageSchema({ formData, intl }) {
             Ex. ri-copyright-line. See{' '}
             <a
               target="_blank"
-              rel="noopener noreferrer"
+              rel="noopener"
               href="https://eea.github.io/volto-eea-design-system/docs/webdev/Guidelines/iconography/#icon-set"
             >
               Remix Icon set

package/src/customizations/volto/components/manage/Blocks/LeadImage/schema.js

@@ -95,7 +95,7 @@ export function LeadImageSchema({ formData, intl }) {
             Ex. ri-copyright-line. See{' '}
             <a
               target="_blank"
-              rel="noopener noreferrer"
+              rel="noopener"
               href="https://eea.github.io/volto-eea-design-system/docs/webdev/Guidelines/iconography/#icon-set"
             >
               Remix Icon set

package/src/customizations/volto/components/manage/Diff/DiffField.jsx

@@ -0,0 +1,351 @@
+/**
+ * Diff field component.
+ * @module components/manage/Diff/DiffField
+ */
+
+import React from 'react';
+// import { diffWords as dWords } from 'diff';
+import { join, map } from 'lodash';
+import PropTypes from 'prop-types';
+import { Grid } from 'semantic-ui-react';
+import ReactDOMServer from 'react-dom/server';
+import { Provider } from 'react-intl-redux';
+import { createBrowserHistory } from 'history';
+import { ConnectedRouter } from 'connected-react-router';
+import { useSelector } from 'react-redux';
+
+import { Api } from '@plone/volto/helpers';
+import configureStore from '@plone/volto/store';
+import { DefaultView } from '@plone/volto/components/';
+import { serializeNodes } from '@plone/volto-slate/editor/render';
+
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
+/**
+ * Enhanced diff words utility
+ * @function diffWords
+ * @param oneStr Field one
+ * @param twoStr Field two
+ */
+
+/**
+ * Diff field component.
+ * @function DiffField
+ * @param {*} one Field one
+ * @param {*} two Field two
+ * @param {Object} schema Field schema
+ * @returns {string} Markup of the component.
+ */
+const DiffField = ({
+  one,
+  two,
+  contentOne,
+  contentTwo,
+  view,
+  schema,
+  diffLib,
+}) => {
+  const language = useSelector((state) => state.intl.locale);
+  const readable_date_format = {
+    dateStyle: 'full',
+    timeStyle: 'short',
+  };
+  const splitWords = (str) => {
+    if (!str) return [];
+    const splitedArray = [];
+    let elementCurent = '';
+    let insideTag = false;
+    for (let i = 0; i < str.length; i++)
+      if (str[i] === '<') {
+        if (elementCurent) splitedArray.push(elementCurent);
+        elementCurent = '<';
+        insideTag = true;
+      } else if (str[i] === '>') {
+        elementCurent += '>';
+        splitedArray.push(elementCurent);
+        elementCurent = '';
+        insideTag = false;
+      } else if (str[i] === ' ' && insideTag === false) {
+        elementCurent += ' ';
+        splitedArray.push(elementCurent);
+        elementCurent = '';
+      } else elementCurent += str[i];
+    if (elementCurent) splitedArray.push(elementCurent);
+    return splitedArray;
+  };
+
+  const diffWords = (oneStr, twoStr) => {
+    return diffLib.diffArrays(splitWords(oneStr), splitWords(twoStr));
+  };
+
+  let parts, oneArray, twoArray;
+  if (schema.widget && schema.title !== 'Data sources and providers') {
+    switch (schema.widget) {
+      case 'richtext':
+        parts = diffWords(one?.data, two?.data);
+        break;
+      case 'datetime':
+        parts = diffWords(
+          new Intl.DateTimeFormat(language, readable_date_format)
+            .format(new Date(one))
+            .replace('\u202F', ' '),
+          new Intl.DateTimeFormat(language, readable_date_format)
+            .format(new Date(two))
+            .replace('\u202F', ' '),
+        );
+        break;
+      case 'json': {
+        const api = new Api();
+        const history = createBrowserHistory();
+        const store = configureStore(window.__data, history, api);
+        parts = diffWords(
+          ReactDOMServer.renderToStaticMarkup(
+            <Provider store={store}>
+              <ConnectedRouter history={history}>
+                <DefaultView content={contentOne} />
+              </ConnectedRouter>
+            </Provider>,
+          ),
+          ReactDOMServer.renderToStaticMarkup(
+            <Provider store={store}>
+              <ConnectedRouter history={history}>
+                <DefaultView content={contentTwo} />
+              </ConnectedRouter>
+            </Provider>,
+          ),
+        );
+        break;
+      }
+      case 'slate': {
+        const api = new Api();
+        const history = createBrowserHistory();
+        const store = configureStore(window.__data, history, api);
+        parts = diffWords(
+          ReactDOMServer.renderToStaticMarkup(
+            <Provider store={store}>
+              <ConnectedRouter history={history}>
+                {serializeNodes(one)}
+              </ConnectedRouter>
+            </Provider>,
+          ),
+          ReactDOMServer.renderToStaticMarkup(
+            <Provider store={store}>
+              <ConnectedRouter history={history}>
+                {serializeNodes(two)}
+              </ConnectedRouter>
+            </Provider>,
+          ),
+        );
+        break;
+      }
+      case 'temporal': {
+        if (one?.temporal?.length > 0 && two.temporal?.length > 0) {
+          let firstString = one.temporal.reduce((acc, cur) => {
+            return acc + cur?.label + ', ';
+          }, '');
+          firstString = firstString.substring(0, firstString.length - 2);
+          let secondString = two.temporal.reduce((acc, cur) => {
+            return acc + cur?.label + ', ';
+          }, '');
+          secondString = secondString.substring(0, secondString.length - 2);
+          parts = diffWords(firstString, secondString);
+        }
+        break;
+      }
+      case 'geolocation': {
+        if (one?.geolocation?.length > 0 && two.geolocation?.length > 0) {
+          let firstString = one.geolocation.reduce((acc, cur) => {
+            return acc + cur?.label + ', ';
+          }, '');
+          firstString = firstString.substring(0, firstString.length - 2);
+          let secondString = two.geolocation.reduce((acc, cur) => {
+            return acc + cur?.label + ', ';
+          }, '');
+          secondString = secondString.substring(0, secondString.length - 2);
+          parts = diffWords(firstString, secondString);
+        }
+        break;
+      }
+      case 'textarea':
+      default:
+        parts = diffWords(one, two);
+        break;
+    }
+  } else if (schema.title === 'Data sources and providers') {
+    if (one?.data?.length > 0 && two.data?.length > 0) {
+      let firstString = one.data.reduce((acc, cur) => {
+        return acc + cur?.title + ', ' + cur?.organisation + '<br/>';
+      }, '');
+      firstString = firstString.substring(0, firstString.length - 2);
+      let secondString = two.data.reduce((acc, cur) => {
+        return acc + cur?.title + ', ' + cur?.organisation + '<br/>';
+      }, '');
+      secondString = secondString.substring(0, secondString.length - 2);
+      parts = diffWords(firstString, secondString);
+    }
+  } else if (schema.type === 'object') {
+    parts = diffWords(one?.filename || one, two?.filename || two);
+  } else if (schema.type === 'array') {
+    oneArray = (one || []).map((i) => i?.title || i);
+    twoArray = (two || []).map((j) => j?.title || j);
+    parts = diffWords(oneArray, twoArray);
+  } else {
+    parts = diffWords(one?.title || one, two?.title || two);
+  }
+
+  return (
+    <Grid data-testid="DiffField">
+      <Grid.Row>
+        <Grid.Column width={12}>{schema.title}</Grid.Column>
+      </Grid.Row>
+
+      {view === 'split' && (
+        <Grid.Row>
+          <Grid.Column width={6} verticalAlign="top">
+            <span
+              dangerouslySetInnerHTML={{
+                __html: join(
+                  map(parts, (part) => {
+                    let combined = (part.value || []).reduce((acc, value) => {
+                      if (
+                        part.removed &&
+                        !value.includes('<') &&
+                        !value.includes('>') &&
+                        !value.includes('>') &&
+                        !value.includes('</') &&
+                        !value.includes('"') &&
+                        !value.includes('src') &&
+                        !value.includes('href') &&
+                        !value.includes('=')
+                      )
+                        return acc + `<span class="deletion">${value}</span>`;
+                      if (
+                        part.added &&
+                        !value.includes('<') &&
+                        !value.includes('>') &&
+                        !value.includes('>') &&
+                        !value.includes('</') &&
+                        !value.includes('"') &&
+                        !value.includes('src') &&
+                        !value.includes('href') &&
+                        !value.includes('=')
+                      )
+                        return acc;
+                      return acc + value;
+                    }, '');
+                    return combined;
+                  }),
+                  '',
+                ),
+              }}
+            />
+          </Grid.Column>
+          <Grid.Column width={6} verticalAlign="top">
+            <span
+              dangerouslySetInnerHTML={{
+                __html: join(
+                  map(parts, (part) => {
+                    let combined = (part.value || []).reduce((acc, value) => {
+                      if (
+                        part.added &&
+                        !value.includes('<') &&
+                        !value.includes('>') &&
+                        !value.includes('>') &&
+                        !value.includes('</') &&
+                        !value.includes('"') &&
+                        !value.includes('src') &&
+                        !value.includes('href') &&
+                        !value.includes('=')
+                      )
+                        return acc + `<span class="addition">${value}</span>`;
+                      if (
+                        part.removed &&
+                        !value.includes('<') &&
+                        !value.includes('>') &&
+                        !value.includes('>') &&
+                        !value.includes('</') &&
+                        !value.includes('"') &&
+                        !value.includes('src') &&
+                        !value.includes('href') &&
+                        !value.includes('=')
+                      )
+                        return acc;
+                      return acc + value;
+                    }, '');
+                    return combined;
+                  }),
+                  '',
+                ),
+              }}
+            />
+          </Grid.Column>
+        </Grid.Row>
+      )}
+      {view === 'unified' && (
+        <Grid.Row>
+          <Grid.Column width={16} verticalAlign="top">
+            <span
+              dangerouslySetInnerHTML={{
+                __html: join(
+                  map(parts, (part) => {
+                    let combined = (part.value || []).reduce((acc, value) => {
+                      if (
+                        part.removed &&
+                        !value.includes('<') &&
+                        !value.includes('>') &&
+                        !value.includes('>') &&
+                        !value.includes('</') &&
+                        !value.includes('"') &&
+                        !value.includes('src') &&
+                        !value.includes('href') &&
+                        !value.includes('=')
+                      )
+                        return acc + `<span class="deletion">${value}</span>`;
+
+                      if (
+                        part.added &&
+                        !value.includes('<') &&
+                        !value.includes('>') &&
+                        !value.includes('>') &&
+                        !value.includes('</') &&
+                        !value.includes('"') &&
+                        !value.includes('src') &&
+                        !value.includes('href') &&
+                        !value.includes('=')
+                      )
+                        return acc + `<span class="addition">${value}</span>`;
+
+                      return acc + value;
+                    }, '');
+                    return combined;
+                  }),
+                  '',
+                ),
+              }}
+            />
+          </Grid.Column>
+        </Grid.Row>
+      )}
+    </Grid>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+DiffField.propTypes = {
+  one: PropTypes.any.isRequired,
+  two: PropTypes.any.isRequired,
+  contentOne: PropTypes.any,
+  contentTwo: PropTypes.any,
+  view: PropTypes.string.isRequired,
+  schema: PropTypes.shape({
+    widget: PropTypes.string,
+    type: PropTypes.string,
+    title: PropTypes.string,
+  }).isRequired,
+};
+
+export default injectLazyLibs('diffLib')(DiffField);

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

@@ -0,0 +1,154 @@
+/*
+ * UniversalLink
+ * @module components/UniversalLink
+ * Removed noreferrer from rel attribute
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { HashLink as Link } from 'react-router-hash-link';
+import { useSelector } from 'react-redux';
+import {
+  flattenToAppURL,
+  isInternalURL,
+  URLUtils,
+} from '@plone/volto/helpers/Url/Url';
+
+import config from '@plone/volto/registry';
+
+const UniversalLink = ({
+  href,
+  item = null,
+  openLinkInNewTab,
+  download = false,
+  children,
+  className = null,
+  title = null,
+  ...props
+}) => {
+  const token = useSelector((state) => state.userSession?.token);
+
+  let url = href;
+  if (!href && item) {
+    if (!item['@id']) {
+      // eslint-disable-next-line no-console
+      console.error(
+        'Invalid item passed to UniversalLink',
+        item,
+        props,
+        children,
+      );
+      url = '#';
+    } else {
+      //case: generic item
+      url = flattenToAppURL(item['@id']);
+
+      //case: item like a Link
+      let remoteUrl = item.remoteUrl || item.getRemoteUrl;
+      if (!token && remoteUrl) {
+        url = remoteUrl;
+      }
+
+      //case: item of type 'File'
+      if (
+        !token &&
+        config.settings.downloadableObjects.includes(item['@type'])
+      ) {
+        url = `${url}/@@download/file`;
+      }
+
+      if (
+        !token &&
+        config.settings.viewableInBrowserObjects.includes(item['@type'])
+      ) {
+        url = `${url}/@@display-file/file`;
+      }
+    }
+  }
+
+  const isExternal = !isInternalURL(url);
+
+  const isDownload = (!isExternal && url.includes('@@download')) || download;
+  const isDisplayFile =
+    (!isExternal && url.includes('@@display-file')) || false;
+
+  const checkedURL = URLUtils.checkAndNormalizeUrl(url);
+
+  url = checkedURL.url;
+  let tag = (
+    <Link
+      to={flattenToAppURL(url)}
+      target={openLinkInNewTab ?? false ? '_blank' : null}
+      title={title}
+      className={className}
+      smooth={config.settings.hashLinkSmoothScroll}
+      {...props}
+    >
+      {children}
+    </Link>
+  );
+
+  if (isExternal) {
+    tag = (
+      <a
+        href={url}
+        title={title}
+        target={
+          !checkedURL.isMail &&
+          !checkedURL.isTelephone &&
+          !(openLinkInNewTab === false)
+            ? '_blank'
+            : null
+        }
+        rel="noopener"
+        className={className}
+        {...props}
+      >
+        {children}
+      </a>
+    );
+  } else if (isDownload) {
+    tag = (
+      <a
+        href={flattenToAppURL(url)}
+        download
+        title={title}
+        className={className}
+        {...props}
+      >
+        {children}
+      </a>
+    );
+  } else if (isDisplayFile) {
+    tag = (
+      <a
+        href={flattenToAppURL(url)}
+        title={title}
+        rel="noopener"
+        className={className}
+        {...props}
+      >
+        {children}
+      </a>
+    );
+  }
+  return tag;
+};
+
+UniversalLink.propTypes = {
+  href: PropTypes.string,
+  openLinkInNewTab: PropTypes.bool,
+  download: PropTypes.bool,
+  className: PropTypes.string,
+  title: PropTypes.string,
+  item: PropTypes.shape({
+    '@id': PropTypes.string.isRequired,
+    remoteUrl: PropTypes.string, //of plone @type 'Link'
+  }),
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]),
+};
+
+export default UniversalLink;

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

@@ -0,0 +1,27 @@
+//this should be deleted when upgraded to a volto version that supports App Extras exceptions
+import React from 'react';
+import { matchPath } from 'react-router';
+import config from '@plone/volto/registry';
+
+const AppExtras = (props) => {
+  const { settings } = config;
+  const { appExtras = [] } = settings;
+  const { pathname } = props;
+  const active = appExtras
+    .map((reg) => {
+      const excluded = matchPath(pathname, reg.exclude);
+      if (excluded) return null;
+      const match = matchPath(pathname, reg.match);
+      return match ? { reg, match } : null;
+    })
+    .filter((reg) => reg);
+
+  return active.map(({ reg: { component, props: extraProps }, match }, i) => {
+    const Insert = component;
+    return (
+      <Insert key={`appextra-${i}`} match={match} {...props} {...extraProps} />
+    );
+  });
+};
+
+export default AppExtras;

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

@@ -116,7 +116,7 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
               <a
                 href="https://europa.eu/european-union/contact/institutions-bodies_en"
                 target="_blank"
-                rel="noreferrer"
+                rel="noopener"
                 onKeyDown={(evt) => evt.stopPropagation()}
               >
                 See all EU institutions and bodies
@@ -140,7 +140,7 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
                       href={item.href}
                       className="site"
                       target="_blank"
-                      rel="noreferrer"
+                      rel="noopener"
                       onKeyDown={(evt) => evt.stopPropagation()}
                     >
                       {item.title}

package/src/index.js

@@ -29,6 +29,9 @@ import installSlate from './slate';
 import installReducers from './reducers';
 import installMiddlewares from './middleware';
 
+import { nanoid } from '@plone/volto-slate/utils';
+import { v4 as uuid } from 'uuid';
+
 import * as eea from './config';
 import React from 'react';
 
@@ -85,11 +88,7 @@ function tabVariationCustomization(tabs_block_variations, config) {
       innerSchema.properties.icon.description = (
         <>
           Ex. ri-home-line. See{' '}
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://remixicon.com/"
-          >
+          <a target="_blank" rel="noopener" href="https://remixicon.com/">
             Remix Icon set
           </a>
         </>
@@ -98,6 +97,7 @@ function tabVariationCustomization(tabs_block_variations, config) {
     };
     return schema;
   };
+
   const oldDefaultSchemaEnhancer = defaultVariation.schemaEnhancer;
   defaultVariation.schemaEnhancer = (props) => {
     const newSchema = oldDefaultSchemaEnhancer(props);
@@ -110,7 +110,6 @@ function tabVariationCustomization(tabs_block_variations, config) {
     ];
     return newSchema;
   };
-
   const oldHorizontalSchemaEnhancer = horizontalVariation.schemaEnhancer;
   horizontalVariation.schemaEnhancer = (props) => {
     const newSchema = oldHorizontalSchemaEnhancer(props);
@@ -139,6 +138,40 @@ const applyConfig = (config) => {
   if (config.settings?.serverConfig?.extractScripts) {
     config.settings.serverConfig.extractScripts.errorPages = true;
   }
+  // Set cloneData function for slate block, in order to change the uuids of fragments in the copy process
+  if (config.blocks?.blocksConfig?.slate) {
+    config.blocks.blocksConfig.slate.cloneData = (data) => {
+      const replaceAllUidsWithNewOnes = (value) => {
+        if (value?.children?.length > 0) {
+          const newChildren = value.children.map((childrenData) => {
+            if (childrenData?.data?.uid) {
+              return {
+                ...childrenData,
+                data: { ...childrenData.data, uid: nanoid(5) },
+              };
+            }
+            return childrenData;
+          });
+          return {
+            ...value,
+            children: newChildren,
+          };
+        }
+        return value;
+      };
+      return [
+        uuid(),
+        {
+          ...data,
+          value: [
+            ...(data?.value || []).map((value) =>
+              replaceAllUidsWithNewOnes(value),
+            ),
+          ],
+        },
+      ];
+    };
+  }
 
   // Disable tags on View
   config.settings.showTags = false;

package/src/index.test.js

@@ -144,7 +144,7 @@ describe('applyConfig', () => {
       { match: '', component: 'MockedDraftBackground' },
       { match: '', component: 'MockedSubsiteClass' },
       { match: '', component: BaseTag },
-      { match: '*', component: 'MockedRemoveSchema' },
+      { match: '*', exclude: '/**/diff', component: 'MockedRemoveSchema' },
     ]);
     expect(config.settings.available_colors).toEqual(eea.colors);
     expect(config.settings.hasLanguageDropdown).toBe(false);
@@ -303,7 +303,7 @@ describe('applyConfig', () => {
       { match: '', component: 'MockedDraftBackground' },
       { match: '', component: 'MockedSubsiteClass' },
       { match: '', component: BaseTag },
-      { match: '*', component: 'MockedRemoveSchema' },
+      { match: '*', exclude: '/**/diff', component: 'MockedRemoveSchema' },
     ]);
     expect(config.settings.available_colors).toEqual(eea.colors);
     expect(config.settings.hasLanguageDropdown).toBe(false);

package/src/reducers/index.js

@@ -9,6 +9,7 @@ export default function applyConfig(config) {
     ...(config.settings.appExtras || []),
     {
       match: '*',
+      exclude: '/**/diff',
       component: RemoveSchema,
     },
   ];