font caching

Author: HoodieRocks

bun.lock

@@ -15,24 +15,24 @@
 	"devDependencies": {
 		"@iconify-json/tabler": "^1.2.19",
 		"@sveltejs/adapter-auto": "^6.0.1",
-		"@sveltejs/kit": "^2.22.0",
+		"@sveltejs/kit": "^2.22.2",
 		"@sveltejs/vite-plugin-svelte": "^5.1.0",
-		"@tailwindcss/vite": "^4.1.10",
+		"@tailwindcss/vite": "^4.1.11",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/svelte": "^5.2.8",
-		"@tiptap/extension-color": "^2.22.3",
-		"@tiptap/extension-font-family": "^2.22.3",
-		"@tiptap/extension-text-style": "^2.22.3",
-		"@tiptap/extension-underline": "^2.22.3",
-		"@types/node": "^24.0.3",
+		"@tiptap/extension-color": "^2.23.0",
+		"@tiptap/extension-font-family": "^2.23.0",
+		"@tiptap/extension-text-style": "^2.23.0",
+		"@tiptap/extension-underline": "^2.23.0",
+		"@types/node": "^24.0.4",
 		"file-type": "^21.0.0",
 		"jsdom": "^26.1.0",
-		"prettier": "^3.6.0",
+		"prettier": "^3.6.1",
 		"prettier-plugin-svelte": "^3.4.0",
 		"prettier-plugin-tailwindcss": "^0.6.13",
-		"svelte": "^5.34.7",
+		"svelte": "^5.34.8",
 		"svelte-check": "^4.2.2",
-		"tailwindcss": "^4.1.10",
+		"tailwindcss": "^4.1.11",
 		"tslib": "^2.8.1",
 		"typescript": "^5.8.3",
 		"unplugin-icons": "^22.1.0",
@@ -41,10 +41,11 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@tiptap/core": "^2.22.3",
-		"@tiptap/extension-placeholder": "^2.22.3",
-		"@tiptap/pm": "^2.22.3",
-		"@tiptap/starter-kit": "^2.22.3",
+		"@tiptap/core": "^2.23.0",
+		"@tiptap/extension-placeholder": "^2.23.0",
+		"@tiptap/pm": "^2.23.0",
+		"@tiptap/starter-kit": "^2.23.0",
+		"idb": "^8.0.3",
 		"svelte-awesome-color-picker": "^4.0.2",
 		"tippy.js": "^6.3.7",
 		"typescript-color-gradient": "^4.0.1"

package-lock.json

@@ -58,19 +58,17 @@
 			To use a custom font in the editor, upload or select one below.
 		</p>
 		<div class="flex flex-col space-y-1">
-			{#key fontLUT}
-				{#each fontLUT as [identifier, _]}
-					<button
-						onclick={() => {
-							editor?.chain().focus().setFont(identifier).run();
-							fontDialog?.close();
-						}}
-						class="flex h-full w-full cursor-pointer items-center space-x-2 rounded-md bg-zinc-900 p-2 hover:bg-black/50">
-						<IconUploadFont />
-						<span class="font-mono text-white">{identifier}</span>
-					</button>
-				{/each}
-			{/key}
+			{#each fontLUT as [identifier, _]}
+				<button
+					onclick={() => {
+						editor?.chain().focus().setFont(identifier).run();
+						fontDialog?.close();
+					}}
+					class="flex h-full w-full cursor-pointer items-center space-x-2 rounded-md bg-zinc-900 p-2 hover:bg-black/50">
+					<IconUploadFont />
+					<span class="font-mono text-white">{identifier}</span>
+				</button>
+			{/each}
 			<button
 				onclick={() => {
 					fontDialog!.close();

package.json

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Modal from "$lib/components/Modal.svelte";
+	import { openDataStore } from "$lib/db";
 	import { fontLUT } from "$lib/tiptap/extensions/fonts";
 	import { fileTypeFromBlob } from "file-type";
 	import IconUpload from "~icons/tabler/file-upload";
@@ -8,6 +9,7 @@
 	let step = $state(1);
 	let identifier = $state("");
 	let fontAlias = $state("");
+	let fontData: Blob
 
 	async function dropHandler(
 		e: DragEvent & {
@@ -53,14 +55,25 @@
 			document.fonts.add(font);
 			fontAlias = fileName;
 			await font.load();
+			fontData = file
 		}
 		step = 2;
 	}
 
-	function addToFontLUT() {
+	async function addToFontLUT() {
 		fontLUT.set(identifier, fontAlias);
 		fontUploadModal.close();
 		step = 1;
+		
+		const db = await openDataStore()
+		await db.put("fonts", {
+			alias: fontAlias,
+			identifier,
+			data: fontData
+		})
+
+		identifier = "";
+		fontAlias = "";
 	}
 </script>
 

src/lib/components/modals/FontPickerModal.svelte

@@ -0,0 +1,14 @@
+import { openDB } from "idb";
+
+export async function openDataStore() {
+    const db = await openDB("dph_data-store", 1, {
+        upgrade(db, _old, _new, _) {
+            db.createObjectStore("fonts", {
+                keyPath: "alias",
+            });
+        },
+    });
+
+    return db;
+}
+

src/lib/components/modals/FontUploadModal.svelte

@@ -1,6 +1,7 @@
 import { Extension } from "@tiptap/core";
+import { SvelteMap } from "svelte/reactivity"
 
-export let fontLUT: Map<string, string> = new Map();
+export let fontLUT: SvelteMap<string, string> = new SvelteMap();
 
 export const FontsExtension = Extension.create({
 	name: "font",
@@ -43,9 +44,7 @@ export const FontsExtension = Extension.create({
 							}
 
 							return {
-								style: `
-									font-family: "${font}";
-								`,
+								style: `font-family: "${font}", monospace;`,
 							};
 						},
 					},

src/lib/db.ts

@@ -61,6 +61,8 @@
 	import UnicodeSelectorModal from "$lib/components/modals/UnicodeSelectorModal.svelte";
 	import ToolbarButton from "$lib/components/ToolbarButton.svelte";
 	import { tooltip } from "$lib/tooltip";
+	import { openDataStore } from "$lib/db";
+	import { fontLUT } from "$lib/tiptap/extensions/fonts";
 
 	let tiptapJSON: JSONContent = $state()!;
 
@@ -120,7 +122,7 @@
 		importDialog?.close();
 	}
 
-	onMount(() => {
+	async function loadData() {
 		if (localStorage.getItem("content")) {
 			tiptapJSON = JSON.parse(localStorage.getItem("content")!);
 		} else {
@@ -135,6 +137,24 @@
 			localStorage.setItem("snapshots", "");
 		}
 
+		const db = await openDataStore();
+		const fontStore = await db.getAll("fonts");
+
+		type FontStoreSchema = {
+			identifier: string;
+			alias: string;
+			data: File;
+		};
+
+		fontStore.forEach(async ({ identifier, alias, data }: FontStoreSchema) => {
+			fontLUT.set(identifier, alias);
+			document.fonts.add(new FontFace(identifier, await data.arrayBuffer()));
+		});
+	}
+
+	onMount(() => {
+		loadData();
+
 		editor = new Editor({
 			element: element,
 			content: tiptapJSON,