diff --git a/wax-prosemirror-services/src/EssayService/components/EssayComponent.js b/wax-prosemirror-services/src/EssayService/components/EssayComponent.js index efc17d00e85d22f08872143943820c9a7851260f..8d957520d997020f16d145eb3b81e7fb3fe667e6 100644 --- a/wax-prosemirror-services/src/EssayService/components/EssayComponent.js +++ b/wax-prosemirror-services/src/EssayService/components/EssayComponent.js @@ -1,7 +1,13 @@ /* eslint-disable react/prop-types */ import React from 'react'; import EditorComponent from './EditorComponent'; +import FeedBackComponent from './FeedBackComponent'; export default ({ node, view, getPos }) => { - return <EditorComponent getPos={getPos} node={node} view={view} />; + return ( + <> + <EditorComponent getPos={getPos} node={node} view={view} /> + <FeedBackComponent getPos={getPos} node={node} view={view} /> + </> + ); }; diff --git a/wax-prosemirror-services/src/EssayService/components/FeedBackComponent.js b/wax-prosemirror-services/src/EssayService/components/FeedBackComponent.js new file mode 100644 index 0000000000000000000000000000000000000000..f06644ffd3e984903afad165887f1c4aed88de49 --- /dev/null +++ b/wax-prosemirror-services/src/EssayService/components/FeedBackComponent.js @@ -0,0 +1,65 @@ +/* eslint-disable react/destructuring-assignment */ +/* eslint-disable react/prop-types */ + +import React, { useContext, useRef, useState, useEffect } from 'react'; +import styled from 'styled-components'; +import { TextSelection } from 'prosemirror-state'; +import { WaxContext } from 'wax-prosemirror-core'; +import { DocumentHelpers } from 'wax-prosemirror-utilities'; + +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 }) => { + const context = useContext(WaxContext); + const [feedBack, setFeedBack] = useState(' '); + const feedBackRef = useRef(null); + + useEffect(() => {}, []); + + const handleKeyDown = e => {}; + + const feedBackInput = () => { + setFeedBack(feedBackRef.current.value); + }; + + const saveFeedBack = () => { + return true; + }; + + const onFocus = () => { + context.view.main.dispatch( + context.view.main.state.tr.setSelection( + TextSelection.create(context.view.main.state.tr.doc, null), + ), + ); + }; + + return ( + <FeedBack> + <FeedBackLabel>Feedback</FeedBackLabel> + <FeedBackInput + onBlur={saveFeedBack} + onChange={feedBackInput} + onFocus={onFocus} + onKeyDown={handleKeyDown} + placeholder="Insert feedback" + ref={feedBackRef} + type="text" + value={feedBack} + /> + </FeedBack> + ); +};