From fdee19e703cfe49cee34d7f12fbc5060af4bc9d6 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Mon, 2 Dec 2024 00:10:03 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/13324

---
 app/src/assets/scss/protyle/_wysiwyg.scss  | 10 ----------
 app/src/protyle/index.ts                   |  6 ++++++
 app/src/protyle/render/searchMarkRender.ts |  8 +++++---
 app/src/protyle/ui/initUI.ts               |  2 ++
 app/src/search/util.ts                     |  4 ++--
 app/src/types/protyle.d.ts                 |  1 +
 6 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/app/src/assets/scss/protyle/_wysiwyg.scss b/app/src/assets/scss/protyle/_wysiwyg.scss
index d36546c4b51..0079a33e8e6 100644
--- a/app/src/assets/scss/protyle/_wysiwyg.scss
+++ b/app/src/assets/scss/protyle/_wysiwyg.scss
@@ -18,16 +18,6 @@
     outline: none;
   }
 
-  &::highlight(search-mark) {
-    background-color: var(--b3-protyle-inline-mark-background);
-    color: var(--b3-protyle-inline-mark-color);
-  }
-
-  &::highlight(search-mark-hl) {
-    background-color: var(--b3-theme-primary-lighter);
-    box-shadow: 0 0 0 .5px var(--b3-theme-on-background);
-  }
-
   [data-node-id] {
     position: relative;
 
diff --git a/app/src/protyle/index.ts b/app/src/protyle/index.ts
index e042e38ef94..3ea646edf2e 100644
--- a/app/src/protyle/index.ts
+++ b/app/src/protyle/index.ts
@@ -77,9 +77,15 @@ export class Protyle {
                 markHL: new Highlight(),
                 ranges: [],
                 rangeIndex: 0,
+                styleElement: document.createElement("style"),
             }
         };
 
+        const styleId = genUUID();
+        this.protyle.highlight.styleElement.dataset.uuid = styleId;
+        this.protyle.highlight.styleElement.textContent = `.protyle-wysiwyg::highlight(search-mark-${styleId}) {background-color: var(--b3-protyle-inline-mark-background);color: var(--b3-protyle-inline-mark-color);}
+  .protyle-wysiwyg::highlight(search-mark-hl-${styleId}) {background-color: var(--b3-theme-primary-lighter);box-shadow: 0 0 0 .5px var(--b3-theme-on-background);}`;
+
         this.protyle.hint = new Hint(this.protyle);
         if (mergedOptions.render.breadcrumb) {
             this.protyle.breadcrumb = new Breadcrumb(this.protyle);
diff --git a/app/src/protyle/render/searchMarkRender.ts b/app/src/protyle/render/searchMarkRender.ts
index c02d947b913..60b91d91174 100644
--- a/app/src/protyle/render/searchMarkRender.ts
+++ b/app/src/protyle/render/searchMarkRender.ts
@@ -15,13 +15,15 @@ export const searchMarkRender = (protyle: IProtyle, matchElements: NodeListOf<El
             item.setAttribute("data-type", item.getAttribute("data-type").replace(" search-mark", "").replace("search-mark ", ""));
             range.selectNodeContents(item);
         }
-        if (index === protyle.highlight.rangeIndex) {
+        if (index === protyle.highlight.rangeIndex && !protyle.options.backlinkData) {
             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);
+    CSS.highlights.set("search-mark-" + protyle.highlight.styleElement.dataset.uuid, protyle.highlight.mark);
+    if (!protyle.options.backlinkData) {
+        CSS.highlights.set("search-mark-hl-" + protyle.highlight.styleElement.dataset.uuid, protyle.highlight.markHL);
+    }
 };
diff --git a/app/src/protyle/ui/initUI.ts b/app/src/protyle/ui/initUI.ts
index e0feb671a7b..bd31b998728 100644
--- a/app/src/protyle/ui/initUI.ts
+++ b/app/src/protyle/ui/initUI.ts
@@ -48,6 +48,8 @@ export const initUI = (protyle: IProtyle) => {
     protyle.element.appendChild(protyle.toolbar.element);
     protyle.element.appendChild(protyle.toolbar.subElement);
 
+    protyle.element.append(protyle.highlight.styleElement);
+
     addLoading(protyle);
 
     setEditMode(protyle, protyle.options.mode);
diff --git a/app/src/search/util.ts b/app/src/search/util.ts
index 7f434505d05..b193ecfb479 100644
--- a/app/src/search/util.ts
+++ b/app/src/search/util.ts
@@ -1183,7 +1183,7 @@ const renderNextSearchMark = (options: {
         return;
     }
     let matchElement;
-    const allMatchElements = Array.from(options.edit.protyle.wysiwyg.element.querySelectorAll(`div[data-node-id="${options.id}"] span[data-type~="search-mark"]`));
+    const allMatchElements = Array.from(options.edit.protyle.wysiwyg.element.querySelectorAll('span[data-type~="search-mark"]'));
     allMatchElements.find((item, itemIndex) => {
         if (item.classList.contains("search-mark--hl")) {
             item.classList.remove("search-mark--hl");
@@ -1233,7 +1233,7 @@ export const getArticle = (options: {
                     protyle: options.edit.protyle,
                     action: zoomIn ? [Constants.CB_GET_ALL, Constants.CB_GET_HTML] : [Constants.CB_GET_HTML],
                 });
-                const matchElements = options.edit.protyle.wysiwyg.element.querySelectorAll(`div[data-node-id="${options.id}"] span[data-type~="search-mark"]`);
+                const matchElements = options.edit.protyle.wysiwyg.element.querySelectorAll('span[data-type~="search-mark"]');
                 if (matchElements.length === 0) {
                     return;
                 }
diff --git a/app/src/types/protyle.d.ts b/app/src/types/protyle.d.ts
index b508e16576f..256b9e774ac 100644
--- a/app/src/types/protyle.d.ts
+++ b/app/src/types/protyle.d.ts
@@ -487,6 +487,7 @@ interface IProtyle {
         markHL: Highlight
         ranges: Range[]
         rangeIndex: 0
+        styleElement: HTMLStyleElement
     }
     getInstance: () => import("../protyle").Protyle,
     observerLoad?: ResizeObserver,