save all user input

editors/demo/src/HHMI/HHMI.js

@@ -142,6 +142,30 @@ const Hhmi = () => {
 
   const { readOnly, testMode, submitted, content } = stateProps;
 
+  const data = {
+    type: 'doc',
+    content: [
+      {
+        type: 'numerical_answer_container',
+        attrs: {
+          id: 'f9c33d03-68ee-4c27-8a03-5072447fac1a',
+          class: 'numerical-answer',
+          feedback: '',
+          answerType: 'exactAnswer',
+          answersExact: [],
+        },
+        content: [
+          {
+            type: 'paragraph',
+            attrs: {
+              class: 'paragraph',
+            },
+          },
+        ],
+      },
+    ],
+  };
+
   return (
     <>
       <ButtonContainer>
@@ -167,7 +191,7 @@ const Hhmi = () => {
         ref={editorRef}
         customValues={{ showFeedBack: submitted, testMode }}
         fileUpload={file => renderImage(file)}
-        // value={content}
+        value={data}
         targetFormat="JSON"
         readonly={readOnly}
         layout={HhmiLayout}

wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js

@@ -26,9 +26,8 @@ const ValueInnerContainer = styled.div`
   flex-direction: column;
 `;
 
-const ExactAnswerComponent = ({ getPos, node }) => {
+const ExactAnswerComponent = ({ node }) => {
   const context = useContext(WaxContext);
-  const { activeView } = context;
   const [exact, setExact] = useState('');
   const [marginError, setMarginError] = useState('');
 

wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerContainerComponent.js

-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { WaxContext, DocumentHelpers, Icon } from 'wax-prosemirror-core';
 import styled from 'styled-components';
 import EditorComponent from '../../MultipleChoiceQuestionService/components/EditorComponent';
@@ -55,7 +55,7 @@ export default ({ node, view, getPos }) => {
     options,
     pmViews: { main },
   } = context;
-
+  const [answerType, setAnswerType] = useState(node.attrs.answerType);
   const customProps = main.props.customValues;
   const { testMode } = customProps;
 
@@ -80,6 +80,15 @@ export default ({ node, view, getPos }) => {
     });
   };
 
+  useEffect(() => {
+    const allNodes = getNodes(context.pmViews.main);
+    allNodes.forEach(singleNode => {
+      if (singleNode.node.attrs.id === node.attrs.id) {
+        setAnswerType(singleNode.node.attrs.answerType);
+      }
+    });
+  }, []);
+
   return (
     <NumericalAnswerWrapper>
       <div>
@@ -104,15 +113,20 @@ export default ({ node, view, getPos }) => {
           view={view}
         />
         <NumericalAnswerOption>
-          {!options[node.attrs.id] && <>No Type Selected</>}
-          {options[node.attrs.id]?.numericalAnswer === 'exactAnswer' && (
-            <ExactAnswerComponent getPos={getPos} node={node} />
+          {!options[node.attrs.id] && answerType === '' && (
+            <>No Type Selected</>
+          )}
+          {(options[node.attrs.id]?.numericalAnswer === 'exactAnswer' ||
+            answerType === 'exactAnswer') && (
+            <ExactAnswerComponent node={node} />
           )}
-          {options[node.attrs.id]?.numericalAnswer === 'rangeAnswer' && (
-            <RangeAnswerComponent getPos={getPos} node={node} />
+          {(options[node.attrs.id]?.numericalAnswer === 'rangeAnswer' ||
+            answerType === 'rangeAnswer') && (
+            <RangeAnswerComponent node={node} />
           )}
-          {options[node.attrs.id]?.numericalAnswer === 'preciseAnswer' && (
-            <PreciseAnswerComponent getPos={getPos} node={node} />
+          {(options[node.attrs.id]?.numericalAnswer === 'preciseAnswer' ||
+            answerType === 'preciseAnswer') && (
+            <PreciseAnswerComponent node={node} />
           )}
         </NumericalAnswerOption>
         {!testMode && !(readOnly && feedback === '') && (

wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerDropDownCompontent.js

@@ -161,11 +161,32 @@ const NumericalAnswerDropDownCompontent = ({ nodeId }) => {
     }
   };
 
+  const SaveTypeToNode = option => {
+    const allNodes = getNodes(context.pmViews.main);
+    allNodes.forEach(singleNode => {
+      if (singleNode.node.attrs.id === nodeId) {
+        context.pmViews.main.dispatch(
+          context.pmViews.main.state.tr.setNodeMarkup(
+            singleNode.pos,
+            undefined,
+            {
+              ...singleNode.node.attrs,
+              answerType: option,
+              answersExact: [],
+              answersRange: [],
+              answersPrecise: [],
+            },
+          ),
+        );
+      }
+    });
+  };
+
   const onChange = option => {
     context.setOption({ [nodeId]: { numericalAnswer: option.value } });
     setLabel(option.label);
     openCloseMenu();
-    activeView.dispatch(activeView.state.tr.setMeta('addToHistory', false));
+    SaveTypeToNode(option.value);
     activeView.focus();
   };
 

wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js

-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useContext } from 'react';
 import styled from 'styled-components';
-import { DocumentHelpers } from 'wax-prosemirror-core';
+import { DocumentHelpers, WaxContext } from 'wax-prosemirror-core';
 
 const AnswerContainer = styled.div`
   display: flex;
@@ -26,7 +26,8 @@ const ValueInnerContainer = styled.div`
   flex-direction: column;
 `;
 
-const PreciseAnswerComponent = () => {
+const PreciseAnswerComponent = ({ node }) => {
+  const context = useContext(WaxContext);
   const [precise, setPrecise] = useState('');
 
   const preciseRef = useRef(null);
@@ -38,8 +39,31 @@ const PreciseAnswerComponent = () => {
       .replace(/^0[^.]/, '0');
   };
 
+  const SaveValuesToNode = () => {
+    const allNodes = getNodes(context.pmViews.main);
+    allNodes.forEach(singleNode => {
+      if (singleNode.node.attrs.id === node.attrs.id) {
+        const obj = {
+          exactAnswer: onlyNumbers(preciseRef.current.value),
+        };
+
+        context.pmViews.main.dispatch(
+          context.pmViews.main.state.tr.setNodeMarkup(
+            singleNode.pos,
+            undefined,
+            {
+              ...singleNode.node.attrs,
+              answersPrecise: obj,
+            },
+          ),
+        );
+      }
+    });
+  };
+
   const onChangePrecice = () => {
     setPrecise(onlyNumbers(preciseRef.current.value));
+    SaveValuesToNode();
   };
 
   return (

wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js

-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useContext } from 'react';
 import styled from 'styled-components';
-import { DocumentHelpers } from 'wax-prosemirror-core';
+import { DocumentHelpers, WaxContext } from 'wax-prosemirror-core';
 
 const AnswerContainer = styled.div`
   display: flex;
@@ -26,7 +26,8 @@ const ValueInnerContainer = styled.div`
   flex-direction: column;
 `;
 
-const RangeAnswerComponent = () => {
+const RangeAnswerComponent = ({ node }) => {
+  const context = useContext(WaxContext);
   const [minValue, setMinValue] = useState('');
   const [maxValue, setMaxValue] = useState('');
 
@@ -40,12 +41,37 @@ const RangeAnswerComponent = () => {
       .replace(/^0[^.]/, '0');
   };
 
+  const SaveValuesToNode = () => {
+    const allNodes = getNodes(context.pmViews.main);
+    allNodes.forEach(singleNode => {
+      if (singleNode.node.attrs.id === node.attrs.id) {
+        const obj = {
+          minAnswer: onlyNumbers(minRef.current.value),
+          maxError: onlyNumbers(maxRef.current.value),
+        };
+
+        context.pmViews.main.dispatch(
+          context.pmViews.main.state.tr.setNodeMarkup(
+            singleNode.pos,
+            undefined,
+            {
+              ...singleNode.node.attrs,
+              answersRange: obj,
+            },
+          ),
+        );
+      }
+    });
+  };
+
   const onChangeMin = () => {
     setMinValue(onlyNumbers(minRef.current.value));
+    SaveValuesToNode();
   };
 
   const onChangeMax = () => {
     setMaxValue(onlyNumbers(maxRef.current.value));
+    SaveValuesToNode();
   };
 
   return (

wax-questions-service/src/NumericalAnswerService/schema/NumericalAnswerContainerNode.js

@@ -5,6 +5,8 @@ const NumericalAnswerContainerNode = {
     feedback: { default: '' },
     answerType: { default: '' },
     answersExact: { default: [] },
+    answersRange: { default: [] },
+    answersPrecise: { default: [] },
   },
   group: 'block questions',
   atom: true,
@@ -15,6 +17,8 @@ const NumericalAnswerContainerNode = {
       getAttrs(dom) {
         return {
           answersExact: JSON.parse(dom.getAttribute('answersExact')),
+          answersRange: JSON.parse(dom.getAttribute('answersRange')),
+          answersPrecise: JSON.parse(dom.getAttribute('answersPrecise')),
           id: dom.getAttribute('id'),
           class: dom.getAttribute('class'),
           feedback: dom.getAttribute('feedback'),
@@ -27,11 +31,13 @@ const NumericalAnswerContainerNode = {
     return [
       'div',
       {
+        answerType: node.attrs.answerType,
+        answersExact: JSON.stringify(node.attrs.answersExact),
+        answersRange: JSON.stringify(node.attrs.answersRange),
+        answersPrecise: JSON.stringify(node.attrs.answersPrecise),
         id: node.attrs.id,
         class: node.attrs.class,
-        answersExact: JSON.stringify(node.attrs.answersExact),
         feedback: node.attrs.feedback,
-        answerType: node.attrs.answerType,
       },
     ];
   },