diff --git a/wax-prosemirror-components/src/components/comments/ConnectedComment.js b/wax-prosemirror-components/src/components/comments/ConnectedComment.js
index 68e9194904d7c695750088adc78ebb458ee2ab93..af7fdf6a1a1ba6c6dccbca9103e98afb96e35dc2 100644
--- a/wax-prosemirror-components/src/components/comments/ConnectedComment.js
+++ b/wax-prosemirror-components/src/components/comments/ConnectedComment.js
@@ -5,6 +5,10 @@ import { DocumentHelpers } from 'wax-prosemirror-utilities';
import { WaxContext } from 'wax-prosemirror-core';
import CommentBox from '../../ui/comments/CommentBox';
+const ConnectedCommentStyled = styled.div`
+ position: absolute;
+`;
+
export default ({ key, comment, dataBox, top, commentId, commentData }) => {
const MemorizedComponent = memo(() => {
const {
@@ -19,19 +23,25 @@ export default ({ key, comment, dataBox, top, commentId, commentData }) => {
} = useContext(WaxContext);
let active = false;
+ const styles = {
+ top: `${top}px`,
+ };
+
const commentPlugin = app.PmPlugins.get('commentPlugin');
const activeComment = commentPlugin.getState(activeView.state).comment;
if (activeComment && commentId === activeComment.attrs.id) active = true;
return (
- <CommentBox
- key={commentId}
- active={active}
- dataBox={commentId}
- top={top}
- commentId={commentId}
- commentData={commentData}
- />
+ <ConnectedCommentStyled data-box={commentId} style={styles}>
+ <CommentBox
+ key={commentId}
+ active={active}
+ dataBox={commentId}
+ top={top}
+ commentId={commentId}
+ commentData={commentData}
+ />
+ </ConnectedCommentStyled>
);
});
return <MemorizedComponent />;
diff --git a/wax-prosemirror-components/src/ui/comments/CommentBox.js b/wax-prosemirror-components/src/ui/comments/CommentBox.js
index c89620ae15e2d025bb1a10f494fcd04de65797f0..7124537a30d2ede153227a2f6592015f64f023d1 100644
--- a/wax-prosemirror-components/src/ui/comments/CommentBox.js
+++ b/wax-prosemirror-components/src/ui/comments/CommentBox.js
@@ -25,7 +25,6 @@ const Wrapper = styled.div`
box-sizing: border-box;
display: flex;
flex-direction: column;
- position: absolute;
/* padding: 8px 0; */
${props => !props.active && inactive}
@@ -60,7 +59,6 @@ const CommentBox = props => {
onClickBox,
onClickPost,
onClickResolve,
- top,
} = props;
// send signal to make this comment active
@@ -71,19 +69,8 @@ const CommentBox = props => {
if (!active && (!commentData || commentData.length === 0)) return null;
- const style = {
- top: `${top}px`,
- };
-
return (
- <Wrapper
- style={style}
- active={active}
- data-box={commentId}
- className={className}
- onClick={onClickWrapper}
- top={top}
- >
+ <Wrapper active={active} className={className} onClick={onClickWrapper}>
{active && commentData.length > 0 && (
<Head>
<Resolve onClick={() => onClickResolve(commentId)}>Resolve</Resolve>
@@ -105,7 +92,6 @@ const CommentBox = props => {
CommentBox.propTypes = {
/** Whether this is the current active comment */
active: PropTypes.bool,
- top: PropTypes.number,
/** List of objects containing data for comment items */
commentData: PropTypes.arrayOf(
PropTypes.shape({
@@ -129,7 +115,6 @@ CommentBox.propTypes = {
};
CommentBox.defaultProps = {
- top: 0,
active: false,
commentData: [],
};