diff --git a/packages/layout-engine/painters/dom/src/renderer.ts b/packages/layout-engine/painters/dom/src/renderer.ts index ee92278766..e8ed78c494 100644 --- a/packages/layout-engine/painters/dom/src/renderer.ts +++ b/packages/layout-engine/painters/dom/src/renderer.ts @@ -683,6 +683,7 @@ const TRACK_CHANGE_BASE_CLASS: Record = { delete: 'track-delete-dec', format: 'track-format-dec', }; +const TRACK_CHANGE_FOCUSED_CLASS = 'track-change-focused'; const TRACK_CHANGE_MODIFIER_CLASS: Record> = { insert: { @@ -5537,6 +5538,9 @@ export class DomPainter { if (meta.date) { elem.dataset.trackChangeDate = meta.date; } + if (this.activeCommentId && meta.id === this.activeCommentId) { + elem.classList.add(TRACK_CHANGE_FOCUSED_CLASS); + } } /** diff --git a/packages/layout-engine/painters/dom/src/styles.ts b/packages/layout-engine/painters/dom/src/styles.ts index 0b936c1ff4..6f229c85a9 100644 --- a/packages/layout-engine/painters/dom/src/styles.ts +++ b/packages/layout-engine/painters/dom/src/styles.ts @@ -249,6 +249,14 @@ const TRACK_CHANGE_STYLES = ` .superdoc-layout .track-format-dec.highlighted { border-bottom: 2px solid gold; } + +.superdoc-layout .track-insert-dec.highlighted.track-change-focused { + border-width: 2px; +} + +.superdoc-layout .track-delete-dec.highlighted.track-change-focused { + border-width: 2px; +} `; /**