From 18ef49aa4b1efe23fa47b0e78461acc48d9a1423 Mon Sep 17 00:00:00 2001 From: Vanessa Date: Fri, 29 Nov 2024 07:53:16 +0800 Subject: [PATCH] :recycle: --- app/src/layout/dock/Backlink.ts | 4 +-- app/src/protyle/render/searchMarkRender.ts | 27 +++++++++++++++++++ app/src/protyle/util/reload.ts | 6 ++--- app/src/search/util.ts | 31 ++-------------------- 4 files changed, 34 insertions(+), 34 deletions(-) create mode 100644 app/src/protyle/render/searchMarkRender.ts diff --git a/app/src/layout/dock/Backlink.ts b/app/src/layout/dock/Backlink.ts index afa72a417..6a610ed87 100644 --- a/app/src/layout/dock/Backlink.ts +++ b/app/src/layout/dock/Backlink.ts @@ -10,7 +10,7 @@ import {openFileById} from "../../editor/util"; import {Protyle} from "../../protyle"; import {MenuItem} from "../../menus/Menu"; import {App} from "../../index"; -import {highlightMark} from "../../search/util"; +import {searchMarkRender} from "../../protyle/render/searchMarkRender"; export class Backlink extends Model { public element: HTMLElement; @@ -457,7 +457,7 @@ export class Backlink extends Model { } }); editor.protyle.notebookId = liElement.getAttribute("data-notebook-id"); - highlightMark(editor.protyle, editor.protyle.wysiwyg.element.querySelectorAll('span[data-type~="search-mark"]')); + searchMarkRender(editor.protyle, editor.protyle.wysiwyg.element.querySelectorAll('span[data-type~="search-mark"]')); this.editors.push(editor); }); } diff --git a/app/src/protyle/render/searchMarkRender.ts b/app/src/protyle/render/searchMarkRender.ts new file mode 100644 index 000000000..c02d947b9 --- /dev/null +++ b/app/src/protyle/render/searchMarkRender.ts @@ -0,0 +1,27 @@ +export const searchMarkRender = (protyle: IProtyle, matchElements: NodeListOf) => { + if (matchElements.length === 0) { + return; + } + protyle.highlight.markHL.clear(); + protyle.highlight.markHL.clear(); + protyle.highlight.ranges = []; + matchElements.forEach((item, index) => { + const range = new Range(); + if (item.getAttribute("data-type") === "search-mark") { + const contentElement = item.firstChild; + item.replaceWith(contentElement); + range.selectNodeContents(contentElement); + } else { + item.setAttribute("data-type", item.getAttribute("data-type").replace(" search-mark", "").replace("search-mark ", "")); + range.selectNodeContents(item); + } + if (index === protyle.highlight.rangeIndex) { + protyle.highlight.markHL.add(range); + } else { + protyle.highlight.mark.add(range); + } + protyle.highlight.ranges.push(range); + }); + CSS.highlights.set("search-mark", protyle.highlight.mark); + CSS.highlights.set("search-mark-hl", protyle.highlight.markHL); +}; diff --git a/app/src/protyle/util/reload.ts b/app/src/protyle/util/reload.ts index da93e197f..50587acf7 100644 --- a/app/src/protyle/util/reload.ts +++ b/app/src/protyle/util/reload.ts @@ -4,7 +4,7 @@ import {getDocByScroll, saveScroll} from "../scroll/saveScroll"; import {renderBacklink} from "../wysiwyg/renderBacklink"; import {hasClosestByClassName} from "./hasClosest"; import {preventScroll} from "../scroll/preventScroll"; -import {highlightMark} from "../../search/util"; +import {searchMarkRender} from "../render/searchMarkRender"; export const reloadProtyle = (protyle: IProtyle, focus: boolean, updateReadonly?: boolean) => { if (!protyle.preview.element.classList.contains("fn__none")) { @@ -49,7 +49,7 @@ export const reloadProtyle = (protyle: IProtyle, focus: boolean, updateReadonly? }, response => { protyle.options.backlinkData = isMention ? response.data.backmentions : response.data.backlinks; renderBacklink(protyle, protyle.options.backlinkData); - highlightMark(protyle, protyle.wysiwyg.element.querySelectorAll('span[data-type~="search-mark"]')); + searchMarkRender(protyle, protyle.wysiwyg.element.querySelectorAll('span[data-type~="search-mark"]')); }); } } else { @@ -61,7 +61,7 @@ export const reloadProtyle = (protyle: IProtyle, focus: boolean, updateReadonly? updateReadonly, cb () { if (protyle.query?.key) { - highlightMark(protyle, protyle.wysiwyg.element.querySelectorAll('span[data-type~="search-mark"]')); + searchMarkRender(protyle, protyle.wysiwyg.element.querySelectorAll('span[data-type~="search-mark"]')); } } }); diff --git a/app/src/search/util.ts b/app/src/search/util.ts index 5325447ea..7f434505d 100644 --- a/app/src/search/util.ts +++ b/app/src/search/util.ts @@ -51,6 +51,7 @@ import {addClearButton} from "../util/addClearButton"; import {checkFold} from "../util/noRelyPCFunction"; import {getUnRefList, openSearchUnRef, unRefMoreMenu} from "./unRef"; import {getDefaultType} from "./getDefault"; +import {searchMarkRender} from "../protyle/render/searchMarkRender"; export const toggleReplaceHistory = (searchElement: Element) => { const list = window.siyuan.storage[Constants.LOCAL_SEARCHKEYS]; @@ -1240,7 +1241,7 @@ export const getArticle = (options: { let matchRectTop: number; if (CSS.highlights) { options.edit.protyle.highlight.rangeIndex = 0; - highlightMark(options.edit.protyle, matchElements); + searchMarkRender(options.edit.protyle, matchElements); matchRectTop = options.edit.protyle.highlight.ranges[0].getBoundingClientRect().top; } else { matchElements[0].classList.add("search-mark--hl"); @@ -1502,31 +1503,3 @@ ${item.tag ? `${it `); }; - -export const highlightMark = (protyle: IProtyle, matchElements: NodeListOf) => { - if (matchElements.length === 0) { - return; - } - protyle.highlight.markHL.clear(); - protyle.highlight.markHL.clear(); - protyle.highlight.ranges = []; - matchElements.forEach((item, index) => { - const range = new Range(); - if (item.getAttribute("data-type") === "search-mark") { - const contentElement = item.firstChild; - item.replaceWith(contentElement); - range.selectNodeContents(contentElement); - } else { - item.setAttribute("data-type", item.getAttribute("data-type").replace(" search-mark", "").replace("search-mark ", "")); - range.selectNodeContents(item); - } - if (index === protyle.highlight.rangeIndex) { - protyle.highlight.markHL.add(range); - } else { - protyle.highlight.mark.add(range); - } - protyle.highlight.ranges.push(range); - }); - CSS.highlights.set("search-mark", protyle.highlight.mark); - CSS.highlights.set("search-mark-hl", protyle.highlight.markHL); -};