essay readOnly

editors/demo/src/Editors.js

@@ -70,7 +70,7 @@ const Editors = () => {
       case 'ncbi':
         return <NCBI />;
       default:
-        return <Editoria />;
+        return <HHMI />;
     }
   };
 

wax-prosemirror-components/src/ui/tabs/BlockLevelTools.js

@@ -22,8 +22,8 @@ const BlockLevelTools = props => {
         groups.map(group => (
           <BlockElementGroup
             groupName={group.groupName}
-            key={group.groupName}
             items={group.items}
+            key={group.groupName}
             view={view}
           />
         ))}

wax-prosemirror-core/src/Wax.js

@@ -2,7 +2,6 @@
 import React, { useEffect, useState, forwardRef } from 'react';
 import { DOMSerializer } from 'prosemirror-model';
 import { DefaultSchema } from 'wax-prosemirror-utilities';
-
 import WaxProvider from './WaxContext';
 import PortalProvider from './PortalContext';
 import Application from './Application';

wax-prosemirror-core/src/WaxView.js

@@ -11,7 +11,7 @@ import React, {
 } from 'react';
 
 import applyDevTools from 'prosemirror-dev-tools';
-import { EditorState, TextSelection } from 'prosemirror-state';
+import { EditorState } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import { trackedTransaction } from 'wax-prosemirror-services';
 import { WaxContext } from './WaxContext';

wax-prosemirror-services/src/EssayService/components/EssayAnswerComponent.js

@@ -22,6 +22,8 @@ const EditorWrapper = styled.div`
   display: flex;
   flex: 2 1 auto;
   justify-content: left;
+  opacity: ${props => (props.editable ? 1 : 0.4)};
+  cursor: ${props => (props.editable ? 'default' : 'not-allowed')};
 
   .ProseMirror {
     white-space: break-spaces;
@@ -118,7 +120,7 @@ const EssayAnswerComponent = ({ node, view, getPos }) => {
         mount: editorRef.current,
       },
       {
-        editable: () => isEditable,
+        editable: () => !isEditable,
         state: EditorState.create({
           doc: node,
           plugins: finalPlugins,
@@ -191,7 +193,7 @@ const EssayAnswerComponent = ({ node, view, getPos }) => {
   };
 
   return (
-    <EditorWrapper>
+    <EditorWrapper editable={!isEditable}>
       <div ref={editorRef} />
     </EditorWrapper>
   );