Bugfix: Export selection now works

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,12 @@
             content.pop();
         }
 
-        // Format in document
-        value = {
+        content = {
             type: "doc",
             content: content,
         };
+
+        value = content
     }
 </script>
 

src/lib/components/text/MiniRenderer.svelte

@@ -1,65 +1,22 @@
 <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
+              ])
+            : ""
+
         appSettings.subscribe(() => {
             const el = document.querySelectorAll(".tiptap") as NodeListOf<HTMLElement>;
 
@@ -83,4 +40,6 @@
     });
 </script>
 
+{#if html}
 <div class="tiptap tiptap-minirenderer">{@html html}</div>
+{/if}

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" },

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!",

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,7 @@
             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>
                 <button
                     {@attach tooltip}
                     aria-label="Book Details"
@@ -269,7 +222,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"