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

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/Listing/View.jsx

@@ -9,7 +9,7 @@ const View = (props) => {
   const { data, path, pathname } = props;
 
   return (
-    <div className={cx('block listing', data.variation)}>
+    <div className={cx('block listing', data.variation || 'default')}>
       <ListingBody {...props} path={path ?? pathname} />
     </div>
   );

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>

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/Contents/ContentsUploadModal.jsx

@@ -267,7 +267,9 @@ class ContentsUploadModal extends Component {
                     <Table.Row className="upload-row" key={file.name}>
                       <Table.Cell>{file.name}</Table.Cell>
                       <Table.Cell>
-                        <FormattedRelativeDate date={file.lastModifiedDate} />
+                        {file.lastModifiedDate && (
+                          <FormattedRelativeDate date={file.lastModifiedDate} />
+                        )}
                       </Table.Cell>
                       <Table.Cell>
                         {filesize(file.size, { round: 0 })}

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(