@eeacms/volto-eea-website-theme 4.3.2 → 4.3.3

package/CHANGELOG.md

@@ -4,6 +4,8 @@ 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).
 
+### [4.3.3](https://github.com/eea/volto-eea-website-theme/compare/4.3.2...4.3.3) - 26 May 2026
+
 ### [4.3.2](https://github.com/eea/volto-eea-website-theme/compare/4.3.1...4.3.2) - 15 May 2026
 
 #### :bug: Bug Fixes

package/package.json

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

package/src/customizations/volto/components/manage/Form/BlocksToolbar.jsx

@@ -0,0 +1,236 @@
+import React from 'react';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { injectIntl } from 'react-intl';
+import { messages } from '@plone/volto/helpers/MessageLabels/MessageLabels';
+import {
+  getBlocksFieldname,
+  getBlocksLayoutFieldname,
+} from '@plone/volto/helpers/Blocks/Blocks';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import { Plug } from '@plone/volto/components/manage/Pluggable';
+import { v4 as uuid } from 'uuid';
+import isEqual from 'lodash/isEqual';
+import omit from 'lodash/omit';
+import without from 'lodash/without';
+
+import {
+  setBlocksClipboard,
+  resetBlocksClipboard,
+} from '@plone/volto/actions/blocksClipboard/blocksClipboard';
+import config from '@plone/volto/registry';
+
+import copySVG from '@plone/volto/icons/copy.svg';
+import cutSVG from '@plone/volto/icons/cut.svg';
+import pasteSVG from '@plone/volto/icons/paste.svg';
+import trashSVG from '@plone/volto/icons/delete.svg';
+import {
+  cloneBlocks,
+  loadBlocksClipboardFromStorage,
+} from './blocksClipboardUtils';
+
+export class BlocksToolbarComponent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.copyBlocksToClipboard = this.copyBlocksToClipboard.bind(this);
+    this.cutBlocksToClipboard = this.cutBlocksToClipboard.bind(this);
+    this.deleteBlocks = this.deleteBlocks.bind(this);
+    this.loadFromStorage = this.loadFromStorage.bind(this);
+    this.pasteBlocks = this.pasteBlocks.bind(this);
+    this.setBlocksClipboard = this.setBlocksClipboard.bind(this);
+  }
+
+  loadFromStorage(event) {
+    if (event?.key && !event.key.includes('blocksClipboard')) {
+      return;
+    }
+
+    const clipboard = loadBlocksClipboardFromStorage();
+    const currentClipboard = this.props.blocksClipboard || {};
+    const currentClipboardHasBlocks =
+      currentClipboard?.cut || currentClipboard?.copy;
+
+    if (!event && !clipboard && currentClipboardHasBlocks) {
+      return;
+    }
+
+    if (!isEqual(clipboard || {}, currentClipboard)) {
+      this.props.setBlocksClipboard(clipboard || {});
+    }
+  }
+
+  componentDidMount() {
+    this.loadFromStorage();
+    window.addEventListener('storage', this.loadFromStorage, true);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('storage', this.loadFromStorage);
+  }
+
+  deleteBlocks() {
+    const blockIds = this.props.selectedBlocks;
+
+    const { formData } = this.props;
+    const blocksFieldname = getBlocksFieldname(formData);
+    const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
+
+    // Might need ReactDOM.unstable_batchedUpdates()
+    this.props.onSelectBlock(null);
+    const newBlockData = {
+      [blocksFieldname]: omit(formData[blocksFieldname], blockIds),
+      [blocksLayoutFieldname]: {
+        ...formData[blocksLayoutFieldname],
+        items: without(formData[blocksLayoutFieldname].items, ...blockIds),
+      },
+    };
+    this.props.onChangeBlocks(newBlockData);
+  }
+
+  copyBlocksToClipboard() {
+    this.setBlocksClipboard('copy');
+  }
+
+  cutBlocksToClipboard() {
+    this.setBlocksClipboard('cut');
+    this.deleteBlocks();
+  }
+
+  setBlocksClipboard(actionType) {
+    const { formData } = this.props;
+    const blocksFieldname = getBlocksFieldname(formData);
+    const blocks = formData[blocksFieldname];
+    const blocksData = this.props.selectedBlocks
+      .map((blockId) => [blockId, blocks[blockId]])
+      .filter(([blockId]) => !!blockId); // Removes null blocks
+    this.props.setBlocksClipboard({ [actionType]: blocksData });
+    this.props.onSetSelectedBlocks([]);
+  }
+
+  pasteBlocks(e) {
+    const { formData, blocksClipboard = {}, selectedBlock } = this.props;
+    const mode = Object.keys(blocksClipboard).includes('cut') ? 'cut' : 'copy';
+    const blocksData = blocksClipboard[mode] || [];
+    const cloneWithIds = blocksData
+      .filter(([blockId, blockData]) => blockId && !!blockData['@type']) // Removes null blocks
+      .map(([blockId, blockData]) => {
+        const blockConfig = config.blocks.blocksConfig[blockData['@type']];
+        return mode === 'copy'
+          ? blockConfig.cloneData
+            ? blockConfig.cloneData(blockData)
+            : [uuid(), cloneBlocks(blockData)]
+          : [blockId, blockData]; // if cut/pasting blocks, we don't clone
+      })
+      .filter((info) => !!info); // some blocks may refuse to be copied
+    const blocksFieldname = getBlocksFieldname(formData);
+    const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
+    const selectedIndex =
+      formData[blocksLayoutFieldname].items.indexOf(selectedBlock) + 1;
+
+    const newBlockData = {
+      [blocksFieldname]: {
+        ...formData[blocksFieldname],
+        ...Object.assign(
+          {},
+          ...cloneWithIds.map(([id, data]) => ({ [id]: data })),
+        ),
+      },
+      [blocksLayoutFieldname]: {
+        ...formData[blocksLayoutFieldname],
+        items: [
+          ...formData[blocksLayoutFieldname].items.slice(0, selectedIndex),
+          ...cloneWithIds.map(([id]) => id),
+          ...formData[blocksLayoutFieldname].items.slice(selectedIndex),
+        ],
+      },
+    };
+
+    if (!(e.ctrlKey || e.metaKey)) this.props.resetBlocksClipboard();
+    this.props.onChangeBlocks(newBlockData);
+  }
+
+  render() {
+    const {
+      blocksClipboard = {},
+      selectedBlock,
+      selectedBlocks,
+      intl,
+    } = this.props;
+    return (
+      <>
+        {selectedBlocks.length > 0 ? (
+          <>
+            <Plug pluggable="main.toolbar.bottom" id="blocks-delete-btn">
+              <button
+                aria-label={intl.formatMessage(messages.deleteBlocks)}
+                onClick={this.deleteBlocks}
+                tabIndex={0}
+                className="deleteBlocks"
+                id="toolbar-delete-blocks"
+              >
+                <Icon name={trashSVG} size="30px" />
+              </button>
+            </Plug>
+            <Plug pluggable="main.toolbar.bottom" id="blocks-cut-btn">
+              <button
+                aria-label={intl.formatMessage(messages.cutBlocks)}
+                onClick={this.cutBlocksToClipboard}
+                tabIndex={0}
+                className="cutBlocks"
+                id="toolbar-cut-blocks"
+              >
+                <Icon name={cutSVG} size="30px" />
+              </button>
+            </Plug>
+            <Plug pluggable="main.toolbar.bottom" id="blocks-copy-btn">
+              <button
+                aria-label={intl.formatMessage(messages.copyBlocks)}
+                onClick={this.copyBlocksToClipboard}
+                tabIndex={0}
+                className="copyBlocks"
+                id="toolbar-copy-blocks"
+              >
+                <Icon name={copySVG} size="30px" />
+              </button>
+            </Plug>
+          </>
+        ) : (
+          ''
+        )}
+        {selectedBlock && (blocksClipboard?.cut || blocksClipboard?.copy) && (
+          <Plug
+            pluggable="main.toolbar.bottom"
+            id="block-paste-btn"
+            dependencies={[selectedBlock]}
+          >
+            <button
+              aria-label={intl.formatMessage(messages.pasteBlocks)}
+              onClick={this.pasteBlocks}
+              tabIndex={0}
+              className="pasteBlocks"
+              id="toolbar-paste-blocks"
+            >
+              <span className="blockCount">
+                {(blocksClipboard.cut || blocksClipboard.copy).length}
+              </span>
+              <Icon name={pasteSVG} size="30px" />
+            </button>
+          </Plug>
+        )}
+      </>
+    );
+  }
+}
+
+export default compose(
+  injectIntl,
+  connect(
+    (state) => {
+      return {
+        blocksClipboard: state?.blocksClipboard || {},
+      };
+    },
+    { setBlocksClipboard, resetBlocksClipboard },
+  ),
+)(BlocksToolbarComponent);

package/src/customizations/volto/components/manage/Form/BlocksToolbar.jsx.diff

@@ -0,0 +1,33 @@
+13d12
+< import { load } from 'redux-localstorage-simple';
+28c27,30
+< import { cloneBlocks } from '@plone/volto/helpers/Blocks/cloneBlocks';
+---
+> import {
+>   cloneBlocks,
+>   loadBlocksClipboardFromStorage,
+> } from './blocksClipboardUtils';
+42,44c44,58
+<   loadFromStorage() {
+<     const clipboard = load({ states: ['blocksClipboard'] })?.blocksClipboard;
+<     if (!isEqual(clipboard, this.props.blocksClipboard))
+---
+>   loadFromStorage(event) {
+>     if (event?.key && !event.key.includes('blocksClipboard')) {
+>       return;
+>     }
+>
+>     const clipboard = loadBlocksClipboardFromStorage();
+>     const currentClipboard = this.props.blocksClipboard || {};
+>     const currentClipboardHasBlocks =
+>       currentClipboard?.cut || currentClipboard?.copy;
+>
+>     if (!event && !clipboard && currentClipboardHasBlocks) {
+>       return;
+>     }
+>
+>     if (!isEqual(clipboard || {}, currentClipboard)) {
+45a60
+>     }
+48a64
+>     this.loadFromStorage();

package/src/customizations/volto/components/manage/Form/BlocksToolbar.jsx.md

@@ -0,0 +1,92 @@
+# BlocksToolbar.jsx — Customization Explanation
+
+**Upstream:** [`@plone/volto` 18.34.0 — `BlocksToolbar.jsx`](https://github.com/plone/volto/blob/18.x.x/packages/volto/src/components/manage/Form/BlocksToolbar.jsx)
+**Local override:** `src/customizations/volto/components/manage/Form/BlocksToolbar.jsx`
+
+---
+
+## Why this override exists
+
+Volto 18 changed how `redux-localstorage-simple` persists the `blocksClipboard` Redux slice. Instead of storing it as a single monolithic `blocksClipboard` key in `localStorage`, Volto 18's `persistentReducers` config now stores it as separate keys: `blocksClipboard.cut` and `blocksClipboard.copy`.
+
+The upstream `loadFromStorage()` only queries for `states: ['blocksClipboard']` (the monolithic key), so after the Volto 18 migration, clipboard data stored under the new split keys is never found. On component remount or navigation, the clipboard gets wiped to `{}`, causing the paste button to disappear even though the data is still in localStorage.
+
+## What changed
+
+### 1. Import changes
+
+| Upstream                                                                | Override                                                                               |
+| ----------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
+| `import { load } from 'redux-localstorage-simple'`                      | _Removed_                                                                              |
+| `import { cloneBlocks } from '@plone/volto/helpers/Blocks/cloneBlocks'` | _Removed_                                                                              |
+| —                                                                       | `import { cloneBlocks, loadBlocksClipboardFromStorage } from './blocksClipboardUtils'` |
+
+Both `load` and `cloneBlocks` are now provided by the local `blocksClipboardUtils.js` module instead of being imported directly from Volto.
+
+### 2. `loadFromStorage(event)` — the core bug fix
+
+**Upstream:**
+
+```js
+loadFromStorage() {
+  const clipboard = load({ states: ['blocksClipboard'] })?.blocksClipboard;
+  if (!isEqual(clipboard, this.props.blocksClipboard))
+    this.props.setBlocksClipboard(clipboard || {});
+}
+```
+
+**Override:**
+
+```js
+loadFromStorage(event) {
+  if (event?.key && !event.key.includes('blocksClipboard')) {
+    return;
+  }
+
+  const clipboard = loadBlocksClipboardFromStorage();
+  const currentClipboard = this.props.blocksClipboard || {};
+  const currentClipboardHasBlocks =
+    currentClipboard?.cut || currentClipboard?.copy;
+
+  if (!event && !clipboard && currentClipboardHasBlocks) {
+    return;
+  }
+
+  if (!isEqual(clipboard || {}, currentClipboard)) {
+    this.props.setBlocksClipboard(clipboard || {});
+  }
+}
+```
+
+Three improvements:
+
+1. **Event guard** — If called from a `storage` event, returns early when the changed key is unrelated to `blocksClipboard`. Avoids unnecessary work on unrelated localStorage mutations.
+
+2. **Volto 18 key resolution** — Delegates to `loadBlocksClipboardFromStorage()`, which tries the split-key format (`blocksClipboard.cut`/`blocksClipboard.copy`) first, then falls back to the monolithic key.
+
+3. **Mount guard** — When called on mount (`!event`), if localStorage is empty but Redux still has clipboard data in memory, the old code would wipe Redux to `{}`. The new guard prevents losing an in-memory clipboard on remount.
+
+### 3. `componentDidMount()` — eager rehydration
+
+**Upstream:**
+
+```js
+componentDidMount() {
+  window.addEventListener('storage', this.loadFromStorage, true);
+}
+```
+
+**Override:**
+
+```js
+componentDidMount() {
+  this.loadFromStorage();
+  window.addEventListener('storage', this.loadFromStorage, true);
+}
+```
+
+The upstream code only loads clipboard data when a `storage` event fires (typically from another browser tab). It never loads on initial mount, so the paste button is invisible until some other tab triggers a storage event. The override calls `loadFromStorage()` immediately on mount.
+
+## What did NOT change
+
+All other methods — `deleteBlocks`, `copyBlocksToClipboard`, `cutBlocksToClipboard`, `setBlocksClipboard`, `pasteBlocks`, `render()`, and the `connect`/`compose` wrapper — are **identical** to the Volto 18 upstream.

package/src/customizations/volto/components/manage/Form/blocksClipboardUtils.js

@@ -0,0 +1,68 @@
+import { v4 as uuid } from 'uuid';
+import { load } from 'redux-localstorage-simple';
+import {
+  getBlocksFieldname,
+  getBlocksLayoutFieldname,
+  hasBlocksData,
+} from '@plone/volto/helpers/Blocks/Blocks';
+import config from '@plone/volto/registry';
+
+const fallbackBlocksClipboardStates = [
+  'blocksClipboard.cut',
+  'blocksClipboard.copy',
+];
+
+export function cloneBlocks(blocksData) {
+  if (hasBlocksData(blocksData)) {
+    const blocksFieldname = getBlocksFieldname(blocksData);
+    const blocksLayoutFieldname = getBlocksLayoutFieldname(blocksData);
+
+    const cloneWithIds = Object.keys(blocksData.blocks)
+      .map((key) => {
+        const block = blocksData.blocks[key];
+        const blockConfig = config.blocks.blocksConfig[blocksData['@type']];
+        return blockConfig?.cloneData
+          ? blockConfig.cloneData(block)
+          : [uuid(), cloneBlocks(block)];
+      })
+      .filter((info) => !!info); // some blocks may refuse to be copied
+
+    return {
+      ...blocksData,
+      [blocksFieldname]: {
+        ...Object.assign(
+          {},
+          ...cloneWithIds.map(([id, data]) => ({ [id]: data })),
+        ),
+      },
+      [blocksLayoutFieldname]: {
+        ...blocksData[blocksLayoutFieldname],
+        items: [...cloneWithIds.map(([id]) => id)],
+      },
+    };
+  }
+
+  return blocksData;
+}
+
+const getBlocksClipboardStates = () => {
+  const persistentReducers = config.settings?.persistentReducers || [];
+  const blocksClipboardStates = persistentReducers.filter(
+    (state) =>
+      state === 'blocksClipboard' || state.startsWith('blocksClipboard.'),
+  );
+
+  return blocksClipboardStates.length
+    ? blocksClipboardStates
+    : fallbackBlocksClipboardStates;
+};
+
+export const loadBlocksClipboardFromStorage = () =>
+  load({
+    states: getBlocksClipboardStates(),
+    disableWarnings: true,
+  })?.blocksClipboard ||
+  load({
+    states: ['blocksClipboard'],
+    disableWarnings: true,
+  })?.blocksClipboard;