From b42a4dcb3641083662b10757cc24eff5d5c80753 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 18 Dec 2025 13:12:58 +0200
Subject: [PATCH] chore(highlights_list): react to changes

---
 .../src/widgets/sidebar/HighlightsList.tsx    | 37 +++++++++++++++++--
 .../src/widgets/sidebar/TableOfContents.tsx   |  1 -
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/widgets/sidebar/HighlightsList.tsx b/apps/client/src/widgets/sidebar/HighlightsList.tsx
index e34e39ff4..95ecea6d4 100644
--- a/apps/client/src/widgets/sidebar/HighlightsList.tsx
+++ b/apps/client/src/widgets/sidebar/HighlightsList.tsx
@@ -54,9 +54,40 @@ function EditableTextHighlightsList() {
 
     useEffect(() => {
         if (!textEditor) return;
+        setHighlights(extractHighlightsFromTextEditor(textEditor));
 
-        const highlights = extractHighlightsFromTextEditor(textEditor);
-        setHighlights(highlights);
+        // React to changes.
+        const changeCallback = () => {
+            const changes = textEditor.model.document.differ.getChanges();
+            const affectsHighlights = changes.some(change => {
+                // Text inserted or removed
+                if (change.type === 'insert' || change.type === 'remove') {
+                    return true;
+                }
+
+                // Formatting attribute changed
+                if (change.type === 'attribute' &&
+                    (
+                        change.attributeKey === 'bold' ||
+                        change.attributeKey === 'italic' ||
+                        change.attributeKey === 'underline' ||
+                        change.attributeKey === 'fontColor' ||
+                        change.attributeKey === 'fontBackgroundColor'
+                    )
+                ) {
+                    return true;
+                }
+
+                return false;
+            });
+
+            if (affectsHighlights) {
+                setHighlights(extractHighlightsFromTextEditor(textEditor));
+            }
+        };
+
+        textEditor.model.document.on("change:data", changeCallback);
+        return () => textEditor.model.document.off("change:data", changeCallback);
     }, [ textEditor, note ]);
 
     const scrollToHeading = useCallback((highlight: CKHighlight) => {
@@ -84,7 +115,6 @@ function extractHighlightsFromTextEditor(editor: CKTextEditor) {
 
     for (const { item } of editor.model.createRangeIn(root).getWalker({ ignoreElementEnd: true })) {
         if (!item.is('$textProxy')) continue;
-        console.log("Got ", item);
 
         const attrs = {
             bold: item.hasAttribute('bold'),
@@ -93,7 +123,6 @@ function extractHighlightsFromTextEditor(editor: CKTextEditor) {
             color: item.getAttribute('fontColor'),
             background: item.getAttribute('fontBackgroundColor')
         };
-        console.log("Got ", attrs);
 
         if (Object.values(attrs).some(Boolean)) {
             result.push({
diff --git a/apps/client/src/widgets/sidebar/TableOfContents.tsx b/apps/client/src/widgets/sidebar/TableOfContents.tsx
index d60d4e8dc..ccc623ab8 100644
--- a/apps/client/src/widgets/sidebar/TableOfContents.tsx
+++ b/apps/client/src/widgets/sidebar/TableOfContents.tsx
@@ -131,7 +131,6 @@ function EditableTextTableOfContents() {
         };
 
         textEditor.model.document.on("change:data", changeCallback);
-
         return () => textEditor.model.document.off("change:data", changeCallback);
     }, [ textEditor, note ]);