Book qol improvements plus bug fixes

package.json

@@ -39,6 +39,7 @@
     },
     "type": "module",
     "dependencies": {
+        "@chenglou/pretext": "^0.0.9",
         "@tiptap/core": "^3.31.3",
         "@tiptap/extension-color": "^3.31.3",
         "@tiptap/extension-font-family": "^3.31.3",

src/lib/components/modals/ExportSelectionModal.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
     import Modal from "$lib/components/Modal.svelte";
     import { Editor, generateHTML } from "@tiptap/core";
-    import Key from "../Key.svelte";
     import MiniRenderer from "../text/MiniRenderer.svelte";
     import { appSettings } from "$lib/settings";
     import { convert } from "$lib/text/nbt/export";
@@ -11,7 +10,6 @@
     import IconCopy from "~icons/tabler/copy";
     import IconCheck from "~icons/tabler/check";
     import CheckBox from "../CheckBox.svelte";
-    import { defaultExtensions } from "$lib/text/utils";
 
     let recentlyCopied: boolean = $state(false);
     let jsonOutput: boolean = $state(false);

src/lib/components/text/BookMiniRenderer.svelte

@@ -1,86 +1,11 @@
 <script lang="ts">
     import { browser } from "$app/environment";
-    import { appSettings } from "$lib/settings";
-    import {
-        AtlasObjectNode,
-        BlockNBTNode,
-        ClickEventMark,
-        EntityNBTNode,
-        FixedTextStyle,
-        FontsExtension,
-        HoverEventMark,
-        KeybindNode,
-        Obfuscation,
-        PlayerObjectNode,
-        ScoreNode,
-        SelectorNode,
-        ShadowColorMark,
-        StorageNBTNode,
-        TranslateNode,
-    } from "$lib/tiptap/extensions/index";
+    import { defaultExtensions } from "$lib/text/defaultExtensions";
     import { generateHTML, type JSONContent } from "@tiptap/core";
-    import Color from "@tiptap/extension-color";
-    import StarterKit from "@tiptap/starter-kit";
-    import { onMount } from "svelte";
 
     let { value }: { value: JSONContent } = $props();
 
-    let html: string = $derived(
-        browser
-            ? generateHTML(value, [
-                  StarterKit.configure({
-                      blockquote: false,
-                      bulletList: false,
-                      codeBlock: false,
-                      hardBreak: false,
-                      heading: false,
-                      horizontalRule: false,
-                      listItem: false,
-                      orderedList: false,
-                      link: false,
-                  }),
-                  Color,
-                  FixedTextStyle,
-                  Obfuscation,
-                  ClickEventMark,
-                  HoverEventMark,
-                  ShadowColorMark,
-                  ScoreNode,
-                  TranslateNode,
-                  BlockNBTNode,
-                  StorageNBTNode,
-                  EntityNBTNode,
-                  KeybindNode,
-                  SelectorNode,
-                  AtlasObjectNode,
-                  PlayerObjectNode,
-                  FontsExtension,
-              ])
-            : "",
-    );
-
-    onMount(() => {
-        appSettings.subscribe(() => {
-            const el = document.querySelectorAll(".tiptap") as NodeListOf<HTMLElement>;
-
-            if ($appSettings.realisticLineHeight == true) {
-                const lineHeight = 0.8 + 0.2 * $appSettings.fontSize;
-                el.forEach((e) => {
-                    e.style.lineHeight = lineHeight.toString() + "rem";
-                });
-            } else {
-                const lineHeight = 1.25 + 0.25 * $appSettings.fontSize;
-                el.forEach((e) => {
-                    e.style.lineHeight = lineHeight.toString() + "rem";
-                });
-            }
-
-            const fontSize = 1 + 0.25 * $appSettings.fontSize;
-            el.forEach((e) => {
-                e.style.fontSize = fontSize.toString() + "rem";
-            });
-        });
-    });
+    let html = $derived(browser ? generateHTML(value, defaultExtensions) : "");
 </script>
 
 {@html html}

src/lib/components/text/MiniRenderer.svelte

@@ -1,20 +1,17 @@
 <script lang="ts">
     import { generateHTML, type JSONContent } from "@tiptap/core";
     import { onMount } from "svelte";
-
     import { browser } from "$app/environment";
     import { appSettings } from "$lib/settings";
-    import { defaultExtensions } from "$lib/text/utils";
+    import { defaultExtensions } from "$lib/text/defaultExtensions";
 
     let { value }: { value: JSONContent } = $props();
 
     let html: string = $state(")");
 
     onMount(() => {
         html = browser
-            ? generateHTML(value, [
-                  ...defaultExtensions
-              ])
+            ? generateHTML(value, defaultExtensions)
             : ""
 
         appSettings.subscribe(() => {

src/lib/fonts.ts

@@ -0,0 +1,31 @@
+
+export const fontIds = [
+    "minecraft:default",
+    "minecraft:illageralt",
+    "minecraft:alt"
+] as const
+
+export type FontId = typeof fontIds[number];
+
+export const fontNames = [
+    "Minecraft",
+    "MinecraftIllager",
+    "MinecraftEnchanting",
+
+    "MinecraftBold",
+    "MinecraftIllagerBold",
+    "MinecraftEnchantingBold",
+] as const;
+
+export type FontName = typeof fontNames[number];
+
+/**
+ *  Converts a font id to it's css font name.
+ * 
+ * @param id minecraft font id
+ * @param isBold 
+ * @returns css font name
+ */
+export function convertFont(id: FontId, isBold: boolean): FontName | undefined {
+    return  fontNames[fontIds.indexOf(id) + (isBold ? fontNames.length / 2 : 0)]
+}

src/lib/text/defaultExtensions.ts

@@ -0,0 +1,50 @@
+import {
+    AtlasObjectNode,
+    BlockNBTNode,
+    ClickEventMark,
+    EntityNBTNode,
+    FixedTextStyle,
+    FontsExtension,
+    HoverEventMark,
+    KeybindNode,
+    Obfuscation,
+    PlayerObjectNode,
+    ScoreNode,
+    SelectorNode,
+    ShadowColorMark,
+    StorageNBTNode,
+    TranslateNode,
+} from "$lib/tiptap/extensions/index";
+import { StarterKit } from "@tiptap/starter-kit";
+import { Color } from "@tiptap/extension-text-style";
+import type { Extensions } from "@tiptap/core";
+
+export const defaultExtensions : Extensions = [
+    StarterKit.configure({
+        blockquote: false,
+        bulletList: false,
+        codeBlock: false,
+        hardBreak: false,
+        heading: false,
+        horizontalRule: false,
+        listItem: false,
+        orderedList: false,
+        link: false,
+    }),
+    Color,
+    FixedTextStyle,
+    Obfuscation,
+    ClickEventMark,
+    HoverEventMark,
+    ShadowColorMark,
+    ScoreNode,
+    TranslateNode,
+    BlockNBTNode,
+    StorageNBTNode,
+    EntityNBTNode,
+    KeybindNode,
+    SelectorNode,
+    AtlasObjectNode,
+    PlayerObjectNode,
+    FontsExtension,
+]

src/lib/text/utils.ts

@@ -1,54 +1,5 @@
 import type { MinecraftText } from "$lib/types";
-import type { Editor, Extensions, JSONContent } from "@tiptap/core";
-import {
-    AtlasObjectNode,
-    BlockNBTNode,
-    ClickEventMark,
-    EntityNBTNode,
-    FixedTextStyle,
-    FontsExtension,
-    HoverEventMark,
-    KeybindNode,
-    Obfuscation,
-    PlayerObjectNode,
-    ScoreNode,
-    SelectorNode,
-    ShadowColorMark,
-    StorageNBTNode,
-    TranslateNode,
-} from "$lib/tiptap/extensions/index";
-import { StarterKit } from "@tiptap/starter-kit";
-import { Color } from "@tiptap/extension-text-style";
-
-export const defaultExtensions : Extensions = [
-    StarterKit.configure({
-        blockquote: false,
-        bulletList: false,
-        codeBlock: false,
-        hardBreak: false,
-        heading: false,
-        horizontalRule: false,
-        listItem: false,
-        orderedList: false,
-        link: false,
-    }),
-    Color,
-    FixedTextStyle,
-    Obfuscation,
-    ClickEventMark,
-    HoverEventMark,
-    ShadowColorMark,
-    ScoreNode,
-    TranslateNode,
-    BlockNBTNode,
-    StorageNBTNode,
-    EntityNBTNode,
-    KeybindNode,
-    SelectorNode,
-    AtlasObjectNode,
-    PlayerObjectNode,
-    FontsExtension,
-]
+import type { Editor, JSONContent } from "@tiptap/core";
 
 export const colourMap = [
     { name: "dark_red", value: "#AA0000", code: "4" },

src/routes/+page.svelte

@@ -18,7 +18,7 @@
     import { fontLUT } from "$lib/tiptap/extensions/fonts";
     import { tooltip } from "$lib/tooltip";
     import { versions, type Version } from "$lib/types";
-    import { defaultExtensions } from "$lib/text/utils";
+    import { defaultExtensions } from "$lib/text/defaultExtensions";
 
     import IconTick from "~icons/tabler/check";
     import IconCopy from "~icons/tabler/copy";
@@ -130,8 +130,8 @@
         }
     });
 
+    let timeoutId: number;
     const debounce = (callback: (...args: any[]) => void, wait: number) => {
-        let timeoutId: number;
         return (...args: any[]) => {
             window.clearTimeout(timeoutId);
             timeoutId = window.setTimeout(() => {