Avoid double DOM parsing

core/html.ts

@@ -72,9 +72,9 @@ const ALLOWED_TAGS = [
 
 let DOMPurify: ReturnType<typeof createDOMPurify> | undefined
 
-export function sanitizeHTML(html: string): string {
+export function sanitizeDOM(html: string): HTMLElement {
   if (!DOMPurify) DOMPurify = createDOMPurify(window)
-  return DOMPurify.sanitize(html, { ALLOWED_TAGS })
+  return DOMPurify.sanitize(html, { ALLOWED_TAGS, RETURN_DOM: true })
 }
 
 export function parseRichTranslation(text: string): string {

core/test/html.test.ts

@@ -3,16 +3,16 @@ import './dom-parser.js'
 import { equal } from 'node:assert'
 import { test } from 'node:test'
 
-import { parseLink, parseRichTranslation, sanitizeHTML } from '../index.js'
+import { parseLink, parseRichTranslation, sanitizeDOM } from '../index.js'
 
 test('sanitizes HTML', () => {
   equal(
-    sanitizeHTML(
+    sanitizeDOM(
       '<script>alert("XSS")</script>' +
         '<b>Safe</b>' +
         '<form></form>' +
         '<iframe//src=jAva&Tab;script:alert(3)>'
-    ),
+    ).innerHTML,
     '<b>Safe</b>'
   )
 })

web/ui/formatted-text.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  /* We escape and have XSS tests */
+  /* eslint svelte/no-at-html-tags: "off" */
+
+  import { sanitizeDOM } from '@slowreader/core'
+
+  export let html: string
+
+  let node: HTMLDivElement | undefined
+
+  $: if (node) {
+    node.innerHTML = ''
+    node.replaceChildren(...sanitizeDOM(html).childNodes)
+  }
+</script>
+
+<div bind:this={node} class="formatted-text"></div>
+
+<style>
+  .formatted-text :global(img) {
+    max-width: 100%;
+  }
+</style>

web/ui/post-card.svelte

@@ -1,15 +1,8 @@
 <script lang="ts">
-  /* We escape and have XSS tests */
-  /* eslint svelte/no-at-html-tags: "off" */
-
-  import {
-    type FeedValue,
-    type FilterAction,
-    type OriginPost,
-    sanitizeHTML
-  } from '@slowreader/core'
+  import type { FeedValue, FilterAction, OriginPost } from '@slowreader/core'
 
   import Card from './card.svelte'
+  import FormattedText from './formatted-text.svelte'
 
   export let post: OriginPost
   export let author: FeedValue | undefined = undefined
@@ -34,7 +27,7 @@
         {/if}
       </h1>
     {/if}
-    {@html sanitizeHTML(post.intro ?? post.full ?? '')}
+    <FormattedText html={post.intro ?? post.full ?? ''} />
   </div>
 </Card>