set Active

editors/demo/src/HHMI/HHMI.js

@@ -15,7 +15,16 @@ const renderImage = file => {
   });
 };
 
-const t = `<p class="paragraph">Based on the equation below</p><math-display class="math-node">x + y = 5</math-display><p class="paragraph">Which ones are correct?</p><p class="paragraph"></p><div id="" class="multiple-choice"><div class="multiple-choice-option" id="d7b65415-ff82-446f-afa4-accaa3837f4a" correct="false" feedback=""><p class="paragraph">answer 1</p><p class="paragraph"><math-inline class="math-node">x+y=1</math-inline></p></div><div class="multiple-choice-option" id="e7d6bb2f-7cd7-44f1-92a0-281e72157538" correct="true" feedback=""><p class="paragraph">answer 2</p></div><div class="multiple-choice-option" id="d6fc749f-afae-4203-9562-d68c380a86e5" correct="false" feedback="1111111"><p class="paragraph">answer 3</p></div></div><div id="" class="fill-the-gap"><p class="paragraph">A <span id="bfd4376c-4424-455e-9187-f53282fa1024" class="fill-the-gap">DNA</span> molecule is very long and usually consists of hundreds or thousands of genes.</p><p class="paragraph">An electron having a certain discrete amount of <span id="14dedf44-728f-4384-835f-e3af82b25623" class="fill-the-gap">energy</span> is something like a ball on a staircase.</p></div><p class="paragraph"></p>`;
+const t = `<p class="paragraph">Based on the equation below</p>
+<math-display class="math-node">x + y = 5</math-display><p class="paragraph">Which ones are correct?</p>
+<p class="paragraph"></p>
+<div id="" class="multiple-choice"><div class="multiple-choice-option" id="d7b65415-ff82-446f-afa4-accaa3837f4a" correct="false" feedback="">
+<p class="paragraph">answer 1</p><p class="paragraph"><math-inline class="math-node">x+y=1</math-inline></p></div>
+<div class="multiple-choice-option" id="e7d6bb2f-7cd7-44f1-92a0-281e72157538" correct="true" feedback="">
+<p class="paragraph">answer 2</p></div><div class="multiple-choice-option" id="d6fc749f-afae-4203-9562-d68c380a86e5" correct="false" feedback="1111111">
+<p class="paragraph">answer 3</p></div></div>
+
+<div id="" class="fill-the-gap"><p class="paragraph">A <span id="bfd4376c-4424-455e-9187-f53282fa1024" class="fill-the-gap">DNA</span> molecule is very long and usually consists of hundreds or thousands of genes.</p><p class="paragraph">An electron having a certain discrete amount of <span id="14dedf44-728f-4384-835f-e3af82b25623" class="fill-the-gap">energy</span> is something like a ball on a staircase.</p></div><p class="paragraph"></p>`;
 
 const Hhmi = () => {
   return (

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

@@ -324,7 +324,8 @@ export default css`
 
   /* -- Multiple Choice ---------------------------------- */
 
-  .multiple-choice {
+  .multiple-choice,
+  .multiple-choice-single-correct {
     border: 3px solid #f5f5f7;
     counter-reset: question-item-multiple;
     margin: 38px;

wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceQuestion.js

@@ -62,7 +62,18 @@ class MultipleChoiceQuestion extends Tools {
   }
 
   get active() {
-    return state => {};
+    return state => {
+      let type = '';
+      const predicate = node =>
+        node.type === state.config.schema.nodes.multiple_choice;
+      for (let i = state.selection.$from.depth; i > 0; i--) {
+        const node = state.selection.$from.node(i);
+        if (predicate(node)) {
+          type = 'multiple';
+        }
+      }
+      return type;
+    };
   }
 
   select = (state, activeView) => {

wax-prosemirror-services/src/MultipleChoiceQuestionService/components/EditorComponent.js

@@ -82,8 +82,6 @@ const EditorComponent = ({ node, view, getPos }) => {
     ...plugins,
   ]);
 
-  const { activeViewId } = context;
-
   useEffect(() => {
     questionView = new EditorView(
       {
@@ -100,14 +98,21 @@ const EditorComponent = ({ node, view, getPos }) => {
         disallowedTools: ['Images', 'Lists', 'lift', 'MultipleChoice'],
         handleDOMEvents: {
           mousedown: () => {
-            context.view[activeViewId].dispatch(
-              context.view[activeViewId].state.tr.setSelection(
-                TextSelection.between(
-                  context.view[activeViewId].state.selection.$anchor,
-                  context.view[activeViewId].state.selection.$head,
+            context.view.main.dispatch(
+              context.view.main.state.tr.setSelection(
+                new TextSelection(
+                  context.view.main.state.tr.doc.resolve(getPos() + 2),
                 ),
               ),
             );
+            // context.view[activeViewId].dispatch(
+            //   context.view[activeViewId].state.tr.setSelection(
+            //     TextSelection.between(
+            //       context.view[activeViewId].state.selection.$anchor,
+            //       context.view[activeViewId].state.selection.$head,
+            //     ),
+            //   ),
+            // );
             context.updateView({}, questionId);
             // Kludge to prevent issues due to the fact that the whole
             // footnote is node-selected (and thus DOM-selected) when

wax-prosemirror-services/src/MultipleChoiceSingleCorrectQuestionService/MultipleChoiceSingleCorrectQuestion.js

@@ -62,7 +62,18 @@ class MultipleChoiceSingleCorrectQuestion extends Tools {
   }
 
   get active() {
-    return state => {};
+    return state => {
+      let type = '';
+      const predicate = node =>
+        node.type === state.config.schema.nodes.multiple_choice_single_correct;
+      for (let i = state.selection.$from.depth; i > 0; i--) {
+        const node = state.selection.$from.node(i);
+        if (predicate(node)) {
+          type = 'multipleSingle';
+        }
+      }
+      return type;
+    };
   }
 
   select = (state, activeView) => {

wax-prosemirror-services/src/MultipleChoiceSingleCorrectQuestionService/components/EditorComponent.js

@@ -82,8 +82,6 @@ const EditorComponent = ({ node, view, getPos }) => {
     ...plugins,
   ]);
 
-  const { activeViewId } = context;
-
   useEffect(() => {
     questionView = new EditorView(
       {
@@ -100,11 +98,10 @@ const EditorComponent = ({ node, view, getPos }) => {
         disallowedTools: ['Images', 'Lists', 'lift', 'MultipleChoice'],
         handleDOMEvents: {
           mousedown: () => {
-            context.view[activeViewId].dispatch(
-              context.view[activeViewId].state.tr.setSelection(
-                TextSelection.between(
-                  context.view[activeViewId].state.selection.$anchor,
-                  context.view[activeViewId].state.selection.$head,
+            context.view.main.dispatch(
+              context.view.main.state.tr.setSelection(
+                new TextSelection(
+                  context.view.main.state.tr.doc.resolve(getPos() + 2),
                 ),
               ),
             );

wax-prosemirror-services/src/WaxToolGroups/MultipleDropDownToolGroupService/MultipleDropDown.js

@@ -64,25 +64,37 @@ class MultipleDropDown extends ToolGroup {
     const { state } = view;
 
     const dropDownOptions = [
-      { label: 'Multiple Choice ', value: '0', item: this._tools[0] },
       {
-        label: 'Multiple Choice (single correct)  ',
+        label: 'Multiple Choice',
+        value: '0',
+        item: this._tools[0],
+        type: 'multiple',
+      },
+      {
+        label: 'Multiple Choice (single correct)',
         value: '1',
         item: this._tools[1],
+        type: 'multipleSingle',
+      },
+      {
+        label: 'True/False',
+        value: '2',
+        item: this._tools[0],
+        type: 'trueFalse',
       },
-      { label: 'True/False ', value: '2', item: this._tools[0] },
       {
-        label: 'True/False (single correct) ',
+        label: 'True/False (single correct)',
         value: '3',
         item: this._tools[0],
+        type: 'trueFalseSingle',
       },
     ];
 
     const isDisabled = this._tools[0].select(state, activeView);
     let found = '';
-    dropDownOptions.forEach((item, i) => {
-      if (item.item.select(state, activeView) === false) {
-        found = item.item.label;
+    dropDownOptions.forEach((option, i) => {
+      if (option.item.active(main.state) === option.type) {
+        found = option.label;
       }
     });