From 01dd36c82aef12cfa69f7d7dba97472080512c66 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Tue, 27 Apr 2021 22:37:27 +0300
Subject: [PATCH] add styles
---
.../MultipleChoiceNodeView.js | 3 --
.../components/TestComponent.js | 34 ++++++++++++++++---
2 files changed, 30 insertions(+), 7 deletions(-)
diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceNodeView.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceNodeView.js
index 2eb969fb6..64d3c008a 100644
--- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceNodeView.js
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceNodeView.js
@@ -1,7 +1,4 @@
-import { EditorState } from 'prosemirror-state';
-import { EditorView } from 'prosemirror-view';
import { AbstractNodeView } from 'wax-prosemirror-services';
-import { StepMap } from 'prosemirror-transform';
export default class MultipleChoiceNodeView extends AbstractNodeView {
constructor(
diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/TestComponent.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/TestComponent.js
index ff7951be9..6ba08336d 100644
--- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/TestComponent.js
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/TestComponent.js
@@ -7,6 +7,29 @@ import { WaxContext } from 'wax-prosemirror-core';
import styled from 'styled-components';
+const QuestionWrapper = styled.div`
+ display: flex;
+ border: 1px solid black;
+ flex-direction: column;
+`;
+
+const Question = styled.div`
+ display: flex;
+ flex-direction: row;
+
+ input {
+ position: relative;
+ top: 5px;
+ width: 4%;
+ }
+
+ .ProseMirror {
+ background: #ebebf0;
+ padding: 5px;
+ width: 95%;
+ }
+`;
+
export default ({ node, view, getPos }) => {
const [showExplanation, setShowExplanation] = useState(false);
const context = useContext(WaxContext);
@@ -66,17 +89,20 @@ export default ({ node, view, getPos }) => {
};
const clickMe = () => {
- setShowExplanation(true);
+ setShowExplanation(!showExplanation);
// view.dispatch(view.state.tr);
};
return (
- <>
- <div ref={editorRef} />
+ <QuestionWrapper>
+ <Question>
+ <input type="checkbox" />
+ <div ref={editorRef} />
+ </Question>
<button onClick={clickMe}>Show Explanation</button>
{showExplanation && (
<input type="text" placeholder="type your explanation"></input>
)}
- </>
+ </QuestionWrapper>
);
};
--
GitLab