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

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

@@ -5,18 +5,19 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Editor from 'draft-js-plugins-editor';
-import { convertFromRaw, convertToRaw, EditorState, RichUtils } from 'draft-js';
-import createInlineToolbarPlugin from 'draft-js-inline-toolbar-plugin';
+import { compose } from 'redux';
 
-import isSoftNewlineEvent from 'draft-js/lib/isSoftNewlineEvent';
 import { defineMessages, injectIntl } from 'react-intl';
 import { includes, isEqual } from 'lodash';
-import { filterEditorState } from 'draftjs-filters';
 import config from '@plone/volto/registry';
 
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { BlockChooserButton } from '@plone/volto/components';
 
+import loadable from '@loadable/component';
+
+const Editor = loadable(() => import('draft-js-plugins-editor'));
+
 const messages = defineMessages({
   text: {
     id: 'Type text…',
@@ -29,7 +30,7 @@ const messages = defineMessages({
  * @class Edit
  * @extends Component
  */
-class Edit extends Component {
+export class EditComponent extends Component {
   /**
    * Property types.
    * @property {Object} propTypes Property types.
@@ -77,6 +78,13 @@ class Edit extends Component {
   constructor(props) {
     super(props);
 
+    const { settings } = config;
+
+    this.draftConfig = settings.richtextEditorSettings(props);
+
+    const { EditorState, convertFromRaw } = props.draftJs;
+    const createInlineToolbarPlugin = props.draftJsInlineToolbarPlugin.default;
+
     if (!__SERVER__) {
       let editorState;
       if (props.data && props.data.text) {
@@ -88,7 +96,7 @@ class Edit extends Component {
       }
 
       const inlineToolbarPlugin = createInlineToolbarPlugin({
-        structure: config.settings.richTextEditorInlineToolbarButtons,
+        structure: this.draftConfig.richTextEditorInlineToolbarButtons,
       });
 
       this.state = {
@@ -128,6 +136,7 @@ class Edit extends Component {
         //nothing is selected, move focus to end
         // See https://github.com/draft-js-plugins/draft-js-plugins/issues/800
         setTimeout(this.node.focus, 0);
+        const { EditorState } = this.props.draftJs;
 
         this.setState({
           editorState: EditorState.moveFocusToEnd(this.state.editorState),
@@ -137,6 +146,7 @@ class Edit extends Component {
   }
 
   componentDidUpdate(prevProps) {
+    const { convertToRaw, EditorState, convertFromRaw } = this.props.draftJs;
     if (
       !isEqual(this.props.data, prevProps.data) &&
       !isEqual(
@@ -179,6 +189,9 @@ class Edit extends Component {
     const shouldFilterPaste =
       editorState.getLastChangeType() === 'insert-fragment';
 
+    const { convertToRaw } = this.props.draftJs;
+    const { filterEditorState } = this.props.draftJsFilters;
+
     if (
       !isEqual(
         convertToRaw(editorState.getCurrentContent()),
@@ -217,6 +230,8 @@ class Edit extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
+    // console.log('draft config', this.draftConfig);
+
     if (__SERVER__) {
       return <div />;
     }
@@ -229,7 +244,10 @@ class Edit extends Component {
     const disableNewBlocks =
       this.props.data?.disableNewBlocks || this.props.detached;
     const { InlineToolbar } = this.state.inlineToolbarPlugin;
-    const { settings } = config;
+    // const { settings } = config;
+
+    const isSoftNewlineEvent = this.props.draftJsLibIsSoftNewlineEvent.default;
+    const { RichUtils } = this.props.draftJs;
 
     return (
       <>
@@ -239,11 +257,12 @@ class Edit extends Component {
           editorState={this.state.editorState}
           plugins={[
             this.state.inlineToolbarPlugin,
-            ...settings.richTextEditorPlugins,
+            // ...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}
           placeholder={placeholder}
           handleReturn={(e) => {
             if (isSoftNewlineEvent(e)) {
@@ -260,7 +279,7 @@ class Edit extends Component {
                 anchorKey,
               );
               const blockType = currentContentBlock.getType();
-              if (!includes(settings.listBlockTypes, blockType)) {
+              if (!includes(this.draftConfig.listBlockTypes, blockType)) {
                 this.props.onSelectBlock(
                   this.props.onAddBlock(
                     config.settings.defaultBlockType,
@@ -329,4 +348,27 @@ class Edit extends Component {
   }
 }
 
-export default injectIntl(Edit);
+export const Edit = compose(
+  injectIntl,
+  injectLazyLibs([
+    'draftJs',
+    'draftJsLibIsSoftNewlineEvent',
+    'draftJsFilters',
+    'draftJsInlineToolbarPlugin',
+    'draftJsBlockBreakoutPlugin',
+    'draftJsCreateInlineStyleButton',
+    'draftJsCreateBlockStyleButton',
+    'immutableLib',
+    // TODO: add all plugin dependencies, also in Wysiwyg and Cell
+  ]),
+)(EditComponent);
+
+const Preloader = (props) => {
+  const [loaded, setLoaded] = React.useState(false);
+  React.useEffect(() => {
+    Editor.load().then(() => setLoaded(true));
+  }, []);
+  return loaded ? <Edit {...props} /> : null;
+};
+
+export default Preloader;

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

@@ -3,12 +3,18 @@ import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
-import Edit from './Edit';
+import { Edit } from './Edit';
 
 const mockStore = configureStore();
 
 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 an edit text block component', () => {
   const store = mockStore({
     intl: {

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

@@ -17,8 +17,8 @@ const View = ({ data }) =>
   data.text ? (
     redraft(
       data.text,
-      config.settings.ToHTMLRenderers,
-      config.settings.ToHTMLOptions,
+      config.settings.richtextViewSettings.ToHTMLRenderers,
+      config.settings.richtextViewSettings.ToHTMLOptions,
     )
   ) : (
     <br />

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

@@ -4,12 +4,11 @@
  */
 
 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 { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import config from '@plone/volto/registry';
 
 const messages = defineMessages({
@@ -19,14 +18,6 @@ const messages = defineMessages({
   },
 });
 
-const blockRenderMap = Map({
-  unstyled: {
-    element: 'h1',
-  },
-});
-
-const extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(blockRenderMap);
-
 /**
  * Edit title block class.
  * @class Edit
@@ -71,6 +62,19 @@ class Edit extends Component {
     super(props);
 
     if (!__SERVER__) {
+      const { Map } = props.immutableLib;
+      const { DefaultDraftBlockRenderMap, EditorState } = props.draftJs;
+      const { stateFromHTML } = props.draftJsImportHtml;
+
+      const blockRenderMap = Map({
+        unstyled: {
+          element: 'h1',
+        },
+      });
+
+      this.extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(
+        blockRenderMap,
+      );
       let editorState;
       if (props.properties && props.properties.title) {
         const contentState = stateFromHTML(props.properties.title);
@@ -117,6 +121,9 @@ class Edit extends Component {
       this.props.properties.title !== nextProps.properties.title &&
       !this.state.focus
     ) {
+      const { stateFromHTML } = this.props.draftJsImportHtml;
+      const { EditorState } = this.props.draftJs;
+
       const contentState = stateFromHTML(nextProps.properties.title);
       this.setState({
         editorState: nextProps.properties.title
@@ -156,6 +163,8 @@ class Edit extends Component {
       return <div />;
     }
 
+    const { Editor } = this.props.draftJs;
+
     const placeholder =
       this.props.data.placeholder ||
       this.props.intl.formatMessage(messages.title);
@@ -165,7 +174,7 @@ class Edit extends Component {
         readOnly={!this.props.editable}
         onChange={this.onChange}
         editorState={this.state.editorState}
-        blockRenderMap={extendedBlockRenderMap}
+        blockRenderMap={this.extendedBlockRenderMap}
         handleReturn={() => {
           if (this.props.data.disableNewBlocks) {
             return 'handled';
@@ -208,4 +217,7 @@ class Edit extends Component {
   }
 }
 
-export default injectIntl(Edit);
+export default compose(
+  injectLazyLibs(['draftJs', 'immutableLib', 'draftJsImportHtml']),
+  injectIntl,
+)(Edit);

package/src/components/manage/Blocks/Title/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/Sidebar/Sidebar.jsx

@@ -18,6 +18,8 @@ import { setSidebarTab } from '@plone/volto/actions';
 import expandSVG from '@plone/volto/icons/left-key.svg';
 import collapseSVG from '@plone/volto/icons/right-key.svg';
 
+import config from '@plone/volto/registry';
+
 const messages = defineMessages({
   document: {
     id: 'Document',
@@ -98,7 +100,9 @@ class Sidebar extends Component {
   onToggleExpanded() {
     const { cookies } = this.props;
     cookies.set('sidebar_expanded', !this.state.expanded, {
-      expires: new Date((2 ** 31 - 1) * 1000),
+      expires: new Date(
+        new Date().getTime() + config.settings.cookieExpires * 1000,
+      ),
       path: '/',
     });
     this.setState({

package/src/components/manage/Toolbar/Toolbar.jsx

@@ -232,7 +232,9 @@ class Toolbar extends Component {
   handleShrink = () => {
     const { cookies } = this.props;
     cookies.set('toolbar_expanded', !this.state.expanded, {
-      expires: new Date((2 ** 31 - 1) * 1000),
+      expires: new Date(
+        new Date().getTime() + config.settings.cookieExpires * 1000,
+      ),
       path: '/',
     });
     this.setState(

package/src/components/manage/UniversalLink/UniversalLink.jsx

@@ -7,8 +7,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { useSelector } from 'react-redux';
-import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers/Url/Url';
-import URLUtils from '@plone/volto/components/manage/AnchorPlugin/utils/URLUtils';
+import {
+  flattenToAppURL,
+  isInternalURL,
+  URLUtils,
+} from '@plone/volto/helpers/Url/Url';
 import { matchPath } from 'react-router';
 
 import config from '@plone/volto/registry';

package/src/components/manage/Widgets/DatetimeWidget.jsx

@@ -178,7 +178,9 @@ export class DatetimeWidgetComponent extends Component {
   onFocusChange = ({ focused }) => this.setState({ focused });
 
   render() {
-    const { id, noPastDates, resettable, intl, reactDates } = this.props;
+    const { id, resettable, intl, reactDates, widgetOptions } = this.props;
+    const noPastDates =
+      this.props.noPastDates || widgetOptions?.pattern_options?.noPastDates;
     const moment = this.props.moment.default;
     const datetime = this.getInternalValue();
     const dateOnly = this.getDateOnly();

package/src/components/manage/Widgets/UrlWidget.jsx

@@ -12,11 +12,11 @@ import {
   addAppURL,
   isInternalURL,
   flattenToAppURL,
+  URLUtils,
 } from '@plone/volto/helpers';
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import navTreeSVG from '@plone/volto/icons/nav.svg';
-import URLUtils from '@plone/volto/components/manage/AnchorPlugin/utils/URLUtils';
 
 /** Widget to edit urls
  *

package/src/components/manage/Widgets/WysiwygWidget.jsx

@@ -6,16 +6,11 @@
 import React, { Component } from 'react';
 import ReactDOMServer from 'react-dom/server';
 import PropTypes from 'prop-types';
-import { Provider } from 'react-redux';
-import { connect } from 'react-redux';
+import { connect, Provider } from 'react-redux';
 import { compose } from 'redux';
-import Editor from 'draft-js-plugins-editor';
-import { stateFromHTML } from 'draft-js-import-html';
-import { convertToRaw, EditorState } from 'draft-js';
 import redraft from 'redraft';
 import { Form, Label, TextArea } from 'semantic-ui-react';
 import { map } from 'lodash';
-import createInlineToolbarPlugin from 'draft-js-inline-toolbar-plugin';
 import { defineMessages, injectIntl } from 'react-intl';
 import configureStore from 'redux-mock-store';
 import { MemoryRouter } from 'react-router-dom';
@@ -23,6 +18,11 @@ import config from '@plone/volto/registry';
 
 import { FormFieldWrapper } from '@plone/volto/components';
 
+import loadable from '@loadable/component';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
+const Editor = loadable(() => import('draft-js-plugins-editor'));
+
 const messages = defineMessages({
   default: {
     id: 'Default',
@@ -67,7 +67,7 @@ const messages = defineMessages({
  * ```
  *
  */
-class WysiwygWidget extends Component {
+class WysiwygWidgetComponent extends Component {
   /**
    * Property types.
    * @property {Object} propTypes Property types.
@@ -161,11 +161,17 @@ class WysiwygWidget extends Component {
   constructor(props) {
     super(props);
 
+    const { stateFromHTML } = props.draftJsImportHtml;
+    const { EditorState } = props.draftJs;
+    const createInlineToolbarPlugin = props.draftJsInlineToolbarPlugin.default;
+
+    this.draftConfig = config.settings.richtextEditorSettings(props);
+
     if (!__SERVER__) {
       let editorState;
       if (props.value && props.value.data) {
         const contentState = stateFromHTML(props.value.data, {
-          customBlockFn: config.settings.FromHTMLCustomBlockFn,
+          customBlockFn: this.draftConfig.FromHTMLCustomBlockFn,
         });
         editorState = EditorState.createWithContent(contentState);
       } else {
@@ -173,7 +179,7 @@ class WysiwygWidget extends Component {
       }
 
       const inlineToolbarPlugin = createInlineToolbarPlugin({
-        structure: config.settings.richTextEditorInlineToolbarButtons,
+        structure: this.draftConfig.richTextEditorInlineToolbarButtons,
       });
 
       this.state = { editorState, inlineToolbarPlugin };
@@ -220,7 +226,7 @@ class WysiwygWidget extends Component {
    * @returns {undefined}
    */
   onChange(editorState) {
-    const { settings } = config;
+    const { convertToRaw } = this.props.draftJs;
     this.setState({ editorState });
     const mockStore = configureStore();
 
@@ -240,8 +246,8 @@ class WysiwygWidget extends Component {
           <MemoryRouter>
             {redraft(
               convertToRaw(editorState.getCurrentContent()),
-              settings.ToHTMLRenderers,
-              settings.ToHTMLOptions,
+              config.settings.richtextViewSettings.ToHTMLRenderers,
+              config.settings.richtextViewSettings.ToHTMLOptions,
             )}
           </MemoryRouter>
         </Provider>,
@@ -288,7 +294,6 @@ class WysiwygWidget extends Component {
       );
     }
     const { InlineToolbar } = this.state.inlineToolbarPlugin;
-    const { settings } = config;
 
     return (
       <FormFieldWrapper {...this.props} className="wysiwyg">
@@ -302,12 +307,12 @@ class WysiwygWidget extends Component {
                 editorState={this.state.editorState}
                 plugins={[
                   this.state.inlineToolbarPlugin,
-                  ...settings.richTextEditorPlugins,
+                  ...this.draftConfig.richTextEditorPlugins,
                 ]}
                 placeholder={this.props.placeholder}
-                blockRenderMap={settings.extendedBlockRenderMap}
-                blockStyleFn={settings.blockStyleFn}
-                customStyleMap={settings.customStyleMap}
+                blockRenderMap={this.draftConfig.extendedBlockRenderMap}
+                blockStyleFn={this.draftConfig.blockStyleFn}
+                customStyleMap={this.draftConfig.customStyleMap}
               />
               {this.props.onChange && <InlineToolbar />}
             </>
@@ -320,12 +325,33 @@ class WysiwygWidget extends Component {
   }
 }
 
-export default compose(
+export const WysiwygWidget = compose(
   injectIntl,
+  injectLazyLibs([
+    'draftJs',
+    'draftJsBlockBreakoutPlugin',
+    'draftJsCreateBlockStyleButton',
+    'draftJsCreateInlineStyleButton',
+    'draftJsFilters',
+    'draftJsImportHtml',
+    'draftJsInlineToolbarPlugin',
+    'draftJsLibIsSoftNewlineEvent',
+    'immutableLib',
+  ]),
   connect(
     (state, props) => ({
       token: state.userSession.token,
     }),
     {},
   ),
-)(WysiwygWidget);
+)(WysiwygWidgetComponent);
+
+const Preloader = (props) => {
+  const [loaded, setLoaded] = React.useState(false);
+  React.useEffect(() => {
+    Editor.load().then(() => setLoaded(true));
+  }, []);
+  return loaded ? <WysiwygWidget {...props} /> : null;
+};
+
+export default Preloader;

package/src/components/manage/Widgets/WysiwygWidget.test.jsx

@@ -3,12 +3,18 @@ import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
-import WysiwygWidget from './WysiwygWidget';
+import { WysiwygWidget } from './WysiwygWidget';
 
 global.__SERVER__ = true; // eslint-disable-line no-underscore-dangle
 
 const mockStore = configureStore();
 
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
 test('renders a wysiwyg widget component', () => {
   const store = mockStore({
     intl: {

package/src/components/theme/View/LinkView.jsx

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
 import { Link } from 'react-router-dom';
 import { Container } from 'semantic-ui-react';
-import URLUtils from '@plone/volto/components/manage/AnchorPlugin/utils/URLUtils';
+import { URLUtils } from '@plone/volto/helpers';
 import { FormattedMessage } from 'react-intl';
 
 /**

package/src/components/theme/View/View.jsx

@@ -7,6 +7,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
+import { Redirect } from 'react-router-dom';
 import { Portal } from 'react-portal';
 import { injectIntl } from 'react-intl';
 import qs from 'query-string';
@@ -21,6 +22,7 @@ import { listActions, getContent } from '@plone/volto/actions';
 import {
   BodyClass,
   getBaseUrl,
+  flattenToAppURL,
   getLayoutFieldname,
 } from '@plone/volto/helpers';
 
@@ -194,7 +196,9 @@ class View extends Component {
    */
   render() {
     const { views } = config;
-    if (this.props.error && !this.props.connectionRefused) {
+    if (this.props.error && this.props.error.code === 301) {
+      return <Redirect to={flattenToAppURL(this.props.error.url)} />;
+    } else if (this.props.error && !this.props.connectionRefused) {
       let FoundView;
       if (this.props.error.status === undefined) {
         // For some reason, while development and if CORS is in place and the

package/src/config/Blocks.jsx

@@ -56,6 +56,11 @@ import TopSideFacets from '@plone/volto/components/manage/Blocks/Search/layout/T
 import {
   SelectFacet,
   CheckboxFacet,
+  DateRangeFacet,
+  ToggleFacet,
+  ToggleFacetFilterListEntry,
+  SelectFacetFilterListEntry,
+  DateRangeFacetFilterListEntry,
 } from '@plone/volto/components/manage/Blocks/Search/components';
 import getListingBlockAsyncData from '@plone/volto/components/manage/Blocks/Listing/getAsyncData';
 
@@ -438,12 +443,38 @@ const blocksConfig = {
             title: 'Select',
             view: SelectFacet,
             isDefault: true,
+            schemaEnhancer: SelectFacet.schemaEnhancer,
+            stateToValue: SelectFacet.stateToValue,
+            valueToQuery: SelectFacet.valueToQuery,
+            filterListComponent: SelectFacetFilterListEntry,
           },
           {
             id: 'checkboxFacet',
             title: 'Checkbox',
             view: CheckboxFacet,
             isDefault: false,
+            schemaEnhancer: CheckboxFacet.schemaEnhancer,
+            stateToValue: CheckboxFacet.stateToValue,
+            valueToQuery: CheckboxFacet.valueToQuery,
+            filterListComponent: SelectFacetFilterListEntry,
+          },
+          {
+            id: 'daterangeFacet',
+            title: 'Date range',
+            view: DateRangeFacet,
+            isDefault: false,
+            stateToValue: DateRangeFacet.stateToValue,
+            valueToQuery: DateRangeFacet.valueToQuery,
+            filterListComponent: DateRangeFacetFilterListEntry,
+          },
+          {
+            id: 'toggleFacet',
+            title: 'Toggle',
+            view: ToggleFacet,
+            isDefault: false,
+            stateToValue: ToggleFacet.stateToValue,
+            valueToQuery: ToggleFacet.valueToQuery,
+            filterListComponent: ToggleFacetFilterListEntry,
           },
         ],
       },

package/src/config/Loadables.jsx

@@ -32,4 +32,26 @@ export const loadables = {
   reactDnd: loadable.lib(() => import('react-dnd')),
   reactDndHtml5Backend: loadable.lib(() => import('react-dnd-html5-backend')),
   reactBeautifulDnd: loadable.lib(() => import('react-beautiful-dnd')),
+
+  // draftjs libs
+  immutableLib: loadable.lib(() => import('immutable')),
+  draftJs: loadable.lib(() => import('draft-js')),
+  draftJsLibIsSoftNewlineEvent: loadable.lib(() =>
+    import('draft-js/lib/isSoftNewlineEvent'),
+  ),
+  draftJsFilters: loadable.lib(() => import('draftjs-filters')),
+  draftJsInlineToolbarPlugin: loadable.lib(() =>
+    import('draft-js-inline-toolbar-plugin'),
+  ),
+  draftJsImportHtml: loadable.lib(() => import('draft-js-import-html')),
+  draftJsBlockBreakoutPlugin: loadable.lib(() =>
+    import('draft-js-block-breakout-plugin'),
+  ),
+  draftJsCreateInlineStyleButton: loadable.lib(() =>
+    import('draft-js-buttons/lib/utils/createInlineStyleButton'),
+  ),
+  draftJsCreateBlockStyleButton: loadable.lib(() =>
+    import('draft-js-buttons/lib/utils/createBlockStyleButton'),
+  ),
+  draftJsPluginsUtils: loadable.lib(() => import('draft-js-plugins-utils')),
 };