From 7af918e823e9ca20bf9d2e6be5764b5a39004d27 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Fri, 26 Jun 2020 14:19:14 +0300
Subject: [PATCH] create comment component
---
.../src/components/comments/Comment.js | 59 +++++++++++++++++++
.../src/components/comments/CommentBox.js | 48 +++------------
.../src/layouts/EditorElements.js | 1 +
3 files changed, 67 insertions(+), 41 deletions(-)
create mode 100644 wax-prosemirror-components/src/components/comments/Comment.js
diff --git a/wax-prosemirror-components/src/components/comments/Comment.js b/wax-prosemirror-components/src/components/comments/Comment.js
new file mode 100644
index 000000000..2d8db226c
--- /dev/null
+++ b/wax-prosemirror-components/src/components/comments/Comment.js
@@ -0,0 +1,59 @@
+import React, {
+ Fragment,
+ useState,
+ useEffect,
+ useContext,
+ useRef
+} from "react";
+
+import styled from "styled-components";
+import { WaxContext } from "wax-prosemirror-core";
+
+export default ({ comment, activeView, user }) => {
+ const commentInput = useRef(null);
+ const [currentUser, setCurrentuser] = useState(user);
+ const [commentAnnotation, setCommentAnnotation] = useState(comment);
+ const { state, dispatch } = activeView;
+ const { attrs: { conversation } } = comment;
+
+ console.log("dddd", conversation);
+ const handleKeyDown = event => {
+ if (event.key === "Enter" || event.which === 13) {
+ saveComment();
+ }
+ };
+
+ const saveComment = () => {
+ const { current: { value } } = commentInput;
+ const { tr, doc } = state;
+ const commentMark = state.schema.marks.comment;
+
+ const obj = { [user.username]: value };
+ commentAnnotation.attrs.conversation.push(obj);
+
+ dispatch(
+ tr.addMark(
+ commentAnnotation.pos,
+ commentAnnotation.pos + commentAnnotation.node.nodeSize,
+ commentMark.create({
+ ...((commentAnnotation && commentAnnotation.attrs) || {}),
+ conversation: commentAnnotation.attrs.conversation
+ })
+ )
+ );
+ };
+
+ return (
+ <Fragment>
+ <input
+ type="text"
+ ref={commentInput}
+ placeholder="add a new comment"
+ onKeyPress={handleKeyDown}
+ autoFocus
+ />
+ <button onClick={saveComment}>Post</button>
+ <button>Cancel</button>
+ </Fragment>
+ );
+};
diff --git a/wax-prosemirror-components/src/components/comments/CommentBox.js b/wax-prosemirror-components/src/components/comments/CommentBox.js
index e17cc7489..1f8d67f40 100644
--- a/wax-prosemirror-components/src/components/comments/CommentBox.js
+++ b/wax-prosemirror-components/src/components/comments/CommentBox.js
@@ -9,6 +9,7 @@ import React, {
import { Transition } from "react-transition-group";
import styled from "styled-components";
import { WaxContext } from "wax-prosemirror-core";
+import Comment from "./Comment";
const CommentBoxStyled = styled.div`
display: flex;
@@ -37,11 +38,7 @@ export default ({ comment, view, top, dataBox }) => {
const { view: { main: { props: { user } } }, app, activeView } = useContext(
WaxContext
),
- { state, dispatch } = activeView,
- 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;
@@ -52,32 +49,6 @@ export default ({ comment, view, top, dataBox }) => {
setAnimate(true);
}, []);
- const handleKeyDown = event => {
- if (event.key === "Enter" || event.which === 13) {
- saveComment();
- }
- };
-
- const saveComment = () => {
- const { current: { value } } = commentInput;
- const { tr, doc } = state;
- const commentMark = state.schema.marks.comment;
-
- const obj = { [user.username]: value };
- commentAnnotation.attrs.conversation.push(obj);
-
- dispatch(
- tr.addMark(
- commentAnnotation.pos,
- commentAnnotation.pos + commentAnnotation.node.nodeSize,
- commentMark.create({
- ...((commentAnnotation && commentAnnotation.attrs) || {}),
- conversation: commentAnnotation.attrs.conversation
- })
- )
- );
- };
-
return (
<Fragment>
<Transition in={animate} timeout={1000}>
@@ -88,17 +59,12 @@ export default ({ comment, view, top, dataBox }) => {
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>
+ <Comment
+ comment={comment}
+ active={active}
+ activeView={activeView}
+ user={user}
+ />
</CommentBoxStyled>
)}
</Transition>
diff --git a/wax-prosemirror-layouts/src/layouts/EditorElements.js b/wax-prosemirror-layouts/src/layouts/EditorElements.js
index 439dff10d..b8f77fd85 100644
--- a/wax-prosemirror-layouts/src/layouts/EditorElements.js
+++ b/wax-prosemirror-layouts/src/layouts/EditorElements.js
@@ -34,6 +34,7 @@ export default css`
font-size: 16px;
counter-increment: footnote;
}
+
hr {
padding: 2px 10px;
border: none;
--
GitLab