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

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # 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

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "15.0.0-alpha.4",
+  "version": "15.0.0-alpha.5",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"

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

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

@@ -7,15 +7,13 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
-import { Map } from 'immutable';
 import { readAsDataURL } from 'promise-file-reader';
 import { Button, Dimmer, Loader, Message } from 'semantic-ui-react';
-import { stateFromHTML } from 'draft-js-import-html';
-import { Editor, DefaultDraftBlockRenderMap, EditorState } from 'draft-js';
 import { isEqual } from 'lodash';
 import { defineMessages, injectIntl } from 'react-intl';
 import cx from 'classnames';
 
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { flattenToAppURL, getBaseUrl } from '@plone/volto/helpers';
 import { createContent } from '@plone/volto/actions';
 import { Icon, SidebarPortal, LinkMore } from '@plone/volto/components';
@@ -51,32 +49,12 @@ const messages = defineMessages({
   },
 });
 
-const blockTitleRenderMap = Map({
-  unstyled: {
-    element: 'h1',
-  },
-});
-
-const blockDescriptionRenderMap = Map({
-  unstyled: {
-    element: 'div',
-  },
-});
-
-const extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(
-  blockTitleRenderMap,
-);
-
-const extendedDescripBlockRenderMap = DefaultDraftBlockRenderMap.merge(
-  blockDescriptionRenderMap,
-);
-
 /**
  * Edit image block class.
  * @class Edit
  * @extends Component
  */
-class Edit extends Component {
+class EditComponent extends Component {
   /**
    * Property types.
    * @property {Object} propTypes Property types.
@@ -126,7 +104,32 @@ class Edit extends Component {
       uploading: false,
     };
 
+    const { Map } = this.props.immutableLib;
+
     if (!__SERVER__) {
+      const { DefaultDraftBlockRenderMap, EditorState } = props.draftJs;
+      const { stateFromHTML } = props.draftJsImportHtml;
+
+      const blockTitleRenderMap = Map({
+        unstyled: {
+          element: 'h1',
+        },
+      });
+
+      const blockDescriptionRenderMap = Map({
+        unstyled: {
+          element: 'div',
+        },
+      });
+
+      this.extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(
+        blockTitleRenderMap,
+      );
+
+      this.extendedDescripBlockRenderMap = DefaultDraftBlockRenderMap.merge(
+        blockDescriptionRenderMap,
+      );
+
       let titleEditorState;
       let descriptionEditorState;
       if (props.data && props.data.title) {
@@ -187,6 +190,9 @@ class Edit extends Component {
       });
     }
 
+    const { EditorState } = this.props.draftJs;
+    const { stateFromHTML } = this.props.draftJsImportHtml;
+
     if (
       nextProps.data.title &&
       this.props.data.title !== nextProps.data.title &&
@@ -299,6 +305,7 @@ class Edit extends Component {
     if (__SERVER__) {
       return <div />;
     }
+    const { Editor } = this.props.draftJs;
     const placeholder =
       this.props.data.placeholder ||
       this.props.intl.formatMessage(messages.placeholder);
@@ -374,7 +381,7 @@ class Edit extends Component {
                 readOnly={!this.props.editable}
                 onChange={this.onChangeTitle}
                 editorState={this.state.titleEditorState}
-                blockRenderMap={extendedBlockRenderMap}
+                blockRenderMap={this.extendedBlockRenderMap}
                 handleReturn={() => true}
                 placeholder={this.props.intl.formatMessage(messages.title)}
                 blockStyleFn={() => 'title-editor'}
@@ -416,7 +423,7 @@ class Edit extends Component {
                 readOnly={!this.props.editable}
                 onChange={this.onChangeDescription}
                 editorState={this.state.descriptionEditorState}
-                blockRenderMap={extendedDescripBlockRenderMap}
+                blockRenderMap={this.extendedDescripBlockRenderMap}
                 handleReturn={() => true}
                 placeholder={this.props.intl.formatMessage(
                   messages.description,
@@ -460,6 +467,10 @@ class Edit extends Component {
   }
 }
 
+const Edit = injectLazyLibs(['draftJs', 'immutableLib', 'draftJsImportHtml'])(
+  EditComponent,
+);
+
 export default compose(
   injectIntl,
   connect(

package/src/components/manage/Blocks/HeroImageLeft/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(),
+);
+
 global.__SERVER__ = true; // eslint-disable-line no-underscore-dangle
 
 const mockStore = configureStore();

package/src/components/manage/Blocks/Table/Cell.jsx

@@ -5,19 +5,20 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Editor from 'draft-js-plugins-editor';
-import { convertFromRaw, EditorState, RichUtils } from 'draft-js';
-import createInlineToolbarPlugin from 'draft-js-inline-toolbar-plugin';
-import isSoftNewlineEvent from 'draft-js/lib/isSoftNewlineEvent';
 import { includes } from 'lodash';
 import config from '@plone/volto/registry';
 
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import loadable from '@loadable/component';
+
+const Editor = loadable(() => import('draft-js-plugins-editor'));
+
 /**
  * Edit text cell class.
  * @class Cell
  * @extends Component
  */
-class Cell extends Component {
+class CellComponent extends Component {
   /**
    * Property types.
    * @property {Object} propTypes Property types.
@@ -54,12 +55,16 @@ class Cell extends Component {
   constructor(props) {
     super(props);
 
+    const { EditorState, convertFromRaw } = props.draftJs;
+    const createInlineToolbarPlugin = props.draftJsInlineToolbarPlugin.default;
+
     if (!__SERVER__) {
+      this.draftConfig = config.settings.richtextEditorSettings(props);
       let editorState;
       editorState = EditorState.createWithContent(convertFromRaw(props.value));
 
       const inlineToolbarPlugin = createInlineToolbarPlugin({
-        structure: config.settings.richTextEditorInlineToolbarButtons,
+        structure: this.draftConfig.richTextEditorInlineToolbarButtons,
       });
 
       this.state = {
@@ -125,7 +130,8 @@ class Cell extends Component {
     }
 
     const { InlineToolbar } = this.state.inlineToolbarPlugin;
-    const { settings } = config;
+    const isSoftNewlineEvent = this.props.draftJsLibIsSoftNewlineEvent.default;
+    const { RichUtils } = this.props.draftJs;
 
     return (
       <div>
@@ -135,11 +141,11 @@ class Cell extends Component {
           editorState={this.state.editorState}
           plugins={[
             this.state.inlineToolbarPlugin,
-            ...settings.richTextEditorPlugins,
+            ...this.draftConfig.richTextEditorPlugins,
           ]}
-          blockRenderMap={settings.extendedBlockRenderMap}
-          blockStyleFn={settings.blockStyleFn}
-          customStyleMap={settings.customStyleMap}
+          blockRenderMap={this.draftConfig.extendedBlockRenderMap}
+          blockStyleFn={this.draftConfig.blockStyleFn}
+          customStyleMap={this.draftConfig.customStyleMap}
           handleReturn={(e) => {
             if (isSoftNewlineEvent(e)) {
               this.onChange(
@@ -155,10 +161,10 @@ class Cell extends Component {
                 anchorKey,
               );
               const blockType = currentContentBlock.getType();
-              if (!includes(settings.listBlockTypes, blockType)) {
+              if (!includes(this.draftConfig.listBlockTypes, blockType)) {
                 this.props.onSelectBlock(
                   this.props.onAddBlock(
-                    settings.defaultBlockType,
+                    this.draftConfig.defaultBlockType,
                     this.props.index + 1,
                   ),
                 );
@@ -178,4 +184,24 @@ class Cell extends Component {
   }
 }
 
-export default Cell;
+export const Cell = injectLazyLibs([
+  'draftJs',
+  'draftJsBlockBreakoutPlugin',
+  'draftJsCreateBlockStyleButton',
+  'draftJsCreateInlineStyleButton',
+  'draftJsFilters',
+  'draftJsImportHtml',
+  'draftJsInlineToolbarPlugin',
+  'draftJsLibIsSoftNewlineEvent',
+  'immutableLib',
+])(CellComponent);
+
+const Preloader = (props) => {
+  const [loaded, setLoaded] = React.useState(false);
+  React.useEffect(() => {
+    Editor.load().then(() => setLoaded(true));
+  }, []);
+  return loaded ? <Cell {...props} /> : null;
+};
+
+export default Preloader;

package/src/components/manage/Blocks/Table/Cell.test.jsx

@@ -1,9 +1,15 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import Cell from './Cell';
+import { Cell } from './Cell';
 
 global.__SERVER__ = true; // eslint-disable-line no-underscore-dangle
 
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
 test('renders a cell component', () => {
   const component = renderer.create(
     <Cell onChange={() => {}} onSelectCell={() => {}} />,

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

@@ -5,15 +5,16 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { compose } from 'redux';
 import { map, remove } from 'lodash';
 import { Button, Segment, Table, Form } from 'semantic-ui-react';
-import { convertToRaw } from 'draft-js';
 import { Portal } from 'react-portal';
 import cx from 'classnames';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
 import Cell from '@plone/volto/components/manage/Blocks/Table/Cell';
 import { Field, Icon } from '@plone/volto/components';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import rowBeforeSVG from '@plone/volto/icons/row-before.svg';
 import rowAfterSVG from '@plone/volto/icons/row-after.svg';
@@ -208,6 +209,9 @@ class Edit extends Component {
     this.toggleBasic = this.toggleBasic.bind(this);
     this.toggleCelled = this.toggleCelled.bind(this);
     this.toggleStriped = this.toggleStriped.bind(this);
+
+    const { convertToRaw } = props.draftJs;
+    this.convertToRaw = convertToRaw;
   }
 
   /**
@@ -261,7 +265,7 @@ class Edit extends Component {
    */
   onChangeCell(row, cell, editorState) {
     const table = { ...this.props.data.table };
-    table.rows[row].cells[cell].value = convertToRaw(
+    table.rows[row].cells[cell].value = this.convertToRaw(
       editorState.getCurrentContent(),
     );
     this.props.onChangeBlock(this.props.block, {
@@ -740,4 +744,4 @@ class Edit extends Component {
   }
 }
 
-export default injectIntl(Edit);
+export default compose(injectLazyLibs(['draftJs']), injectIntl)(Edit);

package/src/components/manage/Blocks/Table/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();
 
 test('renders an edit table block component', () => {

package/src/components/manage/Blocks/Table/View.jsx

@@ -37,8 +37,8 @@ const View = ({ data }) =>
                 {cell.value && cell.value.blocks && cell.value.blocks[0].text
                   ? redraft(
                       cell.value,
-                      config.settings.ToHTMLRenderers,
-                      config.settings.ToHTMLOptions,
+                      config.settings.richtextViewSettings.ToHTMLRenderers,
+                      config.settings.richtextViewSettings.ToHTMLOptions,
                     )
                   : '\u00A0'}
               </Table.Cell>