@riebeckite/diagram 0.0.41 → 0.0.42

package/dist/client.d.ts

@@ -1,2 +1,2 @@
 export type { DiagramClientContext, DiagramClientRenderer, } from "./src/client.js";
-export { detectDiagramTheme, renderPendingDiagrams } from "./src/client.js";
+export { detectDiagramTheme, renderPendingDiagrams, setDiagramSvg, } from "./src/client.js";

package/dist/client.js

@@ -1,4 +1,27 @@
 // src/client.ts
+var UNSAFE_SVG_ELEMENTS = "script,iframe,object,embed,animate,animateMotion,animateTransform,set,form,button,input,select,textarea,video,audio,canvas,base,link,meta";
+var UNSAFE_STYLE = /@import|expression\s*\(|behavior\s*:|url\(\s*['"]?\s*(?!#)/i;
+function setDiagramSvg(canvas, source) {
+  const parsed = new DOMParser().parseFromString(source, "text/html");
+  const svg = parsed.body.firstElementChild;
+  if (svg?.localName !== "svg") return false;
+  for (const element of svg.querySelectorAll(UNSAFE_SVG_ELEMENTS)) {
+    element.remove();
+  }
+  for (const element of [svg, ...svg.querySelectorAll("*")]) {
+    for (const attribute of Array.from(element.attributes)) {
+      const name = attribute.name.toLowerCase();
+      if (name.startsWith("on") || name === "src" || (name === "href" || name === "xlink:href") && !attribute.value.trim().startsWith("#") || name === "style" && UNSAFE_STYLE.test(attribute.value)) {
+        element.removeAttribute(attribute.name);
+      }
+    }
+  }
+  for (const style of svg.querySelectorAll("style")) {
+    if (UNSAFE_STYLE.test(style.textContent ?? "")) style.remove();
+  }
+  canvas.replaceChildren(svg);
+  return true;
+}
 async function renderPendingDiagrams(kind, renderer, context = {}) {
   const root = context.root ?? document;
   const selector = `[data-diagram="${CSS.escape(kind)}"][data-diagram-status="pending"]`;
@@ -33,5 +56,6 @@ function detectDiagramTheme() {
 }
 export {
   detectDiagramTheme,
-  renderPendingDiagrams
+  renderPendingDiagrams,
+  setDiagramSvg
 };

package/dist/src/client.d.ts

@@ -3,5 +3,6 @@ export type DiagramClientContext = {
     signal?: AbortSignal;
 };
 export type DiagramClientRenderer = (figure: HTMLElement, context: DiagramClientContext) => Promise<undefined | (() => void)> | undefined | (() => void);
+export declare function setDiagramSvg(canvas: HTMLElement, source: string): boolean;
 export declare function renderPendingDiagrams(kind: string, renderer: DiagramClientRenderer, context?: DiagramClientContext): Promise<() => void>;
 export declare function detectDiagramTheme(): "light" | "dark";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/diagram",
-  "version": "0.0.41",
+  "version": "0.0.42",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -30,11 +30,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@riebeckite/core": "0.0.41"
+    "@riebeckite/core": "0.0.42"
   },
   "devDependencies": {
-    "@riebeckite/test": "0.0.41",
-    "tsx": "^4.22.4"
+    "tsx": "^4.22.4",
+    "@riebeckite/test": "0.0.42"
   },
   "repository": {
     "type": "git",