Pull changes from Main

package.json

@@ -14,48 +14,53 @@
         "test:e2e": "playwright install && playwright test"
     },
     "devDependencies": {
-        "@iconify-json/tabler": "^1.2.40",
-        "@playwright/test": "^1.63.0",
-        "@sveltejs/adapter-auto": "^7.0.1",
-        "@sveltejs/adapter-cloudflare": "^7.2.9",
-        "@sveltejs/kit": "^2.70.3",
+        "@iconify-json/tabler": "^1.2.42",
+        "@playwright/test": "^1.64.0",
+        "@sveltejs/adapter-auto": "^8.0.0",
+        "@sveltejs/adapter-cloudflare": "^8.0.0",
+        "@sveltejs/kit": "^3.0.1",
         "@sveltejs/vite-plugin-svelte": "^7.3.1",
         "@tailwindcss/vite": "^4.3.3",
-        "@types/node": "^26.6.2",
+        "@types/node": "^26.6.5",
         "@types/sortablejs": "^1.15.9",
-        "@vitest/coverage-v8": "5.0.2",
-        "@vitest/ui": "^5.0.2",
+        "@vitest/coverage-v8": "5.0.3",
+        "@vitest/ui": "^5.0.3",
         "file-type": "^22.1.1",
-        "oxlint": "^1.85.0",
-        "prettier": "^3.9.9",
+        "oxlint": "^1.87.0",
+        "prettier": "^3.9.10",
         "prettier-plugin-svelte": "^4.1.1",
         "prettier-plugin-tailwindcss": "^0.8.1",
-        "svelte": "^5.57.1",
+        "svelte": "^5.57.2",
         "svelte-check": "^4.7.6",
         "tailwindcss": "^4.3.3",
         "unplugin-icons": "^24.0.0",
-        "vite": "^8.3.1",
-        "vitest": "^5.0.2"
+        "vite": "^8.3.4",
+        "vitest": "^5.0.3"
     },
     "type": "module",
     "dependencies": {
-        "@tiptap/core": "^3.31.3",
-        "@tiptap/extension-color": "^3.31.3",
-        "@tiptap/extension-font-family": "^3.31.3",
-        "@tiptap/extension-placeholder": "^3.31.3",
-        "@tiptap/extension-text-style": "^3.31.3",
-        "@tiptap/pm": "^3.31.3",
-        "@tiptap/starter-kit": "^3.31.3",
-        "idb": "^8.0.3",
+        "@chenglou/pretext": "^0.0.9",
+        "@tiptap/core": "^3.31.4",
+        "@tiptap/extension-color": "^3.31.4",
+        "@tiptap/extension-font-family": "^3.31.4",
+        "@tiptap/extension-placeholder": "^3.31.4",
+        "@tiptap/extension-text-style": "^3.31.4",
+        "@tiptap/pm": "^3.31.4",
+        "@tiptap/starter-kit": "^3.31.4",
+        "idb": "^8.0.4",
         "modern-screenshot": "^4.7.0",
         "sortablejs": "^1.15.7",
         "svelte-awesome-color-picker": "^4.1.3",
-        "svelte-highlight": "^7.22.0",
+        "svelte-highlight": "^7.23.1",
         "tippy.js": "^6.3.7",
-        "typescript": "6",
+        "typescript": "^6.0.3",
         "typescript-color-gradient": "^4.2.0"
     },
     "overrides": {
         "prosemirror-model": "1.25.11"
+    },
+    "imports": {
+        "#lib": "./src/lib/index.js",
+        "#lib/*": "./src/lib/*"
     }
 }

src/app.css

@@ -65,7 +65,7 @@ strong {
 
 .book-img {
     @apply h-115 w-94 px-10 py-18 text-black;
-    background-image: url("$lib/assets/book.png");
+    background-image: url("lib/assets/book.png");
     background-repeat: no-repeat;
     background-size: cover;
     image-rendering: pixelated;
@@ -87,7 +87,7 @@ strong {
 }
 
 .page-preview {
-    background-image: url("$lib/assets/book.png");
+    background-image: url("lib/assets/book.png");
     background-repeat: no-repeat;
     background-size: cover;
     image-rendering: pixelated;

src/lib/components/TopUI.svelte

@@ -67,14 +67,14 @@
     </button>
     {#if page.url.pathname == "/book"}
         <a
-            class="hidden md:flex items-center space-x-[0.45rem] px-[0.6rem] py-2 text-orange-300 hover:bg-white/5"
+            class="hidden items-center space-x-[0.45rem] px-[0.6rem] py-2 text-orange-300 hover:bg-white/5 md:flex"
             href="/">
             <IconBookMode class="text-xs" />
             <span>Book Mode</span>
         </a>
     {:else}
         <a
-            class="hidden md:flex items-center space-x-[0.45rem] px-[0.6rem] py-2 hover:bg-white/5"
+            class="hidden items-center space-x-[0.45rem] px-[0.6rem] py-2 hover:bg-white/5 md:flex"
             href="/book">
             <IconNormalMode class="text-xs" />
             <span>Normal Mode</span>
@@ -91,14 +91,14 @@
         >Datapack Wiki</a>
 </div>
 
-{#await import("$lib/components/modals/topbar/SavedTextsModal.svelte") then modal}
+{#await import("#lib/components/modals/topbar/SavedTextsModal.svelte") then modal}
     <modal.default bind:loadDialog {editor} {snapshots} />
 {/await}
 
-{#await import("$lib/components/modals/topbar/ImportModal.svelte") then modal}
+{#await import("#lib/components/modals/topbar/ImportModal.svelte") then modal}
     <modal.default bind:importDialog bind:pages bind:pageIndex {editor} />
 {/await}
 
-{#await import("$lib/components/modals/topbar/SettingsModal.svelte") then modal}
+{#await import("#lib/components/modals/topbar/SettingsModal.svelte") then modal}
     <modal.default bind:settingsDialog />
 {/await}

src/lib/components/WelcomeScreen.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-    import IconImport from "~icons/tabler/upload";
+    import { welcomeScreenFormat } from "#lib/globals.js";
+    import { onMount } from "svelte";
+    import IconBook from "~icons/tabler/book";
+    import IconCode from "~icons/tabler/code";
     import IconGradient from "~icons/tabler/contrast-2";
     import IconLore from "~icons/tabler/swords";
-    import IconCode from "~icons/tabler/code";
+    import IconImport from "~icons/tabler/upload";
     import IconClose from "~icons/tabler/X";
-    import IconBook from "~icons/tabler/book";
-    import { onMount } from "svelte";
-    import { welcomeScreenFormat } from "$lib/globals";
 
     let { visible = $bindable(false) }: { visible: boolean } = $props();
 
@@ -38,7 +38,8 @@
                 aria-hidden="true"
                 onclick={() => (visible = false)}
                 class="fixed top-0 left-0 z-40 h-screen w-screen bg-transparent"
-                tabindex="-1">
+                tabindex="-1"
+                hidden={!visible}>
             </div>
             <div class="z-50 m-auto w-[95%] py-4 md:w-[50%] 2xl:w-[40%]">
                 <div class="flex items-center rounded-t-lg bg-zinc-900 p-2 text-xl">
@@ -61,7 +62,7 @@
 
                     <div class="mt-2 grid grid-cols-1 gap-2 lg:grid-cols-2">
                         <div
-                            class="lg:col-span-2 mb-1 flex items-center space-x-2 rounded-md border-2 border-yellow-500 bg-green-500/20 p-2 text-zinc-200 shadow-[0_0_10px_rgba(0,0,0,0)] shadow-yellow-500/50">
+                            class="mb-1 flex items-center space-x-2 rounded-md border-2 border-yellow-500 bg-green-500/20 p-2 text-zinc-200 shadow-[0_0_10px_rgba(0,0,0,0)] shadow-yellow-500/50 lg:col-span-2">
                             <IconBook class="w-8" />
                             <div class="my-1 flex w-full flex-col space-y-1">
                                 <span class="text-xs font-bold text-yellow-500 uppercase"
@@ -72,7 +73,7 @@
                                     book details!</span>
                             </div>
                         </div>
-                        
+
                         <div
                             class="flex items-center space-x-2 rounded-md border-2 border-green-500 bg-green-500/20 p-2 text-zinc-200 shadow-xl drop-shadow-lg">
                             <IconImport class="w-8" />

src/lib/components/modals/BookDetailsModal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import Modal from "$lib/components/Modal.svelte";
-    import { tooltip_right } from "$lib/tooltip";
+    import Modal from "#lib/components/Modal.svelte";
+    import { tooltip_right } from "#lib/tooltip.js";
     import IconInfo from "~icons/tabler/info-circle";
     import CheckBox from "../CheckBox.svelte";
 

src/lib/components/modals/ClickEventModal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Modal from "$lib/components/Modal.svelte";
+    import Modal from "#lib/components/Modal.svelte";
 
     let {
         clickEventDialog = $bindable(),

src/lib/components/modals/ColorGradientModal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Modal from "$lib/components/Modal.svelte";
+    import Modal from "#lib/components/Modal.svelte";
     import type { Editor } from "@tiptap/core";
     import Sortable from "sortablejs";
     import ColorPicker from "svelte-awesome-color-picker";

src/lib/components/modals/CustomSourceModal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import Modal from "$lib/components/Modal.svelte";
-    import type { ExternalSources } from "$lib/types";
+    import Modal from "#lib/components/Modal.svelte";
+    import type { ExternalSources } from "#lib/types.js";
 
     import IconScore from "~icons/tabler/123";
     import IconBack from "~icons/tabler/arrow-back-up";
@@ -11,8 +11,8 @@
     import IconKeybind from "~icons/tabler/keyboard";
     import IconTranslate from "~icons/tabler/language";
 
-    import { outputVersion } from "$lib/settings";
-    import { tooltip_right } from "$lib/tooltip";
+    import { outputVersion } from "#lib/settings.js";
+    import { tooltip_right } from "#lib/tooltip.js";
     import CheckBox from "../CheckBox.svelte";
     import MiniEditor from "../text/MiniEditor.svelte";
 

src/lib/components/modals/ExportSelectionModal.svelte

@@ -1,17 +1,15 @@
 <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";
-    import { json, typescript, v } from "svelte-highlight/languages";
+    import Modal from "#lib/components/Modal.svelte";
+    import { appSettings } from "#lib/settings.js";
+    import { convert } from "#lib/text/nbt/export.js";
+    import { Editor } from "@tiptap/core";
     import Highlight from "svelte-highlight";
+    import { json, typescript } from "svelte-highlight/languages";
+    import MiniRenderer from "../text/MiniRenderer.svelte";
 
-    import IconCopy from "~icons/tabler/copy";
     import IconCheck from "~icons/tabler/check";
+    import IconCopy from "~icons/tabler/copy";
     import CheckBox from "../CheckBox.svelte";
-    import { defaultExtensions } from "$lib/text/utils";
 
     let recentlyCopied: boolean = $state(false);
     let jsonOutput: boolean = $state(false);
@@ -52,8 +50,8 @@
             type: "doc",
             content: content,
         };
-        
-        value = content
+
+        value = content;
     }
 </script>
 

src/lib/components/modals/FontPickerModal.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-    import Modal from "$lib/components/Modal.svelte";
+    import Modal from "#lib/components/Modal.svelte";
     import IconFont from "~icons/tabler/function";
     import IconUploadFont from "~icons/tabler/function-filled";
     import IconCustom from "~icons/tabler/file-plus";
     import IconClose from "~icons/tabler/x";
     import type { Editor } from "@tiptap/core";
-    import { fontLUT } from "$lib/tiptap/extensions/fonts";
-    import { openDataStore } from "$lib/db";
+    import { fontLUT } from "#lib/tiptap/extensions/fonts.js";
+    import { openDataStore } from "#lib/db.js";
 
     let {
         editor,

src/lib/components/modals/FontUploadModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-    import Modal from "$lib/components/Modal.svelte";
-    import { openDataStore } from "$lib/db";
-    import { fontLUT } from "$lib/tiptap/extensions/fonts";
+    import Modal from "#lib/components/Modal.svelte";
+    import { openDataStore } from "#lib/db.js";
+    import { fontLUT } from "#lib/tiptap/extensions/fonts.js";
     import { fileTypeFromBlob } from "file-type";
     import IconUpload from "~icons/tabler/file-upload";
 

src/lib/components/modals/KeybindModal.svelte

@@ -1,5 +1,5 @@
 <script>
-    import Modal from "$lib/components/Modal.svelte";
+    import Modal from "#lib/components/Modal.svelte";
     import Key from "../Key.svelte";
 
     let { keybindDialog = $bindable() } = $props();

src/lib/components/modals/UnicodeSelectorModal.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-    import Modal from "$lib/components/Modal.svelte";
+    import Modal from "#lib/components/Modal.svelte";
     import { Editor } from "@tiptap/core";
-    import IconRight from "~icons/tabler/chevron-right"
-    import IconDown from "~icons/tabler/chevron-down"
+    import IconRight from "~icons/tabler/chevron-right";
+    import IconDown from "~icons/tabler/chevron-down";
     import CheckBox from "../CheckBox.svelte";
 
     let sections = $state([
@@ -64,7 +64,7 @@
         {
             name: "Cultural",
             open: false,
-            chars: ["☯","☲","☵","☰","☱","☳","☴","☶","☷"],
+            chars: ["☯", "☲", "☵", "☰", "☱", "☳", "☴", "☶", "☷"],
         },
         {
             name: "Gothic Alphabet",
@@ -78,7 +78,7 @@
         }
     ])
 
-    let show_bold = $state(false)
+    let show_bold = $state(false);
 
     let {
         unicodeSelectorDialog = $bindable(),
@@ -91,36 +91,53 @@
 
 <Modal title="Insert Special Character" bind:this={unicodeSelectorDialog} key="U" flexible>
     <div class="flex flex-col">
-        <p class="text-sm mb-2 text-zinc-400 max-w-239">In Minecraft, these special Unicode characters display in the pixely Minecraft font, and can be used to spice up text without needing a custom font. Source: <a class="link" href="https://gist.github.com/tarkodev/ec3604b007e543d2f9e596f4e1d63d9c" target="_blank">tarkodev on GitHub</a>.</p>
+        <p class="mb-2 max-w-239 text-sm text-zinc-400">
+            In Minecraft, these special Unicode characters display in the pixely Minecraft font, and
+            can be used to spice up text without needing a custom font. Source: <a
+                class="link"
+                href="https://gist.github.com/tarkodev/ec3604b007e543d2f9e596f4e1d63d9c"
+                target="_blank">tarkodev on GitHub</a
+            >.
+        </p>
         <!-- big screens -->
-        <div class="w-239 h-0"></div>
+        <div class="h-0 w-239"></div>
         <div class="space-y-2">
             <div class="flex items-center space-x-2">
-                <div class="mr-3 flex items-center text-sm space-x-2">
+                <div class="mr-3 flex items-center space-x-2 text-sm">
                     <CheckBox bind:value={show_bold} label="bold" />
                     <label for="bold">Show bold symbols</label>
                 </div>
-                <button class="w-fit rounded-md bg-zinc-900 p-1.5 hover:bg-black/50 text-sm" onclick={() => sections.forEach(s => s.open = true)}>Expand All</button>
-                <button class="w-fit rounded-md bg-zinc-900 p-1.5 hover:bg-black/50 text-sm" onclick={() => sections.forEach(s => s.open = false)}>Collapse All</button>
+                <button
+                    class="w-fit rounded-md bg-zinc-900 p-1.5 text-sm hover:bg-black/50"
+                    onclick={() => sections.forEach((s) => (s.open = true))}>Expand All</button>
+                <button
+                    class="w-fit rounded-md bg-zinc-900 p-1.5 text-sm hover:bg-black/50"
+                    onclick={() => sections.forEach((s) => (s.open = false))}>Collapse All</button>
             </div>
             {#each sections as sect}
-            <div class="flex flex-col space-y-1">
-                <button class="flex items-center space-x-2 w-fit" onclick={() => sect.open = !sect.open}>
-                    {#if sect.open}<IconDown />{:else}<IconRight />{/if}
-                    <span class="font-bold">{sect.name}</span>
-                </button>
-                {#if sect.open}
-                <div class="grid grid-flow-dense grid-cols-8 sm:grid-cols-12 md:grid-cols-17 lg:grid-cols-20 xl:grid-cols-24 gap-1 w-fit">
-                    {#each sect.chars as char}
-                        <button
-                            class="grid place-items-center m-auto {show_bold ? "font-minecraft-bold" : "font-minecraft"} aspect-square h-9 w-9 rounded-md bg-zinc-900 text-xl hover:text-white text-zinc-300"
-                            onclick={() => editor.chain().focus().insertContent(char!).run()}>
-                            <span class="translate-x-px">{char}</span>
-                        </button>
-                    {/each}
+                <div class="flex flex-col space-y-1">
+                    <button
+                        class="flex w-fit items-center space-x-2"
+                        onclick={() => (sect.open = !sect.open)}>
+                        {#if sect.open}<IconDown />{:else}<IconRight />{/if}
+                        <span class="font-bold">{sect.name}</span>
+                    </button>
+                    {#if sect.open}
+                        <div
+                            class="grid w-fit grid-flow-dense grid-cols-8 gap-1 sm:grid-cols-12 md:grid-cols-17 lg:grid-cols-20 xl:grid-cols-24">
+                            {#each sect.chars as char}
+                                <button
+                                    class="m-auto grid place-items-center {show_bold
+                                        ? 'font-minecraft-bold'
+                                        : 'font-minecraft'} aspect-square h-9 w-9 rounded-md bg-zinc-900 text-xl text-zinc-300 hover:text-white"
+                                    onclick={() =>
+                                        editor.chain().focus().insertContent(char!).run()}>
+                                    <span class="translate-x-px">{char}</span>
+                                </button>
+                            {/each}
+                        </div>
+                    {/if}
                 </div>
-                {/if}
-            </div>
             {/each}
         </div>
     </div>