From 2ab84ecc344724b98eb5b8c2475dac634beb1dd9 Mon Sep 17 00:00:00 2001
From: Matthew Connelly <matthew@harbourshare.com>
Date: Fri, 16 Jan 2026 13:28:26 -0500
Subject: [PATCH] feat: add comment options for custom coloring for
 internal,external,resolved

---
 .../src/extensions/comment/comments-helpers.js        | 10 ++++++++--
 .../src/extensions/comment/comments-plugin.js         | 11 +++++++++--
 packages/superdoc/src/SuperDoc.vue                    |  1 +
 packages/superdoc/src/core/types/index.js             |  8 ++++++++
 4 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/packages/super-editor/src/extensions/comment/comments-helpers.js b/packages/super-editor/src/extensions/comment/comments-helpers.js
index eedeb35c3..ff5f67cef 100644
--- a/packages/super-editor/src/extensions/comment/comments-helpers.js
+++ b/packages/super-editor/src/extensions/comment/comments-helpers.js
@@ -644,13 +644,19 @@ export const translateFormatChangesToEnglish = (attrs = {}) => {
  * @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 {Boolean} [param0.isResolved] Whether the comment is resolved
  * @param {EditorView} param0.editor The current editor view
  * @returns {String} The color to use for the highlight
  */
-export const getHighlightColor = ({ activeThreadId, threadId, isInternal, editor }) => {
+export const getHighlightColor = ({ activeThreadId, threadId, isInternal, isResolved, editor }) => {
   if (!editor.options.isInternal && isInternal) return 'transparent';
   const pluginState = CommentsPluginKey.getState(editor.state);
-  const color = isInternal ? pluginState.internalColor : pluginState.externalColor;
+  let color;
+  if (isResolved) {
+    color = pluginState.resolvedColor;
+  } else {
+    color = isInternal ? pluginState.internalColor : pluginState.externalColor;
+  }
   const alpha = activeThreadId == threadId ? '44' : '22';
   return `${color}${alpha}`;
 };
diff --git a/packages/super-editor/src/extensions/comment/comments-plugin.js b/packages/super-editor/src/extensions/comment/comments-plugin.js
index 721e2ec2e..c22a8d041 100644
--- a/packages/super-editor/src/extensions/comment/comments-plugin.js
+++ b/packages/super-editor/src/extensions/comment/comments-plugin.js
@@ -309,6 +309,12 @@ export const CommentsPlugin = Extension.create({
 
     if (editor.options.isHeadless) return [];
 
+    // Read custom highlight colors from editor options, with defaults
+    const highlightColors = editor.options.commentsHighlightColors || {};
+    const externalColor = highlightColors.external || '#B1124B';
+    const internalColor = highlightColors.internal || '#078383';
+    const resolvedColor = highlightColors.resolved || '#808080';
+
     const commentsPlugin = new Plugin({
       key: CommentsPluginKey,
 
@@ -316,8 +322,9 @@ export const CommentsPlugin = Extension.create({
         init() {
           return {
             activeThreadId: null,
-            externalColor: '#B1124B',
-            internalColor: '#078383',
+            externalColor,
+            internalColor,
+            resolvedColor,
             decorations: DecorationSet.empty,
             allCommentPositions: {},
             allCommentIds: [],
diff --git a/packages/superdoc/src/SuperDoc.vue b/packages/superdoc/src/SuperDoc.vue
index 7b6988885..4f9a8e2a5 100644
--- a/packages/superdoc/src/SuperDoc.vue
+++ b/packages/superdoc/src/SuperDoc.vue
@@ -446,6 +446,7 @@ const editorOptions = (doc) => {
     isInternal: proxy.$superdoc.config.isInternal,
     annotations: proxy.$superdoc.config.annotations,
     isCommentsEnabled: Boolean(commentsModuleConfig.value),
+    commentsHighlightColors: commentsModuleConfig.value?.highlightColors || null,
     isAiEnabled: proxy.$superdoc.config.modules?.ai,
     slashMenuConfig: proxy.$superdoc.config.modules?.slashMenu,
     editorCtor: useLayoutEngine ? PresentationEditor : undefined,
diff --git a/packages/superdoc/src/core/types/index.js b/packages/superdoc/src/core/types/index.js
index 79efaa263..b012c2afa 100644
--- a/packages/superdoc/src/core/types/index.js
+++ b/packages/superdoc/src/core/types/index.js
@@ -39,6 +39,13 @@
  * @property {Object} [params] Additional params for internal provider (deprecated)
  */
 
+/**
+ * @typedef {Object} CommentsHighlightColors
+ * @property {string} [external] Highlight color for external comments (default: '#B1124B')
+ * @property {string} [internal] Highlight color for internal comments (default: '#078383')
+ * @property {string} [resolved] Highlight color for resolved comments (default: '#808080')
+ */
+
 /**
  * @typedef {Object} Modules
  * @property {Object | false} [comments] Comments module configuration (false to disable)
@@ -51,6 +58,7 @@
  *   currentUser?: User | null,
  *   superdoc?: SuperDoc | null,
  * }) => boolean | undefined} [comments.permissionResolver] Custom permission resolver for comment actions
+ * @property {CommentsHighlightColors} [comments.highlightColors] Custom colors for comment highlights
  * @property {Object} [ai] AI module configuration
  * @property {string} [ai.apiKey] Harbour API key for AI features
  * @property {string} [ai.endpoint] Custom endpoint URL for AI services