execute command

wax-prosemirror-core/src/utilities/commands/Commands.js

@@ -258,6 +258,7 @@ const isParentOfType = (state, nodeType) => {
   const predicate = node => node.type === nodeType;
   for (let i = state.selection.$from.depth; i > 0; i -= 1) {
     const node = state.selection.$from.node(i);
+    console.log(node);
     if (predicate(node)) {
       status = true;
     }

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

@@ -54,6 +54,10 @@ class MatchingQuestion extends Tools {
         Commands.isParentOfType(
           state,
           state.config.schema.nodes.matching_container,
+        ) ||
+        Commands.isParentOfType(
+          state,
+          state.config.schema.nodes.matching_option,
         )
       ) {
         return true;

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

@@ -125,9 +125,7 @@ const EditorComponent = ({ node, view, getPos }) => {
                 .setSelection(
                   new TextSelection(
                     main.state.tr.doc.resolve(
-                      getPos() +
-                        2 +
-                        context.pmViews[questionId].state.selection.to,
+                      getPos() + context.pmViews[questionId].state.selection.to,
                     ),
                   ),
                 ),

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

@@ -28,6 +28,10 @@ class MultipleChoiceSingleCorrectQuestion extends Tools {
   get active() {
     return state => {
       if (
+        Commands.isParentOfType(
+          state,
+          state.config.schema.nodes.multiple_choice_single_correct_container,
+        ) ||
         Commands.isParentOfType(
           state,
           state.config.schema.nodes.multiple_choice_single_correct,

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

@@ -32,7 +32,7 @@ class CreateDropDown extends Tools {
   select = (state, activeViewId, activeView) => {
     if (
       activeView.props.type &&
-      activeView.props.type === 'MultipleDropDownContaier'
+      activeView.props.type === 'MultipleDropDownContainer'
     )
       return true;
 

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

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

wax-prosemirror-services/src/WaxToolGroups/QuestionsDropDownToolGroupService/DropDownComponent.js

@@ -123,7 +123,7 @@ const DropDownComponent = ({ view, tools }) => {
   const [isOpen, setIsOpen] = useState(false);
   useOnClickOutside(wrapperRef, () => setIsOpen(false));
 
-  const [label, setLabel] = useState(null);
+  const [label, setLabel] = useState('Question Type');
   const isEditable = main.props.editable(editable => {
     return editable;
   });
@@ -132,9 +132,8 @@ const DropDownComponent = ({ view, tools }) => {
     setLabel('Question Type');
     dropDownOptions.forEach(option => {
       if (option.item.active(main.state)) {
-        setTimeout(() => {
-          setLabel(option.label);
-        });
+        setLabel(option.label);
+        setTimeout(() => {});
       }
     });
   }, [activeViewId]);
@@ -186,6 +185,11 @@ const DropDownComponent = ({ view, tools }) => {
     }
   };
 
+  const onChange = option => {
+    tools[option.value].run(main, context);
+    openCloseMenu();
+  };
+
   const MultipleDropDown = useMemo(
     () => (
       <Wrapper disabled={isDisabled} ref={wrapperRef}>
@@ -202,7 +206,7 @@ const DropDownComponent = ({ view, tools }) => {
           tabIndex="0"
           type="button"
         >
-          <span>Question type</span> <StyledIcon name="expand" />
+          <span>{label}</span> <StyledIcon name="expand" />
         </DropDownButton>
         <DropDownMenu isOpen={isOpen} role="menu">
           {dropDownOptions.map((option, index) => {
@@ -210,9 +214,7 @@ const DropDownComponent = ({ view, tools }) => {
             return (
               <span
                 key={option.value}
-                onClick={() => {
-                  openCloseMenu();
-                }}
+                onClick={() => onChange(option)}
                 onKeyDown={e => onKeyDown(e, index)}
                 ref={itemRefs.current[index]}
                 role="menuitem"
@@ -225,7 +227,7 @@ const DropDownComponent = ({ view, tools }) => {
         </DropDownMenu>
       </Wrapper>
     ),
-    [isDisabled, isOpen],
+    [isDisabled, isOpen, label],
   );
 
   return MultipleDropDown;