Refactor code to use Obsidian’s createEl API instead of native createElement

Author: EzraMarks

src/frontmatterImageEditorExtension.ts

@@ -12,7 +12,7 @@ import {
 } from "@codemirror/view";
 import FrontmatterImagePlugin from "./main";
 import { Pos, TFile } from "obsidian";
-import { getImageSrc, renderFrontmatterImage } from "./utils";
+import { getImageSrc, appendFrontmatterImage } from "./utils";
 
 export interface FrontmatterImageStateFieldValue {
     readonly activeFile: TFile;
@@ -40,7 +40,7 @@ export const frontmatterImageEditorExtension = (
             Decoration.widget({
                 widget: new (class extends WidgetType {
                     toDOM(view: EditorView): HTMLElement {
-                        return renderFrontmatterImage(resolvedImageSrc);
+                        return appendFrontmatterImage(view.contentDOM, resolvedImageSrc);
                     }
                 })(),
             }),

src/main.ts

@@ -7,7 +7,7 @@ import {
     Setting
 } from "obsidian";
 import { frontmatterImageEditorExtension, } from "src/frontmatterImageEditorExtension";
-import { getImageSrc, renderFrontmatterImage } from "./utils";
+import { getImageSrc, appendFrontmatterImage } from "./utils";
 
 interface FrontmatterImagePluginSettings {
     imageKeys: string[];
@@ -36,12 +36,9 @@ export default class FrontmatterImagePlugin extends Plugin {
                 const imageSrc = getImageSrc(context.sourcePath, this);
                 if (!imageSrc) return;
 
-                const div = document.createElement("div");
-                const img = renderFrontmatterImage(imageSrc);
-                div.appendChild(img);
-                const br = document.createElement("br");
-                div.appendChild(br);
-                element.appendChild(div);
+                const div = element.createDiv();
+                appendFrontmatterImage(div, imageSrc);
+                div.createEl("br");
             },
         );
     }

src/utils.ts

@@ -17,23 +17,23 @@ export const getImageSrc = (activeFilePath: string, plugin: FrontmatterImagePlug
         rawValue = wikilinkMatch[1];
     }
 
-     // Check if it's already a full URL or path
+    // Check if it's already a full URL or path
     if (rawValue.startsWith('http') || rawValue.startsWith('/') || rawValue.startsWith('data:')) {
         return rawValue;
     }
-    
+
     // Try to resolve as an Obsidian file
     const file = plugin.app.metadataCache.getFirstLinkpathDest(rawValue, activeFilePath);
     if (file) {
         return plugin.app.vault.getResourcePath(file);
     }
-    
+
     // If we can't resolve it, return the original value
     return rawValue;
 };
 
-export const renderFrontmatterImage = (src: string): HTMLElement => {
-    const img = document.createElement("img");
+export const appendFrontmatterImage = (containerEl: HTMLElement, src: string): HTMLElement => {
+    const img = containerEl.createEl("img");
     img.src = src;
     img.classList.add("frontmatter-image");
     return img;