highlight the first visible find result in scrolling container.

This commit is contained in:
SiriusXT 2025-05-09 18:48:28 +08:00
parent 67e84d921f
commit aecde9656b
2 changed files with 25 additions and 23 deletions

View File

@ -38,25 +38,16 @@ export default class FindInHtml {
caseSensitive: matchCase, caseSensitive: matchCase,
done: async () => { done: async () => {
this.$results = $content.find(`.${FIND_RESULT_CSS_CLASSNAME}`); this.$results = $content.find(`.${FIND_RESULT_CSS_CLASSNAME}`);
let closestIndex = 0; const scrollingContainer = $content[0].closest('.scrolling-container');
let minTop = Infinity; const containerTop = scrollingContainer?.getBoundingClientRect().top ?? 0;
const closestIndex = this.$results.toArray().findIndex(el => el.getBoundingClientRect().top >= containerTop);
this.$results.each((i, el) => { this.currentIndex = closestIndex >= 0 ? closestIndex : 0;
const rect = el.getBoundingClientRect();
const top = rect.top;
if (top >= 0 && top < minTop) {
minTop = top;
closestIndex = i;
}
});
this.currentIndex = closestIndex;
await this.jumpTo(); await this.jumpTo();
res({ res({
totalFound: this.$results.length, totalFound: this.$results.length,
currentFound: this.$results.length > 0 ? closestIndex + 1 : 0 currentFound: this.$results.length > 0 ? this.currentIndex + 1 : 0
}); });
} }
}); });

View File

@ -54,15 +54,26 @@ export default class FindInText {
const options = { matchCase: matchCase, wholeWords: wholeWord }; const options = { matchCase: matchCase, wholeWords: wholeWord };
findResult = textEditor.execute<CKFindResult>("find", searchTerm, options); findResult = textEditor.execute<CKFindResult>("find", searchTerm, options);
totalFound = findResult.results.length; totalFound = findResult.results.length;
// Find the result beyond the cursor const selection = model.document.selection;
const cursorPos = model.document.selection.getLastPosition(); // If text is selected, highlight the corresponding result;
for (let i = 0; i < findResult.results.length; ++i) { // otherwise, highlight the first visible result in the scrolling container.
const marker = findResult.results.get(i).marker; if (!selection.isCollapsed) {
const fromPos = marker.getStart(); const cursorPos = selection.getFirstPosition();
if (cursorPos && fromPos.compareWith(cursorPos) !== "before") { for (let i = 0; i < findResult.results.length; ++i) {
currentFound = i; const marker = findResult.results.get(i).marker;
break; 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;
} }
} }