fix: reduce the use of innerHTML

Author: donghaoren

packages/viewer/src/lib/renderers/image.ts

@@ -12,14 +12,17 @@ export class ImageRenderer {
 
   update(props: { value: any }) {
     if (props.value == null) {
-      this.element.innerHTML = "(null)";
+      this.element.innerText = "(null)";
       return;
     }
     let dataUrl = imageToDataUrl(props.value);
     if (dataUrl != null) {
-      this.element.innerHTML = `<img src="${dataUrl}" style="max-height: 100px" />`;
+      let img = document.createElement("img");
+      img.src = dataUrl;
+      img.style.maxHeight = "100px";
+      this.element.replaceChildren(img);
     } else {
-      this.element.innerHTML = `(unknown)`;
+      this.element.innerText = `(unknown)`;
     }
   }
 }

packages/viewer/src/lib/renderers/json.ts

@@ -26,6 +26,8 @@ export class JSONRenderer {
   }
 
   update(props: { value: any }) {
-    this.element.innerHTML = `<pre>${safeJSONStringify(props.value)}</pre>`;
+    let pre = document.createElement("pre");
+    pre.innerText = safeJSONStringify(props.value);
+    this.element.replaceChildren(pre);
   }
 }

packages/viewer/src/lib/renderers/url.ts

@@ -10,9 +10,14 @@ export class URLRenderer {
 
   update(props: { value: any }) {
     if (props.value != null) {
-      this.element.innerHTML = `<a href="${props.value}" class="underline" target="_blank">${props.value}</a>`;
+      let a = document.createElement("a");
+      a.href = props.value;
+      a.innerText = props.value;
+      a.className = "underline";
+      a.target = "_blank";
+      this.element.replaceChildren(a);
     } else {
-      this.element.innerHTML = `(null)`;
+      this.element.innerText = `(null)`;
     }
   }
 }