essay question wrapper component

wax-prosemirror-core/src/config/defaultServices/ShortCutsService/ShortCuts.js

@@ -36,9 +36,10 @@ const backSpaceShortCut = (state, dispatch, view) => {
 
   state.doc.nodesBetween($from.pos, $to.pos, (node, from) => {
     if (node.type.name === 'fill_the_gap_container') {
-      const index = $from.index($from.depth);
-      const $beforePos = state.doc.resolve($from.posAtIndex(index - 1));
-      dispatch(state.tr.setSelection(new NodeSelection($beforePos)));
+      // dispatch(state.tr.delete(from, from + node.nodeSize));
+      // const index = $from.index($from.depth);
+      // const $beforePos = state.doc.resolve($from.posAtIndex(index - 1));
+      // dispatch(state.tr.setSelection(new NodeSelection($beforePos)));
     }
   });
 

wax-questions-service/src/EssayService/EssayQuestionContainerNodeView.js

+import { QuestionsNodeView } from 'wax-prosemirror-core';
+
+export default class EssayQuestionContainerNodeView extends QuestionsNodeView {
+  constructor(
+    node,
+    view,
+    getPos,
+    decorations,
+    createPortal,
+    Component,
+    context,
+  ) {
+    super(node, view, getPos, decorations, createPortal, Component, context);
+
+    this.node = node;
+    this.outerView = view;
+    this.getPos = getPos;
+    this.context = context;
+  }
+
+  static name() {
+    return 'essay_container';
+  }
+
+  selectNode() {
+    this.context.pmViews[this.node.attrs.id].focus();
+  }
+
+  stopEvent(event) {
+    if (event.target.type === 'textarea' || !event.target.type) {
+      return true;
+    }
+
+    return (
+      this.context.pmViews[this.node.attrs.id] !== undefined &&
+      event.target !== undefined &&
+      this.context.pmViews[this.node.attrs.id].dom.contains(event.target)
+    );
+  }
+}

wax-questions-service/src/EssayService/EssayService.js

 import { Service } from 'wax-prosemirror-core';
 import EssayQuestion from './EssayQuestion';
+import EssayQuestionContainerComponent from './components/EssayQuestionContainerComponent';
 import essayContainerNode from './schema/essayContainerNode';
 import essayPromptNode from './schema/essayPromptNode';
 import essayQuestionNode from './schema/essayQuestionNode';
@@ -7,6 +8,7 @@ import essayAnswerNode from './schema/essayAnswerNode';
 import EssayQuestionComponent from './components/EssayQuestionComponent';
 import EssayPromptComponent from './components/EssayPromptComponent';
 import EssayAnswerComponent from './components/EssayAnswerComponent';
+import EssayQuestionContainerNodeView from './EssayQuestionContainerNodeView';
 import EssayQuestionNodeView from './EssayQuestionNodeView';
 import EssayPromptNodeView from './EssayPromptNodeView';
 import EssayAnswerNodeView from './EssayAnswerNodeView';
@@ -34,6 +36,12 @@ class EssayService extends Service {
       essay_answer: essayAnswerNode,
     });
 
+    addPortal({
+      nodeView: EssayQuestionContainerNodeView,
+      component: EssayQuestionContainerComponent,
+      context: this.app,
+    });
+
     addPortal({
       nodeView: EssayQuestionNodeView,
       component: EssayQuestionComponent,

wax-questions-service/src/EssayService/components/EssayQuestionContainerComponent.js

+import React, { useContext, useRef, useState } from 'react';
+import {
+  WaxContext,
+  ComponentPlugin,
+  DocumentHelpers,
+  Icon,
+} from 'wax-prosemirror-core';
+import { th } from '@pubsweet/ui-toolkit';
+
+import styled from 'styled-components';
+import ContainerEditor from './ContainerEditor';
+
+const EssayQuestionWrapper = styled.div`
+  margin: 0px 38px 15px 38px;
+  margin-top: 10px;
+`;
+const EssayQuestionContainerTool = styled.div`
+  border: 3px solid #f5f5f7;
+  border-bottom: none;
+
+  span:first-of-type {
+    position: relative;
+    top: 3px;
+  }
+`;
+
+const ActionButton = styled.button`
+  background: transparent;
+  cursor: pointer;
+  margin-top: 16px;
+  border: none;
+  position: relative;
+  bottom: 14px;
+  left: -11px;
+  float: right;
+`;
+
+const StyledIconActionRemove = styled(Icon)`
+  height: 24px;
+  width: 24px;
+`;
+
+const EssayQuestionContainer = styled.div`
+  border: 3px solid #f5f5f7;
+  margin-bottom: 30px;
+`;
+
+export default ({ node, view, getPos }) => {
+  const context = useContext(WaxContext);
+  const {
+    pmViews: { main },
+  } = context;
+
+  const customProps = main.props.customValues;
+  const { testMode } = customProps;
+
+  const isEditable = main.props.editable(editable => {
+    return editable;
+  });
+
+  const readOnly = !isEditable;
+
+  const removeQuestion = () => {};
+
+  return (
+    <EssayQuestionWrapper>
+      <div>
+        {!testMode && !readOnly && (
+          <EssayQuestionContainerTool>
+            <ActionButton
+              aria-label="delete this question"
+              onClick={removeQuestion}
+              type="button"
+            >
+              <StyledIconActionRemove name="deleteOutlinedQuestion" />
+            </ActionButton>
+          </EssayQuestionContainerTool>
+        )}
+      </div>
+      <EssayQuestionContainer className="essay-question">
+        <ContainerEditor getPos={getPos} node={node} view={view} />
+      </EssayQuestionContainer>
+    </EssayQuestionWrapper>
+  );
+};

wax-questions-service/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js

@@ -119,7 +119,6 @@ export default ({ node, view, getPos }) => {
   return (
     <FillTheGapWrapper>
       <div>
-        {/* <span> Fill The Gap</span> */}
         {!testMode && !readOnly && (
           <FillTheGapContainerTool>
             <FillTheGapTool />