save option

editors/demo/src/HHMI/HHMI.js

-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)}
       />
     </>
   );

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',

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,

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}
+    />
+  );
 };

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);
+};

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,
       },
     ];
   },