From f2492d709704157ad9c1ce20e6ca891580bf959d Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Thu, 2 Sep 2021 17:48:23 +0300
Subject: [PATCH] move feedback component
---
.../components/FeedbackComponent.js | 86 ++++++++++++++++++-
.../components/QuestionComponent.js | 67 +--------------
2 files changed, 86 insertions(+), 67 deletions(-)
diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/FeedbackComponent.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/FeedbackComponent.js
index a2b4a4231..70004de1a 100644
--- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/FeedbackComponent.js
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/FeedbackComponent.js
@@ -3,9 +3,89 @@ import React, { useContext, useRef, useState } from 'react';
import styled from 'styled-components';
import { TextSelection } from 'prosemirror-state';
import { WaxContext } from 'wax-prosemirror-core';
-import EditorComponent from './EditorComponent';
+
+const FeedBack = styled.div`
+ color: black;
+ margin-top: 10px;
+`;
+
+const FeedBackLabel = styled.span`
+ font-weight: 700;
+`;
+
+const FeedBackInput = styled.input`
+ border: none;
+ display: flex;
+ width: 100%;
+`;
export default ({ node, view, getPos }) => {
- console.log(node, 'feedback');
- return <EditorComponent node={node} view={view} getPos={getPos} />;
+ const context = useContext(WaxContext);
+ const {
+ view: { main },
+ activeViewId,
+ } = context;
+ const [feedBack, setFeedBack] = useState(node.attrs.feedback);
+ const feedBackRef = useRef(null);
+
+ const handleKeyDown = e => {
+ e.stopPropagation();
+ if (e.key === 'Backspace') {
+ context.view.main.dispatch(
+ context.view.main.state.tr.setSelection(
+ new TextSelection(context.view.main.state.tr.doc.resolve(0)),
+ ),
+ );
+ }
+ };
+
+ const feedBackInput = () => {
+ setFeedBack(feedBackRef.current.value);
+ };
+
+ const saveFeedBack = () => {
+ setTimeout(() => {
+ context.view.main.dispatch(
+ context.view.main.state.tr.setNodeMarkup(getPos(), undefined, {
+ ...node.attrs,
+ feedback: feedBack,
+ }),
+ );
+ }, 150);
+ setTimeout(() => {
+ context.view[activeViewId].dispatch(
+ context.view[activeViewId].state.tr.setSelection(
+ TextSelection.between(
+ context.view[activeViewId].state.selection.$anchor,
+ context.view[activeViewId].state.selection.$head,
+ ),
+ ),
+ );
+ context.view[activeViewId].focus();
+ }, 200);
+ };
+
+ const onFocus = () => {
+ context.view.main.dispatch(
+ context.view.main.state.tr.setSelection(
+ new TextSelection(context.view.main.state.tr.doc.resolve(0)),
+ ),
+ );
+ };
+
+ return (
+ <FeedBack>
+ <FeedBackLabel>Feedback</FeedBackLabel>
+ <FeedBackInput
+ onKeyDown={handleKeyDown}
+ onChange={feedBackInput}
+ placeholder="Insert feedback"
+ ref={feedBackRef}
+ type="text"
+ value={feedBack}
+ onBlur={saveFeedBack}
+ onFocus={onFocus}
+ />
+ </FeedBack>
+ );
};
diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/QuestionComponent.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/QuestionComponent.js
index fba1e4dcd..d27020380 100644
--- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/QuestionComponent.js
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/QuestionComponent.js
@@ -1,5 +1,5 @@
/* eslint-disable react-hooks/exhaustive-deps */
-import React, { useContext, useRef, useState } from 'react';
+import React, { useContext, useMemo } from 'react';
import styled from 'styled-components';
import { TextSelection } from 'prosemirror-state';
import { WaxContext } from 'wax-prosemirror-core';
@@ -9,6 +9,7 @@ import { v4 as uuidv4 } from 'uuid';
import helpers from '../helpers/helpers';
import EditorComponent from './EditorComponent';
import SwitchComponent from './SwitchComponent';
+import FeedbackComponent from './FeedbackComponent';
import Button from './Button';
const Wrapper = styled.div`
@@ -85,32 +86,12 @@ export default ({ node, view, getPos }) => {
const context = useContext(WaxContext);
const {
view: { main },
- activeViewId,
} = context;
const isEditable = main.props.editable(editable => {
return editable;
});
- const [feedBack, setFeedBack] = useState(node.attrs.feedback);
-
- const feedBackRef = useRef(null);
-
- const feedBackInput = () => {
- setFeedBack(feedBackRef.current.value);
- };
-
- const handleKeyDown = e => {
- e.stopPropagation();
- if (e.key === 'Backspace') {
- context.view.main.dispatch(
- context.view.main.state.tr.setSelection(
- new TextSelection(context.view.main.state.tr.doc.resolve(0)),
- ),
- );
- }
- };
-
const removeOption = () => {
main.state.doc.nodesBetween(getPos(), getPos() + 1, (nodes, pos) => {
if (nodes.attrs.id === node.attrs.id) {
@@ -152,36 +133,6 @@ export default ({ node, view, getPos }) => {
});
};
- const saveFeedBack = () => {
- setTimeout(() => {
- context.view.main.dispatch(
- context.view.main.state.tr.setNodeMarkup(getPos(), undefined, {
- ...node.attrs,
- feedback: feedBack,
- }),
- );
- }, 150);
- setTimeout(() => {
- context.view[activeViewId].dispatch(
- context.view[activeViewId].state.tr.setSelection(
- TextSelection.between(
- context.view[activeViewId].state.selection.$anchor,
- context.view[activeViewId].state.selection.$head,
- ),
- ),
- );
- context.view[activeViewId].focus();
- }, 200);
- };
-
- const onFocus = () => {
- context.view.main.dispatch(
- context.view.main.state.tr.setSelection(
- new TextSelection(context.view.main.state.tr.doc.resolve(0)),
- ),
- );
- };
-
const readOnly = !isEditable;
const showAddIcon = true;
const showRemoveIcon = true;
@@ -198,19 +149,7 @@ export default ({ node, view, getPos }) => {
<SwitchComponent />
</QuestionData>
- <FeedBack>
- <FeedBackLabel>Feedback</FeedBackLabel>
- <FeedBackInput
- onKeyDown={handleKeyDown}
- onChange={feedBackInput}
- placeholder="Insert feedback"
- ref={feedBackRef}
- type="text"
- value={feedBack}
- onBlur={saveFeedBack}
- onFocus={onFocus}
- />
- </FeedBack>
+ <FeedbackComponent node={node} view={view} getPos={getPos} />
</QuestionWrapper>
<IconsWrapper>
{showAddIcon && !readOnly && (
--
GitLab