@eeacms/volto-eea-website-theme 1.27.2 → 1.28.1

package/.eslintrc.js

@@ -1,40 +1,43 @@
 const fs = require('fs');
 const path = require('path');
-
-const projectRootPath = fs.existsSync('./project')
-  ? fs.realpathSync('./project')
-  : fs.realpathSync(__dirname + '/../../../');
-const packageJson = require(path.join(projectRootPath, 'package.json'));
-const jsConfig = require(path.join(projectRootPath, 'jsconfig.json')).compilerOptions;
-
-const pathsConfig = jsConfig.paths;
+const projectRootPath = fs.realpathSync(__dirname + '/../../../');
 
 let voltoPath = path.join(projectRootPath, 'node_modules/@plone/volto');
+let configFile;
+if (fs.existsSync(`${projectRootPath}/tsconfig.json`))
+  configFile = `${projectRootPath}/tsconfig.json`;
+else if (fs.existsSync(`${projectRootPath}/jsconfig.json`))
+  configFile = `${projectRootPath}/jsconfig.json`;
+
+if (configFile) {
+  const jsConfig = require(configFile).compilerOptions;
+  const pathsConfig = jsConfig.paths;
+  if (pathsConfig['@plone/volto'])
+    voltoPath = `./${jsConfig.baseUrl}/${pathsConfig['@plone/volto'][0]}`;
+}
 
-Object.keys(pathsConfig).forEach(pkg => {
-  if (pkg === '@plone/volto') {
-    voltoPath = `./${jsConfig.baseUrl}/${pathsConfig[pkg][0]}`;
-  }
-});
 const AddonConfigurationRegistry = require(`${voltoPath}/addon-registry.js`);
 const reg = new AddonConfigurationRegistry(projectRootPath);
 
 // Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
-const addonAliases = Object.keys(reg.packages).map(o => [
+const addonAliases = Object.keys(reg.packages).map((o) => [
   o,
   reg.packages[o].modulePath,
 ]);
 
+const addonExtenders = reg.getEslintExtenders().map((m) => require(m));
 
-module.exports = {
-  extends: `${projectRootPath}/node_modules/@plone/volto/.eslintrc`,
+const defaultConfig = {
+  extends: `${voltoPath}/.eslintrc`,
   settings: {
     'import/resolver': {
       alias: {
         map: [
           ['@plone/volto', '@plone/volto/src'],
+          ['@plone/volto-slate', '@plone/volto/packages/volto-slate/src'],
           ...addonAliases,
           ['@package', `${__dirname}/src`],
+          ['@root', `${__dirname}/src`],
           ['~', `${__dirname}/src`],
         ],
         extensions: ['.js', '.jsx', '.json'],
@@ -51,6 +54,12 @@ module.exports = {
         allowReferrer: true,
       },
     ],
-  }
+  },
 };
 
+const config = addonExtenders.reduce(
+  (acc, extender) => extender.modify(acc),
+  defaultConfig,
+);
+
+module.exports = config;

package/CHANGELOG.md

@@ -4,16 +4,38 @@ 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.2](https://github.com/eea/volto-eea-website-theme/compare/1.27.1...1.27.2) - 23 January 2024
+### [1.28.1](https://github.com/eea/volto-eea-website-theme/compare/1.28.0...1.28.1) - 19 February 2024
 
 #### :bug: Bug Fixes
 
+- fix: Don't crash when rendering invalid slate [Tiberiu Ichim - [`9b7bc96`](https://github.com/eea/volto-eea-website-theme/commit/9b7bc9622d55f0912f13252ef80255f9cbb778d5)]
+
+#### :hammer_and_wrench: Others
+
+- update readme [Razvan - [`ba82be2`](https://github.com/eea/volto-eea-website-theme/commit/ba82be250e82120958d18137c5972150db977b6b)]
+### [1.28.0](https://github.com/eea/volto-eea-website-theme/compare/1.27.2...1.28.0) - 19 February 2024
+
+#### :bug: Bug Fixes
+
+- fix(toc): make toc work, refs #265201 [Razvan - [`507adc2`](https://github.com/eea/volto-eea-website-theme/commit/507adc29f0a2e144933b06dfcf0856f1ac7efc98)]
+- fix: volto slate when used in metadata block with SlateJSONField - refs #264239 [Miu Razvan - [`51682c4`](https://github.com/eea/volto-eea-website-theme/commit/51682c42001f6aa3433feff62c5f8536283de990)]
 - fix(lint): service so that it work with editor and command line tool [David Ichim - [`ad43bc2`](https://github.com/eea/volto-eea-website-theme/commit/ad43bc2f9bfc3e272d30b35db9d4b160a8edcbec)]
 
+#### :house: Internal changes
+
+- chore: package.json [Alin Voinea - [`08beb70`](https://github.com/eea/volto-eea-website-theme/commit/08beb706d9021a89c80acc5aa7c94350195f7de7)]
+
 #### :hammer_and_wrench: Others
 
+- bump version [Razvan - [`721e939`](https://github.com/eea/volto-eea-website-theme/commit/721e939d12e324b459ebfa78a2e656ee7142a3d6)]
+- merge master into this branch [Razvan - [`586c8f9`](https://github.com/eea/volto-eea-website-theme/commit/586c8f910bac55a043bd8dda60e9444bd2ae1663)]
+- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`fd90044`](https://github.com/eea/volto-eea-website-theme/commit/fd9004442a9d1d465f7601ecdefe3e23c61e6a9c)]
+- Add Sonarqube tag using insitu-frontend addons list [EEA Jenkins - [`4bc3dd3`](https://github.com/eea/volto-eea-website-theme/commit/4bc3dd3ae412a66befd04b5b80fab3716c929240)]
+- test: Update jest,Jenkinsfile,lint to volto-addons-template PR30 [valentinab25 - [`c4dbd28`](https://github.com/eea/volto-eea-website-theme/commit/c4dbd289358205bc2d849aab7edb11ccf3b89cee)]
 - fix tests [Razvan - [`042330b`](https://github.com/eea/volto-eea-website-theme/commit/042330bc97d32ffe7ba769b4f2453f71cffed706)]
 - remove RemoveSchema logic [Razvan - [`08d10f8`](https://github.com/eea/volto-eea-website-theme/commit/08d10f8bf6f75478260e4e4c66d7316ba87b907a)]
+### [1.27.2](https://github.com/eea/volto-eea-website-theme/compare/1.27.1...1.27.2) - 24 January 2024
+
 ### [1.27.1](https://github.com/eea/volto-eea-website-theme/compare/1.27.0...1.27.1) - 18 January 2024
 
 #### :bug: Bug Fixes

package/README.md

@@ -27,6 +27,10 @@ See [Storybook](https://eea.github.io/eea-storybook/).
 
 ## Volto customizations
 
+- `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
+
 - `volto/components/manage/Sidebar/SidebarPopup` -> https://github.com/plone/volto/pull/5520
 
 ## Getting started

package/jest-addon.config.js

@@ -1,3 +1,5 @@
+require('dotenv').config({ path: __dirname + '/.env' })
+
 module.exports = {
   testMatch: ['**/src/addons/**/?(*.)+(spec|test).[jt]s?(x)'],
   collectCoverageFrom: [
@@ -9,31 +11,38 @@ module.exports = {
     '@plone/volto/cypress': '<rootDir>/node_modules/@plone/volto/cypress',
     '@plone/volto/babel': '<rootDir>/node_modules/@plone/volto/babel',
     '@plone/volto/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
-    '@package/(.*)$': '<rootDir>/src/$1',
-    '@root/(.*)$': '<rootDir>/src/$1',
+    '@package/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
+    '@root/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
     '@plone/volto-quanta/(.*)$': '<rootDir>/src/addons/volto-quanta/src/$1',
     '@eeacms/(.*?)/(.*)$': '<rootDir>/node_modules/@eeacms/$1/src/$2',
-    '@plone/volto-slate':
+    '@plone/volto-slate$':
       '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src',
+    '@plone/volto-slate/(.*)$':
+      '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src/$1',
     '~/(.*)$': '<rootDir>/src/$1',
     'load-volto-addons':
       '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
   },
+  transformIgnorePatterns: [
+    '/node_modules/(?!(@plone|@root|@package|@eeacms)/).*/',
+  ],
   transform: {
     '^.+\\.js(x)?$': 'babel-jest',
     '^.+\\.(png)$': 'jest-file',
     '^.+\\.(jpg)$': 'jest-file',
     '^.+\\.(svg)$': './node_modules/@plone/volto/jest-svgsystem-transform.js',
   },
-  transformIgnorePatterns: [
-    'node_modules/(?!@eeacms)/volto-eea-design-system/ui',
-  ],
   coverageThreshold: {
     global: {
-      branches: 0,
-      functions: 0,
-      lines: 0,
-      statements: 0,
+      branches: 5,
+      functions: 5,
+      lines: 5,
+      statements: 5,
     },
   },
-};
+  ...(process.env.JEST_USE_SETUP === 'ON' && {
+    setupFilesAfterEnv: [
+      '<rootDir>/node_modules/@eeacms/volto-eea-website-theme/jest.setup.js',
+    ],
+  }),
+}

package/jest.setup.js

@@ -0,0 +1,65 @@
+import { jest } from '@jest/globals';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import { blocksConfig } from '@plone/volto/config/Blocks';
+import installSlate from '@plone/volto-slate/index';
+
+var mockSemanticComponents = jest.requireActual('semantic-ui-react');
+var mockComponents = jest.requireActual('@plone/volto/components');
+var config = jest.requireActual('@plone/volto/registry').default;
+
+config.blocks.blocksConfig = {
+  ...blocksConfig,
+  ...config.blocks.blocksConfig,
+};
+
+jest.doMock('semantic-ui-react', () => ({
+  __esModule: true,
+  ...mockSemanticComponents,
+  Popup: ({ content, trigger }) => {
+    return (
+      <div className="popup">
+        <div className="trigger">{trigger}</div>
+        <div className="content">{content}</div>
+      </div>
+    );
+  },
+}));
+
+jest.doMock('@plone/volto/components', () => {
+  return {
+    __esModule: true,
+    ...mockComponents,
+    SidebarPortal: ({ children }) => <div id="sidebar">{children}</div>,
+  };
+});
+
+jest.doMock('@plone/volto/registry', () =>
+  [installSlate].reduce((acc, apply) => apply(acc), config),
+);
+
+const mockStore = configureStore([thunk]);
+
+global.fetch = jest.fn(() =>
+  Promise.resolve({
+    json: () => Promise.resolve({}),
+  }),
+);
+
+global.store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+    formatMessage: jest.fn(),
+  },
+  content: {
+    create: {},
+    subrequests: [],
+  },
+  connected_data_parameters: {},
+  screen: {
+    page: {
+      width: 768,
+    },
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "1.27.2",
+  "version": "1.28.1",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -32,6 +32,7 @@
     "@cypress/code-coverage": "^3.10.0",
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "dotenv": "^16.3.2",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
     "md5": "^2.3.0",

package/src/customizations/@plone/volto-slate/editor/SlateEditor.jsx

@@ -0,0 +1,404 @@
+import ReactDOM from 'react-dom';
+import cx from 'classnames';
+import { isEqual, cloneDeep } from 'lodash';
+import { Transforms, Editor, Point } from 'slate'; // , Transforms
+import { Slate, Editable, ReactEditor } from 'slate-react';
+import React, { Component } from 'react'; // , useState
+import { v4 as uuid } from 'uuid';
+
+import config from '@plone/volto/registry';
+
+import { Element, Leaf } from './render';
+
+import withTestingFeatures from '@plone/volto-slate/editor/extensions/withTestingFeatures';
+import {
+  makeEditor,
+  toggleInlineFormat,
+  toggleMark,
+  parseDefaultSelection,
+} from '@plone/volto-slate/utils';
+import { InlineToolbar } from '@plone/volto-slate/editor/ui';
+import EditorContext from '@plone/volto-slate/editor/EditorContext';
+
+import isHotkey from 'is-hotkey';
+
+import '@plone/volto-slate/editor/less/editor.less';
+
+import Toolbar from '@plone/volto-slate/editor/ui/Toolbar';
+
+const handleHotKeys = (editor, event, config) => {
+  let wasHotkey = false;
+
+  for (const hk of Object.entries(config.hotkeys)) {
+    const [shortcut, { format, type }] = hk;
+    if (isHotkey(shortcut, event)) {
+      event.preventDefault();
+
+      if (type === 'inline') {
+        toggleInlineFormat(editor, format);
+      } else {
+        // type === 'mark'
+        toggleMark(editor, format);
+      }
+
+      wasHotkey = true;
+    }
+  }
+
+  return wasHotkey;
+};
+
+function resetNodes(editor, options = {}) {
+  const children = [...editor.children];
+
+  children.forEach((node) =>
+    editor.apply({ type: 'remove_node', path: [0], node }),
+  );
+
+  if (options.nodes) {
+    options.nodes.forEach((node, i) =>
+      editor.apply({ type: 'insert_node', path: [i], node: node }),
+    );
+  }
+
+  const point =
+    options.at && Point.isPoint(options.at)
+      ? options.at
+      : Editor.end(editor, []);
+
+  if (point) {
+    Transforms.select(editor, point);
+  }
+}
+
+// TODO: implement onFocus
+class SlateEditor extends Component {
+  constructor(props) {
+    super(props);
+
+    this.createEditor = this.createEditor.bind(this);
+    this.multiDecorator = this.multiDecorator.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.getSavedSelection = this.getSavedSelection.bind(this);
+    this.setSavedSelection = this.setSavedSelection.bind(this);
+
+    this.savedSelection = null;
+
+    const uid = uuid(); // used to namespace the editor's plugins
+
+    this.slateSettings = props.slateSettings || config.settings.slate;
+
+    this.initialValue = cloneDeep(
+      this.props.value || this.slateSettings.defaultValue(),
+    );
+
+    this.state = {
+      editor: this.createEditor(uid),
+      showExpandedToolbar: config.settings.slate.showExpandedToolbar,
+      internalValue: this.initialValue,
+      uid,
+    };
+
+    this.editor = null;
+    this.selectionTimeout = null;
+  }
+
+  getSavedSelection() {
+    return this.savedSelection;
+  }
+  setSavedSelection(selection) {
+    this.savedSelection = selection;
+  }
+
+  createEditor(uid) {
+    // extensions are "editor plugins" or "editor wrappers". It's a similar
+    // similar to OOP inheritance, where a callable creates a new copy of the
+    // editor, while replacing or adding new capabilities to that editor.
+    // Extensions are purely JS, no React components.
+    const editor = makeEditor({ extensions: this.props.extensions });
+
+    // When the editor loses focus it no longer has a valid selections. This
+    // makes it impossible to have complex types of interactions (like filling
+    // in another text box, operating a select menu, etc). For this reason we
+    // save the active selection
+
+    editor.getSavedSelection = this.getSavedSelection;
+    editor.setSavedSelection = this.setSavedSelection;
+    editor.uid = uid || this.state.uid;
+
+    return editor;
+  }
+
+  handleChange(value) {
+    ReactDOM.unstable_batchedUpdates(() => {
+      const newValue = cloneDeep(value);
+      this.setState({ internalValue: newValue });
+      if (this.props.onChange && !isEqual(newValue, this.props.value)) {
+        this.props.onChange(newValue, this.editor);
+      }
+    });
+  }
+
+  multiDecorator([node, path]) {
+    // Decorations (such as higlighting node types, selection, etc).
+    const { runtimeDecorators = [] } = this.slateSettings;
+    return runtimeDecorators.reduce(
+      (acc, deco) => deco(this.state.editor, [node, path], acc),
+      [],
+    );
+  }
+
+  componentDidMount() {
+    // watch the dom change
+
+    if (this.props.selected) {
+      let focused = true;
+      try {
+        focused = ReactEditor.isFocused(this.state.editor);
+      } catch {}
+      if (!focused) {
+        setTimeout(() => {
+          try {
+            ReactEditor.focus(this.state.editor);
+          } catch {}
+        }, 100); // flush
+      }
+
+      this.state.editor.normalize({ force: true });
+    }
+  }
+
+  componentWillUnmount() {
+    this.isUnmounted = true;
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!isEqual(prevProps.extensions, this.props.extensions)) {
+      this.setState({ editor: this.createEditor() });
+      return;
+    }
+
+    if (
+      this.props.value &&
+      !isEqual(this.props.value, this.state.internalValue)
+    ) {
+      const newValue = cloneDeep(this.props.value);
+      const { editor } = this.state;
+
+      resetNodes(editor, { nodes: newValue });
+
+      this.setState({
+        internalValue: newValue,
+      });
+
+      if (this.props.defaultSelection) {
+        const selection = parseDefaultSelection(
+          editor,
+          this.props.defaultSelection,
+        );
+
+        ReactEditor.focus(editor);
+        Transforms.select(editor, selection);
+      } else {
+        Transforms.select(editor, Editor.end(editor, []));
+      }
+      return;
+    }
+
+    const { editor } = this.state;
+
+    if (!prevProps.selected && this.props.selected) {
+      // if the SlateEditor becomes selected from unselected
+
+      if (window.getSelection().type === 'None') {
+        // TODO: why is this condition checked?
+        Transforms.select(
+          this.state.editor,
+          Editor.range(this.state.editor, Editor.start(this.state.editor, [])),
+        );
+      }
+
+      ReactEditor.focus(this.state.editor);
+    }
+
+    if (this.props.selected && this.props.onUpdate) {
+      this.props.onUpdate(editor);
+    }
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    const { selected = true, value, readOnly } = nextProps;
+    const res =
+      selected ||
+      this.props.selected !== selected ||
+      this.props.readOnly !== readOnly ||
+      !isEqual(value, this.props.value);
+    return res;
+  }
+
+  render() {
+    const {
+      selected,
+      placeholder,
+      onKeyDown,
+      testingEditorRef,
+      readOnly,
+      className,
+      renderExtensions = [],
+      editableProps = {},
+    } = this.props;
+    const slateSettings = this.slateSettings;
+
+    // renderExtensions is needed because the editor is memoized, so if these
+    // extensions need an updated state (for example to insert updated
+    // blockProps) then we need to always wrap the editor with them
+    const editor = renderExtensions.reduce(
+      (acc, apply) => apply(acc),
+      this.state.editor,
+    );
+
+    // Reset selection if field is reset
+    if (
+      editor.selection &&
+      this.props.value?.length === 1 &&
+      this.props.value[0].children.length === 1 &&
+      this.props.value[0].children[0].text === ''
+    ) {
+      Transforms.select(editor, {
+        anchor: { path: [0, 0], offset: 0 },
+        focus: { path: [0, 0], offset: 0 },
+      });
+    }
+    this.editor = editor;
+
+    if (testingEditorRef) {
+      testingEditorRef.current = editor;
+    }
+
+    // debug-values are `data-` HTML attributes in withTestingFeatures HOC
+
+    return (
+      <div
+        {...this.props['debug-values']}
+        className={cx('slate-editor', {
+          'show-toolbar': this.state.showExpandedToolbar,
+          selected,
+        })}
+        tabIndex={-1}
+      >
+        <EditorContext.Provider value={editor}>
+          <Slate
+            editor={editor}
+            initialValue={this.initialValue}
+            onChange={this.handleChange}
+          >
+            {selected ? (
+              <>
+                <InlineToolbar
+                  editor={editor}
+                  className={className}
+                  slateSettings={this.props.slateSettings}
+                />
+                {Object.keys(slateSettings.elementToolbarButtons).map(
+                  (t, i) => {
+                    return (
+                      <Toolbar elementType={t} key={i}>
+                        {slateSettings.elementToolbarButtons[t].map(
+                          (Btn, b) => {
+                            return <Btn editor={editor} key={b} />;
+                          },
+                        )}
+                      </Toolbar>
+                    );
+                  },
+                )}
+              </>
+            ) : (
+              ''
+            )}
+            <Editable
+              tabIndex={this.props.tabIndex || 0}
+              readOnly={readOnly}
+              placeholder={placeholder}
+              renderElement={(props) => <Element {...props} />}
+              renderLeaf={(props) => <Leaf {...props} />}
+              decorate={this.multiDecorator}
+              spellCheck={false}
+              scrollSelectionIntoView={
+                slateSettings.scrollIntoView ? undefined : () => null
+              }
+              onBlur={() => {
+                this.props.onBlur && this.props.onBlur();
+                return null;
+              }}
+              onClick={this.props.onClick}
+              onSelect={(e) => {
+                if (!selected && this.props.onFocus) {
+                  // we can't overwrite the onFocus of Editable, as the onFocus
+                  // in Slate has too much builtin behaviour that's not
+                  // accessible otherwise. Instead we try to detect such an
+                  // event based on observing selected state
+                  if (!editor.selection) {
+                    setTimeout(() => {
+                      this.props.onFocus();
+                    }, 100); // TODO: why 100 is chosen here?
+                  }
+                }
+
+                if (this.selectionTimeout) clearTimeout(this.selectionTimeout);
+                this.selectionTimeout = setTimeout(() => {
+                  if (
+                    editor.selection &&
+                    !isEqual(editor.selection, this.savedSelection) &&
+                    !this.isUnmounted
+                  ) {
+                    this.setState((state) => ({ update: !this.state.update }));
+                    this.setSavedSelection(
+                      JSON.parse(JSON.stringify(editor.selection)),
+                    );
+                  }
+                }, 200);
+              }}
+              onKeyDown={(event) => {
+                const handled = handleHotKeys(editor, event, slateSettings);
+                if (handled) return;
+                onKeyDown && onKeyDown({ editor, event });
+              }}
+              {...editableProps}
+            />
+            {selected &&
+              slateSettings.persistentHelpers.map((Helper, i) => {
+                return <Helper key={i} editor={editor} />;
+              })}
+            {this.props.debug ? (
+              <ul>
+                <li>{selected ? 'selected' : 'no-selected'}</li>
+                <li>
+                  {ReactEditor.isFocused(editor) ? 'focused' : 'unfocused'}
+                </li>
+                <li>
+                  savedSelection: {JSON.stringify(editor.getSavedSelection())}
+                </li>
+                <li>live selection: {JSON.stringify(editor.selection)}</li>
+                <li>children: {JSON.stringify(editor.children)}</li>
+              </ul>
+            ) : (
+              ''
+            )}
+            {this.props.children}
+          </Slate>
+        </EditorContext.Provider>
+      </div>
+    );
+  }
+}
+
+SlateEditor.defaultProps = {
+  extensions: [],
+  className: '',
+};
+
+// May be needed to wrap in React.memo(), it used to be wrapped in connect()
+export default __CLIENT__ && window?.Cypress
+  ? withTestingFeatures(SlateEditor)
+  : SlateEditor;

package/src/customizations/@plone/volto-slate/editor/render.jsx

@@ -70,10 +70,11 @@ export const Leaf = ({ children, ...rest }) => {
     typeof children === 'string' ? (
       children.split('\n').map((t, i) => {
         // Softbreak support. Should do a plugin?
+        const hasSoftBreak =
+          children.indexOf('\n') > -1 && children.split('\n').length - 1 > i;
         return (
           <React.Fragment key={`${i}`}>
-            {children.indexOf('\n') > -1 &&
-            children.split('\n').length - 1 > i ? (
+            {hasSoftBreak ? (
               <>
                 {klass ? <span className={klass}>{t}</span> : t}
                 <br />
@@ -104,7 +105,20 @@ export const serializeNodes = (nodes, getAttributes, extras = {}) => {
   const editor = { children: nodes || [] };
 
   const _serializeNodes = (nodes) => {
-    return (nodes || []).map(([node, path], i) => {
+    return (nodes || []).map(([node, path]) => {
+      let _serialized;
+      const isTextNode = Text.isText(node);
+      try {
+        if (!isTextNode) {
+          _serialized = _serializeNodes(
+            Array.from(Node.children(editor, path)),
+          );
+        }
+      } catch {
+        // eslint-disable-next-line no-console
+        console.error('Error in serializing nodes', editor, path);
+      }
+
       return Text.isText(node) ? (
         <Leaf path={path} leaf={node} text={node} mode="view" key={path}>
           {node.text}
@@ -125,7 +139,7 @@ export const serializeNodes = (nodes, getAttributes, extras = {}) => {
           }
           extras={extras}
         >
-          {_serializeNodes(Array.from(Node.children(editor, path)))}
+          {_serialized}
         </Element>
       );
     });

package/src/index.js

@@ -8,6 +8,7 @@ import { TokenWidget } from '@eeacms/volto-eea-website-theme/components/theme/Wi
 import { TopicsWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/TopicsWidget';
 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';
 
 import {
@@ -224,6 +225,20 @@ const applyConfig = (config) => {
     ...config.views.errorViews,
     '404': NotFound,
   };
+  // Apply slate text block customization
+  if (config.blocks.blocksConfig.slate) {
+    config.blocks.blocksConfig.slate.tocEntry = (block = {}) => {
+      const { value, override_toc, entry_text, level } = block;
+      const plaintext =
+        serializeNodesToText(block.value || []) || block.plaintext;
+      const type = value?.[0]?.type;
+      return override_toc && level
+        ? [parseInt(level.slice(1)), entry_text]
+        : config.settings.slate.topLevelTargetElements.includes(type)
+        ? [parseInt(type.slice(1)), plaintext]
+        : null;
+    };
+  }
   // Apply accordion block customization
   if (config.blocks.blocksConfig.accordion) {
     config.blocks.blocksConfig.accordion.titleIcons = {