diff --git a/packages/layout-engine/painters/dom/src/index.test.ts b/packages/layout-engine/painters/dom/src/index.test.ts index 537becb404..aa8b79ce06 100644 --- a/packages/layout-engine/painters/dom/src/index.test.ts +++ b/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', diff --git a/packages/layout-engine/painters/dom/src/renderer.ts b/packages/layout-engine/painters/dom/src/renderer.ts index cf80b9f90e..6b593d8259 100644 --- a/packages/layout-engine/painters/dom/src/renderer.ts +++ b/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