set input value

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

@@ -5,18 +5,24 @@ import React, {
   useContext,
   useRef
 } from "react";
+import { v4 as uuidv4 } from "uuid";
 
 import styled from "styled-components";
 import { WaxContext } from "wax-prosemirror-core";
 
+const SinlgeCommentRow = styled.div`
+  padding: 4px;
+  border-bottom: 1px solid #ffab20;
+`;
+
 export default ({ comment, activeView, user }) => {
   const commentInput = useRef(null);
   const [currentUser, setCurrentuser] = useState(user);
   const [commentAnnotation, setCommentAnnotation] = useState(comment);
+  const [commentInputValue, setcommentInputValue] = useState("");
   const { state, dispatch } = activeView;
   const { attrs: { conversation } } = comment;
 
-  console.log("dddd", conversation);
   const handleKeyDown = event => {
     if (event.key === "Enter" || event.which === 13) {
       saveComment();
@@ -41,19 +47,44 @@ export default ({ comment, activeView, user }) => {
         })
       )
     );
+    setcommentInputValue("");
+  };
+
+  const updateCommentInputValue = () => {
+    const { current: { value } } = commentInput;
+    setcommentInputValue(value);
+  };
+
+  const commentInputReply = () => {
+    return (
+      <Fragment>
+        <input
+          type="text"
+          ref={commentInput}
+          placeholder="add a new comment"
+          onChange={updateCommentInputValue}
+          onKeyPress={handleKeyDown}
+          autoFocus
+          value={commentInputValue}
+        />
+        <button onClick={saveComment}>Post</button>
+        <button>Cancel</button>
+      </Fragment>
+    );
   };
 
-  return (
+  return conversation.length === 0 ? (
+    <Fragment>{commentInputReply()}</Fragment>
+  ) : (
     <Fragment>
-      <input
-        type="text"
-        ref={commentInput}
-        placeholder="add a new comment"
-        onKeyPress={handleKeyDown}
-        autoFocus
-      />
-      <button onClick={saveComment}>Post</button>
-      <button>Cancel</button>
+      {conversation.map((singleComment, index) => {
+        return (
+          <SinlgeCommentRow key={uuidv4()}>{`${user.username} : ${
+            singleComment[user.username]
+          }`}</SinlgeCommentRow>
+        );
+      })}
+      {commentInputReply()}
     </Fragment>
   );
 };

wax-prosemirror-components/src/components/link/LinkComponent.js

@@ -19,7 +19,6 @@ const Button = styled.button`
 `;
 
 const LinkComponent = ({ mark, setPosition, position }) => {
-  console.log(mark);
   const href = mark ? mark.attrs.href : null,
     linkMark = mark ? mark : null,
     { view: { main }, activeView } = useContext(WaxContext),