@eeacms/volto-eea-website-theme 1.32.0 → 1.33.0

package/CHANGELOG.md

@@ -4,13 +4,36 @@ 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.32.0](https://github.com/eea/volto-eea-website-theme/compare/1.31.0...1.32.0) - 21 March 2024
+### [1.33.0](https://github.com/eea/volto-eea-website-theme/compare/1.32.1...1.33.0) - 2 April 2024
+
+#### :rocket: New Features
+
+- feat(columnsBlock): move tocEntries definition to volto-columns-block [Miu Razvan - [`eb55ff8`](https://github.com/eea/volto-eea-website-theme/commit/eb55ff8753e443c83fd4a8bb3dca8c2b2a78a782)]
+
+#### :bug: Bug Fixes
+
+- fix(toc): use the correct function to render entries in toc [Miu Razvan - [`869ae7c`](https://github.com/eea/volto-eea-website-theme/commit/869ae7cbe2ec555ebfe563d66bb00e5bc80651c2)]
+
+#### :house: Internal changes
+
+- chore: Cleanup package.json [alin - [`c5a1c37`](https://github.com/eea/volto-eea-website-theme/commit/c5a1c370eec27a0ebea9df51dde12040580def2f)]
+
+#### :hammer_and_wrench: Others
+
+- Update index.js to fix jslint issue [ichim-david - [`89b9cef`](https://github.com/eea/volto-eea-website-theme/commit/89b9cefbe35f780bdd07fa6f44234fbfc2fe7bb0)]
+- Update package.json [ichim-david - [`a0ecadf`](https://github.com/eea/volto-eea-website-theme/commit/a0ecadf6efcdeb0fec4ee533d27a6c6787029373)]
+- Revert "fix(blocks): Allow image block urls to be external (#214)" [David Ichim - [`2bbc620`](https://github.com/eea/volto-eea-website-theme/commit/2bbc620d0a375d69ba7982c8e3113628365bb8da)]
+### [1.32.1](https://github.com/eea/volto-eea-website-theme/compare/1.32.0...1.32.1) - 26 March 2024
 
 #### :rocket: New Features
 
 - feat(slate): add new h3 slate element [Miu Razvan - [`20a7e93`](https://github.com/eea/volto-eea-website-theme/commit/20a7e9316d5c1de279712c38bc05eb775f8bd326)]
 - feat(slate): add h4 in slate toolbar [Miu Razvan - [`2c523ac`](https://github.com/eea/volto-eea-website-theme/commit/2c523acdeb78ed224c4a37285c48dbf4555604e0)]
 
+#### :bug: Bug Fixes
+
+- fix(slate): insert/remove element fix, refs #261770 [Miu Razvan - [`b121ffd`](https://github.com/eea/volto-eea-website-theme/commit/b121ffd2de5c5973f9819b949be1c83400d72edb)]
+
 #### :nail_care: Enhancements
 
 - change(slate): Use F as icon and renamed title of new heading Slate toolbar button to Figure title [David Ichim - [`7355bb3`](https://github.com/eea/volto-eea-website-theme/commit/7355bb3f3cf527c24fc41a10f72cc854773ab84b)]
@@ -23,8 +46,12 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
+- fix conflicts [Miu Razvan - [`9ad80fc`](https://github.com/eea/volto-eea-website-theme/commit/9ad80fc98a3057d96f573150456bc43b5f822782)]
+- fix conflicts [Miu Razvan - [`dee94db`](https://github.com/eea/volto-eea-website-theme/commit/dee94db33c47a2d963ea912712723768de547719)]
 - Update package.json [ichim-david - [`9db96ff`](https://github.com/eea/volto-eea-website-theme/commit/9db96ff3f8e8eedce92c53befe6a1d6e965d8699)]
 - Revert "(fix): In search block on edit, the sort on and sort order are not working (#205)" [David Ichim - [`2045d50`](https://github.com/eea/volto-eea-website-theme/commit/2045d50b3d2f18fab0d6c6794d8030975b1a3f21)]
+### [1.32.0](https://github.com/eea/volto-eea-website-theme/compare/1.31.0...1.32.0) - 25 March 2024
+
 ### [1.31.0](https://github.com/eea/volto-eea-website-theme/compare/1.30.0...1.31.0) - 14 March 2024
 
 #### :rocket: New Features

package/README.md

@@ -27,6 +27,8 @@ See [Storybook](https://eea.github.io/eea-storybook/).
 
 ## Volto customizations
 
+- `volto-slate/elementEditor/utils` -> https://github.com/plone/volto/pull/5926
+
 - `volto-slate/editor/SlateEditor` -> When two slates looks at the same prop changing one slate and updating the other should be handled properly. This change makes replacing the old value of slate work in sync with the other slates that watches the same prop [ref](https://taskman.eionet.europa.eu/issues/264239#note-11).
 
   **!!IMPORTANT**: This change requires volto@^16.26.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "1.32.0",
+  "version": "1.33.0",
   "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/LayoutSettings/LayoutSettingsView.test.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import LayoutSettingsView from './LayoutSettingsView';
+
+const mockStore = configureStore();
+let history = createMemoryHistory();
+
+describe('LayoutSettingsView Component', () => {
+  it('renders without crashing', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const data = {
+      '@layout': 'e28ec238-4cd7-4b72-8025-66da44a6062f',
+      '@type': 'layoutSettings',
+      block: '87911ec6-4242-4bae-b6a5-9b28151169fa',
+      body_class: 'body-class-1',
+      layout_size: 'container_view',
+    };
+
+    const { container } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <LayoutSettingsView data={data} />
+        </Router>
+      </Provider>,
+    );
+
+    expect(container).toBeTruthy();
+  });
+});
+
+describe('LayoutSettingsView Component', () => {
+  it('renders without crashing with multiple classes', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const data = {
+      '@layout': 'e28ec238-4cd7-4b72-8025-66da44a6062f',
+      '@type': 'layoutSettings',
+      block: '87911ec6-4242-4bae-b6a5-9b28151169fa',
+      body_class: ['body-class-1', 'body-class-2'],
+      layout_size: 'container_view',
+    };
+
+    const { container } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <LayoutSettingsView data={data} />
+        </Router>
+      </Provider>,
+    );
+
+    expect(container).toBeTruthy();
+  });
+});

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

@@ -32,6 +32,7 @@ export const EditSchema = () => {
           ['homepage', 'Homepage'],
           ['homepage-inverse', 'Homepage inverse'],
         ],
+        widget: 'creatable_select',
       },
     },
   };

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

@@ -0,0 +1,304 @@
+/**
+ * CreatableSelectWidget component.
+ * @module components/manage/Widgets/SelectWidget
+ *
+ * A copy of the SelectWidget component. The only difference is that is uses the Creatable component as a base
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { map } from 'lodash';
+import { defineMessages, injectIntl } from 'react-intl';
+import {
+  getVocabFromHint,
+  getVocabFromField,
+  getVocabFromItems,
+} from '@plone/volto/helpers';
+import { FormFieldWrapper } from '@plone/volto/components';
+import { getVocabulary, getVocabularyTokenTitle } from '@plone/volto/actions';
+import { normalizeValue } from '@plone/volto/components/manage/Widgets/SelectUtils';
+
+import {
+  customSelectStyles,
+  DropdownIndicator,
+  ClearIndicator,
+  Option,
+  selectTheme,
+  MenuList,
+  MultiValueContainer,
+} from '@plone/volto/components/manage/Widgets/SelectStyling';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
+import loadable from '@loadable/component';
+
+export const Creatable = loadable(() => import('react-select/creatable'));
+
+const messages = defineMessages({
+  default: {
+    id: 'Default',
+    defaultMessage: 'Default',
+  },
+  idTitle: {
+    id: 'Short Name',
+    defaultMessage: 'Short Name',
+  },
+  idDescription: {
+    id: 'Used for programmatic access to the fieldset.',
+    defaultMessage: 'Used for programmatic access to the fieldset.',
+  },
+  title: {
+    id: 'Title',
+    defaultMessage: 'Title',
+  },
+  description: {
+    id: 'Description',
+    defaultMessage: 'Description',
+  },
+  close: {
+    id: 'Close',
+    defaultMessage: 'Close',
+  },
+  choices: {
+    id: 'Choices',
+    defaultMessage: 'Choices',
+  },
+  required: {
+    id: 'Required',
+    defaultMessage: 'Required',
+  },
+  select: {
+    id: 'Select…',
+    defaultMessage: 'Select…',
+  },
+  no_value: {
+    id: 'No value',
+    defaultMessage: 'No value',
+  },
+  no_options: {
+    id: 'No options',
+    defaultMessage: 'No options',
+  },
+});
+
+/**
+ * SelectWidget component class.
+ * @function SelectWidget
+ * @returns {string} Markup of the component.
+ */
+class SelectWidget extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    description: PropTypes.string,
+    required: PropTypes.bool,
+    error: PropTypes.arrayOf(PropTypes.string),
+    getVocabulary: PropTypes.func.isRequired,
+    getVocabularyTokenTitle: PropTypes.func.isRequired,
+    choices: PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    ),
+    items: PropTypes.shape({
+      vocabulary: PropTypes.object,
+    }),
+    widgetOptions: PropTypes.shape({
+      vocabulary: PropTypes.object,
+    }),
+    value: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.string,
+      PropTypes.bool,
+      PropTypes.func,
+      PropTypes.array,
+    ]),
+    onChange: PropTypes.func.isRequired,
+    onBlur: PropTypes.func,
+    onClick: PropTypes.func,
+    onEdit: PropTypes.func,
+    onDelete: PropTypes.func,
+    wrapped: PropTypes.bool,
+    noValueOption: PropTypes.bool,
+    customOptionStyling: PropTypes.any,
+    isMulti: PropTypes.bool,
+    placeholder: PropTypes.string,
+  };
+
+  /**
+   * Default properties
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    description: null,
+    required: false,
+    items: {
+      vocabulary: null,
+    },
+    widgetOptions: {
+      vocabulary: null,
+    },
+    error: [],
+    choices: [],
+    value: null,
+    onChange: () => {},
+    onBlur: () => {},
+    onClick: () => {},
+    onEdit: null,
+    onDelete: null,
+    noValueOption: true,
+    customOptionStyling: null,
+  };
+
+  /**
+   * Component did mount
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    if (
+      (!this.props.choices || this.props.choices?.length === 0) &&
+      this.props.vocabBaseUrl
+    ) {
+      this.props.getVocabulary({
+        vocabNameOrURL: this.props.vocabBaseUrl,
+        size: -1,
+        subrequest: this.props.lang,
+      });
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (
+      this.props.vocabBaseUrl !== prevProps.vocabBaseUrl &&
+      (!this.props.choices || this.props.choices?.length === 0)
+    ) {
+      this.props.getVocabulary({
+        vocabNameOrURL: this.props.vocabBaseUrl,
+        size: -1,
+        subrequest: this.props.lang,
+      });
+    }
+  }
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const { id, choices, value, intl, onChange } = this.props;
+    const normalizedValue = normalizeValue(choices, value, intl);
+    // Make sure that both disabled and isDisabled (from the DX layout feat work)
+    const disabled = this.props.disabled || this.props.isDisabled;
+
+    let options = this.props.vocabBaseUrl
+      ? this.props.choices
+      : [
+          ...map(choices, (option) => ({
+            value: option[0],
+            label:
+              // Fix "None" on the serializer, to remove when fixed in p.restapi
+              option[1] !== 'None' && option[1] ? option[1] : option[0],
+          })),
+          // Only set "no-value" option if there's no default in the field
+          // TODO: also if this.props.defaultValue?
+          ...(this.props.noValueOption &&
+          (this.props.default === undefined || this.props.default === null)
+            ? [
+                {
+                  label: this.props.intl.formatMessage(messages.no_value),
+                  value: 'no-value',
+                },
+              ]
+            : []),
+        ];
+
+    return (
+      <FormFieldWrapper {...this.props}>
+        <Creatable
+          isMulti
+          id={`field-${id}`}
+          key={choices}
+          name={id}
+          menuShouldScrollIntoView={false}
+          isDisabled={disabled}
+          isSearchable={true}
+          className="react-select-container"
+          classNamePrefix="react-select"
+          options={options}
+          styles={customSelectStyles}
+          theme={selectTheme}
+          components={{
+            ...(options?.length > 25 && {
+              MenuList,
+            }),
+            MultiValueContainer,
+            DropdownIndicator,
+            ClearIndicator,
+            Option: this.props.customOptionStyling || Option,
+          }}
+          value={normalizedValue}
+          placeholder={
+            this.props.placeholder ??
+            this.props.intl.formatMessage(messages.select)
+          }
+          onChange={(selectedOption) => {
+            return onChange(
+              id,
+              selectedOption.map((el) => el.value),
+            );
+          }}
+          isClearable
+        />
+      </FormFieldWrapper>
+    );
+  }
+}
+
+export const SelectWidgetComponent = injectIntl(SelectWidget);
+
+export default compose(
+  injectLazyLibs(['reactSelect']),
+  connect(
+    (state, props) => {
+      const vocabBaseUrl = !props.choices
+        ? getVocabFromHint(props) ||
+          getVocabFromField(props) ||
+          getVocabFromItems(props)
+        : '';
+
+      const vocabState =
+        state.vocabularies?.[vocabBaseUrl]?.subrequests?.[state.intl.locale];
+
+      // If the schema already has the choices in it, then do not try to get the vocab,
+      // even if there is one
+      if (props.choices) {
+        return {
+          choices: props.choices,
+          lang: state.intl.locale,
+        };
+      } else if (vocabState) {
+        return {
+          vocabBaseUrl,
+          choices: vocabState?.items ?? [],
+          lang: state.intl.locale,
+        };
+        // There is a moment that vocabState is not there yet, so we need to pass the
+        // vocabBaseUrl to the component.
+      } else if (vocabBaseUrl) {
+        return {
+          vocabBaseUrl,
+          lang: state.intl.locale,
+        };
+      }
+      return { lang: state.intl.locale };
+    },
+    { getVocabulary, getVocabularyTokenTitle },
+  ),
+)(SelectWidgetComponent);

package/src/components/theme/Widgets/CreatableSelectWidget.test.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { waitFor, render, screen, fireEvent } from '@testing-library/react';
+
+import CreatableSelectWidget from './CreatableSelectWidget';
+
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
+test('renders a select widget component', async () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+    vocabularies: {
+      'plone.app.vocabularies.Keywords': {
+        items: [{ title: 'My item', value: 'myitem' }],
+        itemsTotal: 1,
+      },
+    },
+  });
+
+  const { container } = render(
+    <Provider store={store}>
+      <CreatableSelectWidget
+        id="my-field"
+        title="My field"
+        fieldSet="default"
+        onChange={() => {}}
+        onBlur={() => {}}
+        onClick={() => {}}
+      />
+    </Provider>,
+  );
+
+  await waitFor(() => screen.getByText('My field'));
+  expect(container).toBeTruthy();
+});
+
+test("No 'No value' option when default value is 0", async () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const choices = [
+    ['0', 'None'],
+    ['1', 'One'],
+  ];
+
+  const value = {
+    value: '0',
+    label: 'None',
+  };
+
+  const _default = 0;
+
+  const { container } = render(
+    <Provider store={store}>
+      <CreatableSelectWidget
+        id="my-field"
+        title="My field"
+        fieldSet="default"
+        choices={choices}
+        default={_default}
+        value={value}
+        onChange={() => {}}
+        onBlur={() => {}}
+        onClick={() => {}}
+      />
+    </Provider>,
+  );
+
+  await waitFor(() => screen.getByText('None'));
+  fireEvent.mouseDown(
+    container.querySelector('.react-select__dropdown-indicator'),
+    { button: 0 },
+  );
+  expect(container).toBeTruthy();
+});

package/src/customizations/@plone/volto-slate/elementEditor/utils.js

@@ -0,0 +1,245 @@
+import { Editor, Transforms, Node } from 'slate';
+
+/**
+ * @description Creates or updates an existing $elementType. It also takes care
+ * of the saved selection and uses PathRef.
+ *
+ * @param {Editor} editor The Slate editor for the context
+ * @param {object} data Relevant data for this element
+ *
+ * @returns {boolean} true if an element was possibly inserted, false otherwise
+ * (currently we do not check here if the element was already applied to the
+ * editor)
+ */
+export const _insertElement = (elementType) => (editor, data) => {
+  if (editor.getSavedSelection()) {
+    const selection = editor.selection || editor.getSavedSelection();
+
+    const rangeRef = Editor.rangeRef(editor, selection);
+
+    const res = Array.from(
+      Editor.nodes(editor, {
+        match: (n) => n.type === elementType,
+        mode: 'highest',
+        at: selection,
+      }),
+    );
+
+    if (res.length) {
+      const [, path] = res[0];
+      Transforms.setNodes(
+        editor,
+        { data },
+        {
+          at: path ? path : null,
+          match: path ? (n) => n.type === elementType : null,
+        },
+      );
+    } else {
+      Transforms.wrapNodes(
+        editor,
+        { type: elementType, data },
+        {
+          split: true,
+          at: selection,
+          match: (node) => {
+            return Node.string(node).length !== 0;
+          },
+        },
+      );
+    }
+
+    const sel = JSON.parse(JSON.stringify(rangeRef.current));
+
+    setTimeout(() => {
+      Transforms.select(editor, sel);
+      editor.setSavedSelection(sel);
+    });
+
+    return true;
+  }
+
+  return false;
+};
+
+/**
+ * Will unwrap a node that has as type the one received or one from an array.
+ * It identifies the current target element and expands the selection to it, in
+ * case the selection was just partial. This allows a "clear and reassign"
+ * operation, for example for the Link plugin.
+ *
+ * @param {string|Object[]} elementType - this can be a string or an array of strings
+ * @returns {Object|null} - current node
+ */
+export const _unwrapElement = (elementType) => (editor) => {
+  const selection = editor.selection || editor.getSavedSelection();
+  let [link] = Editor.nodes(editor, {
+    at: selection,
+    match: (node) => node?.type === elementType,
+  });
+  const isAtStart =
+    selection.anchor.offset === 0 && selection.focus.offset === 0;
+
+  if (!link && !isAtStart) return false;
+
+  if (!link) {
+    try {
+      link = Editor.previous(editor, {
+        at: selection.anchor.path,
+      });
+    } catch (ex) {
+      link = [];
+    }
+  }
+
+  const [, path] = link;
+  const [start, end] = Editor.edges(editor, path);
+  const range = { anchor: start, focus: end };
+
+  const ref = Editor.rangeRef(editor, range);
+
+  Transforms.select(editor, range);
+  Transforms.unwrapNodes(editor, {
+    match: (n) =>
+      Array.isArray(elementType)
+        ? elementType.includes(n.type)
+        : n.type === elementType,
+    at: range,
+  });
+
+  const current = ref.current;
+  ref.unref();
+
+  return current;
+};
+
+export const _isActiveElement = (elementType) => (editor) => {
+  const selection = editor.selection || editor.getSavedSelection();
+  let found;
+  try {
+    found = Array.from(
+      Editor.nodes(editor, {
+        match: (n) => n.type === elementType,
+        at: selection,
+      }) || [],
+    );
+  } catch (e) {
+    // eslint-disable-next-line
+    // console.warn('Error in finding active element', e);
+    return false;
+  }
+  if (found.length) return true;
+
+  if (selection) {
+    const { path } = selection.anchor;
+    const isAtStart =
+      selection.anchor.offset === 0 && selection.focus.offset === 0;
+
+    if (isAtStart) {
+      try {
+        found = Editor.previous(editor, {
+          at: path,
+          // match: (n) => n.type === MENTION,
+        });
+      } catch (ex) {
+        found = [];
+      }
+      if (found && found[0] && found[0].type === elementType) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+};
+
+/**
+ * Will look for a node that has as type the one received or one from an array
+ * @param {string|Object[]} elementType - this can be a string or an array of strings
+ * @returns {Object|null} - found node
+ */
+export const _getActiveElement = (elementType) => (
+  editor,
+  direction = 'any',
+) => {
+  const selection = editor.selection || editor.getSavedSelection();
+  let found = [];
+
+  try {
+    found = Array.from(
+      Editor.nodes(editor, {
+        match: (n) =>
+          Array.isArray(elementType)
+            ? elementType.includes(n.type)
+            : n.type === elementType,
+        at: selection,
+      }),
+    );
+  } catch (e) {
+    return null;
+  }
+
+  if (found.length) return found[0];
+
+  if (!selection) return null;
+
+  if (direction === 'any' || direction === 'backward') {
+    const { path } = selection.anchor;
+    const isAtStart =
+      selection.anchor.offset === 0 && selection.focus.offset === 0;
+
+    if (isAtStart) {
+      let found;
+      try {
+        found = Editor.previous(editor, {
+          at: path,
+        });
+      } catch (ex) {
+        // eslint-disable-next-line no-console
+        console.warn('Unable to find previous node', editor, path);
+        return;
+      }
+      if (found && found[0] && found[0].type === elementType) {
+        if (
+          (Array.isArray(elementType) && elementType.includes(found[0].type)) ||
+          found[0].type === elementType
+        ) {
+          return found;
+        }
+      } else {
+        return null;
+      }
+    }
+  }
+
+  if (direction === 'any' || direction === 'forward') {
+    const { path } = selection.anchor;
+    const isAtStart =
+      selection.anchor.offset === 0 && selection.focus.offset === 0;
+
+    if (isAtStart) {
+      let found;
+      try {
+        found = Editor.next(editor, {
+          at: path,
+        });
+      } catch (e) {
+        // eslint-disable-next-line
+        console.warn('Unable to find next node', editor, path);
+        return;
+      }
+      if (found && found[0] && found[0].type === elementType) {
+        if (
+          (Array.isArray(elementType) && elementType.includes(found[0].type)) ||
+          found[0].type === elementType
+        ) {
+          return found;
+        }
+      } else {
+        return null;
+      }
+    }
+  }
+
+  return null;
+};

package/src/customizations/volto/components/manage/Blocks/Image/View.jsx

@@ -20,7 +20,7 @@ import { Copyright } from '@eeacms/volto-eea-design-system/ui';
  */
 export const View = (props) => {
   const { data, detached } = props;
-  const href = data?.href?.[0]?.['@id'] ?? (data?.href || '');
+  const href = data?.href?.[0]?.['@id'] || '';
   const { copyright, copyrightIcon, copyrightPosition } = data;
   // const [hovering, setHovering] = React.useState(false);
   const [viewLoaded, setViewLoaded] = React.useState(false);

package/src/helpers/schema-utils.js

@@ -66,7 +66,13 @@ export const getVoltoStyles = (props) => {
     if (styles[key] === true) {
       output[key] = key;
     } else {
-      output[value] = value;
+      if (Array.isArray(value)) {
+        value.forEach((el, i) => {
+          output[el] = el;
+        });
+      } else {
+        output[value] = value;
+      }
     }
   }
   return output;

package/src/index.js

@@ -6,8 +6,9 @@ import HomePageView from '@eeacms/volto-eea-website-theme/components/theme/Homep
 import NotFound from '@eeacms/volto-eea-website-theme/components/theme/NotFound/NotFound';
 import { TokenWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/TokenWidget';
 import { TopicsWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/TopicsWidget';
+import CreatableSelectWidget from '@eeacms/volto-eea-website-theme/components/theme/Widgets/CreatableSelectWidget';
+
 import { Icon } from '@plone/volto/components';
-import { getBlocks } from '@plone/volto/helpers';
 import { serializeNodesToText } from '@plone/volto-slate/editor/render';
 import Tag from '@eeacms/volto-eea-design-system/ui/Tag/Tag';
 
@@ -301,26 +302,6 @@ const applyConfig = (config) => {
   // Apply columns block customization
   if (config.blocks.blocksConfig.columnsBlock) {
     config.blocks.blocksConfig.columnsBlock.available_colors = eea.colors;
-    config.blocks.blocksConfig.columnsBlock.tocEntries = (
-      tocData,
-      block = {},
-    ) => {
-      // integration with volto-block-toc
-      const headlines = tocData.levels || ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-      let entries = [];
-      const sorted_column_blocks = getBlocks(block?.data || {});
-      sorted_column_blocks.forEach((column_block) => {
-        const sorted_blocks = getBlocks(column_block[1]);
-        sorted_blocks.forEach((block) => {
-          const { value, plaintext } = block[1];
-          const type = value?.[0]?.type;
-          if (headlines.includes(type)) {
-            entries.push([parseInt(type.slice(1)), plaintext, block[0]]);
-          }
-        });
-      });
-      return entries;
-    };
   }
 
   // Description block custom CSS
@@ -336,6 +317,7 @@ const applyConfig = (config) => {
   config.widgets.views.id.topics = TopicsWidget;
   config.widgets.views.id.subjects = TokenWidget;
   config.widgets.views.widget.tags = TokenWidget;
+  config.widgets.widget.creatable_select = CreatableSelectWidget;
 
   // /voltoCustom.css express-middleware
   // /ok express-middleware - see also: https://github.com/plone/volto/pull/4432

package/src/index.test.js

@@ -91,6 +91,7 @@ describe('applyConfig', () => {
             tags: undefined,
           },
         },
+        widget: {},
       },
       settings: {
         eea: {
@@ -243,6 +244,7 @@ describe('applyConfig', () => {
             tags: undefined,
           },
         },
+        widget: {},
       },
       settings: {
         eea: {},