From 2a97934a278b6fb3e3e6e79461c9b9d68ed9166d Mon Sep 17 00:00:00 2001
From: MiniDigger | Martin <admin@minidigger.dev>
Date: Sun, 17 Nov 2024 22:39:24 +0100
Subject: [PATCH] chore: fix dompurify types

---
 frontend/package.json                    |  1 -
 frontend/pnpm-lock.yaml                  | 10 ----------
 frontend/src/composables/useDomPurify.ts | 10 +++++-----
 frontend/src/plugins/dompurify.client.ts |  2 +-
 4 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 9e67d623..fe7aeb92 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -73,7 +73,6 @@
     "@types/bun": "1.1.13",
     "@types/debug": "4.1.12",
     "@types/diff-match-patch": "1.0.36",
-    "@types/dompurify": "3.0.5",
     "@types/jsdom": "21.1.7",
     "@types/locale": "0.1.4",
     "@types/lodash-es": "4.17.12",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index c85442a9..6314dacb 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -153,9 +153,6 @@ importers:
       '@types/diff-match-patch':
         specifier: 1.0.36
         version: 1.0.36
-      '@types/dompurify':
-        specifier: 3.0.5
-        version: 3.0.5
       '@types/jsdom':
         specifier: 21.1.7
         version: 21.1.7
@@ -1948,9 +1945,6 @@ packages:
   '@types/diff-match-patch@1.0.36':
     resolution: {integrity: sha512-xFdR6tkm0MWvBfO8xXCSsinYxHcqkQUlcHeSpMC2ukzOb6lwQAfDmW+Qt0AvlGd8HpsS28qKsB+oPeJn9I39jg==}
 
-  '@types/dompurify@3.0.5':
-    resolution: {integrity: sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==}
-
   '@types/eslint@8.56.12':
     resolution: {integrity: sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==}
 
@@ -9042,10 +9036,6 @@ snapshots:
 
   '@types/diff-match-patch@1.0.36': {}
 
-  '@types/dompurify@3.0.5':
-    dependencies:
-      '@types/trusted-types': 2.0.7
-
   '@types/eslint@8.56.12':
     dependencies:
       '@types/estree': 1.0.6
diff --git a/frontend/src/composables/useDomPurify.ts b/frontend/src/composables/useDomPurify.ts
index d3bd8a46..b6547b99 100644
--- a/frontend/src/composables/useDomPurify.ts
+++ b/frontend/src/composables/useDomPurify.ts
@@ -1,4 +1,4 @@
-import type { Config, DOMPurifyI } from "dompurify";
+import type { default as DOMPurify, Config } from "dompurify";
 
 export const config = {
   FORBID_TAGS: ["style", "base", "head", "link", "meta", "title", "body", "form", "input", "dialog", "embed", "button", "frame", "html", "textarea"],
@@ -8,12 +8,12 @@ export const config = {
 } as Config;
 export function useDomPurify(text?: string) {
   if (!text) return "";
-  const dompurify = useNuxtApp().$dompurify as DOMPurifyI;
+  const dompurify = useNuxtApp().$dompurify as typeof DOMPurify; // TODO cleanup when DOMPurify exports the type in the next release
 
   // Manually handle iframe to allow YouTube video embeds
-  dompurify.addHook("uponSanitizeElement", (node: any, data) => {
+  dompurify.addHook("uponSanitizeElement", (node, data) => {
     if (data.tagName === "iframe") {
-      const src = node.getAttribute("src") || "";
+      const src = (node as HTMLIFrameElement).getAttribute("src") || "";
       if (!src.startsWith("https://www.youtube.com/embed/")) {
         return node.parentNode && node.parentNode.removeChild(node);
       }
@@ -26,6 +26,6 @@ export function useDomPurify(text?: string) {
 export const aggressiveConfig = { ALLOWED_TAGS: ["#text"] } as Config;
 export function stripAllHtml(text?: string) {
   if (!text) return "";
-  const dompurify = useNuxtApp().$dompurify as DOMPurifyI;
+  const dompurify = useNuxtApp().$dompurify as typeof DOMPurify; // TODO cleanup when DOMPurify exports the type in the next release
   return dompurify.sanitize(text, aggressiveConfig) as string;
 }
diff --git a/frontend/src/plugins/dompurify.client.ts b/frontend/src/plugins/dompurify.client.ts
index 18931245..92da96da 100644
--- a/frontend/src/plugins/dompurify.client.ts
+++ b/frontend/src/plugins/dompurify.client.ts
@@ -1,7 +1,7 @@
 import DOMPurify from "dompurify";
 
 export default defineNuxtPlugin((nuxtApp) => {
-  const purify = DOMPurify();
+  const purify = DOMPurify(window);
   return {
     provide: {
       dompurify: purify,