save selected option

editors/demo/src/Editors.js

@@ -70,7 +70,7 @@ const Editors = () => {
       case 'ncbi':
         return <NCBI />;
       default:
-        return <Editoria />;
+        return <HHMI />;
     }
   };
 

editors/demo/src/HHMI/HHMI.js

@@ -28,7 +28,7 @@ const SubmitButton = styled.button`
   top: 16px;
 `;
 
-const t = `<p class="paragraph"></p><div id="f57acbf9-6602-4206-a026-f868329a89ec" class="matching-container" options="[{&quot;label&quot;:&quot;value 1&quot;,&quot;value&quot;:&quot;965e9b8a-2311-43f5-a3c9-099f5a2c2d50&quot;},{&quot;label&quot;:&quot;value 2&quot;,&quot;value&quot;:&quot;6a03e0a0-3a84-425d-a258-dcd7ed96a01a&quot;}]" feedback=""><p class="paragraph"><div class="matching-option" id="6d946105-fce7-4313-8da1-b0b065cfa2d8" isfirst="true" correct="false" answer="false" options="[object Object],[object Object]"></div></p><p class="paragraph"></p></div><div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc323" class="multiple-choice"><div class="multiple-choice-question" id="38de8538-647a-489d-8474-f92d0d256c32"><p class="paragraph">question</p></div><div class="multiple-choice-option" id="debb868e-bbfe-4ba2-bf93-c963153ff791" correct="false" answer="false" feedback="feedback 1"><p class="paragraph">answer 1</p></div><div class="multiple-choice-option" id="810bcf10-4fcb-4d1e-9dab-ce35cbd28527" correct="true" answer="true" feedback="feedback 2"><p class="paragraph">answer 2</p></div></div><div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc02" class="fill-the-gap" feedback="some feedback"><p class="paragraph">first <span id="16ec8f33-db5b-4839-9567-8aa73b776bcf" class="fill-the-gap" answer="">answer1; answer2; answer3</span> second <span id="72f23a71-e774-4834-acba-f357afb6a243" class="fill-the-gap" answer="">answer 4; answer5;</span></p></div>`;
+const t = `<p class="paragraph"></p></div><div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc323" class="multiple-choice"><div class="multiple-choice-question" id="38de8538-647a-489d-8474-f92d0d256c32"><p class="paragraph">question</p></div><div class="multiple-choice-option" id="debb868e-bbfe-4ba2-bf93-c963153ff791" correct="false" answer="false" feedback="feedback 1"><p class="paragraph">answer 1</p></div><div class="multiple-choice-option" id="810bcf10-4fcb-4d1e-9dab-ce35cbd28527" correct="true" answer="true" feedback="feedback 2"><p class="paragraph">answer 2</p></div></div><div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc02" class="fill-the-gap" feedback="some feedback"><p class="paragraph">first <span id="16ec8f33-db5b-4839-9567-8aa73b776bcf" class="fill-the-gap" answer="">answer1; answer2; answer3</span> second <span id="72f23a71-e774-4834-acba-f357afb6a243" class="fill-the-gap" answer="">answer 4; answer5;</span></p></div>`;
 const Hhmi = () => {
   const [submited, isSubmited] = useState(false);
   const [readOnly, isReadOnly] = useState(false);
@@ -54,7 +54,7 @@ const Hhmi = () => {
         value={t}
         readonly={readOnly}
         layout={HhmiLayout}
-        // onChange={source => console.log(source)}
+        onChange={source => console.log(source)}
       />
     </>
   );

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

 /* eslint-disable no-underscore-dangle */
-import React, { useMemo, useEffect, useState } from 'react';
+import React, { useContext, useMemo, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { find } from 'lodash';
 import { ReactDropDownStyles } from 'wax-prosemirror-components';
+import { WaxContext } from 'wax-prosemirror-core';
+import { DocumentHelpers } from 'wax-prosemirror-utilities';
 import Dropdown from 'react-dropdown';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -42,15 +44,36 @@ const DropdownStyled = styled(Dropdown)`
 const DropComponent = ({ getPos, node, view }) => {
   const [selectedOption, setSelectedOption] = useState(undefined);
 
+  const context = useContext(WaxContext);
+  const {
+    pmViews: { main },
+  } = context;
+
   const onChange = option => {
     setSelectedOption(option);
+
+    const allNodes = getNodes(main);
+    allNodes.forEach(singleNode => {
+      if (singleNode.attrs.id === node.attrs.id) {
+        main.dispatch(
+          main.state.tr
+            .setMeta('addToHistory', false)
+            .setNodeMarkup(getPos() + 3, undefined, {
+              ...singleNode.attrs,
+              answer: option,
+            }),
+        );
+      }
+    });
   };
 
   useEffect(() => {
     const value = selectedOption ? selectedOption.value : '';
     const found = find(node.attrs.options, { value });
 
-    if (!found) setSelectedOption(undefined);
+    if (!found) {
+      setSelectedOption(undefined);
+    }
   }, [node.attrs.options]);
 
   const MultipleDropDown = useMemo(
@@ -75,3 +98,18 @@ const DropComponent = ({ getPos, node, view }) => {
 };
 
 export default DropComponent;
+
+const getNodes = view => {
+  const allNodes = DocumentHelpers.findBlockNodes(view.state.doc);
+  const matchingOptions = [];
+  allNodes.forEach(node => {
+    if (node.node.type.name === 'paragraph') {
+      console.log(node);
+      node.node.content.content.forEach(optionNode => {
+        if (optionNode.type.name === 'matching_option')
+          matchingOptions.push(optionNode);
+      });
+    }
+  });
+  return matchingOptions;
+};

wax-prosemirror-services/src/MatchingService/schema/matchingOptionNode.js

@@ -3,8 +3,7 @@ const matchingOptionNode = {
     class: { default: 'matching-option' },
     id: { default: '' },
     isfirst: { default: false },
-    correct: { default: false },
-    answer: { default: false },
+    answer: { default: {} },
     options: { default: [] },
   },
   group: 'inline questions',
@@ -20,13 +19,24 @@ const matchingOptionNode = {
           id: dom.getAttribute('id'),
           class: dom.getAttribute('class'),
           isfirst: JSON.parse(dom.getAttribute('isfirst').toLowerCase()),
-          correct: JSON.parse(dom.getAttribute('correct').toLowerCase()),
           answer: JSON.parse(dom.getAttribute('answer').toLowerCase()),
         };
       },
     },
   ],
-  toDOM: node => ['div', node.attrs, 0],
+  toDOM(node) {
+    return [
+      'div',
+      {
+        id: node.attrs.id,
+        class: node.attrs.class,
+        isfirst: node.attrs.isfirst,
+        answer: JSON.stringify(node.attrs.answer),
+        feedback: node.attrs.feedback,
+      },
+      0,
+    ];
+  },
 };
 
 export default matchingOptionNode;