diff --git a/wax-prosemirror-components/index.js b/wax-prosemirror-components/index.js
index 49f165241f8026c65c7951706e246b295d3aa964..770e1e4b638ca7a286075f68de24d49c82db7a92 100644
--- a/wax-prosemirror-components/index.js
+++ b/wax-prosemirror-components/index.js
@@ -18,6 +18,4 @@ export {
default as CommentBubbleComponent
} from "./src/components/comments/CommentBubbleComponent";
-export {
- default as CommentComponent
-} from "./src/components/comments/CommentComponent";
+export { default as RightArea } from "./src/components/rightArea/RightArea";
diff --git a/wax-prosemirror-components/src/components/comments/CommentBox.js b/wax-prosemirror-components/src/components/comments/CommentBox.js
index 301591f51427b2aab4391f3835bced54be175dbd..c394e7a9dbdf79fd80674217393c531d3ea36d6f 100644
--- a/wax-prosemirror-components/src/components/comments/CommentBox.js
+++ b/wax-prosemirror-components/src/components/comments/CommentBox.js
@@ -11,7 +11,7 @@ const CommentBoxStyled = styled.div`
margin-top: 10px;
background: black;
position: absolute;
- transition: ${({ state }) => "top 1s, opacity 1.5s"};
+ transition: ${({ state }) => "top 1s, opacity 1.5s, left 1s"};
top: ${props => (props.top ? `${props.top}px` : 0)};
left: ${props => (props.active ? `${63}%` : `${65}%`)};
opacity: ${({ state }) => {
diff --git a/wax-prosemirror-components/src/components/comments/CommentComponent.js b/wax-prosemirror-components/src/components/rightArea/RightArea.js
similarity index 66%
rename from wax-prosemirror-components/src/components/comments/CommentComponent.js
rename to wax-prosemirror-components/src/components/rightArea/RightArea.js
index 35b5b12adee0a7c68b1cba75d7543442e391f796..910204385638f5d7c15c58e66dcbd4f8abda60f9 100644
--- a/wax-prosemirror-components/src/components/comments/CommentComponent.js
+++ b/wax-prosemirror-components/src/components/rightArea/RightArea.js
@@ -9,52 +9,51 @@ import React, {
import styled from "styled-components";
import { WaxContext } from "wax-prosemirror-core";
import { DocumentHelpers } from "wax-prosemirror-utilities";
-import CommentsBoxList from "./CommentsBoxList";
+import CommentsBoxList from "./../comments/CommentsBoxList";
import { each } from "lodash";
export default ({ area }) => {
const { view: { main }, app, activeView } = useContext(WaxContext);
const activeCommentPlugin = app.PmPlugins.get("activeComment");
- const [comments, setComments] = useState([]);
+ const [marks, setMarks] = useState([]);
const [position, setPosition] = useState();
const setTops = useCallback(() => {
const result = [];
- let commentEl = null;
+ let markEl = null;
let annotationTop = 0;
let boxHeight = 0;
let top = 0;
const allCommentsTop = [];
- each(comments[area], (comment, pos) => {
+ each(marks[area], (mark, pos) => {
const WaxSurface = main.dom.getBoundingClientRect();
- const { attrs: { id } } = comment;
+ const { attrs: { id } } = mark;
const activeComment = activeCommentPlugin.getState(activeView.state)
.comment;
let isActive = false;
- if (activeComment && comment.attrs.id === activeComment.attrs.id)
+ if (activeComment && mark.attrs.id === activeComment.attrs.id)
isActive = true;
//annotation top
if (area === "main") {
- commentEl = document.querySelector(`span[data-id="${id}"]`);
- if (commentEl)
- annotationTop =
- commentEl.getBoundingClientRect().top - WaxSurface.top;
+ markEl = document.querySelector(`span[data-id="${id}"]`);
+ if (markEl)
+ annotationTop = markEl.getBoundingClientRect().top - WaxSurface.top;
} else {
const panelWrapper = document.getElementsByClassName("panelWrapper");
const panelWrapperHeight = panelWrapper[0].getBoundingClientRect()
.height;
- commentEl = document
+ markEl = document
.querySelector("#notes-container")
.querySelector(`span[data-id="${id}"]`);
- if (commentEl)
+ if (markEl)
annotationTop =
- commentEl.getBoundingClientRect().top - panelWrapperHeight - 50;
+ markEl.getBoundingClientRect().top - panelWrapperHeight - 50;
}
- // get height of this comment box
+ // get height of this mark box
const boxEl = document.querySelector(`div[data-comment="comment-${id}"]`);
if (boxEl) boxHeight = parseInt(boxEl.offsetHeight);
@@ -63,20 +62,20 @@ export default ({ area }) => {
// if the above comment box has already taken up the height, move down
if (pos > 0) {
- const previousBox = comments[area][pos - 1];
+ const previousBox = marks[area][pos - 1];
const previousEndHeight = previousBox.endHeight;
if (annotationTop < previousEndHeight) {
top = previousEndHeight + 2;
}
}
// store where the box ends to be aware of overlaps in the next box
- comment.endHeight = top + boxHeight + 2;
+ mark.endHeight = top + boxHeight + 2;
result[pos] = top;
allCommentsTop.push({ [id]: result[pos] });
// if active, move as many boxes above as needed to bring it to the annotation's height
if (isActive) {
- comment.endHeight = annotationTop + boxHeight + 2;
+ mark.endHeight = annotationTop + boxHeight + 2;
result[pos] = annotationTop;
allCommentsTop[pos][id] = result[pos];
let b = true;
@@ -86,7 +85,7 @@ export default ({ area }) => {
if (i === 0) b = false;
while (b) {
- const boxAbove = comments[area][i - 1];
+ const boxAbove = marks[area][i - 1];
const boxAboveEnds = boxAbove.endHeight;
const currentTop = result[i];
@@ -96,8 +95,7 @@ export default ({ area }) => {
const overlap = boxAboveEnds - currentTop;
result[i - 1] -= overlap;
- allCommentsTop[i - 1][comments[area][i - 1].attrs.id] =
- result[i - 1];
+ allCommentsTop[i - 1][marks[area][i - 1].attrs.id] = result[i - 1];
}
if (!doesOverlap) b = false;
@@ -112,49 +110,49 @@ export default ({ area }) => {
useEffect(
() => {
- setComments(updateComments(main));
+ setMarks(updateMarks(main));
setPosition(setTops());
},
- [JSON.stringify(updateComments(main)), JSON.stringify(setTops())]
+ [JSON.stringify(updateMarks(main)), JSON.stringify(setTops())]
);
- const CommentComponent = useMemo(
+ const CommentTrackComponent = useMemo(
() => (
<CommentsBoxList
- comments={comments[area] || []}
+ comments={marks[area] || []}
area={area}
view={main}
position={position}
/>
),
- [comments[area] || [], position]
+ [marks[area] || [], position]
);
- return <Fragment>{CommentComponent}</Fragment>;
+ return <Fragment>{CommentTrackComponent}</Fragment>;
};
-const updateComments = view => {
+const updateMarks = view => {
if (view) {
- const nodes = DocumentHelpers.findChildrenByMark(
+ const commentNodes = DocumentHelpers.findChildrenByMark(
view.state.doc,
view.state.schema.marks.comment,
true
);
- const allComments = nodes.map(node => {
+ const allComments = commentNodes.map(node => {
return node.node.marks.filter(comment => {
return comment.type.name === "comment";
});
});
- const groupedComments = {};
+ const groupedNodes = {};
allComments.forEach(comment => {
- if (!groupedComments[comment[0].attrs.group]) {
- groupedComments[comment[0].attrs.group] = [comment[0]];
+ if (!groupedNodes[comment[0].attrs.group]) {
+ groupedNodes[comment[0].attrs.group] = [comment[0]];
} else {
- groupedComments[comment[0].attrs.group].push(comment[0]);
+ groupedNodes[comment[0].attrs.group].push(comment[0]);
}
});
- return groupedComments;
+ return groupedNodes;
}
return [];
};
diff --git a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
index b14375b4dfdf4e9614b67eb94517ba3e6ec4113e..d77f088e657f0bb3dab96d8f9f329169f759d6a5 100644
--- a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
+++ b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
@@ -204,7 +204,7 @@ const LeftSideBar = componentPlugin("leftSideBar");
const RightSideBar = componentPlugin("rightSideBar");
const TopBar = componentPlugin("topBar");
const NotesArea = componentPlugin("notesArea");
-const CommentsArea = componentPlugin("commentsArea");
+const RightArea = componentPlugin("rightArea");
const WaxOverlays = componentPlugin("waxOverlays");
const withNotes = () => {
@@ -214,7 +214,7 @@ const withNotes = () => {
<NotesArea />
</NotesContainer>
<CommentsContainer>
- <CommentsArea area="notes" />
+ <RightArea area="notes" />
</CommentsContainer>
</NotesAreaContainer>
);
@@ -257,7 +257,7 @@ const EditoriaLayout = ({ editor }) => {
<WaxSurfaceScroll className="wax-surface-scroll">
<EditorContainer>{editor}</EditorContainer>
<CommentsContainer>
- <CommentsArea area="main" />
+ <RightArea area="main" />
</CommentsContainer>
</WaxSurfaceScroll>
<RightSideBar />
diff --git a/wax-prosemirror-schema/src/marks/trackChangesMarks/deletionMark.js b/wax-prosemirror-schema/src/marks/trackChangesMarks/deletionMark.js
index af5aa3c859c5c86e94d752e953c19d80544fd5b6..d276d0d00811adfd3ca1804cdf04822d4cc69861 100644
--- a/wax-prosemirror-schema/src/marks/trackChangesMarks/deletionMark.js
+++ b/wax-prosemirror-schema/src/marks/trackChangesMarks/deletionMark.js
@@ -24,8 +24,8 @@ const deletion = {
return [
"span",
{
- "data-id": node.attrs.id,
class: `deletion user-${node.attrs.user}`,
+ "data-id": node.attrs.id,
"data-user": node.attrs.user,
"data-username": node.attrs.username,
"data-date": node.attrs.date
diff --git a/wax-prosemirror-schema/src/marks/trackChangesMarks/formatChangeMark.js b/wax-prosemirror-schema/src/marks/trackChangesMarks/formatChangeMark.js
index 0ac326672504efa77d084bcda4d0bd77cf3f8733..0746be431f358fe145754f01af8fca074dd69bb3 100644
--- a/wax-prosemirror-schema/src/marks/trackChangesMarks/formatChangeMark.js
+++ b/wax-prosemirror-schema/src/marks/trackChangesMarks/formatChangeMark.js
@@ -28,8 +28,8 @@ const format_change = {
return [
"span",
{
- "data-id": node.attrs.id,
class: `format-change user-${node.attrs.user}`,
+ "data-id": node.attrs.id,
"data-user": node.attrs.user,
"data-username": node.attrs.username,
"data-date": node.attrs.date,
diff --git a/wax-prosemirror-schema/src/marks/trackChangesMarks/insertionMark.js b/wax-prosemirror-schema/src/marks/trackChangesMarks/insertionMark.js
index 04f202eae6b6bff73e231b963086de9439bdd172..356b1016ef31db54aa9c7aed882517191fa723c6 100644
--- a/wax-prosemirror-schema/src/marks/trackChangesMarks/insertionMark.js
+++ b/wax-prosemirror-schema/src/marks/trackChangesMarks/insertionMark.js
@@ -43,6 +43,7 @@ const insertion = {
class: node.attrs.approved
? "approved-insertion"
: `insertion user-${node.attrs.user}`,
+ "data-id": node.attrs.id,
"data-user": node.attrs.user,
"data-username": node.attrs.username,
"data-date": node.attrs.date
diff --git a/wax-prosemirror-services/src/CommentsService/CommentsService.js b/wax-prosemirror-services/src/CommentsService/CommentsService.js
index ad91909f20c428a62370ecc444d045ab91065b03..96d9ef630a477dbbfcfa9fae7f352f6327a16ccb 100644
--- a/wax-prosemirror-services/src/CommentsService/CommentsService.js
+++ b/wax-prosemirror-services/src/CommentsService/CommentsService.js
@@ -1,9 +1,6 @@
import Service from "../Service";
import { commentMark } from "wax-prosemirror-schema";
-import {
- CommentComponent,
- CommentBubbleComponent
-} from "wax-prosemirror-components";
+import { RightArea, CommentBubbleComponent } from "wax-prosemirror-components";
import { ActiveComment } from "wax-prosemirror-plugins";
const PLUGIN_KEY = "activeComment";
@@ -27,7 +24,7 @@ export default class CommentsService extends Service {
selection: true
}
);
- layout.addComponent("commentsArea", CommentComponent);
+ layout.addComponent("rightArea", RightArea);
}
register() {