@eeacms/volto-eea-website-theme 3.5.4 → 3.6.0

package/src/customizations/volto/actions/vocabularies/vocabularies.test.js

@@ -0,0 +1,57 @@
+import { getVocabulary } from './vocabularies';
+import { GET_VOCABULARY } from '@plone/volto/constants/ActionTypes';
+
+describe('Vocabularies actions', () => {
+  describe('getVocabulary', () => {
+    it('should create an action to get a vocabulary', () => {
+      const vocabNameOrURL = 'plone.app.vocabularies.Keywords';
+      const query = 'john';
+      const action = getVocabulary({ vocabNameOrURL, query });
+
+      expect(action.type).toEqual(GET_VOCABULARY);
+      expect(action.vocabulary).toEqual(vocabNameOrURL);
+      expect(action.request.op).toEqual('get');
+      expect(action.request.path).toEqual(
+        `/@vocabularies/${vocabNameOrURL}?b_start=0&title=${query}`,
+      );
+    });
+    it('should create an action to get a vocabulary if a URL is passed', () => {
+      const vocabNameOrURL =
+        'http://localhost:3000/@vocabularies/plone.app.vocabularies.Keywords';
+      const query = 'john';
+      const action = getVocabulary({ vocabNameOrURL, query });
+
+      expect(action.type).toEqual(GET_VOCABULARY);
+      expect(action.vocabulary).toEqual(vocabNameOrURL);
+      expect(action.request.op).toEqual('get');
+      expect(action.request.path).toEqual(
+        `/@vocabularies/plone.app.vocabularies.Keywords?b_start=0&title=${query}`,
+      );
+    });
+    it('should create an action to get a vocabulary if a URL with path is passed', () => {
+      const vocabNameOrURL =
+        'http://localhost:3000/de/foo/bar/@vocabularies/plone.app.vocabularies.Keywords';
+      const query = 'john';
+      const action = getVocabulary({ vocabNameOrURL, query });
+
+      expect(action.type).toEqual(GET_VOCABULARY);
+      expect(action.vocabulary).toEqual(vocabNameOrURL);
+      expect(action.request.op).toEqual('get');
+      expect(action.request.path).toEqual(
+        `/de/foo/bar/@vocabularies/plone.app.vocabularies.Keywords?b_start=0&title=${query}`,
+      );
+    });
+    it('should create an action to get a vocabulary if an b_size=-1 is passed', () => {
+      const vocabNameOrURL =
+        'http://localhost:3000/de/foo/bar/@vocabularies/plone.app.vocabularies.Keywords';
+      const action = getVocabulary({ vocabNameOrURL, size: -1 });
+
+      expect(action.type).toEqual(GET_VOCABULARY);
+      expect(action.vocabulary).toEqual(vocabNameOrURL);
+      expect(action.request.op).toEqual('get');
+      expect(action.request.path).toEqual(
+        `/de/foo/bar/@vocabularies/plone.app.vocabularies.Keywords?b_start=0&b_size=-1`,
+      );
+    });
+  });
+});

package/src/customizations/volto/actions/vocabularies/vocabularies.test.js.diff

@@ -0,0 +1,45 @@
+diff --git a/src/customizations/volto/actions/vocabularies/vocabularies.test.js b/src/customizations/volto/actions/vocabularies/vocabularies.test.js
+index b7deafc..ca4fc8a 100644
+--- a/src/customizations/volto/actions/vocabularies/vocabularies.test.js
++++ b/src/customizations/volto/actions/vocabularies/vocabularies.test.js
+@@ -17,7 +17,7 @@ describe('Vocabularies actions', () => {
+     });
+     it('should create an action to get a vocabulary if a URL is passed', () => {
+       const vocabNameOrURL =
+-        'http://localhost:8080/@vocabularies/plone.app.vocabularies.Keywords';
++        'http://localhost:3000/@vocabularies/plone.app.vocabularies.Keywords';
+       const query = 'john';
+       const action = getVocabulary({ vocabNameOrURL, query });
+
+@@ -30,7 +30,7 @@ describe('Vocabularies actions', () => {
+     });
+     it('should create an action to get a vocabulary if a URL with path is passed', () => {
+       const vocabNameOrURL =
+-        'http://localhost:8080/de/foo/bar/@vocabularies/plone.app.vocabularies.Keywords';
++        'http://localhost:3000/de/foo/bar/@vocabularies/plone.app.vocabularies.Keywords';
+       const query = 'john';
+       const action = getVocabulary({ vocabNameOrURL, query });
+
+@@ -38,19 +38,19 @@ describe('Vocabularies actions', () => {
+       expect(action.vocabulary).toEqual(vocabNameOrURL);
+       expect(action.request.op).toEqual('get');
+       expect(action.request.path).toEqual(
+-        `/@vocabularies/plone.app.vocabularies.Keywords?b_start=0&title=${query}`,
++        `/de/foo/bar/@vocabularies/plone.app.vocabularies.Keywords?b_start=0&title=${query}`,
+       );
+     });
+     it('should create an action to get a vocabulary if an b_size=-1 is passed', () => {
+       const vocabNameOrURL =
+-        'http://localhost:8080/de/foo/bar/@vocabularies/plone.app.vocabularies.Keywords';
++        'http://localhost:3000/de/foo/bar/@vocabularies/plone.app.vocabularies.Keywords';
+       const action = getVocabulary({ vocabNameOrURL, size: -1 });
+
+       expect(action.type).toEqual(GET_VOCABULARY);
+       expect(action.vocabulary).toEqual(vocabNameOrURL);
+       expect(action.request.op).toEqual('get');
+       expect(action.request.path).toEqual(
+-        `/@vocabularies/plone.app.vocabularies.Keywords?b_start=0&b_size=-1`,
++        `/de/foo/bar/@vocabularies/plone.app.vocabularies.Keywords?b_start=0&b_size=-1`,
+       );
+     });
+   });

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

@@ -0,0 +1,150 @@
+diff --git a/src/customizations/volto/components/manage/Diff/DiffField.jsx b/src/customizations/volto/components/manage/Diff/DiffField.jsx
+index a9bad2a..5d306e5 100644
+--- a/src/customizations/volto/components/manage/Diff/DiffField.jsx
++++ b/src/customizations/volto/components/manage/Diff/DiffField.jsx
+@@ -135,6 +135,17 @@ const formatDiffPart = (part, value, side) => {
+   }
+ };
+ 
++const getWidgetByBehavior = (behavior) =>
++  config.widgets.views.behavior?.[behavior] || null;
++
++const getWidgetByFactory = (factory) =>
++  config.widgets.views.factory?.[factory] || null;
++
++const getDefaultWidget =
++  () =>
++  ({ diff }) =>
++    diff;
++
+ /**
+  * Diff field component.
+  * @function DiffField
+@@ -164,8 +175,11 @@ const DiffField = ({
+       splitWords(String(twoStr)),
+     );
+   };
+-
+   let parts, oneArray, twoArray;
++  const Widget =
++    getWidgetByBehavior(schema.behavior) ||
++    getWidgetByFactory(schema.factory) ||
++    getDefaultWidget();
+   if (schema.widget) {
+     switch (schema.widget) {
+       case 'richtext':
+@@ -272,33 +286,49 @@ const DiffField = ({
+       {view === 'split' && (
+         <Grid.Row>
+           <Grid.Column width={6} verticalAlign="top">
+-            <span
+-              dangerouslySetInnerHTML={{
+-                __html: join(
+-                  map(parts, (part) => {
+-                    let combined = (part.value || []).reduce((acc, value) => {
+-                      return acc + formatDiffPart(part, value, 'left');
+-                    }, '');
+-                    return combined;
+-                  }),
+-                  '',
+-                ),
+-              }}
++            <Widget
++              value={one}
++              diff={
++                <span
++                  dangerouslySetInnerHTML={{
++                    __html: join(
++                      map(parts, (part) => {
++                        let combined = (part.value || []).reduce(
++                          (acc, value) => {
++                            return acc + formatDiffPart(part, value, 'left');
++                          },
++                          '',
++                        );
++                        return combined;
++                      }),
++                      '',
++                    ),
++                  }}
++                />
++              }
+             />
+           </Grid.Column>
+           <Grid.Column width={6} verticalAlign="top">
+-            <span
+-              dangerouslySetInnerHTML={{
+-                __html: join(
+-                  map(parts, (part) => {
+-                    let combined = (part.value || []).reduce((acc, value) => {
+-                      return acc + formatDiffPart(part, value, 'right');
+-                    }, '');
+-                    return combined;
+-                  }),
+-                  '',
+-                ),
+-              }}
++            <Widget
++              value={two}
++              diff={
++                <span
++                  dangerouslySetInnerHTML={{
++                    __html: join(
++                      map(parts, (part) => {
++                        let combined = (part.value || []).reduce(
++                          (acc, value) => {
++                            return acc + formatDiffPart(part, value, 'right');
++                          },
++                          '',
++                        );
++                        return combined;
++                      }),
++                      '',
++                    ),
++                  }}
++                />
++              }
+             />
+           </Grid.Column>
+         </Grid.Row>
+@@ -306,18 +336,28 @@ const DiffField = ({
+       {view === 'unified' && (
+         <Grid.Row>
+           <Grid.Column width={16} verticalAlign="top">
+-            <span
+-              dangerouslySetInnerHTML={{
+-                __html: join(
+-                  map(parts, (part) => {
+-                    let combined = (part.value || []).reduce((acc, value) => {
+-                      return acc + formatDiffPart(part, value, 'unified');
+-                    }, '');
+-                    return combined;
+-                  }),
+-                  '',
+-                ),
+-              }}
++            <Widget
++              value={two}
++              one={one}
++              two={two}
++              diff={
++                <span
++                  dangerouslySetInnerHTML={{
++                    __html: join(
++                      map(parts, (part) => {
++                        let combined = (part.value || []).reduce(
++                          (acc, value) => {
++                            return acc + formatDiffPart(part, value, 'unified');
++                          },
++                          '',
++                        );
++                        return combined;
++                      }),
++                      '',
++                    ),
++                  }}
++                />
++              }
+             />
+           </Grid.Column>
+         </Grid.Row>

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

@@ -0,0 +1,387 @@
+/**
+ * Diff field component.
+ * @module components/manage/Diff/DiffField
+ */
+
+import React from 'react';
+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 config from '@plone/volto/registry';
+import { Api } from '@plone/volto/helpers';
+import configureStore from '@plone/volto/store';
+import { RenderBlocks } from '@plone/volto/components';
+import { serializeNodes } from '@plone/volto-slate/editor/render';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
+const isHtmlTag = (str) => {
+  // Match complete HTML tags, including:
+  // 1. Opening tags like <div>, <img src="example" />, <svg>...</svg>
+  // 2. Self-closing tags like <img />, <br />
+  // 3. Closing tags like </div>
+  return /^<([a-zA-Z]+[0-9]*)\b[^>]*>|^<\/([a-zA-Z]+[0-9]*)\b[^>]*>$|^<([a-zA-Z]+[0-9]*)\b[^>]*\/>$/.test(
+    str,
+  );
+};
+
+const splitWords = (str) => {
+  if (typeof str !== 'string') return str;
+  if (!str) return [];
+
+  const result = [];
+  let currentWord = '';
+  let insideTag = false;
+  let insideSpecialTag = false;
+  let tagBuffer = '';
+
+  // Special tags that should not be split (e.g., <img />, <svg> ... </svg>)
+  const specialTags = ['img', 'svg'];
+
+  for (let i = 0; i < str.length; i++) {
+    const char = str[i];
+
+    // Start of an HTML tag
+    if (char === '<') {
+      if (currentWord) {
+        result.push(currentWord); // Push text before the tag
+        currentWord = '';
+      }
+      insideTag = true;
+      tagBuffer += char;
+    }
+    // End of an HTML tag
+    else if (char === '>') {
+      tagBuffer += char;
+      insideTag = false;
+
+      // Check if the tagBuffer contains a special tag
+      const tagNameMatch = tagBuffer.match(/^<\/?([a-zA-Z]+[0-9]*)\b/);
+      if (tagNameMatch && specialTags.includes(tagNameMatch[1])) {
+        insideSpecialTag =
+          tagNameMatch[0].startsWith('<') && !tagNameMatch[0].startsWith('</');
+        result.push(tagBuffer); // Push the complete special tag as one unit
+        tagBuffer = '';
+        continue;
+      }
+
+      result.push(tagBuffer); // Push the complete tag
+      tagBuffer = '';
+    }
+    // Inside the tag or special tag
+    else if (insideTag || insideSpecialTag) {
+      tagBuffer += char;
+    }
+    // Space outside of tags - push current word
+    else if (char === ' ' && !insideTag && !insideSpecialTag) {
+      if (currentWord) {
+        result.push(currentWord);
+        currentWord = '';
+      }
+      result.push(' ');
+    } else if (
+      char === ',' &&
+      i < str.length - 1 &&
+      str[i + 1] !== ' ' &&
+      !insideTag &&
+      !insideSpecialTag
+    ) {
+      if (currentWord) {
+        result.push(currentWord + char);
+        currentWord = '';
+      }
+      result.push(' ');
+    }
+    // Accumulate characters outside of tags
+    else {
+      currentWord += char;
+    }
+  }
+
+  // Push any remaining text
+  if (currentWord) {
+    result.push(currentWord);
+  }
+  if (tagBuffer) {
+    result.push(tagBuffer); // Push remaining tagBuffer
+  }
+
+  return result;
+};
+
+const formatDiffPart = (part, value, side) => {
+  if (!isHtmlTag(value)) {
+    if (part.removed && (side === 'left' || side === 'unified')) {
+      return `<span class="deletion">${value}</span>`;
+    } else if (part.removed) return '';
+    else if (part.added && (side === 'right' || side === 'unified')) {
+      return `<span class="addition">${value}</span>`;
+    } else if (part.added) return '';
+    return value;
+  } else {
+    if (side === 'unified' && part.added) return value;
+    else if (side === 'unified' && part.removed) return '';
+    if (part.removed && side === 'left') {
+      return value;
+    } else if (part.removed) return '';
+    else if (part.added && side === 'right') {
+      return value;
+    } else if (part.added) return '';
+    return value;
+  }
+};
+
+const getWidgetByBehavior = (behavior) =>
+  config.widgets.views.behavior?.[behavior] || null;
+
+const getWidgetByFactory = (factory) =>
+  config.widgets.views.factory?.[factory] || null;
+
+const getDefaultWidget =
+  () =>
+  ({ diff }) =>
+    diff;
+
+/**
+ * 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 diffWords = (oneStr, twoStr) => {
+    return diffLib.diffArrays(
+      splitWords(String(oneStr)),
+      splitWords(String(twoStr)),
+    );
+  };
+  let parts, oneArray, twoArray;
+  const Widget =
+    getWidgetByBehavior(schema.behavior) ||
+    getWidgetByFactory(schema.factory) ||
+    getDefaultWidget();
+  if (schema.widget) {
+    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}>
+                <RenderBlocks content={contentOne} />
+              </ConnectedRouter>
+            </Provider>,
+          ),
+          ReactDOMServer.renderToStaticMarkup(
+            <Provider store={store}>
+              <ConnectedRouter history={history}>
+                <RenderBlocks 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 'textarea':
+      default:
+        const Widget = config.widgets?.views?.widget?.[schema.widget];
+
+        if (Widget) {
+          const api = new Api();
+          const history = createBrowserHistory();
+          const store = configureStore(window.__data, history, api);
+          parts = diffWords(
+            ReactDOMServer.renderToStaticMarkup(
+              <Provider store={store}>
+                <ConnectedRouter history={history}>
+                  <Widget value={one} />
+                </ConnectedRouter>
+              </Provider>,
+            ),
+            ReactDOMServer.renderToStaticMarkup(
+              <Provider store={store}>
+                <ConnectedRouter history={history}>
+                  <Widget value={two} />
+                </ConnectedRouter>
+              </Provider>,
+            ),
+          );
+        } else parts = diffWords(one, two);
+
+        break;
+    }
+  } 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">
+            <Widget
+              value={one}
+              diff={
+                <span
+                  dangerouslySetInnerHTML={{
+                    __html: join(
+                      map(parts, (part) => {
+                        let combined = (part.value || []).reduce(
+                          (acc, value) => {
+                            return acc + formatDiffPart(part, value, 'left');
+                          },
+                          '',
+                        );
+                        return combined;
+                      }),
+                      '',
+                    ),
+                  }}
+                />
+              }
+            />
+          </Grid.Column>
+          <Grid.Column width={6} verticalAlign="top">
+            <Widget
+              value={two}
+              diff={
+                <span
+                  dangerouslySetInnerHTML={{
+                    __html: join(
+                      map(parts, (part) => {
+                        let combined = (part.value || []).reduce(
+                          (acc, value) => {
+                            return acc + formatDiffPart(part, value, 'right');
+                          },
+                          '',
+                        );
+                        return combined;
+                      }),
+                      '',
+                    ),
+                  }}
+                />
+              }
+            />
+          </Grid.Column>
+        </Grid.Row>
+      )}
+      {view === 'unified' && (
+        <Grid.Row>
+          <Grid.Column width={16} verticalAlign="top">
+            <Widget
+              value={two}
+              one={one}
+              two={two}
+              diff={
+                <span
+                  dangerouslySetInnerHTML={{
+                    __html: join(
+                      map(parts, (part) => {
+                        let combined = (part.value || []).reduce(
+                          (acc, value) => {
+                            return acc + formatDiffPart(part, value, 'unified');
+                          },
+                          '',
+                        );
+                        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/Diff/DiffField.txt

@@ -0,0 +1 @@
+Customize DiffField.jsx from @plone/volto 17.21.0. See https://taskman.eionet.europa.eu/issues/281229