From d077d438ed5a8fd655e525a322e8364a18380c69 Mon Sep 17 00:00:00 2001 From: Caio Pizzol Date: Wed, 11 Mar 2026 15:44:40 -0300 Subject: [PATCH 1/3] fix(rendering): show comment highlight on text with Word highlight formatting SD-2188: The `!textRun.highlight` guard in the renderer prevented comment highlights from being applied when text also had Word highlight formatting (``). This caused comments on highlighted text to be invisible. Removed the guard so comment highlights always take precedence, matching Word's behavior. --- .../painters/dom/src/index.test.ts | 30 +++++++++++++++++++ .../painters/dom/src/renderer.ts | 2 +- 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/packages/layout-engine/painters/dom/src/index.test.ts b/packages/layout-engine/painters/dom/src/index.test.ts index 537becb404..10af46d7d1 100644 --- a/packages/layout-engine/painters/dom/src/index.test.ts +++ b/packages/layout-engine/painters/dom/src/index.test.ts @@ -3089,6 +3089,36 @@ 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 be applied even when Word highlight is present + expect(span.style.backgroundColor).not.toBe(''); + }); + 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 From dc6796e1f25bfb4a6493af810092ac36d3f25aa5 Mon Sep 17 00:00:00 2001 From: Caio Pizzol Date: Wed, 11 Mar 2026 17:45:58 -0300 Subject: [PATCH 2/3] test(rendering): strengthen SD-2188 assertion to verify comment color overrides Word highlight The previous assertion (not.toBe('')) passed on both old and new code since applyRunStyles already sets backgroundColor from the Word highlight. Now asserts the color is NOT the Word yellow (#ffff00). --- packages/layout-engine/painters/dom/src/index.test.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/layout-engine/painters/dom/src/index.test.ts b/packages/layout-engine/painters/dom/src/index.test.ts index 10af46d7d1..d481950db5 100644 --- a/packages/layout-engine/painters/dom/src/index.test.ts +++ b/packages/layout-engine/painters/dom/src/index.test.ts @@ -3115,8 +3115,12 @@ describe('DomPainter', () => { const span = mount.querySelector('.superdoc-comment-highlight') as HTMLElement; expect(span).toBeTruthy(); expect(span.dataset.commentIds).toBe('comment-hl'); - // Comment highlight should be applied even when Word highlight is present - expect(span.style.backgroundColor).not.toBe(''); + // 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 comment highlight styles for non-tracked-change comments', () => { From 5cc4a58b93a09af33b76d82d8b30c0c9b18d6703 Mon Sep 17 00:00:00 2001 From: Caio Pizzol Date: Wed, 11 Mar 2026 17:49:49 -0300 Subject: [PATCH 3/3] test(rendering): add active and faded comment highlight tests with Word highlight (SD-2188) Cover the full matrix: comment highlight overrides Word highlight in idle, active, and faded states. --- .../painters/dom/src/index.test.ts | 59 +++++++++++++++++++ 1 file changed, 59 insertions(+) diff --git a/packages/layout-engine/painters/dom/src/index.test.ts b/packages/layout-engine/painters/dom/src/index.test.ts index d481950db5..aa8b79ce06 100644 --- a/packages/layout-engine/painters/dom/src/index.test.ts +++ b/packages/layout-engine/painters/dom/src/index.test.ts @@ -3123,6 +3123,65 @@ describe('DomPainter', () => { 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',