Merge branch 'question-fixes' into 'master'

Question fixes

See merge request !332

editors/demo/src/HHMI/HHMI.js

@@ -15,7 +15,7 @@ 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="mutiple-choice"><div class="mutiple-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="mutiple-choice-option" id="e7d6bb2f-7cd7-44f1-92a0-281e72157538" correct="true" feedback=""><p class="paragraph">answer 2</p></div><div class="mutiple-choice-option" id="d6fc749f-afae-4203-9562-d68c380a86e5" correct="false" feedback=""><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=""><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

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

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

@@ -18,9 +18,12 @@ class FillTheGapQuestion extends Tools {
     return state => {};
   }
 
-  select = (state, activeViewId) => {
+  select = (state, activeViewId, activeView) => {
     let status = true;
+    const { disallowedTools } = activeView.props;
     const { from, to } = state.selection;
+    if (from === null || disallowedTools.includes('Lists')) return false;
+
     state.doc.nodesBetween(from, to, (node, pos) => {
       if (node.type.groups.includes('questions')) {
         status = false;

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

@@ -91,7 +91,7 @@ const EditorComponent = ({ node, view, getPos }) => {
         }),
         // This is the magic part
         dispatchTransaction,
-        disallowedTools: ['images', 'lists', 'lift'],
+        disallowedTools: ['Images', 'Lists', 'lift', 'Tables', 'FillTheGap'],
         handleDOMEvents: {
           mousedown: () => {
             context.view[activeViewId].dispatch(

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

@@ -2,7 +2,8 @@ const fillTheGapNode = {
   group: 'inline',
   content: 'text*',
   inline: true,
-  // atom: true,
+  atom: true,
+  excludes: 'fill_the_gap',
   attrs: {
     id: { default: '' },
     class: { default: 'fill-the-gap' },

wax-prosemirror-services/src/ImageService/Image.js

+/* eslint-disable no-underscore-dangle */
 import React from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { isEmpty } from 'lodash';
@@ -19,8 +20,12 @@ class Image extends Tools {
   }
 
   select = activeView => {
+    const {
+      selection: { from },
+    } = activeView.state;
+    if (from === null) return false;
     const { disallowedTools } = activeView.props;
-    if (disallowedTools.includes('images')) return false;
+    if (disallowedTools.includes('Images')) return false;
     return true;
   };
 
@@ -39,9 +44,9 @@ class Image extends Tools {
     );
     return this._isDisplayed ? (
       <ImageUpload
-        key={uuidv4()}
-        item={this.toJSON()}
         fileUpload={upload}
+        item={this.toJSON()}
+        key={uuidv4()}
         view={view}
       />
     ) : null;

wax-prosemirror-services/src/InlineAnnotations/CodeService/Code.js

@@ -16,6 +16,14 @@ class Code extends Tools {
     };
   }
 
+  select = state => {
+    const {
+      selection: { from },
+    } = state;
+    if (from === null) return false;
+    return true;
+  };
+
   get active() {
     return state => {
       return Commands.markActive(state.config.schema.marks.code)(state);

wax-prosemirror-services/src/InlineAnnotations/EmphasisService/Emphasis.js

@@ -16,6 +16,14 @@ class Emphasis extends Tools {
     };
   }
 
+  select = state => {
+    const {
+      selection: { from },
+    } = state;
+    if (from === null) return false;
+    return true;
+  };
+
   get active() {
     return state => {
       return Commands.markActive(state.config.schema.marks.em)(state);

wax-prosemirror-services/src/InlineAnnotations/SmallCapsService/SmallCaps.js

@@ -16,6 +16,14 @@ class SmallCaps extends Tools {
     };
   }
 
+  select = state => {
+    const {
+      selection: { from },
+    } = state;
+    if (from === null) return false;
+    return true;
+  };
+
   get active() {
     return state => {
       return Commands.markActive(state.config.schema.marks.smallcaps)(state);

wax-prosemirror-services/src/InlineAnnotations/StrikeThroughService/StrikeThrough.js

@@ -16,6 +16,14 @@ class StrikeThrough extends Tools {
     };
   }
 
+  select = state => {
+    const {
+      selection: { from },
+    } = state;
+    if (from === null) return false;
+    return true;
+  };
+
   get active() {
     return state => {
       return Commands.markActive(state.config.schema.marks.strikethrough)(

wax-prosemirror-services/src/InlineAnnotations/StrongService/Strong.js

 import { toggleMark } from 'prosemirror-commands';
 import { Commands } from 'wax-prosemirror-utilities';
-import Tools from '../../lib/Tools';
 import { injectable } from 'inversify';
+import Tools from '../../lib/Tools';
 
 export default
 @injectable()
@@ -16,6 +16,14 @@ class Strong extends Tools {
     };
   }
 
+  select = state => {
+    const {
+      selection: { from },
+    } = state;
+    if (from === null) return false;
+    return true;
+  };
+
   get active() {
     return state => {
       return Commands.markActive(state.config.schema.marks.strong)(state);

wax-prosemirror-services/src/InlineAnnotations/SubscriptService/Subscript.js

@@ -16,6 +16,14 @@ class Subscript extends Tools {
     };
   }
 
+  select = state => {
+    const {
+      selection: { from },
+    } = state;
+    if (from === null) return false;
+    return true;
+  };
+
   get active() {
     return state => {
       return Commands.markActive(state.config.schema.marks.subscript)(state);

wax-prosemirror-services/src/InlineAnnotations/SuperscriptService/Superscript.js

@@ -16,6 +16,14 @@ class Superscript extends Tools {
     };
   }
 
+  select = state => {
+    const {
+      selection: { from },
+    } = state;
+    if (from === null) return false;
+    return true;
+  };
+
   get active() {
     return state => {
       return Commands.markActive(state.config.schema.marks.superscript)(state);

wax-prosemirror-services/src/InlineAnnotations/UnderlineService/Underline.js

@@ -17,6 +17,14 @@ class Underline extends Tools {
     };
   }
 
+  select = state => {
+    const {
+      selection: { from },
+    } = state;
+    if (from === null) return false;
+    return true;
+  };
+
   get active() {
     return state => {
       return Commands.markActive(state.config.schema.marks.underline)(state);

wax-prosemirror-services/src/ListsService/BulletListService/BulletList.js

@@ -25,8 +25,12 @@ class BulletList extends Tools {
   }
 
   select = (state, activeViewId, activeView) => {
+    const {
+      selection: { from },
+    } = state;
+    if (from === null) return false;
     const { disallowedTools } = activeView.props;
-    if (disallowedTools.includes('lists')) return false;
+    if (disallowedTools.includes('Lists')) return false;
     return true;
   };
 

wax-prosemirror-services/src/ListsService/OrderedListService/OrderedList.js

@@ -23,8 +23,12 @@ class OrderedList extends Tools {
   }
 
   select = (state, activeViewId, activeView) => {
+    const {
+      selection: { from },
+    } = state;
+    if (from === null) return false;
     const { disallowedTools } = activeView.props;
-    if (disallowedTools.includes('lists')) return false;
+    if (disallowedTools.includes('Lists')) return false;
     return true;
   };
 

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

@@ -30,9 +30,14 @@ class MultipleChoiceQuestion extends Tools {
     return state => {};
   }
 
-  select = (state, activeViewId) => {
+  select = (state, activeViewId, activeView) => {
+    const { disallowedTools } = activeView.props;
+    if (disallowedTools.includes('MultipleChoice')) return false;
     let status = true;
     const { from, to } = state.selection;
+
+    if (from === null) return false;
+
     state.doc.nodesBetween(from, to, (node, pos) => {
       if (node.type.groups.includes('questions')) {
         status = false;

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

@@ -97,7 +97,7 @@ const EditorComponent = ({ node, view, getPos }) => {
         }),
         // This is the magic part
         dispatchTransaction,
-        disallowedTools: ['images', 'lists', 'lift'],
+        disallowedTools: ['Images', 'Lists', 'lift', 'MultipleChoice'],
         handleDOMEvents: {
           mousedown: () => {
             context.view[activeViewId].dispatch(

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

-/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable react/prop-types */
+
 import React, { useContext, useRef, useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { TextSelection } from 'prosemirror-state';
@@ -44,7 +46,7 @@ export default ({ node, view, getPos }) => {
     if (e.key === 'Backspace') {
       context.view.main.dispatch(
         context.view.main.state.tr.setSelection(
-          new TextSelection(context.view.main.state.tr.doc.resolve(0)),
+          TextSelection.create(context.view.main.state.tr.doc, 0),
         ),
       );
     }
@@ -73,7 +75,7 @@ export default ({ node, view, getPos }) => {
   const onFocus = () => {
     context.view.main.dispatch(
       context.view.main.state.tr.setSelection(
-        new TextSelection(context.view.main.state.tr.doc.resolve(0)),
+        TextSelection.create(context.view.main.state.tr.doc, null),
       ),
     );
   };
@@ -82,14 +84,14 @@ export default ({ node, view, getPos }) => {
     <FeedBack>
       <FeedBackLabel>Feedback</FeedBackLabel>
       <FeedBackInput
-        onKeyDown={handleKeyDown}
+        onBlur={saveFeedBack}
         onChange={feedBackInput}
+        onFocus={onFocus}
+        onKeyDown={handleKeyDown}
         placeholder="Insert feedback"
         ref={feedBackRef}
         type="text"
         value={feedBack}
-        onBlur={saveFeedBack}
-        onFocus={onFocus}
       />
     </FeedBack>
   );

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

@@ -44,8 +44,8 @@ const ToolBarBtn = ({ view = {}, item }) => {
   const createOption = () => {
     const { state, dispatch } = main;
     /* Create Wrapping */
-    let { $from, $to } = state.selection;
-    let range = $from.blockRange($to);
+    const { $from, $to } = state.selection;
+    const range = $from.blockRange($to);
 
     wrapIn(state.config.schema.nodes.multiple_choice_container, {
       id: uuidv4(),