From 0f826ba2ac4994d9e4654afb694209ef0c4adb51 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Thu, 30 Nov 2023 12:27:04 +0200
Subject: [PATCH] delete essay widget
---
editors/demo/src/HHMI/HHMI.js | 30 ++------------
.../components/EssayAnswerComponent.js | 34 +++++++++++----
.../components/EssayPromptComponent.js | 32 +++++++++++----
.../EssayQuestionContainerComponent.js | 41 ++++++++++++++-----
.../components/EditorComponent.js | 8 +++-
5 files changed, 89 insertions(+), 56 deletions(-)
diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index 84ecaa169..d0c78713f 100644
--- a/editors/demo/src/HHMI/HHMI.js
+++ b/editors/demo/src/HHMI/HHMI.js
@@ -68,32 +68,6 @@ const SubmitButton = styled.button`
`}
`;
-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="[{"label":"option 1","value":"6c4aa0f3-43b1-40a7-a066-bc73449523df"},{"label":"option 2","value":"29365b0c-c00d-40c1-8a5e-118dbdf47e50"},{"label":"option 3","value":"743a425e-6340-4a72-a07c-d2e78154fcc8"}]" 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="[{"label":"option 4","value":"4e2c45fe-0aad-4c59-9a92-ed44f01a82e2"},{"label":"option 5","value":"15e27b91-682a-4e10-a5d0-149192fd2e4c"},{"label":"option 6","value":"886c921d-2e75-41ea-a1a6-2d49e7921a57"},{"label":"option 7","value":"d14c2409-f66a-47d1-8f63-72686d24df37"}]" 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="[{"label":"option 9","value":"3b9cd3b4-9e70-45de-975d-31407c48812c"},{"label":"option 10","value":"3baf86a8-a3fa-4e64-bfe8-f01ce4320489"},{"label":"option 11","value":"f1c6023c-5cde-445a-b9fb-cc23f06c8132"}]" 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="[{"label":"option 1","value":"941cebeb-58bd-44c5-bf42-c78d20c23b7a"},{"label":"option 2","value":"ab2e7cfc-c700-4ba2-9ac3-3040974f67bf"}]" feedback="">
- <p class="paragraph">
- <div id="2bf9d3ca-166d-4354-9ebf-5d0fc6e75d8d" class="matching-option" isfirst="true" answer="">some text</div>
- </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="false" 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 initialContent = {
// type: 'doc',
// content: [
@@ -118,6 +92,8 @@ const initialContent = `<p class="paragraph"></p>
// ],
// };
+const initialContent = ``;
+
const Hhmi = () => {
const [stateProps, setStateProps] = useState({
readOnly: false,
@@ -191,7 +167,7 @@ const Hhmi = () => {
ref={editorRef}
customValues={{ showFeedBack: submitted, testMode }}
fileUpload={file => renderImage(file)}
- // value={content}
+ value={content}
// targetFormat="JSON"
readonly={readOnly}
layout={HhmiLayout}
diff --git a/wax-questions-service/src/EssayService/components/EssayAnswerComponent.js b/wax-questions-service/src/EssayService/components/EssayAnswerComponent.js
index 75f01b6a5..1d4bca82b 100644
--- a/wax-questions-service/src/EssayService/components/EssayAnswerComponent.js
+++ b/wax-questions-service/src/EssayService/components/EssayAnswerComponent.js
@@ -1,14 +1,32 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+import { WaxContext } from 'wax-prosemirror-core';
import EditorComponent from '../../MultipleChoiceQuestionService/components/EditorComponent';
+const EditorWrapper = styled.div`
+ display: ${props =>
+ props.testMode || props.showFeedBack ? 'block' : 'none'};
+`;
+
export default ({ node, view, getPos }) => {
+ const context = useContext(WaxContext);
+ const {
+ pmViews: { main },
+ } = context;
+ const customProps = main.props.customValues;
+
+ const { testMode, showFeedBack } = customProps;
+
return (
- <EditorComponent
- getPos={getPos}
- node={node}
- placeholderText="Type your essay answer"
- QuestionType="EssayQuestion"
- view={view}
- />
+ <EditorWrapper showFeedBack={showFeedBack} testMode={testMode}>
+ <EditorComponent
+ forceEditable={testMode}
+ getPos={getPos}
+ node={node}
+ placeholderText="Type your essay answer"
+ QuestionType="EssayQuestion"
+ view={view}
+ />
+ </EditorWrapper>
);
};
diff --git a/wax-questions-service/src/EssayService/components/EssayPromptComponent.js b/wax-questions-service/src/EssayService/components/EssayPromptComponent.js
index 7785ade69..185b56f58 100644
--- a/wax-questions-service/src/EssayService/components/EssayPromptComponent.js
+++ b/wax-questions-service/src/EssayService/components/EssayPromptComponent.js
@@ -1,14 +1,30 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+import { WaxContext } from 'wax-prosemirror-core';
import EditorComponent from '../../MultipleChoiceQuestionService/components/EditorComponent';
+const EditorWrapper = styled.div`
+ display: ${props => (props.testMode ? 'none' : 'block')};
+`;
+
export default ({ node, view, getPos }) => {
+ const context = useContext(WaxContext);
+ const {
+ pmViews: { main },
+ } = context;
+ const customProps = main.props.customValues;
+
+ const { testMode } = customProps;
+
return (
- <EditorComponent
- getPos={getPos}
- node={node}
- placeholderText="Provide response summary and rubric"
- QuestionType="EssayQuestion"
- view={view}
- />
+ <EditorWrapper testMode={testMode}>
+ <EditorComponent
+ getPos={getPos}
+ node={node}
+ placeholderText="Provide response summary and rubric"
+ QuestionType="EssayQuestion"
+ view={view}
+ />
+ </EditorWrapper>
);
};
diff --git a/wax-questions-service/src/EssayService/components/EssayQuestionContainerComponent.js b/wax-questions-service/src/EssayService/components/EssayQuestionContainerComponent.js
index f2b6f765f..d84524355 100644
--- a/wax-questions-service/src/EssayService/components/EssayQuestionContainerComponent.js
+++ b/wax-questions-service/src/EssayService/components/EssayQuestionContainerComponent.js
@@ -1,11 +1,5 @@
-import React, { useContext, useRef, useState } from 'react';
-import {
- WaxContext,
- ComponentPlugin,
- DocumentHelpers,
- Icon,
-} from 'wax-prosemirror-core';
-import { th } from '@pubsweet/ui-toolkit';
+import React, { useContext } from 'react';
+import { WaxContext, DocumentHelpers, Icon } from 'wax-prosemirror-core';
import styled from 'styled-components';
import ContainerEditor from '../../FillTheGapQuestionService/components/ContainerEditor';
@@ -17,7 +11,7 @@ const EssayQuestionWrapper = styled.div`
const EssayQuestionContainerTool = styled.div`
border: 3px solid #f5f5f7;
border-bottom: none;
-
+ height: 32px;
span:first-of-type {
position: relative;
top: 3px;
@@ -31,7 +25,7 @@ const ActionButton = styled.button`
border: none;
position: relative;
bottom: 14px;
- left: -11px;
+ left: 6px;
float: right;
`;
@@ -60,7 +54,20 @@ export default ({ node, view, getPos }) => {
const readOnly = !isEditable;
- const removeQuestion = () => {};
+ const removeQuestion = () => {
+ const allNodes = getNodes(context.pmViews.main);
+
+ allNodes.forEach(singleNode => {
+ if (singleNode.node.attrs.id === node.attrs.id) {
+ context.pmViews.main.dispatch(
+ context.pmViews.main.state.tr.delete(
+ singleNode.pos,
+ singleNode.pos + singleNode.node.nodeSize,
+ ),
+ );
+ }
+ });
+ };
return (
<EssayQuestionWrapper>
@@ -81,6 +88,7 @@ export default ({ node, view, getPos }) => {
<ContainerEditor
disallowedTools={['FillTheGap', 'MultipleChoice']}
getPos={getPos}
+ isNotEditable
node={node}
view={view}
/>
@@ -88,3 +96,14 @@ export default ({ node, view, getPos }) => {
</EssayQuestionWrapper>
);
};
+
+const getNodes = view => {
+ const allNodes = DocumentHelpers.findBlockNodes(view.state.doc);
+ const fillTheGapContainerNodes = [];
+ allNodes.forEach(node => {
+ if (node.node.type.name === 'essay_container') {
+ fillTheGapContainerNodes.push(node);
+ }
+ });
+ return fillTheGapContainerNodes;
+};
diff --git a/wax-questions-service/src/MultipleChoiceQuestionService/components/EditorComponent.js b/wax-questions-service/src/MultipleChoiceQuestionService/components/EditorComponent.js
index 7517171b9..47a16ccaa 100644
--- a/wax-questions-service/src/MultipleChoiceQuestionService/components/EditorComponent.js
+++ b/wax-questions-service/src/MultipleChoiceQuestionService/components/EditorComponent.js
@@ -68,6 +68,7 @@ const QuestionEditorComponent = ({
getPos,
placeholderText = 'Type your item',
QuestionType = 'Multiple',
+ forceEditable = false,
}) => {
const editorRef = useRef();
@@ -78,9 +79,10 @@ const QuestionEditorComponent = ({
} = context;
let questionView;
const questionId = node.attrs.id;
- const isEditable = main.props.editable(editable => {
+ let isEditable = main.props.editable(editable => {
return editable;
});
+ if (forceEditable) isEditable = true;
let finalPlugins = [FakeCursorPlugin(), gapCursor(), dropCursor()];
@@ -210,7 +212,9 @@ const QuestionEditorComponent = ({
const addToHistory = !tr.getMeta('exludeToHistoryFromOutside');
const { state, transactions } = questionView.state.applyTransaction(tr);
questionView.updateState(state);
- context.updateView({}, questionId);
+ setTimeout(() => {
+ context.updateView({}, questionId);
+ });
if (!tr.getMeta('fromOutside')) {
const outerTr = view.state.tr;
--
GitLab