Floating comments updates and fixes

packages/super-editor/src/core/Editor.js

@@ -363,7 +363,11 @@ export class Editor extends EventEmitter {
       ...options,
     };
 
-    if (!this.view || !this.state || this.isDestroyed) {
+    if (this.options.isNewFile && this.options.isCommentsEnabled) {
+      this.options.shouldLoadComments = true;
+    }
+
+    if (!this.view || !this.state || this.ifsDestroyed) {
       return;
     }
 
@@ -727,6 +731,7 @@ export class Editor extends EventEmitter {
   #initComments(replacedFile = false) {
     if (!this.options.isCommentsEnabled) return;
     if (this.options.isHeadless) return;
+    if (!this.options.shouldLoadComments) return;
     this.emit('commentsLoaded', { editor: this, replacedFile, comments: this.converter.comments || [] });
 
     setTimeout(() => {
@@ -1077,7 +1082,8 @@ export class Editor extends EventEmitter {
       media,
       mediaFiles,
       fonts,
-      isNewFile: true
+      isNewFile: true,
+      shouldLoadComments: true,
     });
 
     this.#createConverter();

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

@@ -1,6 +1,6 @@
 import { CommentMarkName } from './comments-constants.js';
 import { COMMENTS_XML_DEFINITIONS } from '@converter/exporter-docx-defs.js';
-
+import { CommentsPluginKey } from './comments-plugin.js';
 
 /**
  * Remove comment by id
@@ -274,3 +274,21 @@ export const translateFormatChangesToEnglish = (attrs = {}) => {
 
   return messages.length ? messages.join('. ') : 'No formatting changes.';
 };
+
+/**
+ * Get the highlight color for a comment or tracked changes node
+ * 
+ * @param {Object} param0 
+ * @param {String} param0.activeThreadId The active comment ID
+ * @param {String} param0.threadId The current thread ID
+ * @param {Boolean} param0.isInternal Whether the comment is internal or external
+ * @param {EditorView} param0.editor The current editor view
+ * @returns {String} The color to use for the highlight
+ */
+export const getHighlightColor = ({ activeThreadId, threadId, isInternal, editor }) => {
+  if (!editor.options.isInternal && isInternal) return 'transparent';
+  const pluginState = CommentsPluginKey.getState(editor.state);
+  const color = isInternal ? pluginState.internalColor : pluginState.externalColor;
+  const alpha = activeThreadId == threadId ? '44' : '22';
+  return `${color}${alpha}`;
+}