fix(rendering): show comment highlight on text with Word highlight formatting (SD-2188)

packages/layout-engine/painters/dom/src/index.test.ts

@@ -3089,6 +3089,99 @@ describe('DomPainter', () => {
     expect(span.style.backgroundColor).not.toBe('');
   });
 
+  it('applies comment highlight even when text has Word highlight formatting (SD-2188)', () => {
+    const highlightedCommentBlock: FlowBlock = {
+      kind: 'paragraph',
+      id: 'highlight-comment-block',
+      runs: [
+        {
+          text: 'Highlighted and commented',
+          fontFamily: 'Arial',
+          fontSize: 16,
+          highlight: '#ffff00',
+          comments: [{ commentId: 'comment-hl', internal: false, trackedChange: false }],
+        },
+      ],
+    };
+
+    const { paragraphMeasure, paragraphLayout } = buildSingleParagraphData(
+      highlightedCommentBlock.id,
+      highlightedCommentBlock.runs[0].text.length,
+    );
+
+    const painter = createDomPainter({ blocks: [highlightedCommentBlock], measures: [paragraphMeasure] });
+    painter.paint(paragraphLayout, mount);
+
+    const span = mount.querySelector('.superdoc-comment-highlight') as HTMLElement;
+    expect(span).toBeTruthy();
+    expect(span.dataset.commentIds).toBe('comment-hl');
+    // Comment highlight should override Word highlight (#ffff00 → yellow)
+    const bg = span.style.backgroundColor;
+    expect(bg).not.toBe('');
+    expect(bg).not.toBe('#ffff00');
+    expect(bg).not.toBe('rgb(255, 255, 0)');
+    expect(bg).not.toBe('yellow');
+  });
+
+  it('applies active comment highlight over Word highlight when comment is selected (SD-2188)', () => {
+    const block: FlowBlock = {
+      kind: 'paragraph',
+      id: 'active-hl-block',
+      runs: [
+        {
+          text: 'Active highlighted',
+          fontFamily: 'Arial',
+          fontSize: 16,
+          highlight: '#ffff00',
+          comments: [{ commentId: 'comment-active-hl', internal: false, trackedChange: false }],
+        },
+      ],
+    };
+
+    const { paragraphMeasure, paragraphLayout } = buildSingleParagraphData(block.id, block.runs[0].text.length);
+
+    const painter = createDomPainter({ blocks: [block], measures: [paragraphMeasure] });
+    painter.setActiveComment('comment-active-hl');
+    painter.paint(paragraphLayout, mount);
+
+    const span = mount.querySelector('.superdoc-comment-highlight') as HTMLElement;
+    expect(span).toBeTruthy();
+    const bg = span.style.backgroundColor;
+    expect(bg).not.toBe('');
+    expect(bg).not.toBe('#ffff00');
+    expect(bg).not.toBe('rgb(255, 255, 0)');
+  });
+
+  it('applies faded comment highlight over Word highlight when another comment is active (SD-2188)', () => {
+    const block: FlowBlock = {
+      kind: 'paragraph',
+      id: 'faded-hl-block',
+      runs: [
+        {
+          text: 'Faded highlighted',
+          fontFamily: 'Arial',
+          fontSize: 16,
+          highlight: '#ffff00',
+          comments: [{ commentId: 'comment-faded-hl', internal: false, trackedChange: false }],
+        },
+      ],
+    };
+
+    const { paragraphMeasure, paragraphLayout } = buildSingleParagraphData(block.id, block.runs[0].text.length);
+
+    const painter = createDomPainter({ blocks: [block], measures: [paragraphMeasure] });
+    // Activate a different comment so this one gets faded
+    painter.setActiveComment('some-other-comment');
+    painter.paint(paragraphLayout, mount);
+
+    const span = mount.querySelector('.superdoc-comment-highlight') as HTMLElement;
+    expect(span).toBeTruthy();
+    const bg = span.style.backgroundColor;
+    expect(bg).not.toBe('');
+    expect(bg).not.toBe('#ffff00');
+    expect(bg).not.toBe('rgb(255, 255, 0)');
+  });
+
   it('applies comment highlight styles for non-tracked-change comments', () => {
     const commentBlock: FlowBlock = {
       kind: 'paragraph',

packages/layout-engine/painters/dom/src/renderer.ts

@@ -4597,7 +4597,7 @@ export class DomPainter {
     const hasAnyComment = !!commentAnnotations?.length;
     const commentHighlight = getCommentHighlight(textRun, this.activeCommentId);
 
-    if (commentHighlight.color && !textRun.highlight && hasAnyComment) {
+    if (commentHighlight.color && hasAnyComment) {
       (elem as HTMLElement).style.backgroundColor = commentHighlight.color;
       // Add thin visual indicator for nested comments when outer comment is selected
       // Use box-shadow instead of border to avoid affecting text layout