fix: har-10158 - fix comments highlighting and identify

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

@@ -1,4 +1,4 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { Plugin, PluginKey, TextSelection } from 'prosemirror-state';
 import { Extension } from '@core/Extension.js';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import { removeCommentsById, getHighlightColor } from './comments-helpers.js';
@@ -50,9 +50,8 @@ export const CommentsPlugin = Extension.create({
 
       setActiveComment:
         ({ commentId }) =>
-        ({ tr, dispatch }) => {
-          let activeThreadId = commentId;
-          tr.setMeta(CommentsPluginKey, { type: 'setActiveComment', activeThreadId });
+        ({ tr }) => {
+          tr.setMeta(CommentsPluginKey, { type: 'setActiveComment', activeThreadId: commentId, forceUpdate: true });
           return true;
         },
 
@@ -105,13 +104,23 @@ export const CommentsPlugin = Extension.create({
           tr.setMeta(CommentsPluginKey, { event: 'update' });
           removeCommentsById({ commentId, state, tr, dispatch });
         },
+      setCursorById:
+        (id) =>
+        ({ state, editor }) => {
+          const { from } = findRangeById(state.doc, id) || {};
+          if (from != null) {
+            state.tr.setSelection(TextSelection.create(state.doc, from));
+            editor.view.focus();
+            return true;
+          }
+          return false;
+        },
     };
   },
 
   addPmPlugins() {
     const editor = this.editor;
     let shouldUpdate;
-    let activeThreadId;
 
     if (editor.options.isHeadless) return [];
 
@@ -142,6 +151,16 @@ export const CommentsPlugin = Extension.create({
 
           if (type === 'force' || type === 'forceTrackChanges') shouldUpdate = true;
 
+          if (type === 'setActiveComment') {
+            shouldUpdate = true;
+            pluginState.activeThreadId = meta.activeThreadId; // Update the outer scope variable
+            return {
+              ...pluginState,
+              activeThreadId: meta.activeThreadId,
+              changedActiveThread: true,
+            };
+          }
+
           if (!isPaginationInit && !shouldUpdate && meta && meta.decorations) {
             return {
               ...pluginState,
@@ -169,12 +188,13 @@ export const CommentsPlugin = Extension.create({
             let currentActiveThread = getActiveCommentId(newEditorState.doc, selection);
             if (trChangedActiveComment) currentActiveThread = meta.activeThreadId;
 
-            const previousSelectionId = activeThreadId;
+            const previousSelectionId = pluginState.activeThreadId;
             if (previousSelectionId !== currentActiveThread) {
-              activeThreadId = currentActiveThread;
+              // Update both the plugin state and the local variable
+              pluginState.activeThreadId = currentActiveThread;
               const update = {
                 type: comments_module_events.SELECTED,
-                activeCommentId: activeThreadId ? activeThreadId : null,
+                activeCommentId: currentActiveThread ? currentActiveThread : null,
               };
 
               shouldUpdate = true;
@@ -200,13 +220,29 @@ export const CommentsPlugin = Extension.create({
       view(editorView) {
         let prevDoc;
         let prevDecorations;
+        let prevActiveThreadId; // Add this to track active thread changes
 
         return {
           update(view, prevState) {
             const { state } = view;
             const { doc, tr } = state;
+            const pluginState = CommentsPluginKey.getState(state);
+            const currentActiveThreadId = pluginState.activeThreadId;
+
+            const meta = tr.getMeta(CommentsPluginKey);
+            if (meta?.type === 'setActiveComment' || meta?.forceUpdate) {
+              shouldUpdate = true;
+            }
 
+            // Check if document changed
             if (prevDoc && !prevDoc.eq(doc)) shouldUpdate = true;
+
+            // Check if active thread changed
+            if (prevActiveThreadId !== currentActiveThreadId) {
+              shouldUpdate = true;
+              prevActiveThreadId = currentActiveThreadId;
+            }
+
             if (!shouldUpdate) return;
             prevDoc = doc;
             shouldUpdate = false;
@@ -233,16 +269,24 @@ export const CommentsPlugin = Extension.create({
                 });
 
                 const isInternal = attrs.internal;
-                if (!hasActive) hasActive = activeThreadId === threadId;
-                let color = getHighlightColor({ activeThreadId, threadId, isInternal, editor });
+                if (!hasActive) hasActive = currentActiveThreadId === threadId;
+
+                // Get the color based on current activeThreadId
+                let color = getHighlightColor({
+                  activeThreadId: currentActiveThreadId,
+                  threadId,
+                  isInternal,
+                  editor,
+                });
+
                 const deco = Decoration.inline(pos, pos + node.nodeSize, {
                   style: `background-color: ${color};`,
                   'data-thread-id': threadId,
                   class: 'sd-editor-comment-highlight',
                 });
 
                 // Ignore inner marks if we need to show an outer active one
-                if (hasActive && activeThreadId !== threadId) return;
+                if (hasActive && currentActiveThreadId !== threadId) return;
                 decorations.push(deco);
               });
 
@@ -262,13 +306,23 @@ export const CommentsPlugin = Extension.create({
                   currentBounds,
                   node,
                 });
+                // Add decoration for tracked changes when activated
+                const isActiveTrackedChange = currentActiveThreadId === id;
+                if (isActiveTrackedChange) {
+                  const trackedChangeDeco = Decoration.inline(pos, pos + node.nodeSize, {
+                    style: `border-width: 2px;`,
+                    'data-thread-id': id,
+                    class: 'sd-editor-tracked-change-highlight',
+                  });
+
+                  decorations.push(trackedChangeDeco);
+                }
               }
             });
 
             const decorationSet = DecorationSet.create(doc, decorations);
 
             // Compare new decorations with the old state to avoid infinite loop
-            const pluginState = CommentsPluginKey.getState(state);
             const oldDecorations = pluginState.decorations;
 
             // We only dispatch if something actually changed
@@ -277,6 +331,7 @@ export const CommentsPlugin = Extension.create({
               const tr = state.tr.setMeta(CommentsPluginKey, {
                 decorations: decorationSet,
                 allCommentPositions,
+                forceUpdate: true,
               });
               // Dispatch the transaction to update pluginState
               view.dispatch(tr);
@@ -599,3 +654,23 @@ function findNode(node, predicate) {
   });
   return found;
 }
+
+function findRangeById(doc, id) {
+  let from = null,
+    to = null;
+  doc.descendants((node, pos) => {
+    const trackedMark = node.marks.find((m) => TRACK_CHANGE_MARKS.includes(m.type.name) && m.attrs.id === id);
+    if (trackedMark) {
+      if (from === null || pos < from) from = pos;
+      if (to === null || pos + node.nodeSize > to) to = pos + node.nodeSize;
+    }
+    const commentMark = node.marks.find(
+      (m) => m.type.name === CommentMarkName && (m.attrs.commentId === id || m.attrs.importedId === id),
+    );
+    if (commentMark) {
+      if (from === null || pos < from) from = pos;
+      if (to === null || pos + node.nodeSize > to) to = pos + node.nodeSize;
+    }
+  });
+  return from !== null && to !== null ? { from, to } : null;
+}

packages/superdoc/src/SuperDoc.vue

@@ -322,7 +322,7 @@ const onEditorCommentsUpdate = (params = {}) => {
 
   nextTick(() => {
     if (pendingComment.value) return;
-    commentsStore.setActiveComment(activeCommentId);
+    commentsStore.setActiveComment(proxy.$superdoc, activeCommentId);
   });
 
   // Bubble up the event to the user, if handled
@@ -367,7 +367,7 @@ const scrollToComment = (commentId) => {
   const element = document.querySelector(`[data-thread-id=${commentId}]`);
   if (element) {
     element.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    commentsStore.setActiveComment(commentId);
+    commentsStore.setActiveComment(proxy.$superdoc, commentId);
   }
 };
 

packages/superdoc/src/components/CommentsLayer/CommentDialog.vue

@@ -113,8 +113,13 @@ const hasTextContent = computed(() => {
 
 const setFocus = () => {
   if (props.comment.resolvedTime) return;
+  const editor = proxy.$superdoc.activeEditor;
   activeComment.value = props.comment.commentId;
   props.comment.setActive(proxy.$superdoc);
+  if (editor) {
+    const cursorId = props.comment.importedId || props.comment.commentId;
+    editor.commands?.setCursorById(cursorId);
+  }
 };
 
 const handleClickOutside = (e) => {
@@ -124,8 +129,8 @@ const handleClickOutside = (e) => {
     floatingCommentsOffset.value = 0;
     emit('dialog-exit');
   }
-
   activeComment.value = null;
+  commentsStore.setActiveComment(proxy.$superdoc, activeComment.value);
 };
 
 const handleAddComment = () => {
@@ -159,6 +164,7 @@ const handleReject = () => {
   nextTick(() => {
     commentsStore.lastUpdate = new Date();
     activeComment.value = null;
+    commentsStore.setActiveComment(proxy.$superdoc, activeComment.value);
   });
 };
 
@@ -176,6 +182,7 @@ const handleResolve = () => {
   nextTick(() => {
     commentsStore.lastUpdate = new Date();
     activeComment.value = null;
+    commentsStore.setActiveComment(proxy.$superdoc, activeComment.value);
   });
 };
 
@@ -185,6 +192,7 @@ const handleOverflowSelect = (value, comment) => {
       currentCommentText.value = comment.commentText;
       activeComment.value = comment.commentId;
       editingCommentId.value = comment.commentId;
+      commentsStore.setActiveComment(proxy.$superdoc, activeComment.value);
       break;
     case 'delete':
       deleteComment({ superdoc: proxy.$superdoc, commentId: comment.commentId });

packages/superdoc/src/components/CommentsLayer/CommentsLayer.vue

@@ -101,7 +101,7 @@ const getCurrentComments = computed(() => {
 
 watch(activeComment, (newVal) => {
   if (!newVal) return;
-  const element = document.getElementById(newVal);
+  const element = document.querySelector(`[data-id="${newVal}"]`);
   element?.scrollIntoView({ behavior: 'smooth', block: 'center' });
 });
 

packages/superdoc/src/components/CommentsLayer/FloatingComments.vue

@@ -65,7 +65,8 @@ const handleDialog = (dialog) => {
     const editorBounds = props.parent.getBoundingClientRect();
 
     const comment = getFloatingComments.value.find((c) => c.commentId === id || c.importedId == id);
-    let position = editorCommentPositions.value[id]?.bounds || {};
+    const positionKey = id || comment?.importedId;
+    let position = editorCommentPositions.value[positionKey]?.bounds || {};
 
     // If this is a PDF, set the position based on selection bounds
     if (props.currentDocument.type === 'application/pdf') {
@@ -127,8 +128,8 @@ watch(activeComment, (newVal, oldVal) => {
 
     const comment = commentsStore.getComment(activeComment.value);
     if (!comment) return (verticalOffset.value = 0);
-
-    const renderedItem = renderedSizes.value.find((item) => item.id === comment.commentId);
+    const commentKey = comment.commentId || comment.importedId;
+    const renderedItem = renderedSizes.value.find((item) => item.id === commentKey);
     if (!renderedItem) return (verticalOffset.value = 0);
 
     const selectionTop = comment.selection.selectionBounds.top;

packages/superdoc/src/stores/comments-store.js

@@ -86,14 +86,17 @@ export const useCommentsStore = defineStore('comments', () => {
    * @param {string | undefined | null} id The comment ID
    * @returns {void}
    */
-  const setActiveComment = (id) => {
+  const setActiveComment = (superdoc, id) => {
     // If no ID, we clear any focused comments
     if (id === undefined || id === null) {
-      return (activeComment.value = null);
+      activeComment.value = null;
     }
 
     const comment = getComment(id);
     if (comment) activeComment.value = comment.commentId;
+    if (superdoc.activeEditor) {
+      superdoc.activeEditor.commands?.setActiveComment({ commentId: activeComment.value });
+    }
   };
 
   /**
@@ -581,7 +584,8 @@ export const useCommentsStore = defineStore('comments', () => {
         const keys = Object.keys(editorCommentPositions.value);
         const isPdfComment = c.selection?.source !== 'super-editor';
         if (isPdfComment) return true;
-        return keys.includes(c.commentId);
+        const commentKey = c.commentId || c.importedId;
+        return keys.includes(commentKey);
       });
     return comments;
   });