active comment for notes

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

@@ -30,9 +30,9 @@ const CommentBoxStyled = styled.div`
 
 export default ({ mark, view, top, dataComment }) => {
   const [animate, setAnimate] = useState(false);
-  const { view: { main }, app } = useContext(WaxContext);
+  const { view: { main }, app, activeView } = useContext(WaxContext);
   const activeCommentPlugin = app.PmPlugins.get("activeComment");
-  const activeComment = activeCommentPlugin.getState(main.state).comment;
+  const activeComment = activeCommentPlugin.getState(activeView.state).comment;
   let active = false;
   if (activeComment && mark.attrs.id === activeComment.attrs.id) active = true;
   useEffect(() => {

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

@@ -13,7 +13,7 @@ import CommentsBoxList from "./CommentsBoxList";
 import { each } from "lodash";
 
 export default ({ area }) => {
-  const { view: { main }, app } = useContext(WaxContext);
+  const { view: { main }, app, activeView } = useContext(WaxContext);
   const activeCommentPlugin = app.PmPlugins.get("activeComment");
   const [comments, setComments] = useState([]);
   const [position, setPosition] = useState();
@@ -30,7 +30,9 @@ export default ({ area }) => {
     each(comments[area], (comment, pos) => {
       const WaxSurface = main.dom.getBoundingClientRect();
       const { attrs: { id } } = comment;
-      const activeComment = activeCommentPlugin.getState(main.state).comment;
+      const activeComment = activeCommentPlugin.getState(activeView.state)
+        .comment;
+
       let isActive = false;
       if (activeComment && comment.attrs.id === activeComment.attrs.id)
         isActive = true;

wax-prosemirror-components/src/components/notes/NoteEditorContainer.js

@@ -26,6 +26,10 @@ const NoteStyled = styled.div`
   span.comment {
     border-bottom: 2px solid #ffab20;
     border-radius: 3px 3px 0 0;
+
+    .active-comment {
+      background-color: #ffab20;
+    }
   }
 `;
 

wax-prosemirror-services/src/NoteService/Editor.js

@@ -15,14 +15,13 @@ export default ({ node, view }) => {
   const editorRef = useRef();
   const context = useContext(WaxContext);
   const noteId = node.attrs.id;
-
   useEffect(() => {
     const noteView = new EditorView(
       { mount: editorRef.current },
       {
         state: EditorState.create({
           doc: node,
-          plugins: [keymap(createKeyBindings())]
+          plugins: [keymap(createKeyBindings()), ...context.app.getPlugins()]
         }),
         // This is the magic part
         dispatchTransaction: tr => {