From d8491eab589cb33e22b4c6d19f4a077a48d49fc8 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Wed, 6 Apr 2022 11:24:14 +0300
Subject: [PATCH] save selected option
---
editors/demo/src/Editors.js | 2 +-
editors/demo/src/HHMI/HHMI.js | 4 +-
.../components/DropDownComponent.js | 42 ++++++++++++++++++-
.../schema/matchingOptionNode.js | 18 ++++++--
4 files changed, 57 insertions(+), 9 deletions(-)
diff --git a/editors/demo/src/Editors.js b/editors/demo/src/Editors.js
index 166168897..1e839e3d3 100644
--- a/editors/demo/src/Editors.js
+++ b/editors/demo/src/Editors.js
@@ -70,7 +70,7 @@ const Editors = () => {
case 'ncbi':
return <NCBI />;
default:
- return <Editoria />;
+ return <HHMI />;
}
};
diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index 22238d3a7..fe9d2c126 100644
--- a/editors/demo/src/HHMI/HHMI.js
+++ b/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="[{"label":"value 1","value":"965e9b8a-2311-43f5-a3c9-099f5a2c2d50"},{"label":"value 2","value":"6a03e0a0-3a84-425d-a258-dcd7ed96a01a"}]" 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)}
/>
</>
);
diff --git a/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
index dd65a1a09..d6548bb03 100644
--- a/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
+++ b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
@@ -1,8 +1,10 @@
/* 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;
+};
diff --git a/wax-prosemirror-services/src/MatchingService/schema/matchingOptionNode.js b/wax-prosemirror-services/src/MatchingService/schema/matchingOptionNode.js
index a2fbc6926..45283958c 100644
--- a/wax-prosemirror-services/src/MatchingService/schema/matchingOptionNode.js
+++ b/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;
--
GitLab