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

package/CHANGELOG.md

@@ -4,6 +4,16 @@ 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).
 
+### [3.5.5](https://github.com/eea/volto-eea-website-theme/compare/3.5.4...3.5.5) - 15 April 2025
+
+#### :bug: Bug Fixes
+
+- fix: History compare not working with plotly chart field - refs #281229 [Teodor Voicu - [`d76a35b`](https://github.com/eea/volto-eea-website-theme/commit/d76a35bb3cbf11971e541a96c1ff49bbc30a87aa)]
+
+#### :hammer_and_wrench: Others
+
+- Add Sonarqube tag using fise-frontend addons list [EEA Jenkins - [`3d50874`](https://github.com/eea/volto-eea-website-theme/commit/3d50874281ebcb91a1ae3727248f656a6f26c603)]
+- Add Sonarqube tag using ied-frontend addons list [EEA Jenkins - [`a3f7676`](https://github.com/eea/volto-eea-website-theme/commit/a3f76767d99cb6dd93cc7fa0eafdea57e9000b2c)]
 ### [3.5.4](https://github.com/eea/volto-eea-website-theme/compare/3.5.3...3.5.4) - 30 January 2025
 
 #### :bug: Bug Fixes

package/package.json

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

package/src/components/theme/Widgets/ImageViewWidget.jsx

@@ -0,0 +1,3 @@
+export default function ImageViewWidget({ value }) {
+  return <img src={value.download} alt={value.filename} />;
+}

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

package/src/index.js

@@ -20,6 +20,7 @@ import { TopicsWidget } from '@eeacms/volto-eea-website-theme/components/theme/W
 import { DateWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/DateWidget';
 import { DatetimeWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/DatetimeWidget';
 import CreatableSelectWidget from '@eeacms/volto-eea-website-theme/components/theme/Widgets/CreatableSelectWidget';
+import ImageViewWidget from '@eeacms/volto-eea-website-theme/components/theme/Widgets/ImageViewWidget';
 
 import Tag from '@eeacms/volto-eea-design-system/ui/Tag/Tag';
 
@@ -374,6 +375,11 @@ const applyConfig = (config) => {
   config.widgets.vocabulary['plone.app.vocabularies.Users'] =
     SelectAutoCompleteWidget;
 
+  config.widgets.views.factory = {
+    ...(config.widgets.views.factory || {}),
+    Image: ImageViewWidget,
+  };
+
   // /voltoCustom.css express-middleware
   // /ok express-middleware - see also: https://github.com/plone/volto/pull/4432
   if (__SERVER__) {