delete comment from surface

wax-prosemirror-services/src/CommentsService/components/RightArea.js

@@ -80,33 +80,6 @@ export default ({ area, users }) => {
             markNodeEl.getBoundingClientRect().top -
             WaxSurface.top +
             parseInt(WaxSurfaceMarginTop.slice(0, -2), 10);
-        } else if (!isFirstRun) {
-          // comment is deleted from editing surface
-          context.setOption({ resolvedComment: id });
-          context.setOption({
-            comments: comments.filter(comment => {
-              return comment.id !== id;
-            }),
-          });
-          setTimeout(() => {
-            activeView.dispatch(
-              activeView.state.tr.setMeta(CommentDecorationPluginKey, {
-                type: 'deleteComment',
-                id,
-              }),
-            );
-            if (context.app.config.get('config.YjsService')) {
-              commentsMap.observe(() => {
-                const transaction = context.pmViews.main.state.tr.setMeta(
-                  CommentDecorationPluginKey,
-                  {
-                    type: 'createDecorations',
-                  },
-                );
-                context.pmViews.main.dispatch(transaction);
-              });
-            }
-          });
         }
       } else {
         // Notes

wax-prosemirror-services/src/CommentsService/plugins/CommentDecorationPlugin.js

 import { Plugin, PluginKey } from 'prosemirror-state';
+import { flatten } from 'lodash';
 import CommentState from './CommentState';
 
 let contentSize = 0;
@@ -25,6 +26,29 @@ export const CommentDecorationPlugin = (name, options) => {
     props: {
       decorations(state) {
         const { decorations } = this.getState(state);
+
+        const ids = this.getState(state).decorations.children.map(child => {
+          if (child.constructor.name === 'DecorationSet') {
+            return child.local.map(l => l.type.attrs['data-id']);
+          }
+        });
+        const finalIds = flatten(ids.filter(id => id));
+        const deletedComments = options.context.options.comments?.filter(
+          comment => !finalIds.includes(comment.id),
+        );
+
+        if (deletedComments?.length > 0) {
+          deletedComments.forEach(deletedComment => {
+            options.context.setOption({ resolvedComment: deletedComment.id });
+            options.context.setOption({
+              comments: options.context.options.comments.filter(comment => {
+                return comment.id !== deletedComment.id;
+              }),
+            });
+            this.getState(state).getMap().delete(deletedComment.id);
+          });
+        }
+
         if (
           contentSize !== state.doc.content.size ||
           this.getState(state).allCommentsList().length !== allCommentsCount
@@ -38,8 +62,8 @@ export const CommentDecorationPlugin = (name, options) => {
           options.onSelectionChange(this.getState(state).allCommentsList());
           this.getState(state).createDecorations(state);
         }
-        // contentSize = state.doc.content.size;
-        // allCommentsCount = this.getState(state).allCommentsList().length;
+        contentSize = state.doc.content.size;
+        allCommentsCount = this.getState(state).allCommentsList().length;
         return decorations;
       },
     },

wax-prosemirror-services/src/CommentsService/plugins/CommentState.js

@@ -20,12 +20,10 @@ export default class CommentState {
   }
 
   addComment(action) {
-    console.log('here?');
     const { map } = this.options;
     const { from, to, data } = action;
     const id = randomId();
     map.set(id, { id, from, to, data });
-    console.log(map);
   }
 
   updateComment(action) {
@@ -56,6 +54,10 @@ export default class CommentState {
     });
   }
 
+  getMap() {
+    return this.options.map;
+  }
+
   createDecorations(state) {
     const decorations = [];
 
@@ -63,7 +65,6 @@ export default class CommentState {
 
     if (ystate?.binding) {
       const { doc, type, binding } = ystate;
-      console.log(this.allCommentsList());
       this.allCommentsList().forEach((annotation, id) => {
         annotation.data.yjsFrom = absolutePositionToRelativePosition(
           annotation.data.pmFrom,