highlight the first visible find result in scrolling container.

Author: SiriusXT

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
                             });
                         }
                     });

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;
             }
         }