multiple drop down toolbar

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

@@ -59,6 +59,10 @@ export default {
       templateArea: 'fillTheGap',
       toolGroups: ['FillTheGap'],
     },
+    {
+      templateArea: 'MultipleDropDown',
+      toolGroups: ['MultipleDropDown'],
+    },
   ],
 
   SchemaService: DefaultSchema,

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

@@ -12,6 +12,12 @@ const FillTheGapContainer = styled.div`
 
 const FillTheGapContainerTool = styled.div`
   background: #f5f5f7;
+
+  span {
+    position: relative;
+    left: 5px;
+    top: 3px;
+  }
 `;
 
 const FillTheGapWrapper = styled.div`
@@ -41,6 +47,7 @@ export default ({ node, view, getPos }) => {
       <div>
         <span> Fill The Gap</span>
         <FillTheGapContainerTool>
+          <span> Insert Gap :</span>
           <FillTheGapTool />
         </FillTheGapContainerTool>
       </div>

wax-prosemirror-services/src/MultipleChoiceQuestionService/multipleQuestionStyles.css

   /* -- Multiple Choice ---------------------------------- */
 
-.ProseMirror {
-  counter-reset: multiple-question;
-}
-
 .multiple-choice,
 .multiple-choice-single-correct,
 .true-false,
 .true-false-single-correct {
   border: 3px solid #f5f5f7;
-  counter-reset: question-item-multiple;
   margin: 38px;
   padding: 20px;
   padding-top: 0px;
@@ -20,7 +15,6 @@
 .true-false:before,
 .true-false-single-correct:before {
   bottom: 25px;
-  counter-increment: multiple-question;
   position: relative;
   right: 20px;
 }
@@ -35,19 +29,19 @@
 
 
 .multiple-choice:before {
-  content: 'Answer Group ' counter(multiple-question) ' (multiple choice)';
+  content: 'Multiple Choice' ;
 }
 
 .multiple-choice-single-correct:before {
-  content: 'Answer Group ' counter(multiple-question)' (multiple choice single correct)';
+  content: 'Multiple Choice Single Correct';
  }
 
 .true-false:before {
-  content: 'Answer Group ' counter(multiple-question) ' (true/false)';
+  content: 'True False';
 }
 
 .true-false-single-correct:before {
-  content: 'Answer Group ' counter(multiple-question)' (true/false single correct)';
+  content: 'True False Single Correct';
 }
 
 .rc-switch {

wax-prosemirror-services/src/MultipleDropDownService/CreateDropDownService/CreateDropDown.js

@@ -29,20 +29,13 @@ class CreateDropDown extends Tools {
   }
 
   select = (state, activeViewId, activeView) => {
-    let status = false;
-    const { from, to } = state.selection;
-    const { disallowedTools } = activeView.props;
+    if (
+      activeView.props.type &&
+      activeView.props.type === 'MultipleDropDownContaier'
+    )
+      return true;
 
-    state.doc.nodesBetween(from, to, (node, pos) => {
-      if (node.type.name === 'multiple_drop_down_container') {
-        status = true;
-      }
-    });
-
-    if (from === null || disallowedTools.includes('MultipleDropDown'))
-      status = false;
-
-    return status;
+    return false;
   };
 
   get active() {

wax-prosemirror-services/src/MultipleDropDownService/CreateDropDownService/CreateDropDownService.js

@@ -4,6 +4,7 @@ import multipleDropDownOptionNode from '../schema/multipleDropDownOptionNode';
 import MultipleDropDownNodeView from './MultipleDropDownNodeView';
 import MultipleDropDownComponent from '../components/MultipleDropDownComponent';
 import DropDownComponent from '../components/DropDownComponent';
+import MultipleDropDownToolGroupService from '../../WaxToolGroups/MultipleDropDownToolGroupService/MultipleDropDownToolGroupService';
 
 class CreateDropDownService extends Service {
   name = 'CreateDropDownService';
@@ -37,6 +38,8 @@ class CreateDropDownService extends Service {
       context: this.app,
     });
   }
+
+  dependencies = [new MultipleDropDownToolGroupService()];
 }
 
 export default CreateDropDownService;

wax-prosemirror-services/src/MultipleDropDownService/components/ContainerEditor.js

@@ -122,6 +122,7 @@ const ContainerEditor = ({ node, view, getPos }) => {
         }),
         dispatchTransaction,
         disallowedTools: ['Images', 'FillTheGap', 'MultipleChoice'],
+        type: 'MultipleDropDownContaier',
         handleDOMEvents: {
           mousedown: () => {
             main.dispatch(

wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownContainerComponent.js

 /* eslint-disable react/prop-types */
 import React, { useContext } from 'react';
-import { WaxContext } from 'wax-prosemirror-core';
+import { WaxContext, ComponentPlugin } from 'wax-prosemirror-core';
 import styled from 'styled-components';
 import ContainerEditor from './ContainerEditor';
 import FeedbackComponent from './FeedbackComponent';
@@ -10,6 +10,15 @@ const MultipleDropDownpWrapper = styled.div`
   margin-top: 10px;
 `;
 
+const MultipleDropDownContainerTool = styled.div`
+  background: #f5f5f7;
+  span {
+    position: relative;
+    left: 5px;
+    top: 3px;
+  }
+`;
+
 const MultipleDropDownpContainer = styled.div`
   border: 3px solid #f5f5f7;
   margin-bottom: 30px;
@@ -21,6 +30,8 @@ export default ({ node, view, getPos }) => {
     pmViews: { main },
   } = context;
 
+  const MultipleDropDown = ComponentPlugin('MultipleDropDown');
+
   const customProps = main.props.customValues;
 
   const isEditable = main.props.editable(editable => {
@@ -32,7 +43,13 @@ export default ({ node, view, getPos }) => {
 
   return (
     <MultipleDropDownpWrapper>
-      <span>Multiple Drop Down</span>
+      <div>
+        <span>Multiple Drop Down</span>
+        <MultipleDropDownContainerTool>
+          <span> Insert Drop Down :</span>
+          <MultipleDropDown />
+        </MultipleDropDownContainerTool>
+      </div>
       <MultipleDropDownpContainer className="multiple-drop-down">
         <ContainerEditor getPos={getPos} node={node} view={view} />
         {!testMode && (

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

+import { injectable, inject } from 'inversify';
+import { ToolGroup } from 'wax-prosemirror-core';
+
+@injectable()
+class MultipleDropDown extends ToolGroup {
+  tools = [];
+  constructor(@inject('CreateDropDown') CreateDropDown) {
+    super();
+    this.tools = [CreateDropDown];
+  }
+}
+
+export default MultipleDropDown;

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

+import { Service } from 'wax-prosemirror-core';
+import MultipleDropDown from './MultipleDropDown';
+
+class MultipleDropDownToolGroupService extends Service {
+  register() {
+    this.container.bind('MultipleDropDown').to(MultipleDropDown);
+  }
+}
+
+export default MultipleDropDownToolGroupService;