show floating comments instantly for tracked changes

Author: artem-harbour

packages/super-editor/src/extensions/comment/comments-plugin.js

@@ -170,7 +170,7 @@ export const CommentsPlugin = Extension.create({
 
           // Check for changes in the actively selected comment
           const trChangedActiveComment = meta?.type === 'setActiveComment';
-        if ((!tr.docChanged && tr.selectionSet) || trChangedActiveComment) {
+          if ((!tr.docChanged && tr.selectionSet) || trChangedActiveComment) {
             const { selection } = tr;
             let currentActiveThread = getActiveCommentId(newEditorState.doc, selection);
             if (trChangedActiveComment) currentActiveThread = meta.activeThreadId;
@@ -212,7 +212,7 @@ export const CommentsPlugin = Extension.create({
             const { state } = view
             const { doc, tr } = state
 
-            if (prevDoc && prevDoc.eq(doc)) shouldUpdate = true;
+            if (prevDoc && !prevDoc.eq(doc)) shouldUpdate = true;
             if (!shouldUpdate) return;
             prevDoc = doc;
             shouldUpdate = false;
@@ -254,10 +254,15 @@ export const CommentsPlugin = Extension.create({
                 decorations.push(deco)
               });
 
-              const trackedChangeNode = getTrackedChangeNode(node);
-              if (trackedChangeNode) {
+              const trackedChangeMark = findTrackedMark({ 
+                doc,
+                from: pos,
+                to: pos + node.nodeSize,
+              });
+
+              if (trackedChangeMark) {
                 const currentBounds = view.coordsAtPos(pos);
-                const { id } = trackedChangeNode.attrs;
+                const { id } = trackedChangeMark.mark.attrs;
                 updatePosition({
                   allCommentPositions,
                   threadId: id,
@@ -355,9 +360,14 @@ const getActiveCommentId = (doc, selection) => {
   if (!nodeAtPos) return;
 
   // If we have a tracked change, we can return it right away
-  const trackedChangeNode = getTrackedChangeNode(nodeAtPos);
-  if (trackedChangeNode) {
-    return trackedChangeNode.attrs.id;
+  const trackedChangeMark = findTrackedMark({
+    doc,
+    from: $from.pos,
+    to: $to.pos,
+  });
+
+  if (trackedChangeMark) {
+    return trackedChangeMark.mark.attrs.id;
   }
 
   // Otherwise, we need to check for comment nodes
@@ -412,19 +422,34 @@ const getActiveCommentId = (doc, selection) => {
   return closestCommentMark?.attrs?.commentId || closestCommentMark?.attrs?.importedId;
 };
 
+const findTrackedMark = ({ 
+  doc,
+  from, 
+  to,
+  offset = 1, // To get non-inclusive marks. 
+}) => {
+  const startPos = Math.max(from - offset, 0);
+  const endPos = Math.min(to + offset, doc.content.size);
 
-/**
- * Check if this node is a tracked changes node
- * @param {Node} node The node to check
- * @returns {Node | null} Either a tracked change node (insert, delete) or null
- */
-const getTrackedChangeNode = (node) => {
-  if (!node) return;
-  const nodeMarks = node.marks;
-  const trackedInsertMark = nodeMarks?.find((mark) => mark.type.name === TrackInsertMarkName);
-  const trackedDeleteMark = nodeMarks?.find((mark) => mark.type.name === TrackDeleteMarkName);
-  const trackedFormatMark = nodeMarks?.find((mark) => mark.type.name === TrackFormatMarkName);
-  return trackedInsertMark || trackedDeleteMark || trackedFormatMark;
+  let markFound;
+
+  doc.nodesBetween(startPos, endPos, (node, pos) => {
+    if (!node || node?.nodeSize === undefined) {
+      return;
+    }
+
+    const mark = node.marks.find((mark) => TRACK_CHANGE_MARKS.includes(mark.type.name));
+
+    if (mark && !markFound) {
+      markFound = {
+        from: pos,
+        to: pos + node.nodeSize,
+        mark,
+      };
+    }
+  });
+
+  return markFound;
 };
 
 const handleTrackedChangeTransaction = (trackedChangeMeta, trackedChanges, newEditorState, editor) => {

packages/super-editor/src/extensions/track-changes/trackChangesHelpers/addMarkStep.js

@@ -5,6 +5,7 @@ import { TrackDeleteMarkName, TrackFormatMarkName } from '../constants.js';
 import { v4 as uuidv4 } from 'uuid';
 import { objectIncludes } from '@core/utilities/objectIncludes.js';
 import { TrackChangesBasePluginKey } from '../plugins/trackChangesBasePlugin.js';
+import { CommentsPluginKey } from '../../comment/comments-plugin.js';
 
 /**
  * Add mark step.
@@ -97,6 +98,7 @@ export const addMarkStep = ({ state, tr, step, newTr, map, doc, user, date }) =>
         meta.step = step;
 
         newTr.setMeta(TrackChangesBasePluginKey, meta);
+        newTr.setMeta(CommentsPluginKey, { type: 'force' });
       } else if (formatChangeMark) {
         newTr.removeMark(Math.max(step.from, pos), Math.min(step.to, pos + node.nodeSize), formatChangeMark);
       }

packages/super-editor/src/extensions/track-changes/trackChangesHelpers/removeMarkStep.js

@@ -4,6 +4,7 @@ import { Node } from 'prosemirror-model';
 import { v4 as uuidv4 } from 'uuid';
 import { TrackDeleteMarkName, TrackFormatMarkName } from '../constants.js';
 import { TrackChangesBasePluginKey } from '../plugins/trackChangesBasePlugin.js';
+import { CommentsPluginKey } from '../../comment/comments-plugin.js';
 
 /**
  * Remove mark step.
@@ -84,6 +85,7 @@ export const removeMarkStep = ({ state, tr, step, newTr, map, doc, user, date })
         meta.step = step;
 
         newTr.setMeta(TrackChangesBasePluginKey, meta);
+        newTr.setMeta(CommentsPluginKey, { type: 'force' });
       } else if (formatChangeMark) {
         newTr.removeMark(Math.max(step.from, pos), Math.min(step.to, pos + node.nodeSize), formatChangeMark);
       }

packages/super-editor/src/extensions/track-changes/trackChangesHelpers/replaceStep.js

@@ -6,6 +6,7 @@ import { markDeletion } from './markDeletion.js';
 import { findMark } from '@core/helpers/index.js';
 import { TrackDeleteMarkName } from '../constants.js';
 import { TrackChangesBasePluginKey } from '../plugins/index.js';
+import { CommentsPluginKey } from '../../comment/comments-plugin.js';
 
 /**
  * Replace step.
@@ -88,4 +89,5 @@ export const replaceStep = ({ state, tr, step, newTr, map, doc, user, date, orig
 
   // Add meta to the new transaction.
   newTr.setMeta(TrackChangesBasePluginKey, meta);
+  newTr.setMeta(CommentsPluginKey, { type: 'force' });
 };