From 662b0bf99c9d18503f06f18a9e059a2c261f7ad0 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Thu, 22 Apr 2021 13:34:08 +0300
Subject: [PATCH] show explanation
---
.../components/TestComponent.js | 29 +++++++++++++++----
1 file changed, 24 insertions(+), 5 deletions(-)
diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/TestComponent.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/TestComponent.js
index afdfad508..558008049 100644
--- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/TestComponent.js
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/TestComponent.js
@@ -1,5 +1,11 @@
/* eslint-disable react-hooks/exhaustive-deps */
-import React, { useEffect, useRef, useMemo, useCallback } from 'react';
+import React, {
+ useEffect,
+ useRef,
+ useMemo,
+ useCallback,
+ useState,
+} from 'react';
import { EditorState } from 'prosemirror-state';
import { EditorView } from 'prosemirror-view';
import { StepMap } from 'prosemirror-transform';
@@ -14,8 +20,10 @@ const EditorWrapper = styled.div`
user-select: all;
`;
+let showExp = false;
let questionView;
export default ({ node, view, getPos }) => {
+ const [showExplanation, setShowExplanation] = useState(false);
const editorRef = useRef();
const setEditorRef = useCallback(
// eslint-disable-next-line consistent-return
@@ -82,6 +90,8 @@ export default ({ node, view, getPos }) => {
const clickMe = () => {
console.log(node.attrs);
+ setShowExplanation(true);
+ showExp = true;
view.dispatch(view.state.tr);
};
@@ -89,11 +99,20 @@ export default ({ node, view, getPos }) => {
() => (
<>
<EditorWrapper ref={setEditorRef} style={styles} />
- <button onClick={clickMe}>Click me</button>
+ <button onClick={clickMe}>Add Explanation</button>
+ {showExplanation && <input type="text"></input>}
</>
),
- [],
+ [showExplanation],
+ );
+ console.log(showExplanation);
+ return (
+ <>
+ <EditorWrapper ref={setEditorRef} style={styles} />
+ <button onClick={clickMe}>Show Explanation</button>
+ {showExp && (
+ <input type="text" placeholder="type your explanation"></input>
+ )}
+ </>
);
-
- return <>{MemorizedComponent}</>;
};
--
GitLab