get data needed for comment posting

wax-prosemirror-components/src/components/comments/CommentBox.js

-import React, { Fragment, useState, useEffect, useContext } from "react";
+import React, {
+  Fragment,
+  useState,
+  useEffect,
+  useContext,
+  useRef
+} from "react";
+
 import { Transition } from "react-transition-group";
 import styled from "styled-components";
 import { WaxContext } from "wax-prosemirror-core";
 
 const CommentBoxStyled = styled.div`
-  height: 50px;
-  width: 50px;
   display: flex;
   flex-direction: column;
   margin-top: 10px;
-  background: #ffab20;
+  border: 1px solid #ffab20;
   position: absolute;
   transition: ${({ state }) => "top 1s, opacity 1.5s, left 1s"};
   top: ${props => (props.top ? `${props.top}px` : 0)};
@@ -29,18 +34,34 @@ const CommentBoxStyled = styled.div`
 `;
 
 export default ({ comment, view, top, dataBox }) => {
-  const [animate, setAnimate] = useState(false);
-  const { view: { main }, app, activeView } = useContext(WaxContext);
-  const { attrs: { id } } = comment;
+  const { view: { main: { props: { user } } }, app, activeView } = useContext(
+      WaxContext
+    ),
+    commentInput = useRef(null),
+    [animate, setAnimate] = useState(false),
+    [commentAnnotation, setCommentAnnotation] = useState(comment),
+    [currentUser, setCurrentuser] = useState(user),
+    { attrs: { id } } = comment,
+    activeCommentPlugin = app.PmPlugins.get("activeComment"),
+    activeComment = activeCommentPlugin.getState(activeView.state).comment;
 
-  const activeCommentPlugin = app.PmPlugins.get("activeComment");
-  const activeComment = activeCommentPlugin.getState(activeView.state).comment;
   let active = false;
   if (activeComment && id === activeComment.attrs.id) active = true;
   useEffect(() => {
     setAnimate(true);
   }, []);
 
+  const handleKeyDown = event => {
+    if (event.key === "Enter" || event.which === 13) {
+      saveComment();
+    }
+  };
+
+  const saveComment = () => {
+    const { current: { value } } = commentInput;
+    console.log(commentAnnotation, currentUser, value);
+  };
+
   return (
     <Fragment>
       <Transition in={animate} timeout={1000}>
@@ -50,7 +71,19 @@ export default ({ comment, view, top, dataBox }) => {
             state={state}
             data-box={dataBox}
             active={active}
-          />
+          >
+            <div>
+              <input
+                type="text"
+                ref={commentInput}
+                placeholder="add a new comment"
+                onKeyPress={handleKeyDown}
+                autoFocus
+              />
+              <button onClick={saveComment}>Post</button>
+              <button>Cancel</button>
+            </div>
+          </CommentBoxStyled>
         )}
       </Transition>
     </Fragment>

wax-prosemirror-core/src/WaxView.js

@@ -32,6 +32,7 @@ export default props => {
         editable: () => !readonly,
         state: EditorState.create(options),
         dispatchTransaction,
+        user,
         handleDOMEvents: {
           blur: onBlur
             ? view => {