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