From 153b30a093177b5faa0ec9120292f825aba4b1d4 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Mon, 12 Jun 2023 13:43:00 +0300
Subject: [PATCH] save answer
---
editors/demo/src/HHMI/HHMI.js | 2 +-
.../FillTheGapContainerComponent.js | 16 +++++++---
.../components/InputComponent.js | 31 ++++++++++++++-----
3 files changed, 36 insertions(+), 13 deletions(-)
diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index 35f9e0746..113b931db 100644
--- a/editors/demo/src/HHMI/HHMI.js
+++ b/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)}
/>
</>
);
diff --git a/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js b/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js
index 7374abb81..32eaa416f 100644
--- a/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js
+++ b/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>
diff --git a/wax-prosemirror-services/src/FillTheGapQuestionService/components/InputComponent.js b/wax-prosemirror-services/src/FillTheGapQuestionService/components/InputComponent.js
index d2ca2d677..b7a5db2fa 100644
--- a/wax-prosemirror-services/src/FillTheGapQuestionService/components/InputComponent.js
+++ b/wax-prosemirror-services/src/FillTheGapQuestionService/components/InputComponent.js
@@ -1,7 +1,7 @@
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;
+};
--
GitLab