update frontend and switch sanitize library

frontend/licenses.csv

@@ -1,6 +1,7 @@
-├─ MIT: 46
+├─ MIT: 12
-├─ MIT*: 2
+├─ BSD-3-Clause: 1
-├─ BSD-3-Clause: 2
+├─ (MPL-2.0 OR Apache-2.0): 1
+├─ BSD-2-Clause: 1
 ├─ ISC: 1
 ├─ 0BSD: 1
 └─ Apache-2.0: 1

frontend/package.json

@@ -1,8 +1,8 @@
 {
 	"private": true,
 	"scripts": {
-		"dev": "svelte-kit dev",
+		"dev": "vite dev",
-		"build": "svelte-kit build",
+		"build": "vite build",
 		"preview": "svelte-kit preview",
 		"check": "svelte-check --tsconfig tsconfig.json",
 		"licenses": "license-checker --summary > licenses.csv",
@@ -10,26 +10,26 @@
 	},
 	"type": "module",
 	"devDependencies": {
-		"@lokalise/node-api": "^7.2.0",
+		"@lokalise/node-api": "^7.3.1",
 		"@sveltejs/adapter-static": "^1.0.0-next.34",
-		"@sveltejs/kit": "^1.0.0-next.348",
+		"@sveltejs/kit": "^1.0.0-next.361",
+		"@types/dompurify": "^2.3.3",
 		"@types/file-saver": "^2.0.5",
-		"@types/sanitize-html": "^2.6.2",
 		"adm-zip": "^0.5.9",
 		"dotenv": "^16.0.1",
-		"svelte": "^3.48.0",
+		"svelte": "^3.49.0",
-		"svelte-check": "^2.7.2",
+		"svelte-check": "^2.8.0",
 		"svelte-intl-precompile": "^0.10.1",
 		"svelte-preprocess": "^4.10.7",
 		"tslib": "^2.4.0",
-		"typescript": "^4.7.3",
+		"typescript": "^4.7.4",
-		"vite": "^2.9.10"
+		"vite": "^3.0.0"
 	},
 	"dependencies": {
 		"@fontsource/fira-mono": "^4.5.8",
 		"copy-to-clipboard": "^3.3.1",
+		"dompurify": "^2.3.9",
 		"file-saver": "^2.0.5",
-		"pretty-bytes": "^5.6.0",
+		"pretty-bytes": "^5.6.0"
-		"sanitize-html": "^2.7.0"
 	}
 }

frontend/src/lib/ui/ShowNote.svelte

@@ -2,9 +2,9 @@
 	import type { FileDTO, NotePublic } from '$lib/api'
 	import { Files } from '$lib/files'
 	import copy from 'copy-to-clipboard'
+	import DOMPurify from 'dompurify'
 	import { saveAs } from 'file-saver'
 	import prettyBytes from 'pretty-bytes'
-	import sanitize from 'sanitize-html'
 	import { t } from 'svelte-intl-precompile'
 	import Button from './Button.svelte'
 
@@ -31,11 +31,11 @@
 	}
 
 	function contentWithLinks(content: string): string {
-		const replaced = note.contents.replace(
+		const replaced = content.replace(
 			RE_URL,
 			(url) => `<a href="${url}" rel="noreferrer">${url}</a>`
 		)
-		return sanitize(replaced, { allowedTags: ['a'], allowedAttributes: { a: ['href', 'rel'] } })
+		return DOMPurify.sanitize(replaced, { USE_PROFILES: { html: true } })
 	}
 </script>
 

frontend/src/lib/views/Create.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { create, Note, PayloadToLargeError } from '$lib/api'
+	import type { Note } from '$lib/api'
+	import { create, PayloadToLargeError } from '$lib/api'
 	import { encrypt, getKeyFromString, getRandomBytes, Hex } from '$lib/crypto'
 	import { status } from '$lib/stores/status'
 	import Button from '$lib/ui/Button.svelte'

frontend/src/lib/views/Header.svelte

@@ -100,7 +100,7 @@
 
 	header svg {
 		width: 100%;
-		max-width: 16rem;
+		max-height: 8rem;
 		transform: translateX(-1rem);
 		fill: currentColor;
 	}

frontend/svelte.config.js

@@ -1,6 +1,5 @@
-import preprocess from 'svelte-preprocess'
 import adapter from '@sveltejs/adapter-static'
-import precompileIntl from 'svelte-intl-precompile/sveltekit-plugin'
+import preprocess from 'svelte-preprocess'
 
 export default {
 	preprocess: preprocess(),
@@ -9,10 +8,5 @@ export default {
 		adapter: adapter({
 			fallback: 'index.html',
 		}),
-		vite: {
-			plugins: [
-				precompileIntl('locales'), // if your translations are defined in /locales/[lang].json
-			],
-		},
 	},
 }

frontend/tsconfig.json

@@ -1,3 +1,7 @@
 {
-	"extends": "./.svelte-kit/tsconfig.json"
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"strict": true,
+		"allowSyntheticDefaultImports": true
+	}
 }

frontend/vite.config.js

@@ -0,0 +1,12 @@
+import { sveltekit } from '@sveltejs/kit/vite'
+import precompileIntl from 'svelte-intl-precompile/sveltekit-plugin'
+
+/** @type {import('vite').UserConfig} */
+const config = {
+	server: {
+		port: 3000,
+	},
+	plugins: [sveltekit(), precompileIntl('locales')],
+}
+
+export default config