new files

editors/demo/src/Editors.js

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

editors/demo/src/HHMI/HHMI.js

@@ -68,7 +68,7 @@ const Hhmi = () => {
         value={t}
         readonly={readOnly}
         layout={HhmiLayout}
-        onChange={source => console.log(source)}
+        // onChange={source => console.log(source)}
       />
     </>
   );

wax-prosemirror-services/src/FillTheGapQuestionService/FillTheGapContainerNodeView.js

+import AbstractNodeView from '../PortalService/AbstractNodeView';
+
+export default class FillTheGapContainerNodeView extends AbstractNodeView {
+  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 'fill_the_gap_container';
+  }
+
+  update(node) {
+    this.node = node;
+    if (this.context.view[node.attrs.id]) {
+      const { state } = this.context.view[node.attrs.id];
+      const start = node.content.findDiffStart(state.doc.content);
+      if (start != null) {
+        let { a: endA, b: endB } = node.content.findDiffEnd(state.doc.content);
+        const overlap = start - Math.min(endA, endB);
+        if (overlap > 0) {
+          endA += overlap;
+          endB += overlap;
+        }
+        this.context.view[node.attrs.id].dispatch(
+          state.tr
+            .replace(start, endB, node.slice(start, endA))
+            .setMeta('fromOutside', true),
+        );
+      }
+    }
+
+    return true;
+  }
+
+  selectNode() {
+    this.context.view[this.node.attrs.id].focus();
+  }
+
+  stopEvent(event) {
+    return (
+      this.context.view[this.node.attrs.id] !== undefined &&
+      event.target !== undefined &&
+      this.context.view[this.node.attrs.id].dom.contains(event.target)
+    );
+  }
+
+  ignoreMutation() {
+    return true;
+  }
+}

wax-prosemirror-services/src/FillTheGapQuestionService/FillTheGapNodeView.js

 import AbstractNodeView from '../PortalService/AbstractNodeView';
 
-export default class MultipleChoiceNodeView extends AbstractNodeView {
+export default class FillTheGapNodeView extends AbstractNodeView {
   constructor(
     node,
     view,
@@ -23,7 +23,6 @@ export default class MultipleChoiceNodeView extends AbstractNodeView {
   }
 
   update(node) {
-    // if (!node.sameMarkup(this.node)) return false;
     this.node = node;
     if (this.context.view[node.attrs.id]) {
       const { state } = this.context.view[node.attrs.id];

wax-prosemirror-services/src/FillTheGapQuestionService/FillTheGapQuestionService.js

@@ -3,7 +3,9 @@ import FillTheGapQuestion from './FillTheGapQuestion';
 import fillTheGapContainerNode from './schema/fillTheGapContainerNode';
 import fillTheGapNode from './schema/fillTheGapNode';
 import CreateGapService from './CreateGapService/CreateGapService';
+import FillTheGapContainerNodeView from './FillTheGapContainerNodeView';
 import FillTheGapNodeView from './FillTheGapNodeView';
+import FillTheGapContainerComponent from './components/FillTheGapContainerComponent';
 import GapComponent from './components/GapComponent';
 import './fillTheGap.css';
 
@@ -21,6 +23,12 @@ class FillTheGapQuestionService extends Service {
       fill_the_gap: fillTheGapNode,
     });
 
+    addPortal({
+      nodeView: FillTheGapContainerNodeView,
+      component: FillTheGapContainerComponent,
+      context: this.app,
+    });
+
     addPortal({
       nodeView: FillTheGapNodeView,
       component: GapComponent,

wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js

+/* eslint-disable react/prop-types */
+import React from 'react';
+import EditorComponent from './EditorComponent';
+
+export default ({ node, view, getPos }) => {
+  return (
+    <>
+      <EditorComponent getPos={getPos} node={node} view={view} />
+      <div>feedback</div>
+    </>
+  );
+};

wax-prosemirror-services/src/FillTheGapQuestionService/schema/fillTheGapContainerNode.js

+import { v4 as uuidv4 } from 'uuid';
+
 const fillTheGapContainerNode = {
   attrs: {
-    id: { default: '' },
+    id: { default: uuidv4() },
     class: { default: 'fill-the-gap' },
   },
   group: 'block questions',

wax-prosemirror-services/src/MultipleChoiceQuestionService/schema/multipleChoiceContainerNode.js

+import { v4 as uuidv4 } from 'uuid';
+
 const multipleChoiceContainerNode = {
   attrs: {
-    id: { default: '' },
+    id: { default: uuidv4() },
     class: { default: 'multiple-choice' },
   },
   group: 'block questions',