diff --git a/editors/editoria/src/Editoria.js b/editors/editoria/src/Editoria.js index 29d84fab833d5b30c7ffedfca7dfe36b23035f05..b88ecdadee0c6e9dd2905deae70e148330eb6ce8 100644 --- a/editors/editoria/src/Editoria.js +++ b/editors/editoria/src/Editoria.js @@ -1,10 +1,10 @@ -import React, { useLayoutEffect, useState, useEffect, useMemo } from 'react'; +import React, { useLayoutEffect, useState, useMemo } from 'react'; import { createGlobalStyle } from 'styled-components'; import { EditoriaLayout, EditoriaMobileLayout } from 'wax-prosemirror-layouts'; import { Wax } from 'wax-prosemirror-core'; -import { config } from './config'; +import { config, configMobile } from './config'; import { demo } from './demo'; const GlobalStyle = createGlobalStyle` @@ -36,20 +36,25 @@ const user = { }; const Editoria = () => { - const [width, height] = useWindowSize(); + const [width] = useWindowSize(); let layout = EditoriaLayout; + let finalConfig = config; + let key = 'editoria'; if (width < 600) { layout = EditoriaMobileLayout; + finalConfig = configMobile; + key = 'editoriaMobile'; } - const MemorizedComponent = useMemo( + const EditoriaComponent = useMemo( () => ( <> <GlobalStyle /> <Wax - config={config} + key={key} + config={finalConfig} autoFocus placeholder="Type Something..." fileUpload={file => renderImage(file)} @@ -59,9 +64,9 @@ const Editoria = () => { /> </> ), - [layout], + [layout, finalConfig], ); - return <>{MemorizedComponent}</>; + return <>{EditoriaComponent}</>; }; function useWindowSize() { diff --git a/editors/editoria/src/config/config.js b/editors/editoria/src/config/config.js index 24935bce9c1a14057da5e990f603a34f12e6833b..7072aeab13c9c70d5f17b45059cd5bd9f521dec8 100644 --- a/editors/editoria/src/config/config.js +++ b/editors/editoria/src/config/config.js @@ -25,7 +25,6 @@ import { CodeBlockToolGroupService, TrackChangeToolGroupService, DisplayTextToolGroupService, - BlockDropDownToolGroupService, } from 'wax-prosemirror-services'; import { WaxSelectionPlugin } from 'wax-prosemirror-plugins'; @@ -46,7 +45,6 @@ export default { name: 'Annotations', more: ['Superscript', 'Subscript', 'SmallCaps'], }, - 'BlockDropDown', 'Notes', 'Lists', 'Images', @@ -99,6 +97,5 @@ 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 new file mode 100644 index 0000000000000000000000000000000000000000..84eb493e34f9d863a6fdefdb70a535a48484ec53 --- /dev/null +++ b/editors/editoria/src/config/configMobile.js @@ -0,0 +1,100 @@ +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', + 'Tables', + 'TrackChange', + ], + }, + ], + + 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 28307f54868afa5e0822f8156b8b1439bfd3cdd4..3744d8f4169b8815aa0862565077396223dc711b 100644 --- a/editors/editoria/src/config/index.js +++ b/editors/editoria/src/config/index.js @@ -1 +1,2 @@ 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 aaa1534338b4d43e4b25ddb9331ad5c6474b78c3..1e7c6a1108ed7ff7c31a0191ef3613864f46402c 100644 --- a/wax-prosemirror-components/src/components/TableDropDown.js +++ b/wax-prosemirror-components/src/components/TableDropDown.js @@ -44,7 +44,6 @@ const dropDownOptions = [ ]; const TableDropDown = ({ view: { dispatch, state }, item }) => { - if (window.innerWidth < 600) return null; return ( <DropdownStyled options={dropDownOptions} diff --git a/wax-prosemirror-services/src/WaxToolGroups/BlockDropDownToolGroupService/BlockDropDown.js b/wax-prosemirror-services/src/WaxToolGroups/BlockDropDownToolGroupService/BlockDropDown.js index faf478e9b9fe2d84eee67ccf9e2ec10f95ce5ba3..9a00598356383f9c6c0e91fd24c7232bb5179394 100644 --- a/wax-prosemirror-services/src/WaxToolGroups/BlockDropDownToolGroupService/BlockDropDown.js +++ b/wax-prosemirror-services/src/WaxToolGroups/BlockDropDownToolGroupService/BlockDropDown.js @@ -106,8 +106,6 @@ class BlockDropDown extends ToolGroup { } }); - if (window.innerWidth > 600) return null; - return ( <DropdownStyled value={found}