add feedback component

wax-prosemirror-services/src/EssayService/components/EssayComponent.js

 /* 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} />
+    </>
+  );
 };

wax-prosemirror-services/src/EssayService/components/FeedBackComponent.js

+/* 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>
+  );
+};