From aecde9656b1b5772bd5adf3764212f692091cc1e Mon Sep 17 00:00:00 2001
From: SiriusXT <1160925501@qq.com>
Date: Fri, 9 May 2025 18:48:28 +0800
Subject: [PATCH] highlight the first visible find result in scrolling
 container.

---
 apps/client/src/widgets/find_in_html.ts | 21 ++++++-------------
 apps/client/src/widgets/find_in_text.ts | 27 +++++++++++++++++--------
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/apps/client/src/widgets/find_in_html.ts b/apps/client/src/widgets/find_in_html.ts
index e8ae8b5ab..e4d47e623 100644
--- a/apps/client/src/widgets/find_in_html.ts
+++ b/apps/client/src/widgets/find_in_html.ts
@@ -38,25 +38,16 @@ export default class FindInHtml {
                         caseSensitive: matchCase,
                         done: async () => {
                             this.$results = $content.find(`.${FIND_RESULT_CSS_CLASSNAME}`);
-                            let closestIndex = 0;
-                            let minTop = Infinity;
-
-                            this.$results.each((i, el) => {
-                                const rect = el.getBoundingClientRect();
-                                const top = rect.top;
-
-                                if (top >= 0 && top < minTop) {
-                                    minTop = top;
-                                    closestIndex = i;
-                                }
-                            });
-
-                            this.currentIndex = closestIndex;
+                            const scrollingContainer = $content[0].closest('.scrolling-container');
+                            const containerTop = scrollingContainer?.getBoundingClientRect().top ?? 0;
+                            const closestIndex = this.$results.toArray().findIndex(el => el.getBoundingClientRect().top >= containerTop);
+                            this.currentIndex = closestIndex >= 0 ? closestIndex : 0;
+                            
                             await this.jumpTo();
 
                             res({
                                 totalFound: this.$results.length,
-                                currentFound: this.$results.length > 0 ? closestIndex + 1 : 0
+                                currentFound: this.$results.length > 0 ? this.currentIndex + 1 : 0
                             });
                         }
                     });
diff --git a/apps/client/src/widgets/find_in_text.ts b/apps/client/src/widgets/find_in_text.ts
index b5fa3a02c..9ae0e2007 100644
--- a/apps/client/src/widgets/find_in_text.ts
+++ b/apps/client/src/widgets/find_in_text.ts
@@ -54,15 +54,26 @@ export default class FindInText {
             const options = { matchCase: matchCase, wholeWords: wholeWord };
             findResult = textEditor.execute<CKFindResult>("find", searchTerm, options);
             totalFound = findResult.results.length;
-            // Find the result beyond the cursor
-            const cursorPos = model.document.selection.getLastPosition();
-            for (let i = 0; i < findResult.results.length; ++i) {
-                const marker = findResult.results.get(i).marker;
-                const fromPos = marker.getStart();
-                if (cursorPos && fromPos.compareWith(cursorPos) !== "before") {
-                    currentFound = i;
-                    break;
+            const selection = model.document.selection;
+            // If text is selected, highlight the corresponding result;
+            // otherwise, highlight the first visible result in the scrolling container.
+            if (!selection.isCollapsed) {
+                const cursorPos = selection.getFirstPosition();
+                for (let i = 0; i < findResult.results.length; ++i) {
+                    const marker = findResult.results.get(i).marker;
+                    const fromPos = marker.getStart();
+                    if (cursorPos && fromPos.compareWith(cursorPos) !== "before") {
+                        currentFound = i;
+                        break;
+                    }
                 }
+            } else {
+                const editorEl = textEditor?.sourceElement;
+                const findResultElement = editorEl.querySelectorAll(".ck-find-result");
+                const scrollingContainer = editorEl.closest('.scrolling-container');
+                const containerTop = scrollingContainer?.getBoundingClientRect().top ?? 0;
+                const closestIndex = Array.from(findResultElement ?? []).findIndex((el) => el.getBoundingClientRect().top >= containerTop);
+                currentFound = closestIndex >= 0 ? closestIndex : 0;
             }
         }