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

View File

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