@plone/volto 15.0.0-alpha.1 → 15.0.0-alpha.5

package/.github/workflows/{core-sandbox.yml → coresandbox.yml}

@@ -59,7 +59,7 @@ jobs:
       #     CI: true
 
       - name: Cypress Core Sandbox Acceptance Tests
-        run: yarn ci:cypress:run:core-sandbox
+        run: yarn ci:cypress:run:coresandbox
 
       # Upload Cypress screenshots
       - uses: actions/upload-artifact@v1

package/.storybook/main.js

@@ -5,7 +5,7 @@ const fileLoaderFinder = makeLoaderFinder('file-loader');
 
 const projectRootPath = path.resolve('.');
 const createAddonsLoader = require('../create-addons-loader');
-const lessPlugin = require('../webpack-less-plugin');
+const lessPlugin = require('../webpack-plugins/webpack-less-plugin');
 
 const createConfig = require('../node_modules/razzle/config/createConfigAsync.js');
 const razzleConfig = require(path.join(projectRootPath, 'razzle.config.js'));
@@ -31,14 +31,8 @@ const SVGLOADER = {
 };
 
 module.exports = {
-  stories: [
-    '../src/**/*.stories.mdx',
-    '../src/**/*.stories.@(js|jsx|ts|tsx)'
-  ],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-  ],
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   webpackFinal: async (config, { configType }) => {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
     // You can change the configuration based on that.

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # Change Log
 
+## 15.0.0-alpha.5 (2022-02-16)
+
+### Breaking
+
+- Lazyload draftjs library. See the upgrade guide on how that impacts you, in case you have extended the rich text editor configuration @tiberiuichim @kreafox
+  See https://docs.voltocms.com/upgrade-guide/ for more information.
+
+### Feature
+
+- Add `cookiesExpire` value to config to control the cookie expiration @giuliaghisini
+
+## 15.0.0-alpha.4 (2022-02-16)
+
+### Breaking
+
+- Markup change in `LinkView` component.
+- Rename `core-sandbox` to `coresandbox` for sake of consistency @sneridagh
+- Extend the original intent and rename `RAZZLE_TESTING_ADDONS` to `ADDONS`. @sneridagh
+  See https://docs.voltocms.com/upgrade-guide/ for more information.
+
+### Internal
+
+- House cleanup, remove some unused files in the root @sneridagh
+- Move Webpack related files to `webpack-plugins` folder @sneridagh
+- Remove unused Dockerfiles @sneridagh
+- Update Docker compose to latest images and best practices @sneridagh
+
+## 15.0.0-alpha.3 (2022-02-11)
+
+### Bugfix
+
+- Fix the upload image in contents view @iFlameing
+- add "view" id to contact-form container for main content skiplink @ThomasKindermann
+- Fix loading indicator positioning on Login form submit @sneridagh
+
+### Internal
+
+- Add new RawMaterial Volto websites in production @nzambello
+
+## 15.0.0-alpha.2 (2022-02-10)
+
+### Breaking
+
+- Language Switcher no longer takes care of the change of the language on the Redux Store. This responsability has been unified in the `MultilingualRedirector` @sneridagh
+
+### Bugfix
+
+- Prevent the MultilingualRedirector to force 4 content load when switching the language @reebalazs
+
+### Documentation
+
+- Upgrade Guide i18n: Make clear what's project, what add-on. @ksuess
+
 ## 15.0.0-alpha.1 (2022-02-09)
 
 ### Bugfix
@@ -421,6 +474,8 @@ See https://docs.voltocms.com/upgrade-guide/ for more information about all the
 - Update to plone.restapi 8.16.2 (revert missing_value PR) @sneridagh
 - Update all requirements and the reasoning behind them in builds @sneridagh
 - Update Plone version in api backend to 5.2.6. Update README and cleanup @fredvd
+- Various local development build improvements @rpatterson
+- Document CI changelog verifier failure details that mislead contributors
 - Document CI changelog verifier failure details that mislead contributors @rpatterson
 - Updated italian translation @pnicolli
 

package/README.md

@@ -161,6 +161,7 @@ Volto is actively developed since 2017 and used in production since 2018 on the
 - [EEA-IMSv4](https://www.eea.europa.eu/ims) (EEA Indicator Management System v4. Developed by [Eau de web](https://eaudeweb.ro) for the European Environmental Agency, 2021)
 - [Memori](https://memori.ai/en) (Corporate website for Memori, startup specialising in technologies applied to the experience of memory through the development of Artificial Intelligences. Developed by [RawMaterial](https://rawmaterial.it/en), 2021)
 - [TwinCreator](https://twincreator.com/en) (TwinCreator allows you to design and train multiple AI’s through simple conversation through NLP. Developed by [RawMaterial](https://rawmaterial.it/en), 2021)
+- [MemoryTwin](https://memorytwin.com/en) (Product website, MemoryTwin allows you to create your personal artificial intelligence, able to remember and speak. Developed by [RawMaterial](https://rawmaterial.it/en), 2022)
 
 Please create a new [issue](https://github.com/plone/volto/issues/new) or [pull request](https://github.com/plone/volto/pulls) to add your Volto-site here!
 

package/addon-registry.js

@@ -124,7 +124,7 @@ class AddonConfigurationRegistry {
 
     this.initDevelopmentPackages();
     this.initPublishedPackages();
-    this.initTestingPackages();
+    this.initAddonsFromEnvVar();
 
     this.dependencyGraph = buildDependencyGraph(
       this.resultantMergedAddons,
@@ -203,15 +203,16 @@ class AddonConfigurationRegistry {
     }
   }
 
-  initTestingPackages() {
-    if (process.env.RAZZLE_TESTING_ADDONS) {
-      process.env.RAZZLE_TESTING_ADDONS.split(',').forEach(
-        this.initTestingPackage.bind(this),
+  initAddonsFromEnvVar() {
+    if (process.env.ADDONS) {
+      process.env.ADDONS.split(',').forEach(
+        this.initAddonFromEnvVar.bind(this),
       );
     }
   }
 
-  initTestingPackage(name) {
+  initAddonFromEnvVar(name) {
+    // First lookup in the packages folder, local to the root (either vanilla Volto or project)
     const normalizedAddonName = name.split(':')[0];
     const testingPackagePath = `${this.projectRootPath}/packages/${normalizedAddonName}/src`;
     if (fs.existsSync(testingPackagePath)) {
@@ -233,6 +234,10 @@ class AddonConfigurationRegistry {
         this.packages[normalizedAddonName] || {},
         pkg,
       );
+    } else {
+      // Fallback in case the addon is released (not in packages folder nor in development, but in node_modules)
+      const normalizedAddonName = name.split(':')[0];
+      this.initPublishedPackage(normalizedAddonName);
     }
   }
 
@@ -385,14 +390,14 @@ class AddonConfigurationRegistry {
   }
 
   /**
-   * Allow testing packages addons to customize Volto and other addons.
+   * Allow packages from addons set in env vars to customize Volto and other addons.
    *
-   * Same as the above one, but specific for Volto testing addons
+   * Same as the above one, but specific for Volto addons coming from env vars
    */
-  getTestingAddonCustomizationPaths() {
+  getAddonsFromEnvVarCustomizationPaths() {
     let aliases = {};
-    if (process.env.RAZZLE_TESTING_ADDONS) {
-      process.env.RAZZLE_TESTING_ADDONS.split(',').forEach((addon) => {
+    if (process.env.ADDONS) {
+      process.env.ADDONS.split(',').forEach((addon) => {
         const normalizedAddonName = addon.split(':')[0];
         const testingPackagePath = `${this.projectRootPath}/packages/${normalizedAddonName}/src`;
         if (fs.existsSync(testingPackagePath)) {

package/docker-compose.yml

@@ -1,22 +1,27 @@
 version: '3.3'
 services:
 
-  plone:
+  backend:
+    image: plone/plone-backend:6.0.0a3
+    # Plone 5.2 series can be used too
+    # image: plone/plone-backend:5.2.7
     ports:
       - '8080:8080'
     environment:
       - SITE=Plone
-      - ADDONS=plone.volto
+      - 'ADDONS=plone.restapi==8.21.0 plone.volto==4.0.0a3 plone.rest==2.0.0a2 plone.app.iterate==4.0.2 plone.app.vocabularies==4.3.0'
       - 'PROFILES=plone.volto:default-homepage'
-    image: plone
 
   frontend:
+    image: 'plone/plone-frontend:latest'
     ports:
       - '3000:3000'
-    image: 'plone/volto:slim'
-    # Use just 'plone/volto' image and set the env var in case you want to
-    # use any released Volto addons
-    # image: 'plone/volto'
-    # environment:
-    #   - INTERNAL_API_PATH=plone:8080/Plone
-    #   - ADDONS="volto-slate:asDefault"
+    restart: always
+    environment:
+      # These are needed in a Docker environment since the
+      # routing needs to be amended. You can point to the
+      # internal network alias.
+      RAZZLE_INTERNAL_API_PATH: http://backend:8080/Plone
+      RAZZLE_DEV_PROXY_API_PATH: http://backend:8080/Plone
+    depends_on:
+      - backend

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2022-02-07T09:39:49.063Z\n"
+"POT-Creation-Date: 2022-02-11T10:44:54.533Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "MIME-Version: 1.0\n"

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "15.0.0-alpha.1",
+  "version": "15.0.0-alpha.5",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -52,12 +52,12 @@
     "patches": "/bin/bash patches/patchit.sh > /dev/null 2>&1 ||true",
     "deduplicate": "yarn-deduplicate yarn.lock",
     "cypress:open": "NODE_ENV=production CYPRESS_API=plone cypress open",
-    "cypress:open:core-sandbox": "NODE_ENV=production CYPRESS_API=plone cypress open --config integrationFolder='cypress/tests/core-sandbox'",
+    "cypress:open:coresandbox": "NODE_ENV=production CYPRESS_API=plone cypress open --config integrationFolder='cypress/tests/coresandbox'",
     "cypress:open:multilingual": "NODE_ENV=production CYPRESS_API=plone cypress open --config integrationFolder='cypress/tests/multilingual'",
     "cypress:open:workingCopy": "NODE_ENV=production CYPRESS_API=plone cypress open --config integrationFolder='cypress/tests/workingCopy'",
     "cypress:open:guillotina": "NODE_ENV=production CYPRESS_API=guillotina cypress open --config-file cypress/cypress.guillotina.json",
     "cypress:run": "NODE_ENV=production CYPRESS_API=plone CYPRESS_RETRIES=2 cypress run",
-    "cypress:run:core-sandbox": "NODE_ENV=production CYPRESS_API=plone cypress run --config integrationFolder='cypress/tests/core-sandbox'",
+    "cypress:run:coresandbox": "NODE_ENV=production CYPRESS_API=plone cypress run --config integrationFolder='cypress/tests/coresandbox'",
     "cypress:run:multilingual": "NODE_ENV=production CYPRESS_API=plone cypress run --config integrationFolder='cypress/tests/multilingual'",
     "cypress:run:workingCopy": "NODE_ENV=production CYPRESS_API=plone cypress run --config integrationFolder='cypress/tests/workingCopy'",
     "cypress:run:guillotina": "NODE_ENV=production CYPRESS_API=guillotina cypress run --config integrationFolder='cypress/tests/guillotina'",
@@ -65,19 +65,19 @@
     "cy:test:fixture:setup": "node cypress/support/reset-fixture.js",
     "cy:test:fixture:teardown": "node cypress/support/reset-fixture.js teardown",
     "ci:start-api-plone": "make test-acceptance-server",
-    "ci:start-api-plone-core-sandbox": "make test-acceptance-server-coresandbox",
+    "ci:start-api-plone-coresandbox": "make test-acceptance-server-coresandbox",
     "ci:start-api-plone-multilingual": "make test-acceptance-server-multilingual",
     "ci:start-api-plone-workingCopy": "make test-acceptance-server-workingcopy",
     "ci:start-api-guillotina": "make test-acceptance-guillotina",
     "ci:start-frontend": "RAZZLE_API_PATH=http://localhost:55001/plone yarn build && start-test start:prod http://localhost:3000 cypress:run",
-    "ci:start-frontend-core-sandbox": "RAZZLE_TESTING_ADDONS=core-sandbox RAZZLE_API_PATH=http://localhost:55001/plone yarn build && start-test start:prod http://localhost:3000 cypress:run:core-sandbox",
-    "ci:start-frontend-multilingual": "RAZZLE_TESTING_ADDONS=core-sandbox:multilingualFixture RAZZLE_API_PATH=http://localhost:55001/plone yarn build && start-test start:prod http://localhost:3000 cypress:run:multilingual",
-    "ci:start-frontend-workingCopy": "RAZZLE_TESTING_ADDONS=core-sandbox:workingCopyFixture RAZZLE_API_PATH=http://localhost:55001/plone yarn build && start-test start:prod http://localhost:3000 cypress:run:workingCopy",
+    "ci:start-frontend-coresandbox": "ADDONS=coresandbox RAZZLE_API_PATH=http://localhost:55001/plone yarn build && start-test start:prod http://localhost:3000 cypress:run:coresandbox",
+    "ci:start-frontend-multilingual": "ADDONS=coresandbox:multilingualFixture RAZZLE_API_PATH=http://localhost:55001/plone yarn build && start-test start:prod http://localhost:3000 cypress:run:multilingual",
+    "ci:start-frontend-workingCopy": "ADDONS=coresandbox:workingCopyFixture RAZZLE_API_PATH=http://localhost:55001/plone yarn build && start-test start:prod http://localhost:3000 cypress:run:workingCopy",
     "ci:start-project-frontend": "cd my-volto-app && RAZZLE_API_PATH=http://localhost:55001/plone yarn build && start-test start:prod http://localhost:3000 'cd .. && yarn cypress:run'",
-    "ci:start-frontend-guillotina": "RAZZLE_TESTING_ADDONS=volto-guillotina RAZZLE_API_PATH=http://localhost:8081/db/web RAZZLE_LEGACY_TRAVERSE=true yarn build && start-test start:prod http://localhost:3000 cypress:run:guillotina",
+    "ci:start-frontend-guillotina": "ADDONS=volto-guillotina RAZZLE_API_PATH=http://localhost:8081/db/web RAZZLE_LEGACY_TRAVERSE=true yarn build && start-test start:prod http://localhost:3000 cypress:run:guillotina",
     "ci:cypress:run": "start-test ci:start-api-plone http-get://localhost:55001/plone ci:start-frontend",
     "ci:cypress:project:run": "start-test ci:start-api-plone http-get://localhost:55001/plone ci:start-project-frontend",
-    "ci:cypress:run:core-sandbox": "start-test ci:start-api-plone-core-sandbox http-get://localhost:55001/plone ci:start-frontend-core-sandbox",
+    "ci:cypress:run:coresandbox": "start-test ci:start-api-plone-coresandbox http-get://localhost:55001/plone ci:start-frontend-coresandbox",
     "ci:cypress:run:multilingual": "start-test ci:start-api-plone-multilingual http-get://localhost:55001/plone ci:start-frontend-multilingual",
     "ci:cypress:run:workingCopy": "start-test ci:start-api-plone-workingCopy http-get://localhost:55001/plone ci:start-frontend-workingCopy",
     "ci:cypress:run:guillotina": "start-test ci:start-api-guillotina http-get://localhost:8081 ci:start-frontend-guillotina",

package/pyvenv.cfg

@@ -0,0 +1,3 @@
+home = /opt/homebrew/Cellar/python@3.8/3.8.12_1/bin
+include-system-site-packages = false
+version = 3.8.12

package/razzle.config.js

@@ -5,8 +5,8 @@ const nodeExternals = require('webpack-node-externals');
 const LoadablePlugin = require('@loadable/webpack-plugin');
 const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
 const fs = require('fs');
-const RootResolverPlugin = require('./webpack-root-resolver');
-const RelativeResolverPlugin = require('./webpack-relative-resolver');
+const RootResolverPlugin = require('./webpack-plugins/webpack-root-resolver');
+const RelativeResolverPlugin = require('./webpack-plugins/webpack-relative-resolver');
 const createAddonsLoader = require('./create-addons-loader');
 const AddonConfigurationRegistry = require('./addon-registry');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
@@ -181,13 +181,13 @@ const defaultModify = ({
   // Disabling the ESlint pre loader
   config.module.rules.splice(0, 1);
 
-  let testingAddons = [];
-  if (process.env.RAZZLE_TESTING_ADDONS) {
-    testingAddons = process.env.RAZZLE_TESTING_ADDONS.split(',');
+  let addonsFromEnvVar = [];
+  if (process.env.ADDONS) {
+    addonsFromEnvVar = process.env.ADDONS.split(',');
   }
 
   const addonsLoaderPath = createAddonsLoader(
-    [...registry.getAddonDependencies(), ...testingAddons],
+    [...registry.getAddonDependencies(), ...addonsFromEnvVar],
     registry.packages,
   );
 
@@ -197,8 +197,8 @@ const defaultModify = ({
   ];
 
   config.resolve.alias = {
-    ...registry.getTestingAddonCustomizationPaths(),
     ...registry.getAddonCustomizationPaths(),
+    ...registry.getAddonsFromEnvVarCustomizationPaths(),
     ...registry.getProjectCustomizationPaths(),
     ...config.resolve.alias,
     '../../theme.config$': `${projectRootPath}/theme/theme.config`,
@@ -237,8 +237,8 @@ const defaultModify = ({
     addonsAsExternals = registry.addonNames.map((addon) => new RegExp(addon));
   }
 
-  if (process.env.RAZZLE_TESTING_ADDONS) {
-    testingAddons.forEach((addon) => {
+  if (process.env.ADDONS) {
+    addonsFromEnvVar.forEach((addon) => {
       const normalizedAddonName = addon.split(':')[0];
       const p = fs.realpathSync(
         registry.packages[normalizedAddonName].modulePath,
@@ -275,10 +275,10 @@ const defaultModify = ({
 const addonExtenders = registry.getAddonExtenders().map((m) => require(m));
 
 const defaultPlugins = [
-  { object: require('./webpack-less-plugin')({ registry }) },
-  { object: require('./webpack-sentry-plugin') },
-  { object: require('./webpack-svg-plugin') },
-  { object: require('./webpack-bundle-analyze-plugin') },
+  { object: require('./webpack-plugins/webpack-less-plugin')({ registry }) },
+  { object: require('./webpack-plugins/webpack-sentry-plugin') },
+  { object: require('./webpack-plugins/webpack-svg-plugin') },
+  { object: require('./webpack-plugins/webpack-bundle-analyze-plugin') },
   { object: require('./jest-extender-plugin') },
 ];
 

package/src/actions/language/language.js

@@ -1,16 +1,21 @@
 import { updateIntl } from 'react-intl-redux';
 import { normalizeLanguageName } from '@plone/volto/helpers';
 import Cookies from 'universal-cookie';
+import config from '@plone/volto/registry';
 
 export function changeLanguageCookies(language) {
   const cookies = new Cookies();
 
   cookies.set('lang', normalizeLanguageName(language), {
-    expires: new Date((2 ** 31 - 1) * 1000),
+    expires: new Date(
+      new Date().getTime() + config.settings.cookieExpires * 1000,
+    ),
     path: '/',
   });
   cookies.set('I18N_LANGUAGE', normalizeLanguageName(language) || '', {
-    expires: new Date((2 ** 31 - 1) * 1000),
+    expires: new Date(
+      new Date().getTime() + config.settings.cookieExpires * 1000,
+    ),
     path: '/',
   });
 }

package/src/components/manage/AnchorPlugin/components/LinkButton/AddLinkForm.jsx

@@ -13,14 +13,13 @@ import {
   addAppURL,
   isInternalURL,
   flattenToAppURL,
+  URLUtils,
 } from '@plone/volto/helpers';
 
 import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
 import { Input, Form, Button } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import URLUtils from '@plone/volto/components/manage/AnchorPlugin/utils/URLUtils';
-
 import clearSVG from '@plone/volto/icons/clear.svg';
 import navTreeSVG from '@plone/volto/icons/nav.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';

package/src/components/manage/AnchorPlugin/components/LinkButton/index.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import EditorUtils from '../../utils/EditorUtils';
-import DraftEditorUtils from 'draft-js-plugins-utils';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import AddLinkForm from '@plone/volto/components/manage/AnchorPlugin/components/LinkButton/AddLinkForm';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 
@@ -26,6 +26,13 @@ class LinkButton extends Component {
     onOverrideContent: PropTypes.func.isRequired,
   };
 
+  constructor(props) {
+    super(props);
+
+    this.DraftEditorUtils = props.draftJsPluginsUtils.default;
+    this.EditorUtils = EditorUtils(props);
+  }
+
   static defaultProps = {
     placeholder: '',
   };
@@ -38,7 +45,7 @@ class LinkButton extends Component {
     e.preventDefault();
     e.stopPropagation();
     const { ownTheme, placeholder, onOverrideContent } = this.props;
-    const link = EditorUtils.getCurrentEntity(
+    const link = this.EditorUtils.getCurrentEntity(
       this.props.getEditorState(),
     )?.getData()?.url;
 
@@ -52,12 +59,14 @@ class LinkButton extends Component {
         onChangeBlock={() => {}}
         onClear={() => {
           this.props.setEditorState(
-            DraftEditorUtils.removeLinkAtSelection(this.props.getEditorState()),
+            this.DraftEditorUtils.removeLinkAtSelection(
+              this.props.getEditorState(),
+            ),
           );
         }}
         onChangeValue={(url) => {
           this.props.setEditorState(
-            DraftEditorUtils.createLinkAtSelection(
+            this.DraftEditorUtils.createLinkAtSelection(
               this.props.getEditorState(),
               url,
             ),
@@ -75,7 +84,7 @@ class LinkButton extends Component {
    */
   render() {
     const { theme } = this.props;
-    const hasLinkSelected = EditorUtils.hasEntity(
+    const hasLinkSelected = this.EditorUtils.hasEntity(
       this.props.getEditorState(),
       'LINK',
     );
@@ -114,4 +123,4 @@ class LinkButton extends Component {
   }
 }
 
-export default LinkButton;
+export default injectLazyLibs(['draftJs', 'draftJsPluginsUtils'])(LinkButton);

package/src/components/manage/AnchorPlugin/index.jsx

@@ -1,11 +1,10 @@
 import decorateComponentWithProps from 'decorate-component-with-props';
-import { EditorState, Modifier } from 'draft-js';
 
 import DefaultLink from './components/Link';
 import LinkButton from './components/LinkButton';
 import linkStrategy, { matchesEntityType } from './linkStrategy';
 
-function removeEntity(editorState) {
+function unboundRemoveEntity(editorState) {
   const contentState = editorState.getCurrentContent();
   const selectionState = editorState.getSelection();
   const startKey = selectionState.getStartKey();
@@ -30,13 +29,13 @@ function removeEntity(editorState) {
     },
   );
 
-  const newContentState = Modifier.applyEntity(
+  const newContentState = this.Modifier.applyEntity(
     contentState,
     entitySelection,
     null,
   );
 
-  const newEditorState = EditorState.push(
+  const newEditorState = this.EditorState.push(
     editorState,
     newContentState,
     'apply-entity',
@@ -49,7 +48,15 @@ export default (config = {}) => {
   // ToDo: Get rif of the remainings of having the original CSS modules
   const defaultTheme = {};
 
-  const { theme = defaultTheme, placeholder, Link, linkTarget } = config;
+  const {
+    theme = defaultTheme,
+    placeholder,
+    Link,
+    linkTarget,
+    libraries,
+  } = config;
+
+  const removeEntity = unboundRemoveEntity.bind(libraries);
 
   return {
     decorators: [

package/src/components/manage/AnchorPlugin/utils/EditorUtils.js

@@ -1,22 +1,23 @@
-import { RichUtils, EditorState } from 'draft-js';
-
-export default {
+export default ({ draftJs }) => ({
   createLinkAtSelection(editorState, url) {
     const contentState = editorState
       .getCurrentContent()
       .createEntity('LINK', 'MUTABLE', { url });
     const entityKey = contentState.getLastCreatedEntityKey();
-    const withLink = RichUtils.toggleLink(
+    const withLink = draftJs.RichUtils.toggleLink(
       editorState,
       editorState.getSelection(),
       entityKey,
     );
-    return EditorState.forceSelection(withLink, editorState.getSelection());
+    return draftJs.EditorState.forceSelection(
+      withLink,
+      editorState.getSelection(),
+    );
   },
 
   removeLinkAtSelection(editorState) {
     const selection = editorState.getSelection();
-    return RichUtils.toggleLink(editorState, selection, null);
+    return draftJs.RichUtils.toggleLink(editorState, selection, null);
   },
 
   getCurrentEntityKey(editorState) {
@@ -41,4 +42,4 @@ export default {
     const entity = this.getCurrentEntity(editorState);
     return entity && entity.getType() === entityType;
   },
-};
+});

package/src/components/manage/Blocks/Description/Edit.jsx

@@ -4,13 +4,12 @@
  */
 
 import React, { Component } from 'react';
-import { Map } from 'immutable';
+import { compose } from 'redux';
 import PropTypes from 'prop-types';
-import { stateFromHTML } from 'draft-js-import-html';
 import { isEqual } from 'lodash';
-import { Editor, DefaultDraftBlockRenderMap, EditorState } from 'draft-js';
 import { defineMessages, injectIntl } from 'react-intl';
 import cx from 'classnames';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import config from '@plone/volto/registry';
 
 const messages = defineMessages({
@@ -20,14 +19,6 @@ const messages = defineMessages({
   },
 });
 
-const blockRenderMap = Map({
-  unstyled: {
-    element: 'div',
-  },
-});
-
-const extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(blockRenderMap);
-
 /**
  * Edit description block class.
  * @class Edit
@@ -72,12 +63,29 @@ class Edit extends Component {
     super(props);
 
     if (!__SERVER__) {
+      const { Editor, EditorState, DefaultDraftBlockRenderMap } = props.draftJs;
+      const { Map } = props.immutableLib;
+
+      this.Editor = Editor;
+      this.EditorState = EditorState;
+      this.stateFromHTML = props.draftJsImportHtml.stateFromHTML;
+
+      const blockRenderMap = Map({
+        unstyled: {
+          element: 'div',
+        },
+      });
+
+      this.extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(
+        blockRenderMap,
+      );
+
       let editorState;
       if (props.properties && props.properties.description) {
-        const contentState = stateFromHTML(props.properties.description);
-        editorState = EditorState.createWithContent(contentState);
+        const contentState = this.stateFromHTML(props.properties.description);
+        editorState = this.EditorState.createWithContent(contentState);
       } else {
-        editorState = EditorState.createEmpty();
+        editorState = this.EditorState.createEmpty();
       }
       this.state = { editorState, focus: false };
     }
@@ -109,11 +117,11 @@ class Edit extends Component {
       this.props.properties.description !== nextProps.properties.description &&
       !this.state.focus
     ) {
-      const contentState = stateFromHTML(nextProps.properties.description);
+      const contentState = this.stateFromHTML(nextProps.properties.description);
       this.setState({
         editorState: nextProps.properties.description
-          ? EditorState.createWithContent(contentState)
-          : EditorState.createEmpty(),
+          ? this.EditorState.createWithContent(contentState)
+          : this.EditorState.createEmpty(),
       });
     }
 
@@ -163,6 +171,9 @@ class Edit extends Component {
     if (__SERVER__) {
       return <div />;
     }
+
+    const Editor = this.Editor;
+
     return (
       <div
         className={cx('block description', { selected: this.props.selected })}
@@ -171,7 +182,7 @@ class Edit extends Component {
           onChange={this.onChange}
           editorState={this.state.editorState}
           readOnly={!this.props.editable}
-          blockRenderMap={extendedBlockRenderMap}
+          blockRenderMap={this.extendedBlockRenderMap}
           handleReturn={() => {
             if (this.props.data?.disableNewBlocks) {
               return 'handled';
@@ -223,4 +234,7 @@ class Edit extends Component {
   }
 }
 
-export default injectIntl(Edit);
+export default compose(
+  injectLazyLibs(['draftJs', 'immutableLib', 'draftJsImportHtml']),
+  injectIntl,
+)(Edit);

package/src/components/manage/Blocks/Description/Edit.test.jsx

@@ -5,6 +5,12 @@ import { Provider } from 'react-intl-redux';
 
 import Edit from './Edit';
 
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
 const mockStore = configureStore();
 
 global.__SERVER__ = true; // eslint-disable-line no-underscore-dangle