From 7f34e89d4bd995cfd5016518e0d240f1348baef9 Mon Sep 17 00:00:00 2001
From: Silabear <56885288+Silabear@users.noreply.github.com>
Date: Thu, 1 Oct 2026 23:28:07 +0100
Subject: [PATCH 1/3] fix: export selection modal

---
 .../modals/ExportSelectionModal.svelte        | 13 +++-
 src/lib/components/text/MiniRenderer.svelte   | 68 ++++-------------
 src/lib/text/utils.ts                         | 51 ++++++++++++-
 src/routes/+page.svelte                       | 63 +++-------------
 src/routes/book/+page.svelte                  | 74 ++++---------------
 5 files changed, 97 insertions(+), 172 deletions(-)

diff --git a/src/lib/components/modals/ExportSelectionModal.svelte b/src/lib/components/modals/ExportSelectionModal.svelte
index ef63713..1a42ae3 100644
--- a/src/lib/components/modals/ExportSelectionModal.svelte
+++ b/src/lib/components/modals/ExportSelectionModal.svelte
@@ -1,16 +1,17 @@
 <script lang="ts">
     import Modal from "$lib/components/Modal.svelte";
-    import { Editor } from "@tiptap/core";
+    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";
-    import { json, typescript } from "svelte-highlight/languages";
+    import { json, typescript, v } from "svelte-highlight/languages";
     import Highlight from "svelte-highlight";
 
     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);
@@ -47,11 +48,15 @@
             content.pop();
         }
 
-        // Format in document
-        value = {
+        content = {
             type: "doc",
             content: content,
         };
+
+        console.log(content)
+        // console.log(generateHTML(value, defaultExtensions))
+        
+        value = content
     }
 </script>
 
diff --git a/src/lib/components/text/MiniRenderer.svelte b/src/lib/components/text/MiniRenderer.svelte
index cb9913e..62cc740 100644
--- a/src/lib/components/text/MiniRenderer.svelte
+++ b/src/lib/components/text/MiniRenderer.svelte
@@ -1,65 +1,23 @@
 <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 { generateHTML, type JSONContent } from "@tiptap/core";
-    import Color from "@tiptap/extension-color";
-    import StarterKit from "@tiptap/starter-kit";
     import { onMount } from "svelte";
+    
+    import { browser } from "$app/environment";
+    import { appSettings } from "$lib/settings";
+    import { defaultExtensions } from "$lib/text/utils";
 
     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,
-              ])
-            : "",
-    );
+    let html: string = $state(")");
 
     onMount(() => {
+        html = browser
+            ? generateHTML(value, [
+                  ...defaultExtensions
+              ])
+            : ""
+        console.log(value)
+        // console.log(html)
         appSettings.subscribe(() => {
             const el = document.querySelectorAll(".tiptap") as NodeListOf<HTMLElement>;
 
@@ -83,4 +41,6 @@
     });
 </script>
 
+{#if html}
 <div class="tiptap tiptap-minirenderer">{@html html}</div>
+{/if}
\ No newline at end of file
diff --git a/src/lib/text/utils.ts b/src/lib/text/utils.ts
index 68f4762..641f0ff 100644
--- a/src/lib/text/utils.ts
+++ b/src/lib/text/utils.ts
@@ -1,5 +1,54 @@
 import type { MinecraftText } from "$lib/types";
-import type { Editor, JSONContent } from "@tiptap/core";
+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,
+]
 
 export const colourMap = [
     { name: "dark_red", value: "#AA0000", code: "4" },
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 79c82e3..4ccd27b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,8 +1,13 @@
 <script lang="ts">
-    import WelcomeScreen from "../lib/components/WelcomeScreen.svelte";
-
     import { page } from "$app/state";
+    import { Editor, type JSONContent } from "@tiptap/core";
+    import Placeholder from "@tiptap/extension-placeholder";
+    import { onDestroy, onMount } from "svelte";
+    import { Highlight } from "svelte-highlight";
+    import typescript from "svelte-highlight/languages/typescript";
+
     import Modal from "$lib/components/Modal.svelte";
+    import WelcomeScreen from "../lib/components/WelcomeScreen.svelte";
     import ControlBar from "$lib/components/toolbar/Toolbar.svelte";
     import TopUI from "$lib/components/TopUI.svelte";
     import { openDataStore } from "$lib/db";
@@ -11,32 +16,10 @@
     import { convert } from "$lib/text/nbt/export";
     import { ExportButtonExtension } from "$lib/tiptap/extensions/ExportButton";
     import { fontLUT } from "$lib/tiptap/extensions/fonts";
-    import {
-        AtlasObjectNode,
-        BlockNBTNode,
-        ClickEventMark,
-        EntityNBTNode,
-        FixedTextStyle,
-        FontsExtension,
-        HoverEventMark,
-        KeybindNode,
-        Obfuscation,
-        PlayerObjectNode,
-        ScoreNode,
-        SelectorNode,
-        ShadowColorMark,
-        StorageNBTNode,
-        TranslateNode,
-    } from "$lib/tiptap/extensions/index";
     import { tooltip } from "$lib/tooltip";
     import { versions, type Version } from "$lib/types";
-    import { Editor, type JSONContent } from "@tiptap/core";
-    import Color from "@tiptap/extension-color";
-    import Placeholder from "@tiptap/extension-placeholder";
-    import StarterKit from "@tiptap/starter-kit";
-    import { onDestroy, onMount } from "svelte";
-    import { Highlight } from "svelte-highlight";
-    import typescript from "svelte-highlight/languages/typescript";
+    import { defaultExtensions } from "$lib/text/utils";
+
     import IconTick from "~icons/tabler/check";
     import IconCopy from "~icons/tabler/copy";
 
@@ -99,33 +82,7 @@
                 },
             },
             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,
+                ...defaultExtensions,
                 Placeholder.configure({
                     placeholder:
                         "Write text here, style it with the options above, and the output text components will appear at the bottom. You can also import text components with the Import button above!",
diff --git a/src/routes/book/+page.svelte b/src/routes/book/+page.svelte
index c09c514..dfccf7d 100644
--- a/src/routes/book/+page.svelte
+++ b/src/routes/book/+page.svelte
@@ -1,5 +1,11 @@
 <script lang="ts">
     import { page } from "$app/state";
+    import { Editor, type JSONContent } from "@tiptap/core";
+    import Placeholder from "@tiptap/extension-placeholder";
+    import { onDestroy, onMount } from "svelte";
+    import { Highlight } from "svelte-highlight";
+    import typescript from "svelte-highlight/languages/typescript";
+    
     import Modal from "$lib/components/Modal.svelte";
     import BookMiniRenderer from "$lib/components/text/BookMiniRenderer.svelte";
     import ControlBar from "$lib/components/toolbar/Toolbar.svelte";
@@ -9,34 +15,9 @@
     import { appSettings } from "$lib/settings";
     import { outputVersion } from "$lib/settings";
     import { convert } from "$lib/text/nbt/export";
-    import { ExportButtonExtension } from "$lib/tiptap/extensions/ExportButton";
     import { fontLUT } from "$lib/tiptap/extensions/fonts";
-    import {
-        AtlasObjectNode,
-        BlockNBTNode,
-        ClickEventMark,
-        EntityNBTNode,
-        FixedTextStyle,
-        FontsExtension,
-        HoverEventMark,
-        KeybindNode,
-        Obfuscation,
-        PlayerObjectNode,
-        ScoreNode,
-        SelectorNode,
-        ShadowColorMark,
-        StorageNBTNode,
-        TranslateNode,
-    } from "$lib/tiptap/extensions/index";
     import { tooltip } from "$lib/tooltip";
     import { versions, type Version } from "$lib/types";
-    import { Editor, type JSONContent } from "@tiptap/core";
-    import Color from "@tiptap/extension-color";
-    import Placeholder from "@tiptap/extension-placeholder";
-    import StarterKit from "@tiptap/starter-kit";
-    import { onDestroy, onMount } from "svelte";
-    import { Highlight } from "svelte-highlight";
-    import typescript from "svelte-highlight/languages/typescript";
 
     import IconTick from "~icons/tabler/check";
     import IconCopy from "~icons/tabler/copy";
@@ -45,6 +26,7 @@
     import IconSettings from "~icons/tabler/settings";
     import IconUp from "~icons/tabler/chevron-up";
     import IconDown from "~icons/tabler/chevron-down";
+    import { defaultExtensions } from "$lib/text/utils";
 
     let currentTiptapJSON: JSONContent = $state()!;
     let pageJSONs: JSONContent[] = $state([{ type: "doc", content: [] }]);
@@ -70,6 +52,8 @@
     let hideDetails = $state(false);
     let generation = $state(0);
 
+    let bookPagesThumbnails: HTMLDivElement[] = []
+
     async function loadData() {
         if (localStorage.getItem("book_content")) {
             pageJSONs = JSON.parse(localStorage.getItem("book_content")!);
@@ -114,42 +98,11 @@
                 },
             },
             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,
+                ...defaultExtensions,
                 Placeholder.configure({
                     placeholder:
                         "Write text here, style it with the options above, and the output text components will appear at the bottom. You can also import text components with the Import button above!",
-                }),
-                ExportButtonExtension.configure({
-                    onClick: () => {
-                        exportSelectionDialog.open();
-                    },
-                }),
+                })
             ],
             onTransaction: ({ editor: newEditor }) => {
                 editor = undefined;
@@ -260,7 +213,8 @@
             id="page-box"
             class="h-[calc(100vh-11rem )] flex w-80 flex-col items-center overflow-y-scroll p-2">
             <div class="flex w-full items-center space-x-2 pl-2">
-                <span class="grow font-bold">Book Pages</span>
+                <span class="grow font-bold">Pages</span>
+                <input class="w-16 px-1 bg-zinc-950 rounded-sm font-mono placeholder:text-zinc-700 placeholder:text-xs text-sm" placeholder="go to #"/>
                 <button
                     {@attach tooltip}
                     aria-label="Book Details"
@@ -269,7 +223,7 @@
             </div>
             {#key pageJSONs}
                 {#each pageJSONs as page, index}
-                    <div class="w-55 p-2">
+                    <div class="w-55 p-2" bind:this={bookPagesThumbnails[index]}>
                         {#if $appSettings.bookPreviewMode === "normal"}
                             <div
                                 role="button"

From a25c5007388a89874b0dbfcb1645f235b925ea66 Mon Sep 17 00:00:00 2001
From: Silabear <56885288+Silabear@users.noreply.github.com>
Date: Thu, 1 Oct 2026 23:29:47 +0100
Subject: [PATCH 2/3] remove debug

---
 src/lib/components/modals/ExportSelectionModal.svelte | 3 ---
 src/lib/components/text/MiniRenderer.svelte           | 5 ++---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/modals/ExportSelectionModal.svelte b/src/lib/components/modals/ExportSelectionModal.svelte
index 1a42ae3..9f87512 100644
--- a/src/lib/components/modals/ExportSelectionModal.svelte
+++ b/src/lib/components/modals/ExportSelectionModal.svelte
@@ -52,9 +52,6 @@
             type: "doc",
             content: content,
         };
-
-        console.log(content)
-        // console.log(generateHTML(value, defaultExtensions))
         
         value = content
     }
diff --git a/src/lib/components/text/MiniRenderer.svelte b/src/lib/components/text/MiniRenderer.svelte
index 62cc740..e3c0775 100644
--- a/src/lib/components/text/MiniRenderer.svelte
+++ b/src/lib/components/text/MiniRenderer.svelte
@@ -1,7 +1,7 @@
 <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";
@@ -16,8 +16,7 @@
                   ...defaultExtensions
               ])
             : ""
-        console.log(value)
-        // console.log(html)
+        
         appSettings.subscribe(() => {
             const el = document.querySelectorAll(".tiptap") as NodeListOf<HTMLElement>;
 

From 7f2aea076c4bf4065869acca9f2c671857cd70dc Mon Sep 17 00:00:00 2001
From: Silabear <56885288+Silabear@users.noreply.github.com>
Date: Thu, 1 Oct 2026 23:49:34 +0100
Subject: [PATCH 3/3] undo potential change

---
 src/routes/book/+page.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/book/+page.svelte b/src/routes/book/+page.svelte
index dfccf7d..5478c57 100644
--- a/src/routes/book/+page.svelte
+++ b/src/routes/book/+page.svelte
@@ -214,7 +214,6 @@
             class="h-[calc(100vh-11rem )] flex w-80 flex-col items-center overflow-y-scroll p-2">
             <div class="flex w-full items-center space-x-2 pl-2">
                 <span class="grow font-bold">Pages</span>
-                <input class="w-16 px-1 bg-zinc-950 rounded-sm font-mono placeholder:text-zinc-700 placeholder:text-xs text-sm" placeholder="go to #"/>
                 <button
                     {@attach tooltip}
                     aria-label="Book Details"