Merge branch 'add_reviewer_wax' into 'main'

feat: add readonly Wax editor to the reviewer page

See merge request kotahi/kotahi!40

app/components/component-review/src/components/review/ReviewLayout.js

@@ -85,13 +85,11 @@ const ReviewLayout = ({
   return (
     <Columns>
       <Manuscript>
-        {/* <Manuscript>
         <Tabs
           activeKey={editorSections[editorSections.length - 1].key}
           sections={editorSections}
           title="Versions"
         />
-      </Manuscript> */}
 
         <Tabs
           activeKey={reviewSections[reviewSections.length - 1].key}

app/components/component-review/src/components/style.js

@@ -63,9 +63,6 @@ export const Info = styled.span`
 export const EditorWrapper = styled.div`
   .wax-container {
     position: relative;
-    .main-editor {
-      margin: 3% 0 0 0;
-    }
   }
 `
 

app/components/wax-collab/src/Editoria.js

@@ -3,15 +3,15 @@ import { Wax } from 'wax-prosemirror-core'
 import EditoriaLayout from './EditoriaLayout'
 import { config } from './config'
 
-const renderImage = file => {
-  const reader = new FileReader()
-  return new Promise((resolve, reject) => {
-    reader.onload = () => resolve(reader.result)
-    reader.onerror = () => reject(reader.error)
-    // Some extra delay to make the asynchronicity visible
-    setTimeout(() => reader.readAsDataURL(file), 150)
-  })
-}
+// const renderImage = file => {
+//   const reader = new FileReader()
+//   return new Promise((resolve, reject) => {
+//     reader.onload = () => resolve(reader.result)
+//     reader.onerror = () => reject(reader.error)
+//     // Some extra delay to make the asynchronicity visible
+//     setTimeout(() => reader.readAsDataURL(file), 150)
+//   })
+// }
 
 const user = {
   userId: '1234',
@@ -23,8 +23,8 @@ const Editoria = ({ content, readonly }) => (
     <Wax
       autoFocus
       config={config}
-      fileUpload={file => renderImage(file)}
-      layout={EditoriaLayout}
+      // fileUpload={file => renderImage(file)}
+      layout={EditoriaLayout(readonly)}
       placeholder="Type Something..."
       readonly={readonly}
       user={user}

app/components/wax-collab/src/EditoriaLayout.js

 import React from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { InfoArea } from 'wax-prosemirror-components'
 import { componentPlugin } from 'wax-prosemirror-services'
 import { th, grid } from '@pubsweet/ui-toolkit'
@@ -15,8 +15,14 @@ const Layout = styled.div`
   display: grid;
 
   grid-template-areas: 'menu' 'editor';
-  grid-template-rows: 40px 1fr;
-  // flex-direction: column;
+  ${props =>
+    props.readonly
+      ? css`
+          grid-template-rows: 0 1fr;
+        `
+      : css`
+          grid-template-rows: 40px 1fr;
+        `} // flex-direction: column;
   // height: 100vh;
   // width: 100hh;
 `
@@ -70,7 +76,6 @@ const Menu = styled.div`
 
 export const Container = styled.div`
   background: ${th('colorBackgroundHue')};
-  padding: ${grid(2)};
 `
 // const LeftSideBar = componentPlugin("leftSideBar");
 // const RightSideBar = componentPlugin("rightSideBar");
@@ -79,15 +84,17 @@ const TopBar = componentPlugin('topBar')
 // const CommentsArea = componentPlugin("commentsArea");
 const WaxOverlays = componentPlugin('waxOverlays')
 
-const EditoriaLayout = ({ editor }) => (
+const EditoriaLayout = readonly => ({ editor }) => (
   // const {
   //   view: { main },
   // } = useContext(WaxContext)
   <Container>
-    <Layout>
-      <Menu>
-        <TopBar />
-      </Menu>
+    <Layout readonly={readonly}>
+      {!readonly && (
+        <Menu>
+          <TopBar />
+        </Menu>
+      )}
       <Editor className="wax-surface-scroll">{editor}</Editor>
     </Layout>
     <InfoArea />