From c7ba59d280fcdf2db229f4d891319c5db414653e Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Tue, 20 Dec 2022 11:22:32 +0200
Subject: [PATCH] alter feedback to textarea
---
.../FillTheGapContainerNodeView.js | 2 +-
.../FillTheGapContainerComponent.js | 2 +-
.../MatchingContainerNodeView.js | 2 +-
.../components/FeedbackComponent.js | 96 -------------------
.../components/MatchingContainerComponent.js | 2 +-
.../MultipleChoiceNodeView.js | 3 +-
.../components/FeedbackComponent.js | 26 ++++-
.../MultipleDropDownContainerNodeView.js | 2 +-
.../MultipleDropDownContainerComponent.js | 2 +-
9 files changed, 32 insertions(+), 105 deletions(-)
delete mode 100644 wax-prosemirror-services/src/MatchingService/components/FeedbackComponent.js
diff --git a/wax-prosemirror-services/src/FillTheGapQuestionService/FillTheGapContainerNodeView.js b/wax-prosemirror-services/src/FillTheGapQuestionService/FillTheGapContainerNodeView.js
index 23e37bbb0..ed20f863d 100644
--- a/wax-prosemirror-services/src/FillTheGapQuestionService/FillTheGapContainerNodeView.js
+++ b/wax-prosemirror-services/src/FillTheGapQuestionService/FillTheGapContainerNodeView.js
@@ -27,7 +27,7 @@ export default class FillTheGapContainerNodeView extends QuestionsNodeView {
}
stopEvent(event) {
- if (event.target.type === 'text') {
+ if (event.target.type === 'textarea') {
return true;
}
diff --git a/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js b/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js
index cf57a30d4..e51d291f9 100644
--- a/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js
+++ b/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js
@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
import { WaxContext, ComponentPlugin } from 'wax-prosemirror-core';
import styled from 'styled-components';
import ContainerEditor from './ContainerEditor';
-import FeedbackComponent from '../../MatchingService/components/FeedbackComponent';
+import FeedbackComponent from '../../MultipleChoiceQuestionService/components/FeedbackComponent';
const FillTheGapContainer = styled.div`
border: 3px solid #f5f5f7;
diff --git a/wax-prosemirror-services/src/MatchingService/MatchingContainerNodeView.js b/wax-prosemirror-services/src/MatchingService/MatchingContainerNodeView.js
index 8fed68e63..05bb83d97 100644
--- a/wax-prosemirror-services/src/MatchingService/MatchingContainerNodeView.js
+++ b/wax-prosemirror-services/src/MatchingService/MatchingContainerNodeView.js
@@ -30,7 +30,7 @@ export default class MatchingContainerNodeView extends QuestionsNodeView {
}
stopEvent(event) {
- if (event.target.type === 'text') {
+ if (event.target.type === 'textarea') {
return true;
}
const innerView = this.context.pmViews[this.node.attrs.id];
diff --git a/wax-prosemirror-services/src/MatchingService/components/FeedbackComponent.js b/wax-prosemirror-services/src/MatchingService/components/FeedbackComponent.js
deleted file mode 100644
index bee6f7942..000000000
--- a/wax-prosemirror-services/src/MatchingService/components/FeedbackComponent.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import React, { useContext, useRef, useState } from 'react';
-import styled from 'styled-components';
-import { TextSelection } from 'prosemirror-state';
-import { WaxContext, DocumentHelpers } from 'wax-prosemirror-core';
-
-const FeedBack = styled.div`
- color: black;
- margin-top: 10px;
-`;
-
-const FeedBackLabel = styled.span`
- font-weight: 700;
-`;
-
-const FeedBackInput = styled.input`
- border: none;
- border-bottom: 1px solid black;
- display: flex;
- width: 100%;
-
- &:focus {
- outline: none;
- }
-
- ::placeholder {
- color: rgb(170, 170, 170);
- font-style: italic;
- }
-`;
-
-export default ({ node, getPos, readOnly }) => {
- const context = useContext(WaxContext);
- const {
- pmViews: { main },
- } = context;
- const [feedBack, setFeedBack] = useState(node.attrs.feedback);
- const feedBackRef = useRef(null);
-
- const feedBackInput = () => {
- setFeedBack(feedBackRef.current.value);
- const allNodes = getNodes(main);
- allNodes.forEach(singleNode => {
- if (singleNode.node.attrs.id === node.attrs.id) {
- main.dispatch(
- main.state.tr.setNodeMarkup(getPos(), undefined, {
- ...singleNode.node.attrs,
- feedback: feedBack,
- }),
- );
- }
- });
- setNullSelection();
- return false;
- };
-
- const setNullSelection = () => {
- main.dispatch(
- main.state.tr.setSelection(TextSelection.create(main.state.tr.doc, null)),
- );
- };
-
- const onFocus = () => {
- setTimeout(() => {
- setNullSelection();
- }, 50);
- };
- return (
- <FeedBack>
- <FeedBackLabel>Feedback</FeedBackLabel>
- <FeedBackInput
- autoFocus="autoFocus"
- disabled={readOnly}
- onChange={feedBackInput}
- onFocus={onFocus}
- placeholder="Insert feedback"
- ref={feedBackRef}
- type="text"
- value={feedBack}
- />
- </FeedBack>
- );
-};
-
-const getNodes = view => {
- const allNodes = DocumentHelpers.findBlockNodes(view.state.doc);
- const nodes = [];
- allNodes.forEach(node => {
- if (
- node.node.type.name === 'matching_container' ||
- node.node.type.name === 'fill_the_gap_container' ||
- node.node.type.name === 'multiple_drop_down_container'
- )
- nodes.push(node);
- });
- return nodes;
-};
diff --git a/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js b/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js
index bf6c6cf89..8fe2c2cee 100644
--- a/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js
+++ b/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js
@@ -4,7 +4,7 @@ import { v4 as uuidv4 } from 'uuid';
import { WaxContext, DocumentHelpers, Icon } from 'wax-prosemirror-core';
import useDynamicRefs from 'use-dynamic-refs';
import styled from 'styled-components';
-import FeedbackComponent from './FeedbackComponent';
+import FeedbackComponent from '../../MultipleChoiceQuestionService/components/FeedbackComponent';
import ContainerEditor from './ContainerEditor';
const MatchingWrapper = styled.div`
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceNodeView.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceNodeView.js
index 78a157c9c..e24255541 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceNodeView.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceNodeView.js
@@ -23,7 +23,8 @@ export default class MultipleChoiceNodeView extends QuestionsNodeView {
}
stopEvent(event) {
- if (event.target.type === 'text') {
+ console.log(event.target.type);
+ if (event.target.type === 'textarea') {
return true;
}
const innerView = this.context.pmViews[this.node.attrs.id];
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/FeedbackComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/FeedbackComponent.js
index 0382d7e91..625048a4d 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/FeedbackComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/FeedbackComponent.js
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useContext, useRef, useState } from 'react';
import styled from 'styled-components';
import { TextSelection } from 'prosemirror-state';
import { WaxContext, DocumentHelpers } from 'wax-prosemirror-core';
@@ -12,10 +12,27 @@ const FeedBackLabel = styled.span`
font-weight: 700;
`;
-const FeedBackInput = styled.input`
+const FeedBackInput = styled.textarea`
border: none;
display: flex;
+ font-family: Fira Sans Condensed;
width: 100%;
+ resize: vertical;
+ white-space: pre-wrap;
+ overflow-wrap: break-word;
+
+ background-attachment: local;
+ background-image: linear-gradient(to right, white 10px, transparent 10px),
+ linear-gradient(to left, white 10px, transparent 10px),
+ repeating-linear-gradient(
+ white,
+ white 30px,
+ #ccc 30px,
+ #ccc 31px,
+ white 31px
+ );
+ line-height: 31px;
+ padding: 8px 10px;
&:focus {
outline: none;
@@ -50,6 +67,10 @@ export default ({ node, getPos, readOnly }) => {
}
});
setNullSelection();
+ const textarea = feedBackRef.current;
+ const heightLimit = 200;
+ textarea.style.height = '';
+ textarea.style.height = `${Math.min(textarea.scrollHeight, heightLimit)}px`;
return false;
};
@@ -75,6 +96,7 @@ export default ({ node, getPos, readOnly }) => {
placeholder="Insert feedback"
readOnly={readOnly}
ref={feedBackRef}
+ rows="1"
type="text"
value={feedBack}
/>
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/MultipleDropDownContainerNodeView.js b/wax-prosemirror-services/src/MultipleDropDownService/MultipleDropDownContainerNodeView.js
index fe43906a4..5db50ef91 100644
--- a/wax-prosemirror-services/src/MultipleDropDownService/MultipleDropDownContainerNodeView.js
+++ b/wax-prosemirror-services/src/MultipleDropDownService/MultipleDropDownContainerNodeView.js
@@ -23,7 +23,7 @@ export default class MultipleDropDownContainerNodeView extends QuestionsNodeView
}
stopEvent(event) {
- if (event.target.type === 'text') {
+ if (event.target.type === 'textarea') {
return true;
}
const innerView = this.context.pmViews[this.node.attrs.id];
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownContainerComponent.js b/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownContainerComponent.js
index 15ca6308e..174dd6cdd 100644
--- a/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownContainerComponent.js
+++ b/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownContainerComponent.js
@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
import { WaxContext, ComponentPlugin } from 'wax-prosemirror-core';
import styled from 'styled-components';
import ContainerEditor from './ContainerEditor';
-import FeedbackComponent from '../../MatchingService/components/FeedbackComponent';
+import FeedbackComponent from '../../MultipleChoiceQuestionService/components/FeedbackComponent';
const MultipleDropDownpWrapper = styled.div`
margin: 0px 38px 15px 38px;
--
GitLab