From b920155696dcf46dce9006dba1c4854137e0a70e Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Mon, 5 Oct 2020 18:54:03 +0300
Subject: [PATCH] rerender on screen width change
---
editors/editoria/src/Editoria.js | 41 +++----
editors/editoria/src/config/config.js | 3 +
editors/editoria/src/config/configMobile.js | 103 ------------------
editors/editoria/src/config/index.js | 1 -
.../src/components/TableDropDown.js | 23 ++--
.../BlockDropDown.js | 2 +
6 files changed, 36 insertions(+), 137 deletions(-)
delete mode 100644 editors/editoria/src/config/configMobile.js
diff --git a/editors/editoria/src/Editoria.js b/editors/editoria/src/Editoria.js
index f77fd9490..29d84fab8 100644
--- a/editors/editoria/src/Editoria.js
+++ b/editors/editoria/src/Editoria.js
@@ -1,10 +1,10 @@
-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;
diff --git a/editors/editoria/src/config/config.js b/editors/editoria/src/config/config.js
index 7072aeab1..24935bce9 100644
--- a/editors/editoria/src/config/config.js
+++ b/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(),
],
};
diff --git a/editors/editoria/src/config/configMobile.js b/editors/editoria/src/config/configMobile.js
deleted file mode 100644
index d659a8ded..000000000
--- a/editors/editoria/src/config/configMobile.js
+++ /dev/null
@@ -1,103 +0,0 @@
-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(),
- ],
-};
diff --git a/editors/editoria/src/config/index.js b/editors/editoria/src/config/index.js
index 3744d8f41..28307f548 100644
--- a/editors/editoria/src/config/index.js
+++ b/editors/editoria/src/config/index.js
@@ -1,2 +1 @@
export { default as config } from './config';
-export { default as configMobile } from './configMobile';
diff --git a/wax-prosemirror-components/src/components/TableDropDown.js b/wax-prosemirror-components/src/components/TableDropDown.js
index da88bb7d4..aaa153433 100644
--- a/wax-prosemirror-components/src/components/TableDropDown.js
+++ b/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;
diff --git a/wax-prosemirror-services/src/WaxToolGroups/BlockDropDownToolGroupService/BlockDropDown.js b/wax-prosemirror-services/src/WaxToolGroups/BlockDropDownToolGroupService/BlockDropDown.js
index 9a0059835..faf478e9b 100644
--- a/wax-prosemirror-services/src/WaxToolGroups/BlockDropDownToolGroupService/BlockDropDown.js
+++ b/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}
--
GitLab