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

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,27 @@ 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.0](https://github.com/eea/volto-eea-website-theme/compare/1.27.2...1.28.0) - 16 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)]
+- 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
@@ -103,11 +114,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - test: Add real image to cypress test [Alin Voinea - [`4ff591a`](https://github.com/eea/volto-eea-website-theme/commit/4ff591ae3318c9588b4e2114582c0fa6cfdf31ae)]
 - test: Add cypress tests for Image block styling position and align [Alin Voinea - [`7341ef7`](https://github.com/eea/volto-eea-website-theme/commit/7341ef7b92714fc0cc3ab0c31c39033e7b3e19e7)]
 - Revert "change(tests): commented out rss test since title block config is missing" [Alin Voinea - [`fb61191`](https://github.com/eea/volto-eea-website-theme/commit/fb611918d6ca380b89b594f283dcf9f685a4b294)]
-- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`6a3be30`](https://github.com/eea/volto-eea-website-theme/commit/6a3be3092589411af7808a235f76de5222fd3868)]
-- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`c3978f2`](https://github.com/eea/volto-eea-website-theme/commit/c3978f23375ef066e9fd6f6c2e34ba6c1c058f69)]
-- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`f672779`](https://github.com/eea/volto-eea-website-theme/commit/f672779e845bec9240ccc901e9f53ec80c5a1819)]
-- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`ae5d8e3`](https://github.com/eea/volto-eea-website-theme/commit/ae5d8e3f4e04dc2808d47ce2ee886e1b23b528da)]
-- test: [JENKINS] Improve cypress time [valentinab25 - [`170ff0c`](https://github.com/eea/volto-eea-website-theme/commit/170ff0c8e3b30e69479bdf1117e811fea94f1027)]
 ### [1.23.0](https://github.com/eea/volto-eea-website-theme/compare/1.22.1...1.23.0) - 2 November 2023
 
 #### :rocket: New Features
@@ -120,7 +126,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Refactor automated testing [valentinab25 - [`f28fce3`](https://github.com/eea/volto-eea-website-theme/commit/f28fce3d1eb815f95fb9aa40de42b10b7e8e30c5)]
 - chore: husky, lint-staged use fixed versions [valentinab25 - [`6d15088`](https://github.com/eea/volto-eea-website-theme/commit/6d150886c5aeb2ca0b569270486e60f7cc274e2c)]
 - chore:volto 16 in tests, update docs, fix stylelint overrides [valentinab25 - [`20c0323`](https://github.com/eea/volto-eea-website-theme/commit/20c032380b33c0077c869a05136f93e2fb68e5d4)]
 
@@ -306,7 +311,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Deprecate circularity website [valentinab25 - [`370dcbf`](https://github.com/eea/volto-eea-website-theme/commit/370dcbfbf1a8135ce7b1b3b271b004552a631837)]
 
 #### :hammer_and_wrench: Others
 
@@ -462,7 +466,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`6c5e2f8`](https://github.com/eea/volto-eea-website-theme/commit/6c5e2f80456e2061d9e9c15fd0a0b91b9ac70568)]
 ### [1.9.1](https://github.com/eea/volto-eea-website-theme/compare/1.9.0...1.9.1) - 28 February 2023
 
 #### :bug: Bug Fixes
@@ -609,7 +612,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - For some reasons types is a string [Alin Voinea - [`3769a09`](https://github.com/eea/volto-eea-website-theme/commit/3769a0981181d5b633f3498daebbe96be8b4b833)]
 - Fix(redirect): o.filter - refs #157627 [Alin Voinea - [`deb23da`](https://github.com/eea/volto-eea-website-theme/commit/deb23da846444cc96539697fd798429ae0abe89e)]
-- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`f1fffc5`](https://github.com/eea/volto-eea-website-theme/commit/f1fffc5db96725440863d545580b4e76cce4b796)]
 ### [1.5.0](https://github.com/eea/volto-eea-website-theme/compare/1.4.2...1.5.0) - 9 January 2023
 
 #### :hammer_and_wrench: Others
@@ -643,7 +645,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Release 1.4.0 [Alin Voinea - [`bd42a0d`](https://github.com/eea/volto-eea-website-theme/commit/bd42a0d26e928cac5d99933194755da3db06b341)]
 - bump version to use as volto-eea-design-system [David Ichim - [`f4be047`](https://github.com/eea/volto-eea-website-theme/commit/f4be047328b46399b03b612d378b18aaf82e7dc1)]
-- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`9b7cfef`](https://github.com/eea/volto-eea-website-theme/commit/9b7cfefb4d34fc1c948015e491feb370f9795bd8)]
 - test(Jenkins): Run tests and cypress with latest canary @plone/volto [Alin Voinea - [`df252a9`](https://github.com/eea/volto-eea-website-theme/commit/df252a9bfed0bb86cadf53c59dd1603b1e2cd822)]
 ### [1.3.2](https://github.com/eea/volto-eea-website-theme/compare/1.3.1...1.3.2) - 16 December 2022
 
@@ -653,7 +654,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`a43c658`](https://github.com/eea/volto-eea-website-theme/commit/a43c658a7920c8df95e763b9a637f38ce77eba2c)]
 - Better razzle.config [Tiberiu Ichim - [`81dbf48`](https://github.com/eea/volto-eea-website-theme/commit/81dbf48815fb27facb4f82c9b764540fdf188b2e)]
 - Better razzle.config [Tiberiu Ichim - [`7bc9da2`](https://github.com/eea/volto-eea-website-theme/commit/7bc9da2cd837ab62a95cd29979cdd9b0055b7d67)]
 ### [1.3.1](https://github.com/eea/volto-eea-website-theme/compare/1.3.0...1.3.1) - 28 November 2022
@@ -664,7 +664,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- yarn 3 [Alin Voinea - [`ea7a709`](https://github.com/eea/volto-eea-website-theme/commit/ea7a7094945312776e9b6f44e371178603e92139)]
 ### [1.3.0](https://github.com/eea/volto-eea-website-theme/compare/1.2.0...1.3.0) - 22 November 2022
 
 #### :rocket: New Features
@@ -705,7 +704,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Add subsite class to body [Tiberiu Ichim - [`74d700f`](https://github.com/eea/volto-eea-website-theme/commit/74d700fbfd6249a8604762a7e4e49cce857db0f3)]
 - Add subsite info to header [Tiberiu Ichim - [`47daf8b`](https://github.com/eea/volto-eea-website-theme/commit/47daf8bb6374a1222040626b19d4154df7ba1b83)]
 - fix eslint [Miu Razvan - [`eb8d0a7`](https://github.com/eea/volto-eea-website-theme/commit/eb8d0a790bc70c0aae256c6ff35f63c4885f338e)]
-- Add Sonarqube tag using circularity-frontend addons list [EEA Jenkins - [`cc578a4`](https://github.com/eea/volto-eea-website-theme/commit/cc578a413b205a8e61e091fab3a88f94cedefc89)]
 ### [1.1.0](https://github.com/eea/volto-eea-website-theme/compare/1.0.0...1.1.0) - 28 October 2022
 
 #### :nail_care: Enhancements
@@ -753,7 +751,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`33b56ac`](https://github.com/eea/volto-eea-website-theme/commit/33b56acb13fbaf0c5b79e8fc6e13c4b699c79c90)]
 ### [0.7.3](https://github.com/eea/volto-eea-website-theme/compare/0.7.2...0.7.3) - 22 September 2022
 
 #### :hammer_and_wrench: Others
@@ -1021,7 +1018,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Header refactor, add custom logo #5 [ichim-david - [`4950235`](https://github.com/eea/volto-eea-website-theme/commit/49502358105437cfeac3b144e6d301cb59aa2346)]
 - Update footer.config with new publication card component [ichim-david - [`2e38e9a`](https://github.com/eea/volto-eea-website-theme/commit/2e38e9a417f835009d60c80d4eb4b30229f55e45)]
 - feature(breadcrumbs): implement eea-design-system breadcrumb as Volto component #32 #7 [ichim-david - [`181af41`](https://github.com/eea/volto-eea-website-theme/commit/181af4125ce2b9ddac56dab4723cb11c26633221)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`da8ceb6`](https://github.com/eea/volto-eea-website-theme/commit/da8ceb68ea68bfbc9504e48ccd4d68277f11ab9a)]
 - use breadcrumbs from eea-design-system [nileshgulia1 - [`db2f9e9`](https://github.com/eea/volto-eea-website-theme/commit/db2f9e9a4327420a3cce9a9903cd88549b129eab)]
 - Update theme.config [ichim-david - [`8eca4f4`](https://github.com/eea/volto-eea-website-theme/commit/8eca4f40397a4aeca6d39029c92db78968d37064)]
 - Added keyContent component to theme.config [ichim-david - [`d86f202`](https://github.com/eea/volto-eea-website-theme/commit/d86f202d0274d839487a88b51cae9a0e899beb23)]
@@ -1063,5 +1059,4 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- yarn bootstrap [Alin Voinea - [`6995e9e`](https://github.com/eea/volto-eea-website-theme/commit/6995e9e091f21fdbbdffa8a44fc0e2c626f6d46a)]
 - Initial commit [Alin Voinea - [`6a9c03a`](https://github.com/eea/volto-eea-website-theme/commit/6a9c03a7cebe71ca87e82cf58c42904063e9d8d3)]

package/README.md

@@ -27,6 +27,8 @@ See [Storybook](https://eea.github.io/eea-storybook/).
 
 ## Volto customizations
 
+- `volto-slate/editor/SlateEditor` -> [ref](https://taskman.eionet.europa.eu/issues/264239#note-11) 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.
+
 - `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.0",
   "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",
@@ -78,4 +79,4 @@
     "cypress:open": "make cypress-open",
     "prepare": "husky install"
   }
-}
+}

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/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 = {