rerender on screen width change

editors/editoria/src/Editoria.js

-import React, { useLayoutEffect, useState } from 'react';
+import React, { useLayoutEffect, useState, useEffect, useMemo } from 'react';
 import { createGlobalStyle } from 'styled-components';
 
 import { EditoriaLayout, EditoriaMobileLayout } from 'wax-prosemirror-layouts';
 import { Wax } from 'wax-prosemirror-core';
 
-import { config, configMobile } from './config';
+import { config } from './config';
 import { demo } from './demo';
 
 const GlobalStyle = createGlobalStyle`
@@ -34,26 +34,18 @@ const user = {
   userId: '1234',
   username: 'demo',
 };
-console.log(config);
+
 const Editoria = () => {
   const [width, height] = useWindowSize();
+
+  let layout = EditoriaLayout;
+
   if (width < 600) {
-    return (
-      <>
-        <GlobalStyle />
-        <Wax
-          config={configMobile}
-          autoFocus
-          placeholder="Type Something..."
-          fileUpload={file => renderImage(file)}
-          value={demo}
-          layout={EditoriaMobileLayout}
-          user={user}
-        />
-      </>
-    );
-  } else {
-    return (
+    layout = EditoriaMobileLayout;
+  }
+
+  const MemorizedComponent = useMemo(
+    () => (
       <>
         <GlobalStyle />
         <Wax
@@ -62,22 +54,25 @@ const Editoria = () => {
           placeholder="Type Something..."
           fileUpload={file => renderImage(file)}
           value={demo}
-          layout={EditoriaLayout}
+          layout={layout}
           user={user}
         />
       </>
-    );
-  }
+    ),
+    [layout],
+  );
+  return <>{MemorizedComponent}</>;
 };
 
 function useWindowSize() {
-  const [size, setSize] = useState([0, 0]);
+  const [size, setSize] = useState([window.innerWidth, window.innerHeight]);
   useLayoutEffect(() => {
     function updateSize() {
       setSize([window.innerWidth, window.innerHeight]);
     }
     window.addEventListener('resize', updateSize);
     updateSize();
+
     return () => window.removeEventListener('resize', updateSize);
   }, []);
   return size;

editors/editoria/src/config/config.js

@@ -25,6 +25,7 @@ import {
   CodeBlockToolGroupService,
   TrackChangeToolGroupService,
   DisplayTextToolGroupService,
+  BlockDropDownToolGroupService,
 } from 'wax-prosemirror-services';
 
 import { WaxSelectionPlugin } from 'wax-prosemirror-plugins';
@@ -45,6 +46,7 @@ export default {
           name: 'Annotations',
           more: ['Superscript', 'Subscript', 'SmallCaps'],
         },
+        'BlockDropDown',
         'Notes',
         'Lists',
         'Images',
@@ -97,5 +99,6 @@ export default {
     new CodeBlockToolGroupService(),
     new TrackChangeToolGroupService(),
     new DisplayTextToolGroupService(),
+    new BlockDropDownToolGroupService(),
   ],
 };

editors/editoria/src/config/configMobile.js

-import { emDash, ellipsis } from 'prosemirror-inputrules';
-import { columnResizing, tableEditing } from 'prosemirror-tables';
-import {
-  AnnotationToolGroupService,
-  ImageService,
-  PlaceholderService,
-  InlineAnnotationsService,
-  LinkService,
-  ListsService,
-  ListToolGroupService,
-  TablesService,
-  TableToolGroupService,
-  BaseService,
-  BaseToolGroupService,
-  DisplayBlockLevelService,
-  DisplayToolGroupService,
-  ImageToolGroupService,
-  TextBlockLevelService,
-  TextToolGroupService,
-  NoteService,
-  NoteToolGroupService,
-  TrackChangeService,
-  CommentsService,
-  CodeBlockService,
-  CodeBlockToolGroupService,
-  TrackChangeToolGroupService,
-  DisplayTextToolGroupService,
-  BlockDropDownToolGroupService,
-} from 'wax-prosemirror-services';
-
-import { WaxSelectionPlugin } from 'wax-prosemirror-plugins';
-
-import invisibles, {
-  space,
-  hardBreak,
-  paragraph,
-} from '@guardian/prosemirror-invisibles';
-
-export default {
-  MenuService: [
-    {
-      templateArea: 'topBar',
-      toolGroups: [
-        'Base',
-        {
-          name: 'Annotations',
-          more: ['Superscript', 'Subscript', 'SmallCaps'],
-        },
-        'BlockDropDown',
-        'Notes',
-        'Lists',
-        'Images',
-        'CodeBlock',
-        'TrackChange',
-      ],
-    },
-    {
-      templateArea: 'leftSideBar',
-      toolGroups: ['DisplayText'],
-    },
-  ],
-
-  RulesService: [emDash, ellipsis],
-  ShortCutsService: {},
-  EnableTrackChangeService: { enabled: false },
-
-  PmPlugins: [
-    columnResizing(),
-    tableEditing(),
-    invisibles([hardBreak()]),
-    WaxSelectionPlugin,
-  ],
-
-  // Always load first CommentsService and LinkService,
-  //as it matters on how PM treats nodes and marks
-  services: [
-    new DisplayBlockLevelService(),
-    new DisplayToolGroupService(),
-    new TextBlockLevelService(),
-    new TextToolGroupService(),
-    new ListsService(),
-    new LinkService(),
-    new InlineAnnotationsService(),
-    new TrackChangeService(),
-    new CommentsService(),
-    new PlaceholderService(),
-    new ImageService(),
-    new TablesService(),
-    new BaseService(),
-    new BaseToolGroupService(),
-    new NoteService(),
-    new TableToolGroupService(),
-    new ImageToolGroupService(),
-    new AnnotationToolGroupService(),
-    new NoteToolGroupService(),
-    new ListToolGroupService(),
-    new CodeBlockService(),
-    new CodeBlockToolGroupService(),
-    new TrackChangeToolGroupService(),
-    new DisplayTextToolGroupService(),
-    new BlockDropDownToolGroupService(),
-  ],
-};

editors/editoria/src/config/index.js

 export { default as config } from './config';
-export { default as configMobile } from './configMobile';

wax-prosemirror-components/src/components/TableDropDown.js

@@ -43,15 +43,18 @@ const dropDownOptions = [
   { label: 'Toggle header cells', value: 'toggleHeaderCell' },
 ];
 
-const TableDropDown = ({ view: { dispatch, state }, item }) => (
-  <DropdownStyled
-    options={dropDownOptions}
-    onChange={option => {
-      item.run(state, dispatch, tablesFn[option.value]);
-    }}
-    placeholder="Table Options"
-    select={item.select && item.select(state)}
-  />
-);
+const TableDropDown = ({ view: { dispatch, state }, item }) => {
+  if (window.innerWidth < 600) return null;
+  return (
+    <DropdownStyled
+      options={dropDownOptions}
+      onChange={option => {
+        item.run(state, dispatch, tablesFn[option.value]);
+      }}
+      placeholder="Table Options"
+      select={item.select && item.select(state)}
+    />
+  );
+};
 
 export default TableDropDown;

wax-prosemirror-services/src/WaxToolGroups/BlockDropDownToolGroupService/BlockDropDown.js

@@ -106,6 +106,8 @@ class BlockDropDown extends ToolGroup {
       }
     });
 
+    if (window.innerWidth > 600) return null;
+
     return (
       <DropdownStyled
         value={found}