feat: replace innerHTML call with createEL (obsidian plugin guidelines)

rollup.config.js

@@ -14,6 +14,10 @@ const createBaseConfig = (outdir) => ({
                     src: "manifest.json",
                     dest: outdir,
                 },
+                {
+                    src: "styles.css",
+                    dest: outdir,
+                },
             ],
         }),
     ),

src/DataviewSuggester.ts

@@ -68,9 +68,19 @@ export class DataviewSuggester extends EditorSuggest<String> {
     }
 
     renderSuggestion(value: string, el: HTMLElement): void {
-        // replace marks with bold
+        // Split the value into parts based on the <mark> tags and their content
-        const formattedHtml = value.replace(/<mark>(.*?)<\/mark>/g, '<span style="font-weight: bold;">$1</span>');
+        const parts = value.split(/(<mark>.*?<\/mark>)/g);
-        el.innerHTML = formattedHtml;
+
+        // 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 {

styles.css

@@ -0,0 +1,3 @@
+span.suggestion-highlight {
+  font-weight: bold;
+}