diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestion.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestion.js index 1cb916c2047156b22c0026caa9a80a751a887490..ab90228b636c032245f8bf13d456cab0d90f89bb 100644 --- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestion.js +++ b/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); }; } diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/ToolBarBtn.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/ToolBarBtn.js index 0f0fbe822ff97139b39586768d043e2bf81927a3..2aa66bb1398227c2f96da6739c3056b24e0aa4f7 100644 --- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/ToolBarBtn.js +++ b/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} />