pass component in progress

editors/demo/src/Editors.js

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

editors/demo/src/HHMI/HHMI.js

@@ -4,6 +4,7 @@ import { Wax } from 'wax-prosemirror-core';
 
 import { HhmiLayout } from './layout';
 import { config } from './config';
+import TestComponent from './MultipleChoiceQuestionService/components/TestComponent';
 
 const renderImage = file => {
   const reader = new FileReader();
@@ -24,6 +25,7 @@ const Hhmi = () => {
         fileUpload={file => renderImage(file)}
         value=""
         targetFormat="JSON"
+        nodeViews={[{ multiple_choice: { component: TestComponent } }]}
         // readonly
         layout={HhmiLayout}
         // onChange={source => console.log(source)}

editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestion.js

 import { injectable } from 'inversify';
 import { Tools } from 'wax-prosemirror-services';
+import { wrapIn } from 'prosemirror-commands';
 
 @injectable()
 class MultipleChoiceQuestion extends Tools {
@@ -8,7 +9,9 @@ class MultipleChoiceQuestion extends Tools {
   name = 'Multiple Choice';
 
   get run() {
-    return (state, dispatch) => {};
+    return (state, dispatch) => {
+      wrapIn(state.config.schema.nodes.multiple_choice)(state, dispatch);
+    };
   }
 
   get active() {

editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestionService.js

 import { Service } from 'wax-prosemirror-services';
 import MultipleChoiceQuestion from './MultipleChoiceQuestion';
+import multipleChoiceNode from './schema/multipleChoiceNode';
 
 class MultipleChoiceQuestionService extends Service {
   boot() {}
@@ -7,7 +8,10 @@ class MultipleChoiceQuestionService extends Service {
   register() {
     this.container.bind('MultipleChoiceQuestion').to(MultipleChoiceQuestion);
     const createNode = this.container.get('CreateNode');
-    console.log(createNode);
+    createNode({
+      multiple_choice: multipleChoiceNode,
+    });
+    console.log(this.schema);
   }
 }
 

editors/demo/src/HHMI/MultipleChoiceQuestionService/schema/multipleChoiceNode.js

+// const multipleChoiceNode = {
+//   group: 'block multiple',
+//   content: 'text*',
+//   atom: true,
+//   code: true,
+//   toDOM: () => ['multiple-choice', { class: 'multiple-choice' }, 0],
+//   parseDOM: [
+//     {
+//       tag: 'multiple-choice',
+//     },
+//   ],
+// };
+
+const multipleChoiceNode = {
+  content: 'block+',
+  group: 'block',
+  defining: true,
+  parseDOM: [{ tag: 'multiple-choice' }],
+  toDOM() {
+    return ['multiple-choice', 0];
+  },
+};
+
+export default multipleChoiceNode;

editors/demo/src/HHMI/config/config.js

@@ -17,17 +17,8 @@ import {
   DisplayToolGroupService,
   TextBlockLevelService,
   TextToolGroupService,
-  NoteService,
-  NoteToolGroupService,
-  TrackChangeService,
-  CommentsService,
-  CodeBlockService,
-  CodeBlockToolGroupService,
   DisplayTextToolGroupService,
   MathService,
-  FindAndReplaceService,
-  EditingSuggestingService,
-  TrackingAndEditingToolGroupService,
   FullScreenService,
   FullScreenToolGroupService,
   SpecialCharactersService,
@@ -38,13 +29,13 @@ import {
   BottomInfoService,
   TransformService,
   TransformToolGroupService,
-  TrackOptionsToolGroupService,
-  TrackCommentOptionsToolGroupService,
-  CustomTagInlineToolGroupService,
-  CustomTagBlockToolGroupService,
-  CustomTagService,
 } from 'wax-prosemirror-services';
 
+/* Questions Services */
+
+import MultipleChoiceQuestionService from '../MultipleChoiceQuestionService/MultipleChoiceQuestionService';
+import QuestionsToolGroupService from '../QuestionsToolGroupService/QuestionsToolGroupService';
+
 import { DefaultSchema } from 'wax-prosemirror-utilities';
 
 import { WaxSelectionPlugin } from 'wax-prosemirror-plugins';
@@ -77,6 +68,7 @@ export default {
         'Images',
         'SpecialCharacters',
         'Tables',
+        'Questions',
         'FullScreen',
       ],
     },
@@ -93,6 +85,8 @@ export default {
   ],
 
   services: [
+    new MultipleChoiceQuestionService(),
+    new QuestionsToolGroupService(),
     new DisplayBlockLevelService(),
     new DisplayToolGroupService(),
     new TextBlockLevelService(),

wax-prosemirror-core/src/Wax.js

@@ -66,6 +66,7 @@ const Wax = props => {
     user,
     onChange,
     targetFormat,
+    nodeViews,
   } = props;
 
   if (!application) return null;
@@ -144,6 +145,7 @@ const Wax = props => {
         targetFormat={targetFormat}
         TrackChange={TrackChange}
         user={user}
+        nodeViews={nodeViews}
       >
         {({ editor }) => <WaxRender className={className} editor={editor} />}
       </WaxView>

wax-prosemirror-core/src/WaxView.js

@@ -10,7 +10,6 @@ import { trackedTransaction } from 'wax-prosemirror-services';
 import { WaxContext, useReactNodeViewPortals } from './WaxContext';
 import transformPasted from './helpers/TransformPasted';
 import { createReactNodeView } from './ReactNodeView';
-import BlockQuote from './BlockQuote';
 
 let previousDoc;
 
@@ -23,13 +22,13 @@ export default props => {
     autoFocus,
     user,
     targetFormat,
+    nodeViews,
   } = props;
 
   const editorRef = useRef();
   let view;
   const context = useContext(WaxContext);
   const { createPortal } = useReactNodeViewPortals();
-
   const handleCreatePortal = useCallback(createPortal, []);
 
   const setEditorRef = useCallback(
@@ -49,19 +48,7 @@ export default props => {
             user,
             scrollMargin: 200,
             scrollThreshold: 200,
-            nodeViews: {
-              blockquote(node, view, getPos, decorations) {
-                console.log('rerenders for ever');
-                return createReactNodeView({
-                  node,
-                  view,
-                  getPos,
-                  decorations,
-                  component: BlockQuote,
-                  onCreatePortal: handleCreatePortal,
-                });
-              },
-            },
+            nodeViews: createNodeVies(),
             handleDOMEvents: {
               blur: onBlur
                 ? view => {
@@ -97,6 +84,26 @@ export default props => {
     [readonly],
   );
 
+  const createNodeVies = () => {
+    const test = nodeViews.map((nodeView, key) => {
+      return {
+        multiple_choice(node, view, getPos, decorations) {
+          console.log('rerenders for ever');
+          return createReactNodeView({
+            node,
+            view,
+            getPos,
+            decorations,
+            component: nodeView.multiple_choice.component,
+            onCreatePortal: handleCreatePortal,
+          });
+        },
+      };
+    });
+    console.log(test);
+    return test[0];
+  };
+
   const dispatchTransaction = transaction => {
     const { TrackChange } = props;
     const tr =