diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js index 290a7b726d42f082e7ea6c131061607c1d1029fc..6966aaeec98e50c033c8a3461a9b15b0f6033bb5 100644 --- a/editors/demo/src/HHMI/HHMI.js +++ b/editors/demo/src/HHMI/HHMI.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useRef } from 'react'; import styled from 'styled-components'; import { Wax } from 'wax-prosemirror-core'; @@ -68,6 +68,8 @@ const Hhmi = () => { isReadOnly(true); }; + const editorRef = useRef(); + return ( <> <ReadOnlyButton onClick={readOnlyQuestions}>Read Only</ReadOnlyButton> @@ -75,12 +77,13 @@ const Hhmi = () => { <Wax config={config} autoFocus + ref={editorRef} customValues={{ showFeedBack: submited }} fileUpload={file => renderImage(file)} value={t} readonly={readOnly} layout={HhmiLayout} - // onChange={source => console.log(source)} + onChange={source => console.log(source)} /> </> ); diff --git a/wax-prosemirror-services/src/MatchingService/schema/matchingContainerNode.js b/wax-prosemirror-services/src/MatchingService/schema/matchingContainerNode.js index 52d30c49ac7a6f94915bca1e725e31067b0e8618..3dfa5d9402991290858cf1f8811288238450d713 100644 --- a/wax-prosemirror-services/src/MatchingService/schema/matchingContainerNode.js +++ b/wax-prosemirror-services/src/MatchingService/schema/matchingContainerNode.js @@ -9,7 +9,7 @@ const matchingContainerNode = { atom: true, selectable: true, draggable: false, - content: 'inline*', + content: 'block*', parseDOM: [ { tag: 'div.matching-container', diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js b/wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js index 3d5139ee4de5c2a78681343aaf507d3c959b0d52..9a365bc484ae2c85b0c50d7ba17e28ececd0ae22 100644 --- a/wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js +++ b/wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js @@ -129,6 +129,7 @@ export default ({ setPosition, position }) => { if (addOptionRef.current) addOptionRef.current.focus(); if (!activeView.state.selection.node) return; const { tr } = activeView.state; + if (previousNode.from !== currentNode.from) { tr.setNodeMarkup(position.from, undefined, { ...currentNode.node.attrs, diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js b/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js index 90f95347301154dcd9603f751a52f2d62b35c939..de256d3d591d4db488c0031bf2c7c7bc81002eab 100644 --- a/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js +++ b/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js @@ -59,5 +59,11 @@ export default ({ node, view, getPos }) => { </StyledIconActionContainer> ); } - return <ReadOnlyDropDown options={node.attrs.options} />; + return ( + <ReadOnlyDropDown + getPos={getPos} + node={node} + options={node.attrs.options} + /> + ); }; diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/ReadOnlyDropDown.js b/wax-prosemirror-services/src/MultipleDropDownService/components/ReadOnlyDropDown.js index 7621128179b70811ce2f616e742d5579b76eb5a7..48044eb403549088455890dad3a2d605bff7d887 100644 --- a/wax-prosemirror-services/src/MultipleDropDownService/components/ReadOnlyDropDown.js +++ b/wax-prosemirror-services/src/MultipleDropDownService/components/ReadOnlyDropDown.js @@ -42,7 +42,7 @@ const DropdownStyled = styled(Dropdown)` } `; -const DropComponent = ({ options }) => { +const DropComponent = ({ getPos, node, options }) => { const [selectedOption, setSelectedOption] = useState(undefined); const context = useContext(WaxContext); @@ -53,7 +53,17 @@ const DropComponent = ({ options }) => { const customProps = main.props.customValues; const onChange = option => { - console.log(option); + const allNodes = getNodes(main); + const { tr } = main.state; + allNodes.forEach(singleNode => { + if (singleNode.node.attrs.id === node.attrs.id) { + tr.setNodeMarkup(singleNode.pos, undefined, { + ...singleNode.node.attrs, + correct: option.value, + }); + } + }); + main.dispatch(tr); }; useEffect(() => {}, []); @@ -80,3 +90,7 @@ const DropComponent = ({ options }) => { }; export default DropComponent; + +const getNodes = view => { + return DocumentHelpers.findInlineNodes(view.state.doc); +}; diff --git a/wax-prosemirror-services/src/MultipleDropDownService/schema/multipleDropDownOptionNode.js b/wax-prosemirror-services/src/MultipleDropDownService/schema/multipleDropDownOptionNode.js index 90eaaf2c200b41ce58638d6000fabf754df03a20..0ae0800ad0dfe23eac2c2b459c0e33d71e65d8f0 100644 --- a/wax-prosemirror-services/src/MultipleDropDownService/schema/multipleDropDownOptionNode.js +++ b/wax-prosemirror-services/src/MultipleDropDownService/schema/multipleDropDownOptionNode.js @@ -4,6 +4,7 @@ const multipleDropDownOptionNode = { id: { default: '' }, options: { default: [] }, correct: { default: '' }, + answer: { default: '' }, }, group: 'inline questions', inline: true, @@ -18,6 +19,7 @@ const multipleDropDownOptionNode = { class: dom.getAttribute('class'), options: JSON.parse(dom.getAttribute('options')), correct: dom.getAttribute('correct'), + answer: dom.getAttribute('answer'), }; }, }, @@ -30,6 +32,7 @@ const multipleDropDownOptionNode = { class: node.attrs.class, options: JSON.stringify(node.attrs.options), correct: node.attrs.correct, + answer: node.attrs.answer, }, ]; },