nodeview plus schema 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/config/config.js

@@ -27,6 +27,8 @@ import {
   MultipleDropDownToolGroupService,
   EssayService,
   EssayToolGroupService,
+  MatchingService,
+  MatchingToolGroupService,
 } from 'wax-prosemirror-services';
 
 import { DefaultSchema } from 'wax-prosemirror-utilities';
@@ -55,6 +57,7 @@ export default {
         'MultipleDropDown',
         'Essay',
         'FillTheGap',
+        'Matching',
         'FullScreen',
       ],
     },
@@ -66,6 +69,8 @@ export default {
   PmPlugins: [columnResizing(), tableEditing(), invisibles([hardBreak()])],
 
   services: [
+    new MatchingService(),
+    new MatchingToolGroupService(),
     new FillTheGapQuestionService(),
     new FillTheGapToolGroupService(),
     new MultipleChoiceQuestionService(),

editors/demo/src/HHMI/layout/HhmiLayout.js

@@ -48,7 +48,7 @@ const TopMenu = styled.div`
     margin-right: ${grid(5)};
   }
 
-  > div[data-name='FillTheGap'] {
+  > div[data-name='Matching'] {
     border-right: none;
   }
 `;

wax-prosemirror-services/src/MatchingService/MatchingContainerNodeView.js

+import QuestionsNodeView from '../lib/helpers/QuestionsNodeView';
+
+export default class MatchingContainerNodeView 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 'matching_container';
+  }
+
+  stopEvent(event) {
+    if (event.target.type === 'text') {
+      return true;
+    }
+    const innerView = this.context.pmViews[this.node.attrs.id];
+    return innerView && innerView.dom.contains(event.target);
+  }
+}

wax-prosemirror-services/src/MatchingService/MatchingQuestion.js

@@ -3,9 +3,9 @@ import Tools from '../lib/Tools';
 
 @injectable()
 class MatchingQuestion extends Tools {
-  title = 'Change to Block Quote';
-  label = 'Block Quote';
-  name = 'BlockQuote';
+  title = 'Add Matching';
+  label = 'Matching';
+  name = 'Matching';
 
   get run() {
     return (state, dispatch) => {};

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

 import Service from '../Service';
 import MatchingQuestion from './MatchingQuestion';
+import matchingContainerNode from './schema/matchingContainerNode';
+import MatchingContainerNodeView from './MatchingContainerNodeView';
 
 class MatchingService extends Service {
   name = 'MatchingService';
 
-  boot() {}
-
   register() {
     this.container.bind('MatchingQuestion').to(MatchingQuestion);
+    const createNode = this.container.get('CreateNode');
+    const addPortal = this.container.get('AddPortal');
+
+    createNode({
+      matching_container: matchingContainerNode,
+    });
+
+    // addPortal({
+    //   nodeView: MatchingContainerNodeView,
+    //   component: QuestionComponent,
+    //   context: this.app,
+    // });
   }
 }
 

wax-prosemirror-services/src/MatchingService/schema/matchingContainerNode.js

+const matchingContainerNode = {
+  attrs: {
+    id: { default: '' },
+    class: { default: 'matching-container' },
+  },
+  group: 'block questions',
+  atom: true,
+  content: 'block*',
+  parseDOM: [
+    {
+      tag: 'div.matching-container',
+      getAttrs(dom) {
+        return {
+          id: dom.getAttribute('id'),
+          class: dom.getAttribute('class'),
+        };
+      },
+    },
+  ],
+  toDOM(node) {
+    return ['div', node.attrs, 0];
+  },
+};
+
+export default matchingContainerNode;

wax-prosemirror-services/src/WaxToolGroups/MatchingToolGroupService/Matching.js

@@ -4,9 +4,9 @@ import ToolGroup from '../../lib/ToolGroup';
 @injectable()
 class Matching extends ToolGroup {
   tools = [];
-  constructor() {
+  constructor(@inject('MatchingQuestion') matchingQuestion) {
     super();
-    this.tools = [];
+    this.tools = [matchingQuestion];
   }
 }