From 75dcab3c1eb854c6f1e07d678055fd78d3ade855 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Tue, 17 May 2022 18:51:09 +0300
Subject: [PATCH] save option
---
editors/demo/src/HHMI/HHMI.js | 7 +++++--
.../schema/matchingContainerNode.js | 2 +-
.../components/DropDownComponent.js | 1 +
.../components/MultipleDropDownComponent.js | 8 +++++++-
.../components/ReadOnlyDropDown.js | 18 ++++++++++++++++--
.../schema/multipleDropDownOptionNode.js | 3 +++
6 files changed, 33 insertions(+), 6 deletions(-)
diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index 290a7b726..6966aaeec 100644
--- a/editors/demo/src/HHMI/HHMI.js
+++ b/editors/demo/src/HHMI/HHMI.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
import styled from 'styled-components';
import { Wax } from 'wax-prosemirror-core';
@@ -68,6 +68,8 @@ const Hhmi = () => {
isReadOnly(true);
};
+ const editorRef = useRef();
+
return (
<>
<ReadOnlyButton onClick={readOnlyQuestions}>Read Only</ReadOnlyButton>
@@ -75,12 +77,13 @@ const Hhmi = () => {
<Wax
config={config}
autoFocus
+ ref={editorRef}
customValues={{ showFeedBack: submited }}
fileUpload={file => renderImage(file)}
value={t}
readonly={readOnly}
layout={HhmiLayout}
- // onChange={source => console.log(source)}
+ onChange={source => console.log(source)}
/>
</>
);
diff --git a/wax-prosemirror-services/src/MatchingService/schema/matchingContainerNode.js b/wax-prosemirror-services/src/MatchingService/schema/matchingContainerNode.js
index 52d30c49a..3dfa5d940 100644
--- a/wax-prosemirror-services/src/MatchingService/schema/matchingContainerNode.js
+++ b/wax-prosemirror-services/src/MatchingService/schema/matchingContainerNode.js
@@ -9,7 +9,7 @@ const matchingContainerNode = {
atom: true,
selectable: true,
draggable: false,
- content: 'inline*',
+ content: 'block*',
parseDOM: [
{
tag: 'div.matching-container',
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js b/wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js
index 3d5139ee4..9a365bc48 100644
--- a/wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js
+++ b/wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js
@@ -129,6 +129,7 @@ export default ({ setPosition, position }) => {
if (addOptionRef.current) addOptionRef.current.focus();
if (!activeView.state.selection.node) return;
const { tr } = activeView.state;
+
if (previousNode.from !== currentNode.from) {
tr.setNodeMarkup(position.from, undefined, {
...currentNode.node.attrs,
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js b/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js
index 90f953473..de256d3d5 100644
--- a/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js
+++ b/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js
@@ -59,5 +59,11 @@ export default ({ node, view, getPos }) => {
</StyledIconActionContainer>
);
}
- return <ReadOnlyDropDown options={node.attrs.options} />;
+ return (
+ <ReadOnlyDropDown
+ getPos={getPos}
+ node={node}
+ options={node.attrs.options}
+ />
+ );
};
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/ReadOnlyDropDown.js b/wax-prosemirror-services/src/MultipleDropDownService/components/ReadOnlyDropDown.js
index 762112817..48044eb40 100644
--- a/wax-prosemirror-services/src/MultipleDropDownService/components/ReadOnlyDropDown.js
+++ b/wax-prosemirror-services/src/MultipleDropDownService/components/ReadOnlyDropDown.js
@@ -42,7 +42,7 @@ const DropdownStyled = styled(Dropdown)`
}
`;
-const DropComponent = ({ options }) => {
+const DropComponent = ({ getPos, node, options }) => {
const [selectedOption, setSelectedOption] = useState(undefined);
const context = useContext(WaxContext);
@@ -53,7 +53,17 @@ const DropComponent = ({ options }) => {
const customProps = main.props.customValues;
const onChange = option => {
- console.log(option);
+ const allNodes = getNodes(main);
+ const { tr } = main.state;
+ allNodes.forEach(singleNode => {
+ if (singleNode.node.attrs.id === node.attrs.id) {
+ tr.setNodeMarkup(singleNode.pos, undefined, {
+ ...singleNode.node.attrs,
+ correct: option.value,
+ });
+ }
+ });
+ main.dispatch(tr);
};
useEffect(() => {}, []);
@@ -80,3 +90,7 @@ const DropComponent = ({ options }) => {
};
export default DropComponent;
+
+const getNodes = view => {
+ return DocumentHelpers.findInlineNodes(view.state.doc);
+};
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/schema/multipleDropDownOptionNode.js b/wax-prosemirror-services/src/MultipleDropDownService/schema/multipleDropDownOptionNode.js
index 90eaaf2c2..0ae0800ad 100644
--- a/wax-prosemirror-services/src/MultipleDropDownService/schema/multipleDropDownOptionNode.js
+++ b/wax-prosemirror-services/src/MultipleDropDownService/schema/multipleDropDownOptionNode.js
@@ -4,6 +4,7 @@ const multipleDropDownOptionNode = {
id: { default: '' },
options: { default: [] },
correct: { default: '' },
+ answer: { default: '' },
},
group: 'inline questions',
inline: true,
@@ -18,6 +19,7 @@ const multipleDropDownOptionNode = {
class: dom.getAttribute('class'),
options: JSON.parse(dom.getAttribute('options')),
correct: dom.getAttribute('correct'),
+ answer: dom.getAttribute('answer'),
};
},
},
@@ -30,6 +32,7 @@ const multipleDropDownOptionNode = {
class: node.attrs.class,
options: JSON.stringify(node.attrs.options),
correct: node.attrs.correct,
+ answer: node.attrs.answer,
},
];
},
--
GitLab