Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-26 07:46:30 +01:00
Code Issues Packages Projects Releases Activity

Make the find function for read-only code scroll correctly.

Browse Source
This commit is contained in:
SiriusXT
2025-05-08 16:25:44 +08:00
parent f0c735e4fc
commit 858814356a
3 changed files with 37 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/client/src/stylesheets/style.css
View File

@@ -438,6 +438,14 @@ body .CodeMirror {
background-color: #eeeeee;
}
.cm-matchhighlight.ck-find-result{
background: var(--ck-color-highlight-background);
}
.cm-matchhighlight.ck-find-result_selected {
background-color: #ff9633;
}
.CodeMirror pre.CodeMirror-placeholder {
color: #999 !important;
}

19
apps/client/src/widgets/find.ts
View File

@@ -143,9 +143,9 @@ export default class FindWidget extends NoteContextAwareWidget {
this.$currentFound = this.$widget.find(".find-widget-current-found");
this.$totalFound = this.$widget.find(".find-widget-total-found");
this.$caseSensitiveCheckbox = this.$widget.find(".find-widget-case-sensitive-checkbox");
this.$caseSensitiveCheckbox.change(() => this.performFind());
this.$caseSensitiveCheckbox.on("change", () => this.performFind());
this.$matchWordsCheckbox = this.$widget.find(".find-widget-match-words-checkbox");
this.$matchWordsCheckbox.change(() => this.performFind());
this.$matchWordsCheckbox.on("change", () => this.performFind());
this.$previousButton = this.$widget.find(".find-widget-previous-button");
this.$previousButton.on("click", () => this.findNext(-1));
this.$nextButton = this.$widget.find(".find-widget-next-button");
@@ -160,7 +160,7 @@ export default class FindWidget extends NoteContextAwareWidget {
this.$replaceButton = this.$widget.find(".replace-widget-replace-button");
this.$replaceButton.on("click", () => this.replace());
this.$input.keydown(async (e) => {
this.$input.on("keydown", async (e) => {
if ((e.metaKey || e.ctrlKey) && (e.key === "F" || e.key === "f")) {
// If ctrl+f is pressed when the findbox is shown, select the
// whole input to find
@@ -172,7 +172,7 @@ export default class FindWidget extends NoteContextAwareWidget {
}
});
this.$widget.keydown(async (e) => {
this.$widget.on("keydown", async (e) => {
if (e.key === "Escape") {
await this.closeSearch();
}
@@ -197,9 +197,14 @@ export default class FindWidget extends NoteContextAwareWidget {
const isReadOnly = await this.noteContext?.isReadOnly();
let selectedText = "";
if (this.note?.type === "code" && !isReadOnly && this.noteContext) {
const codeEditor = await this.noteContext.getCodeEditor();
selectedText = codeEditor.getSelection();
if (this.note?.type === "code" && this.noteContext) {
if (isReadOnly){
const $content = await this.noteContext.getContentElement();
selectedText = $content.find('.cm-matchhighlight').first().text();
} else {
const codeEditor = await this.noteContext.getCodeEditor();
selectedText = codeEditor.getSelection();
}
} else {
selectedText = window.getSelection()?.toString() || "";
}

32
apps/client/src/widgets/find_in_html.ts
View File

@@ -2,7 +2,6 @@
// uses for highlighting matches, use the same one on CodeMirror
// for consistency
import utils from "../services/utils.js";
import appContext from "../components/app_context.js";
import type FindWidget from "./find.js";
import type { FindResult } from "./find.js";
@@ -39,12 +38,25 @@ export default class FindInHtml {
caseSensitive: matchCase,
done: async () => {
this.$results = $content.find(`.${FIND_RESULT_CSS_CLASSNAME}`);
this.currentIndex = 0;
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;
await this.jumpTo();
res({
totalFound: this.$results.length,
currentFound: Math.min(1, this.$results.length)
currentFound: this.$results.length > 0 ? closestIndex + 1 : 0
});
}
});
@@ -78,20 +90,10 @@ export default class FindInHtml {
async jumpTo() {
if (this.$results?.length) {
const offsetTop = 100;
const $current = this.$results.eq(this.currentIndex);
this.$results.removeClass(FIND_RESULT_SELECTED_CSS_CLASSNAME);
if ($current.length) {
$current.addClass(FIND_RESULT_SELECTED_CSS_CLASSNAME);
const position = $current.position().top - offsetTop;
const $content = await this.parent.noteContext?.getContentElement();
if ($content) {
const $contentWidget = appContext.getComponentByEl($content[0]);
$contentWidget.triggerCommand("scrollContainerTo", { position });
}
}
$current[0].scrollIntoView();
$current.addClass(FIND_RESULT_SELECTED_CSS_CLASSNAME);
}
}
}