From 7085e62cfc8280272514fd0ea76571f4c923c1fc Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 18 Dec 2025 13:09:53 +0200
Subject: [PATCH] chore(highlights_list): reintroduce navigation

---
 .../src/widgets/sidebar/HighlightsList.tsx    | 30 ++++++++++++++-----
 packages/ckeditor5/src/index.ts               |  2 +-
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/widgets/sidebar/HighlightsList.tsx b/apps/client/src/widgets/sidebar/HighlightsList.tsx
index 1755230f8..e34e39ff4 100644
--- a/apps/client/src/widgets/sidebar/HighlightsList.tsx
+++ b/apps/client/src/widgets/sidebar/HighlightsList.tsx
@@ -1,5 +1,5 @@
-import { CKTextEditor, ModelTextProxy } from "@triliumnext/ckeditor5";
-import { useEffect, useState } from "preact/hooks";
+import { CKTextEditor, ModelText } from "@triliumnext/ckeditor5";
+import { useCallback, useEffect, useState } from "preact/hooks";
 
 import { t } from "../../services/i18n";
 import { useActiveNoteContext, useIsNoteReadOnly, useNoteProperty, useTextEditor } from "../react/hooks";
@@ -24,14 +24,15 @@ export default function HighlightsList() {
     );
 }
 
-function AbstractHighlightsList({ highlights }: {
-    highlights: RawHighlight[]
+function AbstractHighlightsList<T extends RawHighlight>({ highlights, scrollToHighlight }: {
+    highlights: T[],
+    scrollToHighlight(highlight: T): void;
 }) {
     return (
         <span className="highlights-list">
             <ol>
                 {highlights.map(highlight => (
-                    <li>
+                    <li onClick={() => scrollToHighlight(highlight)}>
                         <span>{highlight.text}</span>
                     </li>
                 ))}
@@ -42,7 +43,8 @@ function AbstractHighlightsList({ highlights }: {
 
 //#region Editable text (CKEditor)
 interface CKHighlight extends RawHighlight {
-    element: ModelTextProxy;
+    textNode: ModelText;
+    offset: number | null;
 }
 
 function EditableTextHighlightsList() {
@@ -57,8 +59,21 @@ function EditableTextHighlightsList() {
         setHighlights(highlights);
     }, [ textEditor, note ]);
 
+    const scrollToHeading = useCallback((highlight: CKHighlight) => {
+        if (!textEditor) return;
+
+        const modelPos = textEditor.model.createPositionAt(highlight.textNode, "before");
+        const viewPos = textEditor.editing.mapper.toViewPosition(modelPos);
+        const domConverter = textEditor.editing.view.domConverter;
+        const domPos = domConverter.viewPositionToDom(viewPos);
+
+        if (!domPos) return;
+        (domPos.parent as HTMLElement).scrollIntoView();
+    }, [ textEditor ]);
+
     return <AbstractHighlightsList
         highlights={highlights}
+        scrollToHighlight={scrollToHeading}
     />;
 }
 
@@ -85,7 +100,8 @@ function extractHighlightsFromTextEditor(editor: CKTextEditor) {
                 id: crypto.randomUUID(),
                 text: item.data,
                 attrs,
-                element: item
+                textNode: item.textNode,
+                offset: item.startOffset
             });
         }
     }
diff --git a/packages/ckeditor5/src/index.ts b/packages/ckeditor5/src/index.ts
index 745c428cf..7dff34803 100644
--- a/packages/ckeditor5/src/index.ts
+++ b/packages/ckeditor5/src/index.ts
@@ -6,7 +6,7 @@ import { BalloonEditor, DecoupledEditor, FindAndReplaceEditing, FindCommand } fr
 import "./translation_overrides.js";
 export { default as EditorWatchdog } from "./custom_watchdog";
 export { PREMIUM_PLUGINS } from "./plugins.js";
-export type { EditorConfig, MentionFeed, MentionFeedObjectItem, ModelNode, ModelPosition, ModelElement, ModelTextProxy, WatchdogConfig, WatchdogState } from "ckeditor5";
+export type { EditorConfig, MentionFeed, MentionFeedObjectItem, ModelNode, ModelPosition, ModelElement, ModelText, WatchdogConfig, WatchdogState } from "ckeditor5";
 export type { TemplateDefinition } from "ckeditor5-premium-features";
 export { default as buildExtraCommands } from "./extra_slash_commands.js";
 export { default as getCkLocale } from "./i18n.js";