@eeacms/volto-hero-block 5.4.6 → 6.0.0

package/.eslintrc.js

@@ -0,0 +1,65 @@
+const fs = require('fs');
+const path = require('path');
+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]}`;
+}
+
+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) => [
+  o,
+  reg.packages[o].modulePath,
+]);
+
+const addonExtenders = reg.getEslintExtenders().map((m) => require(m));
+
+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'],
+      },
+      'babel-plugin-root-import': {
+        rootPathSuffix: 'src',
+      },
+    },
+  },
+  rules: {
+    'react/jsx-no-target-blank': [
+      'error',
+      {
+        allowReferrer: true,
+      },
+    ],
+  }
+};
+
+const config = addonExtenders.reduce(
+  (acc, extender) => extender.modify(acc),
+  defaultConfig,
+);
+
+module.exports = config;

package/CHANGELOG.md

@@ -4,6 +4,56 @@ 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).
 
+### [6.0.0](https://github.com/eea/volto-hero-block/compare/5.5.0...6.0.0) - 4 April 2024
+
+#### :boom: Breaking Change
+
+- breaking(hero): Use BlocksForm instead of SlateEditor to render more slates block  #44 from eea/multiline-bug [ichim-david - [`57953c5`](https://github.com/eea/volto-hero-block/commit/57953c5f27a1831fbb3ff581900b1b8d1b20cb1e)]
+- breaking(tests): Updated Hero.test.jsx.snap snapshots after removal of inner div wrapper [David Ichim - [`7cf73ef`](https://github.com/eea/volto-hero-block/commit/7cf73ef3c4cd0b01dc238a1f6a51a1866dd56aa0)]
+
+#### :nail_care: Enhancements
+
+- change(hero): Use EditBlockWrapper from Volto core [David Ichim - [`360d2d7`](https://github.com/eea/volto-hero-block/commit/360d2d7e0f0240dd089839cc2ec62a691bcf41e2)]
+
+#### :hammer_and_wrench: Others
+
+- Fix onClick event in Hero block to select the block in Edit mode [David Ichim - [`1f38992`](https://github.com/eea/volto-hero-block/commit/1f389922d05a5a04cf11d023229aca156873f4b9)]
+- Add ts-jest package to package.json [David Ichim - [`7c82b62`](https://github.com/eea/volto-hero-block/commit/7c82b626985bfdabcf10db6da159c13fa86b27e2)]
+- bump package version to a major 6.0.0 to indicate breaking changes [David Ichim - [`472b675`](https://github.com/eea/volto-hero-block/commit/472b675fcc037c5ac31ceed52f60aa13998fa896)]
+- fix crash of page after removal of a slate block and saving edit page [David Ichim - [`a917cdc`](https://github.com/eea/volto-hero-block/commit/a917cdccec827594b10ceced3c1588cac2308b43)]
+- fix intial value slate [dobri1408 - [`c70bb80`](https://github.com/eea/volto-hero-block/commit/c70bb80a8c60a710cba02d7afbe069ad1b2e4fa2)]
+- Update Jest configuration to avoid ts error and removed onClick from Hero block view component [David Ichim - [`448dbb4`](https://github.com/eea/volto-hero-block/commit/448dbb4882b0fa3d0a128a7a5241b3fa8148d955)]
+- switch to block sidebar when clicking on the hero block in edit [David Ichim - [`1797077`](https://github.com/eea/volto-hero-block/commit/1797077bcbe9001e24c382d4e534b150683acb9c)]
+- fix eslint [dobri1408 - [`7b0a66c`](https://github.com/eea/volto-hero-block/commit/7b0a66cfb0157787b69ae9c80326b9d9e7a06227)]
+- fix eslint [dobri1408 - [`163af98`](https://github.com/eea/volto-hero-block/commit/163af98415a702361c044531e8f13e8e034972ef)]
+- fix eslint comments [dobri1408 - [`0fff8b0`](https://github.com/eea/volto-hero-block/commit/0fff8b07f4375cf8809fe3575ea6bf913aec0c0c)]
+- fix eslint [dobri1408 - [`d560dcb`](https://github.com/eea/volto-hero-block/commit/d560dcb580755767d43d7848f182b420552c1894)]
+- improve the quality [dobri1408 - [`d6bf215`](https://github.com/eea/volto-hero-block/commit/d6bf21563f6e1e423f1c730f5e5409cfc724c240)]
+- Update Edit.jsx [dobri1408 - [`2c31ecd`](https://github.com/eea/volto-hero-block/commit/2c31ecd5fd896e5f0a43f4a689dbb60a36c39431)]
+- fix cypress test [dobri1408 - [`c24f627`](https://github.com/eea/volto-hero-block/commit/c24f627de259623cf27cdcde703667d4e510ce8b)]
+- fix unit tests [dobri1408 - [`ad6e98f`](https://github.com/eea/volto-hero-block/commit/ad6e98fe433f815a692139d5a06f669c485422ad)]
+- fix unit tests [dobri1408 - [`7c007a6`](https://github.com/eea/volto-hero-block/commit/7c007a63c4a14a9230a4e59a3877e9494a241656)]
+- trigger tests [dobri1408 - [`0f51440`](https://github.com/eea/volto-hero-block/commit/0f514401ccd93e90053009427735acc9d8ef4ef7)]
+- mock react-router-dom [dobri1408 - [`f6a33ab`](https://github.com/eea/volto-hero-block/commit/f6a33ab4142fe25f890d186f09162d3c6ea8c68d)]
+- fix eslint [dobri1408 - [`89483de`](https://github.com/eea/volto-hero-block/commit/89483dee93c172e14b8a89e71bd112a27d3d5a90)]
+- fi problems with the bacward compatibility [dobri1408 - [`5915149`](https://github.com/eea/volto-hero-block/commit/59151498b7601f2e1de959916cee504b702c9cb1)]
+- use blockform and renderblocks [dobri1408 - [`61994d0`](https://github.com/eea/volto-hero-block/commit/61994d0044e212e89dbec1ac25f13a56b42f8f82)]
+- fix multiline hero bug [dobri1408 - [`25b26d5`](https://github.com/eea/volto-hero-block/commit/25b26d562121b59ff5120ea8caefaab014885889)]
+### [5.5.0](https://github.com/eea/volto-hero-block/compare/5.4.6...5.5.0) - 19 February 2024
+
+#### :house: Internal changes
+
+- chore: package.json [Alin Voinea - [`3e83746`](https://github.com/eea/volto-hero-block/commit/3e8374664edaf5847c7290cf63b648c5b2d3e716)]
+
+#### :hammer_and_wrench: Others
+
+- Release 5.5.0 [alin - [`a81f788`](https://github.com/eea/volto-hero-block/commit/a81f788f54102a770b5e50cf5d7cfc6506278adf)]
+- Don't need this as props, they're not passed to the editor, don't lie about this [Tiberiu Ichim - [`cc434c5`](https://github.com/eea/volto-hero-block/commit/cc434c5764a53a238e53f9be693af432af854ec5)]
+- test: fix eslint errors [kreafox - [`5dd4d30`](https://github.com/eea/volto-hero-block/commit/5dd4d3071a68c0240f9f2c9defea0959621a275e)]
+- Allow multiline editing of hero block [Tiberiu Ichim - [`373d1a0`](https://github.com/eea/volto-hero-block/commit/373d1a0d243b8e0b3df31f2a51a3c5df62f48214)]
+- Allow multiline editing of hero block [Tiberiu Ichim - [`b674ca5`](https://github.com/eea/volto-hero-block/commit/b674ca589502a81aaf6abed75dbf8b83ac1731fb)]
+- fix ESlint [Teodor - [`1439495`](https://github.com/eea/volto-hero-block/commit/14394952ef587f71be8b2c762c7e19698d8a55e4)]
+- test: Update jest,Jenkinsfile,lint to volto-addons-template PR30 [valentinab25 - [`de6a206`](https://github.com/eea/volto-hero-block/commit/de6a206bed9afd53d97f5e6d70e2391ccc01f0f1)]
 ### [5.4.6](https://github.com/eea/volto-hero-block/compare/5.4.5...5.4.6) - 27 November 2023
 
 #### :rocket: New Features
@@ -16,16 +66,9 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Refactor automated testing [valentinab25 - [`df8242c`](https://github.com/eea/volto-hero-block/commit/df8242c62eb8c706c3854f6bb4a6984932463571)]
 
 #### :hammer_and_wrench: Others
 
-- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`4ea90f6`](https://github.com/eea/volto-hero-block/commit/4ea90f6a23c92fe631ee6025dbe5ee27ec030665)]
-- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`6e9d7f5`](https://github.com/eea/volto-hero-block/commit/6e9d7f593363e08f519ab8296aef229ed2682113)]
-- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`067fa27`](https://github.com/eea/volto-hero-block/commit/067fa27ee26d1d348d5ce1b089ea9931d9f32589)]
-- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`0f6a259`](https://github.com/eea/volto-hero-block/commit/0f6a259fc73db97a7a8af69a808421191b146629)]
-- test: [JENKINS] Improve cypress time [valentinab25 - [`c1c72f4`](https://github.com/eea/volto-hero-block/commit/c1c72f4b54a84521f200682b230bba60e6920a70)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`65744c9`](https://github.com/eea/volto-hero-block/commit/65744c9b2b0944d2aff90fc56485f10390810d1c)]
 ### [5.4.5](https://github.com/eea/volto-hero-block/compare/5.4.4...5.4.5) - 19 October 2023
 
 ### [5.4.4](https://github.com/eea/volto-hero-block/compare/5.4.3...5.4.4) - 19 October 2023
@@ -65,14 +108,12 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - test: add unit tests for Hero, Edit, helpers, hooks - refs #254313 [ana-oprea - [`89b39af`](https://github.com/eea/volto-hero-block/commit/89b39afe7ad5ce94d341482be91ab55e2c1a31ed)]
 - i18n: Add en [Alin Voinea - [`9cdb7f1`](https://github.com/eea/volto-hero-block/commit/9cdb7f1ff9d81dade3d91551b53cf7200f08937e)]
 - test: Update Makefile and docker-compose to align it with Jenkinsfile [valentinab25 - [`0fe0d91`](https://github.com/eea/volto-hero-block/commit/0fe0d91fe9c43d10574990e9b163ffc49fe5bee7)]
-- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`b1d1446`](https://github.com/eea/volto-hero-block/commit/b1d14467bcde28023b2831235928db1f328d6b0a)]
 ### [5.4.1](https://github.com/eea/volto-hero-block/compare/5.4.0...5.4.1) - 24 July 2023
 
 ### [5.4.0](https://github.com/eea/volto-hero-block/compare/5.3.1...5.4.0) - 12 June 2023
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Deprecate circularity website [valentinab25 - [`395db48`](https://github.com/eea/volto-hero-block/commit/395db484f73c2dd2c56233c120a9620340f17d0b)]
 
 #### :hammer_and_wrench: Others
 
@@ -93,7 +134,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - put return statement [Dobricean Ioan Dorian - [`8eff5fd`](https://github.com/eea/volto-hero-block/commit/8eff5fdf977fcbb8cc952d3f45b577b02ca59cb9)]
 - change name and refactor to be more efficent [Dobricean Ioan Dorian - [`ff24145`](https://github.com/eea/volto-hero-block/commit/ff2414542833998ef282376de3fbda8698287849)]
 - stop-image-disappear over and over [Dobricean Ioan Dorian - [`c5b6f54`](https://github.com/eea/volto-hero-block/commit/c5b6f545ac422d95b8d802349aa4cf27af820829)]
-- Add Sonarqube tag using industry-frontend addons list [EEA Jenkins - [`3d38dd0`](https://github.com/eea/volto-hero-block/commit/3d38dd09a36525bda448f67a6d218bc7690a4cc3)]
 ### [5.3.0](https://github.com/eea/volto-hero-block/compare/5.2.0...5.3.0) - 27 March 2023
 
 #### :rocket: New Features
@@ -132,11 +172,9 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix onScreen hook error #16 from eea/fix-onscreen-hook [ichim-david - [`9123541`](https://github.com/eea/volto-hero-block/commit/91235413f423d7e6c4788d70b687b3ed5d4884b4)]
 - no need for comments [andreiggr - [`a14f9c3`](https://github.com/eea/volto-hero-block/commit/a14f9c3bdddfa22e6b4bbc8318f0ca5bdc9c2d38)]
 - fix hook [andreiggr - [`f7fae73`](https://github.com/eea/volto-hero-block/commit/f7fae73007f79af2f06da1d9b72a53ad86fef4ac)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`6b78fc0`](https://github.com/eea/volto-hero-block/commit/6b78fc044a933ab9b4b4694901aa26628ef0a836)]
 - eslint [andreiggr - [`68451b7`](https://github.com/eea/volto-hero-block/commit/68451b725420015fbd5b695e97b8742988d49913)]
 - lazy load huge img on first 10px [andreiggr - [`67dc7d3`](https://github.com/eea/volto-hero-block/commit/67dc7d3475188d692e053032c2639dd1a585c029)]
 - lazy load huge bgimage wip [andreiggr - [`86e45ec`](https://github.com/eea/volto-hero-block/commit/86e45ece842f1cd7452920dffa3a9b4aea945f56)]
-- Add Sonarqube tag using ims-frontend addons list [EEA Jenkins - [`87cbb38`](https://github.com/eea/volto-hero-block/commit/87cbb383290a168f85703573670e17f4e1ed7747)]
 ## [4.0.0](https://github.com/eea/volto-hero-block/compare/3.0.1...4.0.0) - 7 February 2023
 
 #### :nail_care: Enhancements
@@ -162,7 +200,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`ab85c7b`](https://github.com/eea/volto-hero-block/commit/ab85c7bd5bd1e3aec95e02f9b4d026b1203d5739)]
 ## [3.0.0](https://github.com/eea/volto-hero-block/compare/2.1.0...3.0.0) - 22 December 2022
 
 #### :rocket: New Features
@@ -171,11 +208,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`f06f58c`](https://github.com/eea/volto-hero-block/commit/f06f58c7cd4cfc15a03208e9c7a4e31fe2eba2f6)]
-- Add Sonarqube tag using climate-energy-frontend addons list [EEA Jenkins - [`20e5bcb`](https://github.com/eea/volto-hero-block/commit/20e5bcb3c4dd538595741928319c3204c5d18f8c)]
 - Cosmetics [Alin Voinea - [`9dac70c`](https://github.com/eea/volto-hero-block/commit/9dac70c0a3bea8e188ede9123f4f99de8e0f6987)]
 - test(Jenkins): Run tests and cypress with latest canary @plone/volto [Alin Voinea - [`2d4005f`](https://github.com/eea/volto-hero-block/commit/2d4005f0f31b121e1b7d2e94414f3dff92ec1a16)]
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`2931fcc`](https://github.com/eea/volto-hero-block/commit/2931fccbee5f8e117e5ae9095ba57e63e465ddb3)]
 ### [2.1.0](https://github.com/eea/volto-hero-block/compare/2.0.0...2.1.0) - 12 December 2022
 
 #### :bug: Bug Fixes
@@ -184,12 +218,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using bise-frontend addons list [EEA Jenkins - [`93be4f9`](https://github.com/eea/volto-hero-block/commit/93be4f96fb72cacfc25f9b058cb379d80060ee13)]
-- yarn 3 [Alin Voinea - [`8e2dccd`](https://github.com/eea/volto-hero-block/commit/8e2dccd47cbef3c0871407baa376ce61c540c754)]
-- Add Sonarqube tag using marine-frontend addons list [EEA Jenkins - [`6bc3af3`](https://github.com/eea/volto-hero-block/commit/6bc3af35b4edf07971d1b0ce1648965e8d6e3bc0)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`d7dbbd2`](https://github.com/eea/volto-hero-block/commit/d7dbbd21277dd76bf59d91a4dc8e022b2a6ff99c)]
-- Add Sonarqube tag using demo-kitkat-frontend addons list [EEA Jenkins - [`3c1f0d6`](https://github.com/eea/volto-hero-block/commit/3c1f0d6e7f8e5318aee3413ec3687d8492376f9d)]
-- Add Sonarqube tag using forests-frontend addons list [EEA Jenkins - [`843017a`](https://github.com/eea/volto-hero-block/commit/843017aa7dbea71cc7888663496e352d287440b4)]
 ## [2.0.0](https://github.com/eea/volto-hero-block/compare/1.0.0...2.0.0) - 16 November 2022
 
 #### :nail_care: Enhancements
@@ -199,7 +227,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - test(estlint): Fix .project.eslintrc.js [Alin Voinea - [`b8f0971`](https://github.com/eea/volto-hero-block/commit/b8f0971b21a5334d40c1b8f5103cea61d9ffe6f1)]
-- Add Sonarqube tag using circularity-frontend addons list [EEA Jenkins - [`581dedf`](https://github.com/eea/volto-hero-block/commit/581dedf07410ef2ca09e6ddaa05fbf176400adbb)]
 ## [1.0.0](https://github.com/eea/volto-hero-block/compare/0.2.0...1.0.0) - 28 October 2022
 
 #### :nail_care: Enhancements
@@ -211,7 +238,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Remove cypress.json [Alin Voinea - [`593bdf2`](https://github.com/eea/volto-hero-block/commit/593bdf207ca4fd3f2393117b6f64a44727881ad0)]
 - test(cypress): Upgrade to Cypress 10 / Razzle 4 [Alin Voinea - [`edd48a5`](https://github.com/eea/volto-hero-block/commit/edd48a5c13824bce5e03e46790f1890656b340d8)]
 - Cleanup [Alin Voinea - [`9d72ee7`](https://github.com/eea/volto-hero-block/commit/9d72ee7a06d1c6fed46586d30bb85eae39e670bf)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`95986d0`](https://github.com/eea/volto-hero-block/commit/95986d0b8fd5c3cbb9e6da9059f71e066a8e171b)]
 ### [0.2.0](https://github.com/eea/volto-hero-block/compare/0.1.4...0.2.0) - 6 July 2022
 
 #### :bug: Bug Fixes
@@ -250,7 +276,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Update slate footnote support [Miu Razvan - [`c1522b4`](https://github.com/eea/volto-hero-block/commit/c1522b4164dbe6de01771d211d7e0bf3009f44d4)]
 - Use justify content for text and button as well [Miu Razvan - [`08599cc`](https://github.com/eea/volto-hero-block/commit/08599cc45546d9b349128c4f8ce9c01318385811)]
 - Add dependencies [Miu Razvan - [`30e2881`](https://github.com/eea/volto-hero-block/commit/30e2881a2a97a899e7f4cc614a0405c300ac6fee)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`b415422`](https://github.com/eea/volto-hero-block/commit/b41542285edd29440a324b101a4dbae9334830bf)]
 ### 0.1.0 - 10 June 2022
 
 #### :hammer_and_wrench: Others

package/README.md

@@ -26,6 +26,16 @@ Enhanced Hero Block [Volto](https://github.com/plone/volto) add-on
 
 This version requires: `@plone/volto >= 16.0.0.alpha.46` (schemaEnhancer / addStyling).
 
+### Upgrading to 6.x
+
+Starting with version `6.0.0` we have the following breaking changes from version `5.x.x`:
+
+1. Removed inner `div` that was used to add `quoted-wrapper` class.
+   This `class` is now added on the main `div` alongside the other `block` options.
+2. Block is using `BlocksForm` to add more than one `Slate` blocks. 
+This is useful in case you have to add some sub titles or extra paragraphs inside the `Hero block`. The default `Slate` tag is still `h2` but you can change it using the rich text options toolbar.
+
+
 ## Getting started
 
 ### Try volto-hero-block with Docker

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,18 +11,24 @@ 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',
+    '^.+\\.ts(x)?$': 'ts-jest',
     '^.+\\.(png)$': 'jest-file',
     '^.+\\.(jpg)$': 'jest-file',
     '^.+\\.(svg)$': './node_modules/@plone/volto/jest-svgsystem-transform.js',
@@ -33,4 +41,9 @@ module.exports = {
       statements: 5,
     },
   },
+  ...(process.env.JEST_USE_SETUP === 'ON' && {
+    setupFilesAfterEnv: [
+      '<rootDir>/node_modules/@eeacms/volto-hero-block/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-hero-block",
-  "version": "5.4.6",
+  "version": "6.0.0",
   "description": "@eeacms/volto-hero-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -27,7 +27,9 @@
     "@cypress/code-coverage": "^3.10.0",
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "dotenv": "^16.3.2",
     "husky": "^8.0.3",
+    "ts-jest": "^26.4.2",
     "lint-staged": "^14.0.1",
     "md5": "^2.3.0"
   },

package/src/components/Blocks/Hero/Edit.jsx

@@ -1,25 +1,22 @@
-import React from 'react';
+import React, { useState } from 'react';
 import cx from 'classnames';
-import { connect } from 'react-redux';
 import isFunction from 'lodash/isFunction';
 import { Icon } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
+import { BlocksForm } from '@plone/volto/components';
+import EditBlockWrapper from '@plone/volto/components/manage/Blocks/Block/EditBlockWrapper';
+import { v4 as uuid } from 'uuid';
+import '@eeacms/volto-hero-block/components/Blocks/Hero/edit.css';
+
+import { isEmpty } from 'lodash';
 import {
   BlockDataForm,
   SidebarPortal,
   UniversalLink,
 } from '@plone/volto/components';
 import { BodyClass } from '@plone/volto/helpers';
-import SlateEditor from '@plone/volto-slate/editor/SlateEditor';
-import { handleKey } from '@plone/volto-slate/blocks/Text/keyboard';
-import {
-  uploadContent,
-  saveSlateBlockSelection,
-} from '@plone/volto-slate/actions';
-import {
-  createSlateHeader,
-  getFieldURL,
-} from '@eeacms/volto-hero-block/helpers';
+
+import { getFieldURL } from '@eeacms/volto-hero-block/helpers';
 import { HeroBlockSchema } from './schema';
 import Copyright from './Copyright';
 import Hero from './Hero';
@@ -40,18 +37,22 @@ const Metadata = ({ buttonLabel, inverted, styles, ...props }) => {
   );
 };
 
-const Edit = (props) => {
-  const { slate } = config.settings;
+export default function Edit(props) {
+  const id = uuid();
+  const [selectedBlock, setSelectedBlock] = useState(id);
   const {
     data = {},
     block = null,
-    selected = false,
-    index,
+    selected,
     properties,
     onChangeBlock,
-    onSelectBlock,
+    onChangeField,
+    pathname,
+    metadata = null,
+    setSidebarTab,
   } = props;
-  const { text, copyright, copyrightIcon, copyrightPosition } = data;
+  const { copyright, copyrightIcon, copyrightPosition } = data;
+
   const copyrightPrefix = config.blocks.blocksConfig.hero.copyrightPrefix || '';
   const schema = React.useMemo(() => {
     if (isFunction(HeroBlockSchema)) {
@@ -60,66 +61,120 @@ const Edit = (props) => {
     return HeroBlockSchema;
   }, [props]);
 
-  const withBlockProperties = React.useCallback(
-    (editor) => {
-      editor.getBlockProps = () => props;
-      return editor;
-    },
-    [props],
-  );
+  const blockState = {};
+  const data_blocks = data?.data?.blocks;
 
-  const handleFocus = React.useCallback(() => {
-    if (!selected) {
-      onSelectBlock(block);
-    }
-  }, [onSelectBlock, selected, block]);
+  if (data?.text || isEmpty(data_blocks)) {
+    let dataWithoutText = { ...data };
+    if (dataWithoutText) delete dataWithoutText.text;
+
+    onChangeBlock(block, {
+      ...dataWithoutText,
+      data: data?.text
+        ? {
+            blocks: {
+              [id]: {
+                '@type': 'slate',
+                value: data.text,
+                plaintext: data.text?.[0].children?.[0].text,
+              },
+            },
+            blocks_layout: { items: [id] },
+          }
+        : {
+            blocks: {
+              [id]: {
+                '@type': 'slate',
+                value: [{ type: 'h2', children: [{ text: '' }] }],
+                plaintext: '',
+              },
+            },
+            blocks_layout: { items: [id] },
+          },
+    });
+  }
 
   return (
     <>
       <BodyClass className="with-hero-block" />
-      <Hero {...data}>
-        <Hero.Text {...data}>
-          <SlateEditor
-            index={index}
-            properties={properties}
-            extensions={slate.textblockExtensions}
-            renderExtensions={[withBlockProperties]}
-            value={createSlateHeader(text)}
-            onChange={(text) => {
-              onChangeBlock(block, {
-                ...data,
-                text,
-              });
-            }}
-            block={block}
-            onFocus={handleFocus}
-            onKeyDown={handleKey}
-            selected={selected}
-            placeholder="Add text..."
-            slateSettings={slate}
-          />
-        </Hero.Text>
-        <Hero.Meta {...data}>
-          <Metadata {...data} />
-        </Hero.Meta>
-        {copyright ? (
-          <Copyright copyrightPosition={copyrightPosition}>
-            <Copyright.Prefix>{copyrightPrefix}</Copyright.Prefix>
-            <Copyright.Icon>
-              <Icon className={copyrightIcon} />
-            </Copyright.Icon>
-            <Copyright.Text>{copyright}</Copyright.Text>
-          </Copyright>
-        ) : (
-          ''
-        )}
-      </Hero>
-
+      <div
+        className="hero-edit-wrapper"
+        role="presentation"
+        onClick={(e) => {
+          const className = e.target.getAttribute('class');
+          if (className && className.includes('hero')) {
+            setSelectedBlock(id);
+            setSidebarTab(1);
+          }
+        }}
+      >
+        <Hero {...data}>
+          <Hero.Text {...data}>
+            <BlocksForm
+              metadata={properties || metadata}
+              properties={data.data || {}}
+              manage={false}
+              allowedBlocks={'slate'}
+              selectedBlock={selectedBlock}
+              title={data.placeholder}
+              onSelectBlock={(s, e) => {
+                setSelectedBlock(s);
+              }}
+              onChangeFormData={(newFormData) => {
+                onChangeBlock(block, {
+                  ...data,
+                  data: newFormData,
+                });
+              }}
+              onChangeField={(id, value) => {
+                if (['blocks', 'blocks_layout'].indexOf(id) > -1) {
+                  blockState[id] = value;
+                  onChangeBlock(block, {
+                    ...data,
+                    data: {
+                      ...data.data,
+                      ...blockState,
+                    },
+                  });
+                } else {
+                  onChangeField(id, value);
+                }
+              }}
+              pathname={pathname}
+            >
+              {({ draginfo }, editBlock, blockProps) => (
+                <EditBlockWrapper
+                  draginfo={draginfo}
+                  blockProps={blockProps}
+                  disabled={data.disableInnerButtons}
+                >
+                  {editBlock}
+                </EditBlockWrapper>
+              )}
+            </BlocksForm>
+          </Hero.Text>
+          <Hero.Meta {...data}>
+            <Metadata {...data} />
+          </Hero.Meta>
+          {copyright ? (
+            <Copyright copyrightPosition={copyrightPosition}>
+              <Copyright.Prefix>{copyrightPrefix}</Copyright.Prefix>
+              <Copyright.Icon>
+                <Icon className={copyrightIcon} />
+              </Copyright.Icon>
+              <Copyright.Text>{copyright}</Copyright.Text>
+            </Copyright>
+          ) : (
+            ''
+          )}
+        </Hero>
+      </div>
       <SidebarPortal selected={selected}>
         <BlockDataForm
           block={block}
           schema={schema}
           title={schema.title}
+          onChangeBlock={props.onChangeBlock}
           onChangeField={(id, value) => {
             onChangeBlock(block, {
               ...data,
@@ -131,21 +186,4 @@ const Edit = (props) => {
       </SidebarPortal>
     </>
   );
-};
-
-export default connect(
-  (state, props) => {
-    const blockId = props.block;
-    return {
-      defaultSelection: blockId
-        ? state.slate_block_selections?.[blockId]
-        : null,
-      uploadRequest: state.upload_content?.[props.block]?.upload || {},
-      uploadedContent: state.upload_content?.[props.block]?.data || {},
-    };
-  },
-  {
-    uploadContent,
-    saveSlateBlockSelection, // needed as editor blockProps
-  },
-)(Edit);
+}

package/src/components/Blocks/Hero/Edit.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';
 import Edit from './Edit';
@@ -7,25 +7,33 @@ import config from '@plone/volto/registry';
 import '@testing-library/jest-dom/extend-expect';
 
 const mockStore = configureStore([]);
-
-jest.mock('@plone/volto-slate/editor/SlateEditor', () => {
+const observe = jest.fn();
+const unobserve = jest.fn();
+jest.mock('@plone/volto/components', () => {
   return {
     __esModule: true,
-    default: ({ placeholder, children, onChange, onFocus }) => (
-      <div
-        onChange={(target) => onChange(target)}
-        onFocus={() => onFocus()}
-        id="test"
-      >
+    BlocksForm: ({ placeholder, children, onChange, onFocus }) => (
+      <div id="test">
         <div>{placeholder}</div>
         {children}
       </div>
     ),
+    SidebarPortal: ({ children }) => <div>{children}</div>,
+    BlockDataForm: () => <div></div>,
+    UniversalLink: () => <div></div>,
+    RenderBlocks: () => <div></div>,
   };
 });
+jest.mock('react-router-dom', () => ({
+  useLocation: jest.fn().mockReturnValue({
+    pathname: '/test-jest',
+    search: '',
+    hash: '',
+    state: null,
+    key: 'test-jest',
+  }),
+}));
 
-const observe = jest.fn();
-const unobserve = jest.fn();
 window.IntersectionObserver = jest.fn((callback) => ({
   observe,
   unobserve,
@@ -60,7 +68,7 @@ describe('Edit component', () => {
   it('renders without crashing', () => {
     const { container } = render(
       <Provider store={store}>
-        <Edit />
+        <Edit onChangeBlock={() => {}} onSelectBlock={() => {}} />
       </Provider>,
     );
     expect(container).toBeTruthy();
@@ -82,35 +90,13 @@ describe('Edit component', () => {
 
     const { container } = render(
       <Provider store={store}>
-        <Edit data={data} />
+        <Edit data={data} onChangeBlock={() => {}} />
       </Provider>,
     );
 
     expect(container.querySelector('#test')).toBeInTheDocument();
   });
 
-  it('calls onFocus when SlateEditor is focused', () => {
-    config.blocks = {
-      blocksConfig: {
-        hero: {
-          copyrightPrefix: 'Test Prefix',
-          schema: () => ({
-            title: 'Hero',
-          }),
-        },
-      },
-    };
-    const onSelectBlock = jest.fn();
-    const { getByText } = render(
-      <Provider store={store}>
-        <Edit onSelectBlock={onSelectBlock} />
-      </Provider>,
-    );
-
-    fireEvent.focus(getByText('Add text...'));
-    expect(onSelectBlock).toHaveBeenCalled();
-  });
-
   it('renders without copyrightPrefix', () => {
     config.blocks = {
       blocksConfig: {
@@ -124,7 +110,7 @@ describe('Edit component', () => {
     const onSelectBlock = jest.fn();
     render(
       <Provider store={store}>
-        <Edit onSelectBlock={onSelectBlock} />
+        <Edit onSelectBlock={onSelectBlock} onChangeBlock={() => {}} />
       </Provider>,
     );
   });

package/src/components/Blocks/Hero/Hero.jsx

@@ -35,6 +35,7 @@ function Hero({
 
   const bgImgRef = React.useRef();
   const onScreen = useFirstVisited(bgImgRef);
+
   return (
     <div
       className={cx(
@@ -101,9 +102,10 @@ Hero.Text = ({ children, quoted, styles }) => {
         'hero-block-text',
         `color-fg-${textVariant}`,
         `text-${textAlign}`,
+        quoted ? 'quoted-wrapper' : '',
       )}
     >
-      <div className={quoted ? 'quoted-wrapper' : ''}>{children}</div>
+      {children}
     </div>
   );
 };

package/src/components/Blocks/Hero/View.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import cx from 'classnames';
 import { Icon } from 'semantic-ui-react';
-import { UniversalLink } from '@plone/volto/components';
+import { UniversalLink, RenderBlocks } from '@plone/volto/components';
 import { BodyClass } from '@plone/volto/helpers';
+import { useLocation } from 'react-router-dom';
 import Hero from './Hero';
 import Copyright from './Copyright';
 import { serializeText, getFieldURL } from '@eeacms/volto-hero-block/helpers';
@@ -25,14 +26,27 @@ const Metadata = ({ buttonLabel, inverted, styles, ...props }) => {
 };
 
 const View = (props) => {
+  const location = useLocation();
   const { data = {} } = props;
   const { text, copyright, copyrightIcon, copyrightPosition } = data;
+
+  const metadata = props.metadata || props.properties;
   const copyrightPrefix = config.blocks.blocksConfig.hero.copyrightPrefix || '';
   return (
     <React.Fragment>
       <BodyClass className="with-hero-block" />
       <Hero {...data}>
-        <Hero.Text {...data}>{serializeText(text)}</Hero.Text>
+        <Hero.Text {...data}>
+          {data?.data ? (
+            <RenderBlocks
+              location={location}
+              metadata={metadata}
+              content={data?.data || {}}
+            />
+          ) : (
+            serializeText(text)
+          )}
+        </Hero.Text>
         <Hero.Meta {...data}>
           <Metadata {...data} />
         </Hero.Meta>

package/src/components/Blocks/Hero/View.test.jsx

@@ -9,7 +9,30 @@ window.IntersectionObserver = jest.fn((callback) => ({
   observe,
   unobserve,
 }));
-
+jest.mock('@plone/volto/components', () => {
+  return {
+    __esModule: true,
+    BlocksForm: ({ placeholder, children, onChange, onFocus }) => (
+      <div id="test">
+        <div>{placeholder}</div>
+        {children}
+      </div>
+    ),
+    SidebarPortal: ({ children }) => <div>{children}</div>,
+    BlockDataForm: () => <div></div>,
+    UniversalLink: () => <div></div>,
+    RenderBlocks: () => <div></div>,
+  };
+});
+jest.mock('react-router-dom', () => ({
+  useLocation: jest.fn().mockReturnValue({
+    pathname: '/test-jest',
+    search: '',
+    hash: '',
+    state: null,
+    key: 'test-jest',
+  }),
+}));
 describe('View Component', () => {
   it('renders view component', () => {
     config.blocks = {

package/src/components/Blocks/Hero/edit.css

@@ -0,0 +1,5 @@
+.hero-block .block-add-button,
+.hero-block .drag.handle.wrapper,
+.hero-block .block-editor-slate:first-of-type .delete-button {
+  display: none !important;
+}

package/src/components/Blocks/Hero/index.js

@@ -22,7 +22,7 @@ const intl = createIntl(
   cache,
 );
 
-export default (config) => {
+const applyConfig = (config) => {
   config.blocks.blocksConfig.hero = {
     id: 'hero',
     title: 'Hero',
@@ -50,3 +50,5 @@ export default (config) => {
 
   return config;
 };
+
+export default applyConfig;

package/src/components/Blocks/Hero/schema.js

@@ -89,11 +89,7 @@ export const HeroBlockSchema = () => {
         description: (
           <>
             Ex. ri-copyright-line. See{' '}
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://remixicon.com/"
-            >
+            <a target="_blank" rel="noopener" href="https://remixicon.com/">
               Remix Icon set
             </a>
           </>

package/.project.eslintrc.js

@@ -1,48 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-const projectRootPath = fs.existsSync('./project')
-  ? fs.realpathSync('./project')
-  : fs.realpathSync('./../../../');
-const packageJson = require(path.join(projectRootPath, 'package.json'));
-const jsConfig = require(path.join(projectRootPath, 'jsconfig.json')).compilerOptions;
-
-const pathsConfig = jsConfig.paths;
-
-let voltoPath = path.join(projectRootPath, 'node_modules/@plone/volto');
-
-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 => [
-  o,
-  reg.packages[o].modulePath,
-]);
-
-
-module.exports = {
-  extends: `${projectRootPath}/node_modules/@plone/volto/.eslintrc`,
-  settings: {
-    'import/resolver': {
-      alias: {
-        map: [
-          ['@plone/volto', '@plone/volto/src'],
-          ...addonAliases,
-          ['@package', `${__dirname}/src`],
-          ['~', `${__dirname}/src`],
-        ],
-        extensions: ['.js', '.jsx', '.json'],
-      },
-      'babel-plugin-root-import': {
-        rootPathSuffix: 'src',
-      },
-    },
-  },
-};
-