Merge branch 'custom-hook-resize' into 'master'

Custom hook resize

See merge request !179

editors/editoria/src/Editoria.js

-import React, { Fragment } 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`
@@ -35,30 +35,47 @@ const user = {
   username: 'demo',
 };
 
-let layout = EditoriaLayout;
-let conf = config;
+const Editoria = () => {
+  const [width, height] = useWindowSize();
 
-if (window.innerWidth < 600) {
-  layout = EditoriaMobileLayout;
-  conf = configMobile;
-}
+  let layout = EditoriaLayout;
+
+  if (width < 600) {
+    layout = EditoriaMobileLayout;
+  }
 
-const Editoria = () => (
-  <Fragment>
-    <GlobalStyle />
-    <Wax
-      config={conf}
-      autoFocus
-      placeholder="Type Something..."
-      fileUpload={file => renderImage(file)}
-      value={demo}
-      // value={`<p class="paragraph">This is the first paragraph</p><p class="paragraph">This is the second paragraph</p><p class="author">This is an author</p>`}
-      layout={layout}
-      // debug
-      // onChange={source => console.log(source)}
-      user={user}
-    />
-  </Fragment>
-);
+  const MemorizedComponent = useMemo(
+    () => (
+      <>
+        <GlobalStyle />
+        <Wax
+          config={config}
+          autoFocus
+          placeholder="Type Something..."
+          fileUpload={file => renderImage(file)}
+          value={demo}
+          layout={layout}
+          user={user}
+        />
+      </>
+    ),
+    [layout],
+  );
+  return <>{MemorizedComponent}</>;
+};
+
+function useWindowSize() {
+  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;
+}
 
 export default Editoria;

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}