🐛(obsidian) Address ObsidianReviewBot code scan findings

Author: tchlyah

esbuild.config.mjs

@@ -1,6 +1,10 @@
 import esbuild from "esbuild";
 import process from "process";
 import { builtinModules } from "node:module";
+import { createRequire } from "node:module";
+
+const require = createRequire(import.meta.url);
+const topologyUiCjsEntry = require.resolve("@couchbaselabs/topology-ui");
 
 const banner =
 `/*
@@ -17,6 +21,16 @@ const context = await esbuild.context({
   entryPoints: ["src/main.ts"],
   bundle: true,
   mainFields: ["main", "module"],
+  plugins: [
+    {
+      name: "topology-ui-cjs-entry",
+      setup(build) {
+        build.onResolve({ filter: /^@couchbaselabs\/topology-ui$/ }, () => ({
+          path: topologyUiCjsEntry
+        }));
+      }
+    }
+  ],
   external: [
     "obsidian",
     "electron",

manifest.json

@@ -1,7 +1,7 @@
 {
   "id": "couchbase-topology",
   "name": "Couchbase Topology",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "minAppVersion": "1.12.0",
   "description": "Render Couchbase topology diagrams from fenced code blocks.",
   "author": "Couchbase Labs",

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "obsidian-couchbase-topology",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Obsidian plugin for rendering Couchbase topology fenced code blocks with the topology-ui library.",
   "main": "dist/main.js",
   "type": "module",

package.json

@@ -1,32 +1,27 @@
 import { MarkdownPostProcessorContext, Plugin } from "obsidian";
+import topologyUi from "@couchbaselabs/topology-ui";
 import { topologyAssetDataUris } from "./generated/topology-assets";
 
-type TopologyUiModule = {
-  parseTopologySource: (input: string, options?: { allowJavaScript?: boolean }) => unknown;
-  renderTopology: (input: unknown) => string;
-};
-
-const topologyUi = require("@couchbaselabs/topology-ui") as TopologyUiModule;
-
 export default class CouchbaseTopologyPlugin extends Plugin {
   private topologyUi = topologyUi;
 
-  async onload(): Promise<void> {
-    this.registerMarkdownCodeBlockProcessor("couchbase-topology", async (source, el, ctx) => {
-      await this.renderTopologyCodeBlock(source, el, ctx);
+  onload(): void {
+    this.registerMarkdownCodeBlockProcessor("couchbase-topology", (source, el, ctx) => {
+      this.renderTopologyCodeBlock(source, el, ctx);
     });
   }
 
-  private async renderTopologyCodeBlock(
+  private renderTopologyCodeBlock(
     source: string,
     el: HTMLElement,
     _ctx: MarkdownPostProcessorContext
-  ): Promise<void> {
+  ): void {
     const host = el.createDiv({ cls: "couchbase-topology-block" });
 
     try {
       const topology = this.topologyUi.parseTopologySource(source);
-      host.innerHTML = this.inlineTopologyAssets(this.topologyUi.renderTopology(topology));
+      const renderedMarkup = this.inlineTopologyAssets(this.topologyUi.renderTopology(topology));
+      host.replaceChildren(this.createRenderedFragment(host, renderedMarkup));
     } catch (error) {
       const message = error instanceof Error ? error.message : String(error);
       host.empty();
@@ -38,6 +33,12 @@ export default class CouchbaseTopologyPlugin extends Plugin {
     }
   }
 
+  private createRenderedFragment(host: HTMLElement, markup: string): DocumentFragment {
+    const range = host.ownerDocument.createRange();
+    range.selectNodeContents(host);
+    return range.createContextualFragment(markup);
+  }
+
   private inlineTopologyAssets(html: string): string {
     return html.replace(
       /\b(xlink:href|src)=(["'])images\/([^"'?#]+)\2/g,

src/main.ts

@@ -1,4 +1,5 @@
 {
   "0.1.0": "1.12.0",
-  "0.1.1": "1.12.0"
+  "0.1.1": "1.12.0",
+  "0.1.2": "1.12.0"
 }