save answer

editors/demo/src/HHMI/HHMI.js

@@ -170,7 +170,7 @@ const Hhmi = () => {
         value={content}
         readonly={readOnly}
         layout={HhmiLayout}
-        // onChange={source => console.log(source)}
+        onChange={source => console.log(source)}
       />
     </>
   );

wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js

@@ -24,6 +24,10 @@ const FillTheGapWrapper = styled.div`
   margin-top: 10px;
 `;
 
+const StyledIconContainer = styled.span`
+  float: right;
+`;
+
 const StyledIconAction = styled(Icon)`
   position: relative;
   right: 4px;
@@ -33,14 +37,16 @@ const StyledIconAction = styled(Icon)`
 `;
 
 const InfoMsg = styled.div`
-  border-radius: 4px;
-  display: none;
   background: #535e76;
+  border-radius: 4px;
+  bottom: 30px;
   color: #fff;
+  display: none;
+  float: right;
+  left: 100px;
   padding-left: 4px;
   padding-right: 4px;
   position: relative;
-  top: 3px;
 `;
 
 export default ({ node, view, getPos }) => {
@@ -80,14 +86,14 @@ export default ({ node, view, getPos }) => {
         {!testMode && !readOnly && (
           <FillTheGapContainerTool>
             <FillTheGapTool />
-            <span
+            <StyledIconContainer
               onClick={displayInfoMsg}
               onKeyPress={() => {}}
               role="button"
               tabIndex={0}
             >
               <StyledIconAction name="help" />
-            </span>
+            </StyledIconContainer>
             <InfoMsg ref={infoMsgRef}>
               enter answers seperated with a semi colon
             </InfoMsg>

wax-prosemirror-services/src/FillTheGapQuestionService/components/InputComponent.js

 import React, { useContext, useRef, useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { TextSelection } from 'prosemirror-state';
-import { WaxContext } from 'wax-prosemirror-core';
+import { DocumentHelpers, WaxContext } from 'wax-prosemirror-core';
 
 const AnswerInput = styled.input`
   border: none;
@@ -15,7 +15,7 @@ const AnswerInput = styled.input`
   }
 `;
 
-export default () => {
+export default ({ node }) => {
   const context = useContext(WaxContext);
   const {
     pmViews: { main },
@@ -38,10 +38,17 @@ export default () => {
 
   const setAnswerInput = () => {
     setAnswer(answerRef.current.value);
-  };
-
-  const saveAnswer = () => {
-    return false;
+    const allNodes = getNodes(main);
+    allNodes.forEach(singleNode => {
+      if (singleNode.node.attrs.id === node.attrs.id) {
+        main.dispatch(
+          main.state.tr.setNodeMarkup(singleNode.pos, undefined, {
+            ...singleNode.node.attrs,
+            answer: answerRef.current.value,
+          }),
+        );
+      }
+    });
   };
 
   const onFocus = () => {
@@ -53,7 +60,6 @@ export default () => {
   return (
     <AnswerInput
       aria-label="answer input"
-      onBlur={saveAnswer}
       onChange={setAnswerInput}
       onFocus={onFocus}
       onKeyDown={handleKeyDown}
@@ -63,3 +69,14 @@ export default () => {
     />
   );
 };
+
+const getNodes = main => {
+  const allNodes = DocumentHelpers.findInlineNodes(main.state.doc);
+  const fillTheGapNodes = [];
+  allNodes.forEach(node => {
+    if (node.node.type.name === 'fill_the_gap') {
+      fillTheGapNodes.push(node);
+    }
+  });
+  return fillTheGapNodes;
+};