Fix formulas causing a scroll instead of breaking

package.json

@@ -51,6 +51,7 @@
 		"@fortawesome/free-solid-svg-icons": "^7.2.0",
 		"@libsql/client": "^0.17.2",
 		"@octokit/app": "^16.1.2",
+		"dompurify": "^3.4.2",
 		"es6-crawler-detect": "^4.0.2",
 		"ioredis": "^5.10.1",
 		"katex": "^0.16.44",

src/components/Popup.svelte

@@ -34,6 +34,7 @@ an issue when clicking two reasons in a row. So it's a <div> then.
 
 <script lang="ts">
 	import { afterNavigate } from '$app/navigation'
+	import { sanitizeHTML } from '$lib/client/sanitize_HTML'
 
 	import { faXmark } from '@fortawesome/free-solid-svg-icons'
 	import Fa from 'svelte-fa'
@@ -70,7 +71,7 @@ an issue when clicking two reasons in a row. So it's a <div> then.
 				<Fa icon={faXmark} />
 			</button>
 		</header>
-		{@html popup_state.text}
+		<div class="html" use:sanitizeHTML={[popup_state.text]}></div>
 	</div>
 </div>
 
@@ -119,6 +120,10 @@ an issue when clicking two reasons in a row. So it's a <div> then.
 		pointer-events: initial;
 	}
 
+	.html {
+		overflow-y: scroll;
+	}
+
 	button {
 		padding: 0.2rem 1rem;
 	}

src/components/Selection.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-	import ChipGroup from './ChipGroup.svelte'
+	import { sanitizeHTML } from '$lib/client/sanitize_HTML'
+	import { get_comparison_score } from '$lib/client/utils'
 	import Chip from './Chip.svelte'
-	import { get_comparison_score, normalize_text } from '$lib/client/utils'
+	import ChipGroup from './ChipGroup.svelte'
 
 	type Props = {
 		title?: string
@@ -122,7 +123,7 @@
 
 <section aria-label={section_label}>
 	{#if title}
-		<p>{@html title}</p>
+		<p use:sanitizeHTML={[title]}></p>
 	{/if}
 
 	<form onsubmit={handle_submit}>

src/lib/client/sanitize_HTML.ts

@@ -0,0 +1,22 @@
+import { default as createDOMPurify, default as DOMPurify } from 'dompurify'
+
+export function sanitizeHTML(
+	node: { innerHTML: string },
+	[unsafeHTML]: [string],
+): {
+	update: ([unsafeHTML]: [string]) => void
+} {
+	if (globalThis.window !== undefined) {
+		const DOMPurify = createDOMPurify(globalThis.window)
+
+		node.innerHTML = DOMPurify.sanitize(unsafeHTML)
+	}
+
+	return {
+		update([unsafeHTML]: [string]) {
+			if (globalThis.window !== undefined) {
+				node.innerHTML = DOMPurify.sanitize(unsafeHTML)
+			}
+		},
+	}
+}

src/routes/app.css

@@ -296,3 +296,8 @@ label {
 .katex-display {
 	margin: 0.5em 0;
 }
+
+.katex-break {
+	white-space: normal;
+	display: inline;
+}

src/routes/category-comparison/[...ids]/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import MetaData from '$components/MetaData.svelte'
+	import { sanitizeHTML } from '$lib/client/sanitize_HTML.js'
 	import { get_property_url } from '$lib/commons/property.url'
 	import {
 		faCheck,
@@ -54,7 +55,7 @@
 			{#each compared_categories as category}
 				<th>
 					<a href="/category/{category.id}" aria-label={category.name}>
-						{@html category.notation}
+						<span use:sanitizeHTML={[category.notation]}></span>
 					</a>
 				</th>
 			{/each}

src/routes/category-implication/[id]/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import MetaData from '$components/MetaData.svelte'
 	import SuggestionForm from '$components/SuggestionForm.svelte'
+	import { sanitizeHTML } from '$lib/client/sanitize_HTML.js'
 	import { get_property_url } from '$lib/commons/property.url'
 	import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
 	import Fa from 'svelte-fa'
@@ -51,7 +52,7 @@
 {:else}
 	<p>
 		<strong>Reason:</strong>
-		{@html data.implication.reason}
+		<span use:sanitizeHTML={[data.implication.reason]}></span>
 	</p>
 {/if}
 

src/routes/category-property/[id]/+page.svelte

@@ -3,6 +3,7 @@
 	import ImplicationList from '$components/ImplicationList.svelte'
 	import MetaData from '$components/MetaData.svelte'
 	import SuggestionForm from '$components/SuggestionForm.svelte'
+	import { sanitizeHTML } from '$lib/client/sanitize_HTML.js'
 	import { pluralize } from '$lib/client/utils'
 	import { get_property_url } from '$lib/commons/property.url'
 
@@ -14,7 +15,7 @@
 <h2>{data.property.id}</h2>
 
 <p>
-	{@html data.property.description}
+	<span use:sanitizeHTML={[data.property.description]}></span>
 
 	{#if data.property.invariant_under_equivalences === false}
 		Warning: This property is not invariant under equivalences.

src/routes/category/[id]/+page.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
+	import CategoryList from '$components/CategoryList.svelte'
+	import Chip from '$components/Chip.svelte'
+	import ChipGroup from '$components/ChipGroup.svelte'
 	import MetaData from '$components/MetaData.svelte'
 	import PropertyList from '$components/PropertyList.svelte'
-	import ChipGroup from '$components/ChipGroup.svelte'
-	import Chip from '$components/Chip.svelte'
-	import { category_detail_level } from '$lib/states/detail_level.svelte'
+	import SuggestionForm from '$components/SuggestionForm.svelte'
 	import TextWithReason from '$components/TextWithReason.svelte'
+	import { sanitizeHTML } from '$lib/client/sanitize_HTML.js'
 	import { filter_by_tag, pluralize } from '$lib/client/utils'
-	import CategoryList from '$components/CategoryList.svelte'
-	import { faQuestion, faQuestionCircle } from '@fortawesome/free-solid-svg-icons'
+	import { category_detail_level } from '$lib/states/detail_level.svelte'
+	import { faQuestion } from '@fortawesome/free-solid-svg-icons'
 	import Fa from 'svelte-fa'
-	import SuggestionForm from '$components/SuggestionForm.svelte'
 
 	let { data } = $props()
 
@@ -30,25 +31,25 @@
 	<ul class="with-margins">
 		<li>
 			<strong>notation:</strong>
-			{@html category.notation}
+			<span use:sanitizeHTML={[category.notation]}></span>
 		</li>
 
 		<li>
 			<strong>objects:</strong>
-			{@html category.objects}
+			<span use:sanitizeHTML={[category.objects]}></span>
 		</li>
 
 		<li>
 			<strong>morphisms:</strong>
-			{@html category.morphisms}
+			<span use:sanitizeHTML={[category.morphisms]}></span>
 		</li>
 
 		{#if data.related_categories.length}
 			<li>
 				<strong>Related categories:</strong>
 				{#each data.related_categories as { id, name, notation }, i}
 					<a href={`/category/${id}`} aria-label={name}>
-						{@html notation}
+						<span use:sanitizeHTML={[notation]}></span>
 					</a>{#if i < data.related_categories.length - 1}
 						,&nbsp;
 					{/if}
@@ -69,14 +70,15 @@
 					href="/category/{category.dual_category_id}"
 					aria-label={category.dual_category_name}
 				>
-					{@html category.dual_category_notation}
+					<span use:sanitizeHTML={[category.dual_category_notation ?? '']}
+					></span>
 				</a>
 			</li>
 		{/if}
 	</ul>
 
 	{#if category.description}
-		<p>{@html category.description}</p>
+		<p use:sanitizeHTML={[category.description]}></p>
 	{/if}
 </section>
 
@@ -158,7 +160,7 @@
 	{#if data.special_objects.length}
 		<ul class="with-margins">
 			{#each data.special_objects as obj}
-				<li>{obj.type}: {@html obj.description}</li>
+				<li>{obj.type}: <span use:sanitizeHTML={[obj.description]}></span></li>
 			{/each}
 		</ul>
 	{:else}
@@ -174,7 +176,7 @@
 			<li>
 				<TextWithReason reason={obj.reason}>
 					{#if obj.description}
-						{obj.type}: {@html obj.description}
+						{obj.type}: <span use:sanitizeHTML={[obj.description]}></span>
 					{:else}
 						{obj.type}: <Fa icon={faQuestion} scale={0.825} />
 					{/if}
@@ -204,7 +206,7 @@
 
 		<ul>
 			{#each data.comments as { id, comment } (id)}
-				<li class="hint">{@html comment}</li>
+				<li class="hint" use:sanitizeHTML={[comment]}></li>
 			{/each}
 		</ul>
 	</section>

src/routes/foundations/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import MetaData from '$components/MetaData.svelte'
+	import { sanitizeHTML } from '$lib/client/sanitize_HTML.js'
 	let { data } = $props()
 </script>
 
@@ -8,7 +9,7 @@
 	description="How to make sense of categories in set theory"
 />
 
-{@html data.content}
+<span use:sanitizeHTML={[data.content]}></span>
 
 <style>
 	:global(img) {

src/routes/functor-implication/[id]/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import MetaData from '$components/MetaData.svelte'
 	import SuggestionForm from '$components/SuggestionForm.svelte'
+	import { sanitizeHTML } from '$lib/client/sanitize_HTML.js'
 	import { get_property_url } from '$lib/commons/property.url'
 	import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
 	import Fa from 'svelte-fa'
@@ -77,7 +78,7 @@
 {:else}
 	<p>
 		<strong>Reason:</strong>
-		{@html data.implication.reason}
+		<span use:sanitizeHTML={[data.implication.reason]}></span>
 	</p>
 {/if}
 

src/routes/functor-property/[id]/+page.svelte

@@ -3,6 +3,7 @@
 	import FunctorList from '$components/FunctorList.svelte'
 	import MetaData from '$components/MetaData.svelte'
 	import SuggestionForm from '$components/SuggestionForm.svelte'
+	import { sanitizeHTML } from '$lib/client/sanitize_HTML.js'
 	import { pluralize } from '$lib/client/utils'
 	import { get_property_url } from '$lib/commons/property.url'
 
@@ -16,7 +17,7 @@
 <h2>{property.id}</h2>
 
 <p>
-	{@html property.description}
+	<span use:sanitizeHTML={[property.description]}></span>
 
 	{#if property.invariant_under_equivalences === false}
 		Warning: This property is not invariant under equivalences.