fix dependencies

wax-prosemirror-components/package.json

@@ -20,6 +20,9 @@
     "react-dropdown": "^1.6.2",
     "react-transition-group": "^4.3.0",
     "styled-components": "^4.2.0",
-    "uuid": "^7.0.3"
+    "uuid": "^7.0.3",
+    "prosemirror-model": "^1.9.1",
+    "wax-prosemirror-core": "^0.0.10",
+    "wax-prosemirror-utilities": "^0.0.10"
   }
 }

wax-prosemirror-components/src/components/rightArea/BoxList.js

-import { Mark } from "prosemirror-model";
-import React, { Fragment } from "react";
-import CommentBox from "../comments/CommentBox";
-import TrackChangeBox from "../trackChanges/TrackChangeBox";
+import { Mark } from 'prosemirror-model';
+import React from 'react';
+import CommentBox from '../comments/CommentBox';
+import TrackChangeBox from '../trackChanges/TrackChangeBox';
 
 export default ({ commentsTracks, view, position }) => {
   return (
-    <Fragment>
+    <>
       {commentsTracks.map((commentTrack, index) => {
         const id =
           commentTrack instanceof Mark
@@ -14,7 +14,7 @@ export default ({ commentsTracks, view, position }) => {
 
         const top = position[index] ? position[index][id] : 0;
 
-        if (commentTrack.type && commentTrack.type.name === "comment") {
+        if (commentTrack.type && commentTrack.type.name === 'comment') {
           return (
             <CommentBox
               key={id}
@@ -24,18 +24,17 @@ export default ({ commentsTracks, view, position }) => {
               dataBox={id}
             />
           );
-        } else {
-          return (
-            <TrackChangeBox
-              key={id}
-              trackChange={commentTrack}
-              view={view}
-              top={top}
-              dataBox={id}
-            />
-          );
         }
+        return (
+          <TrackChangeBox
+            key={id}
+            trackChange={commentTrack}
+            view={view}
+            top={top}
+            dataBox={id}
+          />
+        );
       })}
-    </Fragment>
+    </>
   );
 };

wax-prosemirror-components/src/components/rightArea/RightArea.js

-import { Mark } from "prosemirror-model";
+import { Mark } from 'prosemirror-model';
 import React, {
   useContext,
   useState,
   useEffect,
   useMemo,
-  Fragment,
-  useCallback
-} from "react";
-import styled from "styled-components";
-import { WaxContext } from "wax-prosemirror-core";
-import { DocumentHelpers } from "wax-prosemirror-utilities";
-import BoxList from "./BoxList";
-import { each, uniqBy, sortBy } from "lodash";
+  useCallback,
+} from 'react';
+import { each, uniqBy, sortBy } from 'lodash';
+import { WaxContext } from 'wax-prosemirror-core';
+import { DocumentHelpers } from 'wax-prosemirror-utilities';
+import BoxList from './BoxList';
 
 export default ({ area }) => {
-  const { view: { main }, app, activeView } = useContext(WaxContext);
-  const commentPlugin = app.PmPlugins.get("commentPlugin");
+  const {
+    view: { main },
+    app,
+    activeView,
+  } = useContext(WaxContext);
+  const commentPlugin = app.PmPlugins.get('commentPlugin');
   const [marksNodes, setMarksNodes] = useState([]);
   const [position, setPosition] = useState();
 
@@ -37,18 +39,18 @@ export default ({ area }) => {
       let isActive = false;
       if (activeComment && id === activeComment.attrs.id) isActive = true;
 
-      //annotation top
-      if (area === "main") {
+      // annotation top
+      if (area === 'main') {
         markNodeEl = document.querySelector(`[data-id="${id}"]`);
         if (markNodeEl)
           annotationTop =
             markNodeEl.getBoundingClientRect().top - WaxSurface.top;
       } else {
-        const panelWrapper = document.getElementsByClassName("panelWrapper");
+        const panelWrapper = document.getElementsByClassName('panelWrapper');
         const panelWrapperHeight = panelWrapper[0].getBoundingClientRect()
           .height;
         markNodeEl = document
-          .querySelector("#notes-container")
+          .querySelector('#notes-container')
           .querySelector(`[data-id="${id}"]`);
         if (markNodeEl)
           annotationTop =
@@ -57,7 +59,7 @@ export default ({ area }) => {
 
       // get height of this markNode box
       const boxEl = document.querySelector(`div[data-box="${id}"]`);
-      if (boxEl) boxHeight = parseInt(boxEl.offsetHeight);
+      if (boxEl) boxHeight = parseInt(boxEl.offsetHeight, 10);
 
       // where the box should move to
       top = annotationTop;
@@ -115,14 +117,10 @@ export default ({ area }) => {
     return allCommentsTop;
   });
 
-  useEffect(
-    () => {
-      setMarksNodes(updateMarks(main));
-      setPosition(setTops());
-    },
-
-    [JSON.stringify(updateMarks(main)), JSON.stringify(setTops())]
-  );
+  useEffect(() => {
+    setMarksNodes(updateMarks(main));
+    setPosition(setTops());
+  }, [JSON.stringify(updateMarks(main)), JSON.stringify(setTops())]);
 
   const CommentTrackComponent = useMemo(
     () => (
@@ -133,9 +131,9 @@ export default ({ area }) => {
         position={position}
       />
     ),
-    [marksNodes[area] || [], position]
+    [marksNodes[area] || [], position],
   );
-  return <Fragment>{CommentTrackComponent}</Fragment>;
+  return <>{CommentTrackComponent}</>;
 };
 
 const updateMarks = view => {
@@ -149,10 +147,10 @@ const updateMarks = view => {
       if (node.node.marks.length > 0) {
         node.node.marks.filter(mark => {
           if (
-            mark.type.name === "comment" ||
-            mark.type.name === "insertion" ||
-            mark.type.name === "deletion" ||
-            mark.type.name === "format_change"
+            mark.type.name === 'comment' ||
+            mark.type.name === 'insertion' ||
+            mark.type.name === 'deletion' ||
+            mark.type.name === 'format_change'
           ) {
             mark.pos = node.pos;
             finalMarks.push(mark);
@@ -167,11 +165,11 @@ const updateMarks = view => {
       }
     });
 
-    const nodesAndMarks = [...uniqBy(finalMarks, "attrs.id"), ...finalNodes];
+    const nodesAndMarks = [...uniqBy(finalMarks, 'attrs.id'), ...finalNodes];
 
     const groupedMarkNodes = {};
 
-    sortBy(nodesAndMarks, ["pos"]).forEach(markNode => {
+    sortBy(nodesAndMarks, ['pos']).forEach(markNode => {
       const markNodeAttrs = markNode.attrs
         ? markNode.attrs
         : markNode.node.attrs;