Skip to content
Snippets Groups Projects
Commit 54a205ef authored by chris's avatar chris
Browse files

keep changes into state

parent 3d9761e1
No related branches found
No related tags found
1 merge request!399Oen
Hide whitespace changes
Inline Side-by-side
Showing
with 45 additions and 28 deletions
editors/demo/src/HHMI/HHMI.js
+ 14
− 7
View file @ 54a205ef
......@@ -28,15 +28,19 @@ const SubmitButton = styled.button`
top: 16px;
`;
const t = `<p class="paragraph"></p><div id="1624fa06-2075-488a-9912-9794a3763aca" class="multiple-drop-down-container" feedback="">
<p class="paragraph">Lorem ipsum dolor sit amet,<span id="fa9ff44d-19a6-4f47-99d9-d77d3dc02fbf" class="multiple-drop-down-option" options="[{&quot;label&quot;:&quot;option 1&quot;,&quot;value&quot;:&quot;6c4aa0f3-43b1-40a7-a066-bc73449523df&quot;},{&quot;label&quot;:&quot;option 2&quot;,&quot;value&quot;:&quot;29365b0c-c00d-40c1-8a5e-118dbdf47e50&quot;},{&quot;label&quot;:&quot;option 3&quot;,&quot;value&quot;:&quot;743a425e-6340-4a72-a07c-d2e78154fcc8&quot;}]" correct="29365b0c-c00d-40c1-8a5e-118dbdf47e50"></span>consectetur adipiscing elit. Nulla cursus ultricies enim, id condimentum dui facilisis a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed euismod posuere orci. Praesent consectetur augue ut lorem suscipit, nec molestie libero pellentesque. </p>
<p class="paragraph">Nullam porttitor ligula neque. In aliquam<span id="f8380222-11fa-46e7-91a9-0bf67ff3d1d7" class="multiple-drop-down-option" options="[{&quot;label&quot;:&quot;option 4&quot;,&quot;value&quot;:&quot;4e2c45fe-0aad-4c59-9a92-ed44f01a82e2&quot;},{&quot;label&quot;:&quot;option 5&quot;,&quot;value&quot;:&quot;15e27b91-682a-4e10-a5d0-149192fd2e4c&quot;},{&quot;label&quot;:&quot;option 6&quot;,&quot;value&quot;:&quot;886c921d-2e75-41ea-a1a6-2d49e7921a57&quot;},{&quot;label&quot;:&quot;option 7&quot;,&quot;value&quot;:&quot;d14c2409-f66a-47d1-8f63-72686d24df37&quot;}]" correct="4e2c45fe-0aad-4c59-9a92-ed44f01a82e2"></span> ex neque, sit amet sagittis nulla volutpat sed. Nulla blandit facilisis ante, vel tempus ante porta quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer nulla tellus, dictum at laoreet eu, hendrerit at quam. Sed consectetur, neque vel ornare malesuada, eros sem commodo purus, <span id="c13f5243-03c0-433c-8e44-440d536d9150" class="multiple-drop-down-option" options="[{&quot;label&quot;:&quot;option 9&quot;,&quot;value&quot;:&quot;3b9cd3b4-9e70-45de-975d-31407c48812c&quot;},{&quot;label&quot;:&quot;option 10&quot;,&quot;value&quot;:&quot;3baf86a8-a3fa-4e64-bfe8-f01ce4320489&quot;},{&quot;label&quot;:&quot;option 11&quot;,&quot;value&quot;:&quot;f1c6023c-5cde-445a-b9fb-cc23f06c8132&quot;}]" correct="f1c6023c-5cde-445a-b9fb-cc23f06c8132"></span> sagittis volutpat elit leo in diam. Aliquam mattis, est non placerat euismod, nisl nisl vestibulum mauris, non interdum dui urna et tellus.</p>
const initialContent = `<p class="paragraph"></p>
<div id="1624fa06-2075-488a-9912-9794a3763aca" class="multiple-drop-down-container" feedback="">
<p class="paragraph">Lorem ipsum dolor sit amet,<span id="fa9ff44d-19a6-4f47-99d9-d77d3dc02fbf" class="multiple-drop-down-option" options="[{&quot;label&quot;:&quot;option 1&quot;,&quot;value&quot;:&quot;6c4aa0f3-43b1-40a7-a066-bc73449523df&quot;},{&quot;label&quot;:&quot;option 2&quot;,&quot;value&quot;:&quot;29365b0c-c00d-40c1-8a5e-118dbdf47e50&quot;},{&quot;label&quot;:&quot;option 3&quot;,&quot;value&quot;:&quot;743a425e-6340-4a72-a07c-d2e78154fcc8&quot;}]" correct="6c4aa0f3-43b1-40a7-a066-bc73449523df" answer="29365b0c-c00d-40c1-8a5e-118dbdf47e50"></span>consectetur adipiscing elit. Nulla cursus ultricies enim, id condimentum dui facilisis a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed euismod posuere orci. Praesent consectetur augue ut lorem suscipit, nec molestie libero pellentesque.</p>
<p class="paragraph">Nullam porttitor ligula neque. In aliquam<span id="f8380222-11fa-46e7-91a9-0bf67ff3d1d7" class="multiple-drop-down-option" options="[{&quot;label&quot;:&quot;option 4&quot;,&quot;value&quot;:&quot;4e2c45fe-0aad-4c59-9a92-ed44f01a82e2&quot;},{&quot;label&quot;:&quot;option 5&quot;,&quot;value&quot;:&quot;15e27b91-682a-4e10-a5d0-149192fd2e4c&quot;},{&quot;label&quot;:&quot;option 6&quot;,&quot;value&quot;:&quot;886c921d-2e75-41ea-a1a6-2d49e7921a57&quot;},{&quot;label&quot;:&quot;option 7&quot;,&quot;value&quot;:&quot;d14c2409-f66a-47d1-8f63-72686d24df37&quot;}]" correct="4e2c45fe-0aad-4c59-9a92-ed44f01a82e2" answer="4e2c45fe-0aad-4c59-9a92-ed44f01a82e2"></span> ex neque, sit amet sagittis nulla volutpat sed. Nulla blandit facilisis ante, vel tempus ante porta quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer nulla tellus, dictum at laoreet eu, hendrerit at quam. Sed consectetur, neque vel ornare malesuada, eros sem commodo purus, <span id="c13f5243-03c0-433c-8e44-440d536d9150" class="multiple-drop-down-option" options="[{&quot;label&quot;:&quot;option 9&quot;,&quot;value&quot;:&quot;3b9cd3b4-9e70-45de-975d-31407c48812c&quot;},{&quot;label&quot;:&quot;option 10&quot;,&quot;value&quot;:&quot;3baf86a8-a3fa-4e64-bfe8-f01ce4320489&quot;},{&quot;label&quot;:&quot;option 11&quot;,&quot;value&quot;:&quot;f1c6023c-5cde-445a-b9fb-cc23f06c8132&quot;}]" correct="f1c6023c-5cde-445a-b9fb-cc23f06c8132" answer="f1c6023c-5cde-445a-b9fb-cc23f06c8132"></span> sagittis volutpat elit leo in diam. Aliquam mattis, est non placerat euismod, nisl nisl vestibulum mauris, non interdum dui urna et tellus.</p>
</div>
<p class="paragraph"></p>
<div id="2257aaf4-20cf-44ff-bd45-0e0a4561b764" class="matching-container" options="[{&quot;label&quot;:&quot;option 1&quot;,&quot;value&quot;:&quot;941cebeb-58bd-44c5-bf42-c78d20c23b7a&quot;},{&quot;label&quot;:&quot;option 2&quot;,&quot;value&quot;:&quot;ab2e7cfc-c700-4ba2-9ac3-3040974f67bf&quot;}]" feedback="">
<p class="paragraph"></p>
<p class="paragraph"></p>
<p class="paragraph"></p>
<p class="paragraph">
<div id="2bf9d3ca-166d-4354-9ebf-5d0fc6e75d8d" class="matching-option" isfirst="true" answer="{}">some text</div>
<div id="902ce1df-14b0-4c1f-9d44-066bb85262b1" class="matching-option" isfirst="false" answer="{}">some more text </div>
<div id="902ce1df-14b0-4c1f-9d44-066bb85262b1" class="matching-option" isfirst="false" answer="{}">some more text</div>
</p>
<p class="paragraph"></p>
</div>
......@@ -47,7 +51,7 @@ const t = `<p class="paragraph"></p><div id="1624fa06-2075-488a-9912-9794a3763ac
<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">
<div class="multiple-choice-option" id="810bcf10-4fcb-4d1e-9dab-ce35cbd28527" correct="true" answer="false" feedback="feedback 2">
<p class="paragraph">answer 2</p>
</div>
</div>
......@@ -58,12 +62,15 @@ const t = `<p class="paragraph"></p><div id="1624fa06-2075-488a-9912-9794a3763ac
const Hhmi = () => {
const [submited, isSubmited] = useState(false);
const [readOnly, isReadOnly] = useState(false);
const [content, setContent] = useState(initialContent);
const readOnlyQuestions = () => {
setContent(editorRef.current.getContent());
isReadOnly(true);
};
const submitQuestions = () => {
setContent(editorRef.current.getContent());
isSubmited(true);
isReadOnly(true);
};
......@@ -80,10 +87,10 @@ const Hhmi = () => {
ref={editorRef}
customValues={{ showFeedBack: submited }}
fileUpload={file => renderImage(file)}
value=""
value={content}
readonly={readOnly}
layout={HhmiLayout}
// onChange={source => console.log(source)}
onChange={source => console.log(source)}
/>
</>
);
......
wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
+ 0
− 1
View file @ 54a205ef
......@@ -53,7 +53,6 @@ const DropComponent = ({ getPos, node, view }) => {
setSelectedOption(option);
const allNodes = getNodes(main);
console.log(allNodes);
allNodes.forEach(singleNode => {
if (singleNode.node.attrs.id === node.attrs.id) {
main.dispatch(
......
wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js
+ 28
− 18
View file @ 54a205ef
......@@ -28,13 +28,19 @@ const StyledIconAction = styled(Icon)`
${props => props.isActive && activeStylesSvg}
`;
const CorrectAnswer = styled.span`
color: green;
const AnswerContainer = styled.div`
display: inline-block;
border-bottom: ${props =>
props.isCorrect ? '1px solid green;' : '1px solid red'};
border-top: ${props =>
props.isCorrect ? '1px solid green;' : '1px solid red'};
border-radius: 192px;
padding: 2px 4px 2px 4px;
`;
const Answer = styled.span`
color: green;
`;
const CorrectAnswer = styled.span``;
const Answer = styled.span``;
export default ({ node, view, getPos }) => {
const context = useContext(WaxContext);
......@@ -45,43 +51,47 @@ export default ({ node, view, getPos }) => {
} = context;
const [isActive, setIsActive] = useState(false);
const [correctAnswer, setCorrectAnswer] = useState(
node.attrs.options.find(option => option.value === node.attrs.correct),
);
const customProps = main.props.customValues;
const posFrom = pmViews[activeViewId].state.selection.from;
const isEditable = main.props.editable(editable => {
return editable;
});
const readOnly = !isEditable;
console.log(correctAnswer, node);
useEffect(() => {
setIsActive(false);
if (getPos() === posFrom) {
setIsActive(true);
}
}, [posFrom, correctAnswer]);
}, [posFrom]);
if (!readOnly)
return correctAnswer ? (
<span> {correctAnswer.label}</span>
) : (
if (!readOnly) {
return (
<StyledIconActionContainer isActive={isActive}>
<StyledIconAction isActive={isActive} name="mulitpleDropDown" />
</StyledIconActionContainer>
);
}
if (!(readOnly && customProps && !customProps.showFeedBack)) {
const answer = node.attrs.options.find(
option => option.value === node.attrs.answer,
);
const correct = node.attrs.options.find(
option => option.value === node.attrs.correct,
);
const isCorrect = node.attrs.correct === node.attrs.answer;
return (
<>
{correctAnswer && <CorrectAnswer>{correctAnswer.label}</CorrectAnswer>}
{answer && <Answer>{answer.label}</Answer>}
</>
<AnswerContainer isCorrect={isCorrect}>
Correct:
{correct && <CorrectAnswer> {correct.label} | &nbsp;</CorrectAnswer>}
Answer: {answer && <Answer> {answer.label}</Answer>}
</AnswerContainer>
);
}
......
wax-prosemirror-services/src/MultipleDropDownService/components/ReadOnlyDropDown.js
+ 1
− 1
View file @ 54a205ef
......@@ -59,7 +59,7 @@ const DropComponent = ({ getPos, node, options }) => {
if (singleNode.node.attrs.id === node.attrs.id) {
tr.setNodeMarkup(singleNode.pos, undefined, {
...singleNode.node.attrs,
correct: option.value,
answer: option.value,
});
}
});
......
wax-prosemirror-services/src/MultipleDropDownService/schema/multipleDropDownContainerNode.js
+ 2
− 1
View file @ 54a205ef
......@@ -9,7 +9,8 @@ const multipleDropDownContainerNode = {
selectable: false,
draggable: false,
defining: true,
content: 'paragraph* bulletlist* orderedlist*',
// content: 'paragraph* bulletlist* orderedlist*',
content: 'block*',
parseDOM: [
{
tag: 'div.multiple-drop-down-container',
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment