create first option

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

@@ -28,31 +28,31 @@ class MultipleChoiceQuestion extends Tools {
     return (view, context) => {
       checkifEmpty(view);
 
-      const { state, dispatch } = view;
-      const { tr } = state;
-      /* Create Wrapping */
-      let { $from, $to } = state.selection;
-      let range = $from.blockRange($to),
-        wrapping =
-          range &&
-          findWrapping(
-            range,
-            state.config.schema.nodes.multiple_choice_container,
-            {},
-          );
-      if (!wrapping) return false;
-      tr.wrap(range, wrapping).scrollIntoView();
+      // const { state, dispatch } = view;
+      // const { tr } = state;
+      // /* Create Wrapping */
+      // let { $from, $to } = state.selection;
+      // let range = $from.blockRange($to),
+      //   wrapping =
+      //     range &&
+      //     findWrapping(
+      //       range,
+      //       state.config.schema.nodes.multiple_choice_container,
+      //       {},
+      //     );
+      // if (!wrapping) return false;
+      // tr.wrap(range, wrapping).scrollIntoView();
 
-      /* create First Option */
-      const newAnswerId = uuidv4();
-      const answerOption = state.config.schema.nodes.multiple_choice.create(
-        { id: newAnswerId },
-        Fragment.empty,
-      );
-      dispatch(tr.replaceSelectionWith(answerOption));
-      setTimeout(() => {
-        helpers.createEmptyParagraph(context, newAnswerId);
-      }, 100);
+      // /* create First Option */
+      // const newAnswerId = uuidv4();
+      // const answerOption = state.config.schema.nodes.multiple_choice.create(
+      //   { id: newAnswerId },
+      //   Fragment.empty,
+      // );
+      // dispatch(tr.replaceSelectionWith(answerOption));
+      // setTimeout(() => {
+      //   helpers.createEmptyParagraph(context, newAnswerId);
+      // }, 100);
     };
   }
 

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

@@ -3,7 +3,13 @@ import React, { useContext, useMemo } from 'react';
 import { WaxContext } from 'wax-prosemirror-core';
 import styled, { css } from 'styled-components';
 import { MenuButton } from 'wax-prosemirror-components';
+import { Commands } from 'wax-prosemirror-utilities';
+import { Fragment } from 'prosemirror-model';
+import { TextSelection } from 'prosemirror-state';
+import { wrapIn } from 'prosemirror-commands';
+import helpers from '../helpers/helpers';
 
+import { v4 as uuidv4 } from 'uuid';
 const activeStyles = css`
   pointer-events: none;
 `;
@@ -36,6 +42,36 @@ const ToolBarBtn = ({ view = {}, item }) => {
   let isDisabled = !select(state, activeViewId, activeView);
   if (!isEditable) isDisabled = true;
 
+  const createOption = () => {
+    const { state, dispatch } = main;
+    /* Create Wrapping */
+    let { $from, $to } = state.selection;
+    let range = $from.blockRange($to);
+
+    wrapIn(state.config.schema.nodes.multiple_choice_container)(
+      state,
+      dispatch,
+    );
+
+    /* set New Selection */
+    dispatch(
+      main.state.tr.setSelection(
+        new TextSelection(main.state.tr.doc.resolve(range.$to.pos)),
+      ),
+    );
+
+    /* create First Option */
+    const newAnswerId = uuidv4();
+    const answerOption = main.state.config.schema.nodes.multiple_choice.create(
+      { id: newAnswerId },
+      Fragment.empty,
+    );
+    dispatch(main.state.tr.replaceSelectionWith(answerOption));
+    setTimeout(() => {
+      helpers.createEmptyParagraph(context, newAnswerId);
+    }, 50);
+  };
+
   const ToolBarBtnComponent = useMemo(
     () => (
       <StyledButton
@@ -45,7 +81,8 @@ const ToolBarBtn = ({ view = {}, item }) => {
         label={label}
         onMouseDown={e => {
           e.preventDefault();
-          run(main, context);
+          item.run(view);
+          createOption();
         }}
         title={title}
       />