From 07334bed6a6bddaa2daf62da187e7982dfbbc2be Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Tue, 3 Dec 2024 14:01:51 +0800
Subject: [PATCH] :bug: CSS

---
 app/src/protyle/index.ts                   | 12 +++++++-----
 app/src/protyle/render/searchMarkRender.ts |  2 +-
 app/src/search/util.ts                     |  4 ++--
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/app/src/protyle/index.ts b/app/src/protyle/index.ts
index 3ea646edf..2bf8cd7fd 100644
--- a/app/src/protyle/index.ts
+++ b/app/src/protyle/index.ts
@@ -73,18 +73,20 @@ export class Protyle {
             options: mergedOptions,
             block: {},
             highlight: {
-                mark: new Highlight(),
-                markHL: new Highlight(),
+                mark: CSS?.highlights ? new Highlight() : undefined,
+                markHL: CSS?.highlights ? new Highlight() : undefined,
                 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);}
+        if (CSS?.highlights) {
+            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) {
diff --git a/app/src/protyle/render/searchMarkRender.ts b/app/src/protyle/render/searchMarkRender.ts
index 60b91d911..27218ebe7 100644
--- a/app/src/protyle/render/searchMarkRender.ts
+++ b/app/src/protyle/render/searchMarkRender.ts
@@ -1,5 +1,5 @@
 export const searchMarkRender = (protyle: IProtyle, matchElements: NodeListOf<Element>) => {
-    if (matchElements.length === 0) {
+    if (matchElements.length === 0 || !CSS || !CSS.highlights) {
         return;
     }
     protyle.highlight.markHL.clear();
diff --git a/app/src/search/util.ts b/app/src/search/util.ts
index b193ecfb4..9fc93056e 100644
--- a/app/src/search/util.ts
+++ b/app/src/search/util.ts
@@ -1161,7 +1161,7 @@ const renderNextSearchMark = (options: {
     target: Element,
 }) => {
     const contentRect = options.edit.protyle.contentElement.getBoundingClientRect();
-    if (CSS.highlights) {
+    if (CSS?.highlights) {
         options.edit.protyle.highlight.markHL.clear();
         options.edit.protyle.highlight.mark.clear();
         options.edit.protyle.highlight.rangeIndex++;
@@ -1239,7 +1239,7 @@ export const getArticle = (options: {
                 }
                 const contentRect = options.edit.protyle.contentElement.getBoundingClientRect();
                 let matchRectTop: number;
-                if (CSS.highlights) {
+                if (CSS?.highlights) {
                     options.edit.protyle.highlight.rangeIndex = 0;
                     searchMarkRender(options.edit.protyle, matchElements);
                     matchRectTop = options.edit.protyle.highlight.ranges[0].getBoundingClientRect().top;