From f58f736df434373f8985ac0ec943c18247baa76e Mon Sep 17 00:00:00 2001
From: Daniel Bauer <daniel.bauer@senckenberg.de>
Date: Wed, 18 Dec 2024 10:34:00 +0100
Subject: [PATCH] feat: replace innerHTML call with createEL (obsidian plugin
 guidelines)

---
 rollup.config.js         |  4 ++++
 src/DataviewSuggester.ts | 16 +++++++++++++---
 styles.css               |  3 +++
 3 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 styles.css

diff --git a/rollup.config.js b/rollup.config.js
index 71c8e0a..6353d2a 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -14,6 +14,10 @@ const createBaseConfig = (outdir) => ({
                     src: "manifest.json",
                     dest: outdir,
                 },
+                {
+                    src: "styles.css",
+                    dest: outdir,
+                },
             ],
         }),
     ),
diff --git a/src/DataviewSuggester.ts b/src/DataviewSuggester.ts
index 3aaaaec..89126aa 100644
--- a/src/DataviewSuggester.ts
+++ b/src/DataviewSuggester.ts
@@ -68,9 +68,19 @@ export class DataviewSuggester extends EditorSuggest<String> {
     }
 
     renderSuggestion(value: string, el: HTMLElement): void {
-        // replace marks with bold
-        const formattedHtml = value.replace(/<mark>(.*?)<\/mark>/g, '<span style="font-weight: bold;">$1</span>');
-        el.innerHTML = formattedHtml;
+        // Split the value into parts based on the <mark> tags and their content
+        const parts = value.split(/(<mark>.*?<\/mark>)/g);
+
+        // We cannot use inner HTML; Create a span for each part
+        parts.forEach((part) => {
+            if (part.startsWith("<mark>") && part.endsWith("</mark>")) {
+                const text = part.slice(6, -7); // Remove <mark> and </mark>
+                el.createEl("span", { text, cls: "suggestion-highlight" });
+            } else {
+                // For normal text, create a text node or <span>
+                el.createEl("span", { text: part });
+            }
+        });
     }
 
     selectSuggestion(value: string, evt: MouseEvent | KeyboardEvent): void {
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..125cb57
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,3 @@
+span.suggestion-highlight {
+  font-weight: bold;
+}