Editoria mobile layout containers

editors/editoria/src/Editoria.js

 import React, { Fragment } from 'react';
 import { createGlobalStyle } from 'styled-components';
 
-import { EditoriaLayout } from 'wax-prosemirror-layouts';
+import { EditoriaLayout, EditoriaMobileLayout } from 'wax-prosemirror-layouts';
 import { Wax } from 'wax-prosemirror-core';
 
 import { config } from './config';
@@ -35,6 +35,13 @@ const user = {
   username: 'demo',
 };
 
+let layout = EditoriaLayout;
+
+if (window.innerWidth < 600) {
+  console.log('smaller');
+  layout = EditoriaMobileLayout;
+}
+
 const Editoria = () => (
   <Fragment>
     <GlobalStyle />
@@ -45,7 +52,7 @@ const Editoria = () => (
       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={EditoriaLayout}
+      layout={layout}
       // debug
       // onChange={source => console.log(source)}
       user={user}

wax-prosemirror-layouts/index.js

-export { default as EditoriaLayout } from "./src/layouts/EditoriaLayout";
+export { default as EditoriaLayout } from './src/layouts/EditoriaLayout';
+export { default as EditoriaMobileLayout } from './src/layouts/EditoriaMobileLayout';

wax-prosemirror-layouts/src/layouts/EditoriaMobileLayout.js

+import React, { useContext } from 'react';
+import styled, { css, ThemeProvider } from 'styled-components';
+import PanelGroup from 'react-panelgroup';
+import { InfoArea } from 'wax-prosemirror-components';
+import { componentPlugin } from 'wax-prosemirror-services';
+import { cokoTheme } from 'wax-prosemirror-themes';
+import { DocumentHelpers } from 'wax-prosemirror-utilities';
+import { WaxContext } from 'wax-prosemirror-core';
+
+import { grid, th } from '@pubsweet/ui-toolkit';
+import EditorElements from './EditorElements';
+
+const divider = css`
+  .panelGroup {
+    background: ${th('colorBackgroundHue')};
+  }
+  .divider {
+    > div {
+      background: ${th('colorBorder')};
+      height: ${grid(1)};
+      max-height: ${grid(1)};
+
+      &:hover {
+        height: ${grid(2)};
+        max-height: ${grid(2)};
+      }
+    }
+  }
+`;
+
+const Wrapper = styled.div`
+  background: ${th('colorBackground')};
+  font-family: ${th('fontInterface')};
+  font-size: ${th('fontSizeBase')};
+
+  display: flex;
+  flex-direction: column;
+
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+
+  ${divider}
+`;
+
+const Main = styled.div`
+  display: flex;
+  flex-grow: 1;
+`;
+
+const TopMenu = styled.div`
+  display: flex;
+  height: 70px;
+  padding-top: 10px;
+  flex-wrap: wrap;
+  font-size:8px;
+  position:absolute;
+  z-index: 999;
+  top: 0;
+  bottom:0;
+  user-select: none;
+  background: ${th('colorBackgroundToolBar')}
+  border-bottom: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
+  > div {
+    height: 20px;
+  }
+  > div:not(:last-child) {
+    border-right: ${th('borderWidth')} ${th('borderStyle')}
+      ${th('colorFurniture')};
+  }
+  button: {
+    height: 20px;
+  }
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+  div:last-child{
+      button span {
+        font-size: 10px;
+        margin: 0;
+      }
+  }
+`;
+
+const EditorArea = styled.div`
+  flex-grow: 1;
+`;
+
+const WaxSurfaceScroll = styled.div`
+  overflow-y: auto;
+  overflow-x: scroll;
+  display: flex;
+  box-sizing: border-box;
+  height: 100%;
+  width: 96%;
+  position: absolute;
+  /* PM styles  for main content*/
+  ${EditorElements};
+`;
+
+const EditorContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  .ProseMirror {
+    box-shadow: 0 0 8px #ecedf1;
+    min-height: 90%;
+    padding: ${grid(25)} ${grid(2)} ${grid(40)} ${grid(2)};
+  }
+`;
+
+const CommentsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
+const CommentsContainerNotes = styled.div`
+  background: ${th('colorBackgroundHue')};
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
+const NotesAreaContainer = styled.div`
+  background: #fff;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  overflow-y: scroll;
+  position: absolute;
+  /* PM styles  for note content*/
+  ${EditorElements};
+`;
+
+const NotesContainer = styled.div`
+  counter-reset: footnote-view;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: ${grid(4)};
+  height: 100%;
+  width: 96%;
+  > div {
+    padding-left: ${grid(1)};
+    padding-right: ${grid(1)};
+  }
+`;
+
+let surfaceHeight = 500;
+let notesHeight = 100;
+
+const onResizeEnd = arr => {
+  surfaceHeight = arr[0].size;
+  notesHeight = arr[1].size;
+};
+
+const hasNotes = main => {
+  const notes = DocumentHelpers.findChildrenByType(
+    main.state.doc,
+    main.state.schema.nodes.footnote,
+    true,
+  );
+  return notes;
+};
+
+const TopBar = componentPlugin('topBar');
+const NotesArea = componentPlugin('notesArea');
+const RightArea = componentPlugin('rightArea');
+const WaxOverlays = componentPlugin('waxOverlays');
+
+const EditoriaLayout = ({ editor }) => {
+  const {
+    view: { main },
+  } = useContext(WaxContext);
+
+  const notes = main && hasNotes(main);
+  const showNotes = notes && !!notes.length && notes.length > 0;
+
+  return (
+    <ThemeProvider theme={cokoTheme}>
+      <Wrapper>
+        <TopMenu>
+          <TopBar />
+        </TopMenu>
+
+        <Main>
+          <EditorArea>
+            <PanelGroup
+              direction="column"
+              panelWidths={[
+                { size: surfaceHeight, resize: 'stretch' },
+                { size: notesHeight, resize: 'stretch' },
+              ]}
+              onResizeEnd={onResizeEnd}
+            >
+              <WaxSurfaceScroll>
+                <EditorContainer>{editor}</EditorContainer>
+                <CommentsContainer>
+                  <RightArea area="main" />
+                </CommentsContainer>
+              </WaxSurfaceScroll>
+
+              {showNotes && (
+                <NotesAreaContainer>
+                  <NotesContainer id="notes-container">
+                    <NotesArea />
+                  </NotesContainer>
+                  <CommentsContainerNotes>
+                    <RightArea area="notes" />
+                  </CommentsContainerNotes>
+                </NotesAreaContainer>
+              )}
+            </PanelGroup>
+          </EditorArea>
+        </Main>
+
+        <InfoArea />
+        <WaxOverlays />
+      </Wrapper>
+    </ThemeProvider>
+  );
+};
+
+export default EditoriaLayout;