diff --git a/wax-prosemirror-services/src/FillTheGapQuestionService/components/FeedbackComponent.js b/wax-prosemirror-services/src/FillTheGapQuestionService/components/FeedbackComponent.js deleted file mode 100644 index 2e142857788bbd9c135887ec9fb3f11f73598408..0000000000000000000000000000000000000000 --- a/wax-prosemirror-services/src/FillTheGapQuestionService/components/FeedbackComponent.js +++ /dev/null @@ -1,79 +0,0 @@ -import React, { useContext, useRef, useState } from 'react'; -import styled from 'styled-components'; -import { DocumentHelpers, WaxContext } from 'wax-prosemirror-core'; - -const FeedBack = styled.div` - color: black; - margin-top: 10px; - padding: 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: feedBackRef.current.value, - }), - ); - } - }); - return false; - }; - - return ( - <FeedBack> - <FeedBackLabel>Feedback</FeedBackLabel> - <FeedBackInput - autoFocus="autoFocus" - disabled={readOnly} - onChange={feedBackInput} - placeholder="Insert feedback" - ref={feedBackRef} - type="text" - value={feedBack} - /> - </FeedBack> - ); -}; - -const getNodes = view => { - const allNodes = DocumentHelpers.findBlockNodes(view.state.doc); - const fillTheGapNodes = []; - allNodes.forEach(node => { - if (node.node.type.name === 'fill_the_gap_container') - fillTheGapNodes.push(node); - }); - return fillTheGapNodes; -}; diff --git a/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js b/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js index 4e2c749901bf032f7f1b668b5005336eb5fe4777..f3b7a26663b304b9e488a8643cb18042b0ca6cb4 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 './FeedbackComponent'; +import FeedbackComponent from '../../MatchingService/components/FeedbackComponent'; const FillTheGapContainer = styled.div` border: 3px solid #f5f5f7; diff --git a/wax-prosemirror-services/src/MatchingService/components/FeedbackComponent.js b/wax-prosemirror-services/src/MatchingService/components/FeedbackComponent.js index e063a58257853bbf836e3e09723ef91f1d86ad9d..b8b84760a9bd5d6b4e306b2f386d457c8b989d37 100644 --- a/wax-prosemirror-services/src/MatchingService/components/FeedbackComponent.js +++ b/wax-prosemirror-services/src/MatchingService/components/FeedbackComponent.js @@ -86,10 +86,14 @@ export default ({ node, getPos, readOnly }) => { const getNodes = view => { const allNodes = DocumentHelpers.findBlockNodes(view.state.doc); - const fillTheGapNodes = []; + const nodes = []; allNodes.forEach(node => { - if (node.node.type.name === 'matching_container') - fillTheGapNodes.push(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 fillTheGapNodes; + return nodes; }; diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/FeedbackComponent.js b/wax-prosemirror-services/src/MultipleDropDownService/components/FeedbackComponent.js deleted file mode 100644 index a564e38c4fc53ba016b88f1800f0defac06eadae..0000000000000000000000000000000000000000 --- a/wax-prosemirror-services/src/MultipleDropDownService/components/FeedbackComponent.js +++ /dev/null @@ -1,79 +0,0 @@ -import React, { useContext, useRef, useState } from 'react'; -import styled from 'styled-components'; -import { WaxContext, DocumentHelpers } from 'wax-prosemirror-core'; - -const FeedBack = styled.div` - color: black; - margin-top: 10px; - padding: 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: feedBackRef.current.value, - }), - ); - } - }); - return false; - }; - - return ( - <FeedBack> - <FeedBackLabel>Feedback</FeedBackLabel> - <FeedBackInput - autoFocus="autoFocus" - disabled={readOnly} - onChange={feedBackInput} - placeholder="Insert feedback" - ref={feedBackRef} - type="text" - value={feedBack} - /> - </FeedBack> - ); -}; - -const getNodes = view => { - const allNodes = DocumentHelpers.findBlockNodes(view.state.doc); - const fillTheGapNodes = []; - allNodes.forEach(node => { - if (node.node.type.name === 'multiple_drop_down_container') - fillTheGapNodes.push(node); - }); - return fillTheGapNodes; -}; diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownContainerComponent.js b/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownContainerComponent.js index d259987f82947e011d57a9c4770c9a948a4f442d..8dab27986035f46e8d1fd2d012ddd8be0b41542f 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 './FeedbackComponent'; +import FeedbackComponent from '../../MatchingService/components/FeedbackComponent'; const MultipleDropDownpWrapper = styled.div` margin: 0px 38px 15px 38px;