version selector now works as expected

Silabear · Silabear · commit 218ba9a22af2 · 2025-09-06T12:45:59.000+01:00
diff --git a/src/lib/components/modals/CustomSourceModal.svelte b/src/lib/components/modals/CustomSourceModal.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
 	import Modal from "$lib/components/Modal.svelte";
 	import type { ExternalSources } from "$lib/types";
+
 	import IconScore from "~icons/tabler/123";
 	import IconSelector from "~icons/tabler/at";
 	import IconNBT from "~icons/tabler/braces";
 	import IconKeybind from "~icons/tabler/keyboard";
 	import IconTranslate from "~icons/tabler/language";
+	import IconObject from "~icons/tabler/box";
+
 	import CheckBox from "../CheckBox.svelte";
 	import MiniEditor from "../text/MiniEditor.svelte";
 	import Combobox from "../Combobox.svelte";
+	import { outputVersion } from "$lib/stores";
 
 	let {
 		customDialog = $bindable(),
@@ -106,14 +110,16 @@
 				<IconKeybind class="text-2xl" />
 				<span>Keybind</span>
 			</button>
+			{#if $outputVersion.index >= 2}
 			<button
 				class="flex h-full w-full flex-col items-center space-y-2 rounded-md bg-zinc-900 p-3 hover:bg-black/50"
 				onclick={() => {
 					customType = "object";
 				}}>
-				<IconKeybind class="text-2xl" />
-				<span>Object (1.22+)</span>
+				<IconObject class="text-2xl" />
+				<span>Object</span>
 			</button>
+			{/if}
 		</div>
 	{:else}
 		<select bind:value={customType} class="rounded-md bg-zinc-900 p-2">
@@ -122,7 +128,7 @@
 			<option value="nbt">NBT Value</option>
 			<option value="selector">Selector</option>
 			<option value="keybind">Keybind</option>
-			<option value="object">Object (1.22+)</option>
+			<option value="object">Object</option>
 		</select>
 	{/if}
 
diff --git a/src/lib/components/modals/ExportModal.svelte b/src/lib/components/modals/ExportModal.svelte
@@ -4,9 +4,9 @@
 	import { convert, translateJSON } from "$lib/text/nbt_or_json";
 	import IconCopy from "~icons/tabler/copy";
 	import CheckBox from "../CheckBox.svelte";
+	import { outputVersion } from "$lib/stores";
 	let {
 		outputDialog = $bindable(),
-		outputVersion = $bindable(),
 		editor,
 		recentlyCopied,
 		shouldOptimise = true,
@@ -16,21 +16,16 @@
 </script>
 
 <Modal title="More output formats" bind:this={outputDialog} big key="E">
-	<p>Select a Minecraft version:</p>
-	<select bind:value={outputVersion} class="w-fit rounded-md bg-zinc-900 p-2">
-		<option value="new">1.21.5+</option>
-		<option value="old">Before 1.21.5</option>
-	</select>
 	<div class="flex w-full flex-col">
-		{#if outputVersion == "new"}
+		{#if $outputVersion.index > 0}
 			<div class="mt-1 flex items-center space-x-2">
 				<CheckBox bind:value={exportAsJSON} label="json" />
 				<span>Toggle JSON mode (for use in json files)</span>
 			</div>
 		{/if}
 
 		<p class="mt-2">
-			As {outputVersion == "new" ? " " : "JSON "}text components:
+			As {$outputVersion.index > 0 ? " " : "JSON "}text components:
 		</p>
 		<div class="flex items-start space-x-3 rounded-lg bg-zinc-950 p-3">
 			<button
@@ -40,7 +35,6 @@
 						convert(
 							editor.getJSON(),
 							"standard",
-							outputVersion,
 							shouldOptimise,
 							exportAsJSON,
 						),
@@ -55,7 +49,6 @@
 					? convert(
 							editor.getJSON(),
 							"standard",
-							outputVersion,
 							shouldOptimise,
 							exportAsJSON,
 						)
@@ -69,7 +62,7 @@
 				class="rounded-md p-1 text-lg font-medium hover:bg-zinc-900 active:bg-white/10"
 				onclick={() => {
 					navigator.clipboard.writeText(
-						`[lore=${convert(editor.getJSON(), "item_lore", outputVersion, shouldOptimise, exportAsJSON)}]`,
+						`[lore=${convert(editor.getJSON(), "item_lore", shouldOptimise, exportAsJSON)}]`,
 					);
 					recentlyCopied = true;
 					setTimeout(() => (recentlyCopied = false), 2000);
@@ -81,7 +74,6 @@
 					? convert(
 							editor.getJSON(),
 							"item_lore",
-							outputVersion,
 							shouldOptimise,
 							exportAsJSON,
 						)
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
@@ -1,7 +1,4 @@
 import { writable } from "svelte/store";
+import { versions } from "./types";
 
-export const outputVersion = writable({
-    friendly: "1.21.9+", 
-    description: "'object' type added, allowing you to use non-character sprites",
-    index: 2
-})
+export const outputVersion = writable(versions[versions.length - 1])
diff --git a/src/lib/text/nbt_or_json.ts b/src/lib/text/nbt_or_json.ts
@@ -46,6 +46,8 @@ export function addTypeSpecificValues(
 	c: JSONContent,
 	includeInteractivity = true,
 ) {
+	exportVersion = get(outputVersion)
+
 	switch (c.type) {
 		case "text":
 			current.text = unescapeUnicode(c.text!);
@@ -78,8 +80,15 @@ export function addTypeSpecificValues(
 			current.keybind = c.attrs?.key;
 			break;
 		case "object":
-			current.atlas = c.attrs?.atlas;
-			current.sprite = c.attrs?.sprite;
+			if (exportVersion.index >= 2) {
+				current.atlas = c.attrs?.atlas;
+				current.sprite = c.attrs?.sprite;
+
+				current.bold = undefined;
+				current.italic = undefined;
+			} else {
+				current.text = ""
+			}
 			break;
 		case "selector":
 			current.selector = c.attrs?.selector;
@@ -325,7 +334,9 @@ export function convert(
 	optimise: boolean,
 	force_json: boolean = false,
 ): string {
+	exportVersion = get(outputVersion)
 	let out = translateJSON(jsonContent, { exportType, optimise });
+	console.log(exportVersion)
 	if (exportVersion.index >= 1 && !force_json) {
 		// only remove strings
 		out = out.replace(/(?<=[{,]\s*)"[^"]*"\s*:/g, (match) =>
diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -15,7 +15,7 @@ export const versions = [
 		index: 1
 	},
 	{
-		friendly: "1.21.9+", 
+		friendly: "1.21.9*", 
 		description: "'object' type added, allowing you to use non-character sprites",
 		index: 2
 	},
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -325,6 +325,51 @@
 			editor!.commands.unsetAllMarks();
 		}
 	}
+
+	function removeAllNodes(editor: Editor | undefined, type: string) {
+		if (!editor) { return; }
+		editor.commands.command(({ tr, state }) => {
+			const nodeType = state.schema.nodes[type];
+			if (!nodeType) {
+				console.warn(`Node type "${type}" not found in schema.`);
+				return false;
+			}
+
+			state.doc.descendants((node, pos) => {
+			if (node.type === nodeType) {
+				tr.delete(pos, pos + node.nodeSize);
+			}
+				return true;
+			});
+
+			editor.view.dispatch(tr);
+			return true;
+		});
+	}
+
+	let versionPopupConfirmationVisible = $state(false);
+	let temporaryVersionConfirmation: Version | undefined = $state()
+
+	function changeOuptutVersion(version: Version | undefined, confirm = false) {
+		if (!version) { return; }
+
+		if ($outputVersion.index > version.index && confirm == false) {
+			versionPopupConfirmationVisible = true;
+			temporaryVersionConfirmation = version
+			return;
+		}
+
+		outputVersion.set(version)
+		versionPopup = false;
+		versionPopupConfirmationVisible = false;
+		temporaryVersionConfirmation = undefined;
+
+		if (version.index < 2) { // remove object keys
+			removeAllNodes(editor, "object")
+		}
+
+		tiptapJSON = editor!.getJSON();
+	}
 </script>
 
 <svelte:window onkeydown={clearMarksHandler} />
@@ -543,49 +588,50 @@
 			</div>
 			{#if doesContentExist}
 				<div class="mt-2 flex items-center space-x-2 select-none">
-					<!-- <p class="font-lexend nomob text-xs text-white/60">
-						{editor
-							? convert(tiptapJSON!, "standard", outputVersion, shouldOptimise)
-									.length
-							: 0} characters
-					</p>
-					<p class="font-lexend nomob text-xs text-white/60">
-						{getTextComponentCount()} components
-					</p>
-
-					<p class="font-lexend nomob text-xs text-white/60">•</p> -->
-
 					<p class="font-lexend text-xs text-white/60">
 						click to change output settings:
 					</p>
 
 					<div class="relative inline-block">
 						{#if versionPopup}
-						<div class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 bg-zinc-900 w-[400px] shadow-md shadow-zinc-950 px-2 py-2 rounded-md z-10 flex flex-col space-y-1">
-							<div class="flex items-center ml-[0.3rem]">
-								<span class="w-1/4 text-sm">version</span>
-								<span class="w-3/4 text-sm">description</span>
+						<div class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 bg-zinc-900 w-[400px] shadow-md shadow-zinc-950 rounded-md z-10 flex flex-col space-y-1">
+							{#if versionPopupConfirmationVisible}
+							<div class="absolute w-full h-full bg-zinc-900 rounded-md px-4 py-4 backdrop-blur-md flex flex-col items-center">
+								<div class="m-auto flex flex-col">
+									<b>Warning:</b> 
+									<span>Changing to an earlier version could remove some elements of your text that are unsupported in this version.</span>
+									<div class="flex space-x-2 mt-2">
+										<button class="bg-zinc-800 px-2 py-1 rounded-md hover:bg-zinc-700" onclick={() => changeOuptutVersion(temporaryVersionConfirmation, true)}>Change version</button>
+										<button class="bg-zinc-800 px-2 py-1 rounded-md hover:bg-zinc-700" onclick={() => {
+											versionPopupConfirmationVisible = false;
+											temporaryVersionConfirmation = undefined;
+										}}>Cancel</button>
+									</div>
+								</div>
+							</div>
+							{/if}
+							<div class="px-2 py-2 space-y-1">
+								<div class="flex items-center ml-[0.3rem]">
+									<span class="w-1/4 text-sm">version</span>
+									<span class="w-3/4 text-sm">description</span>
+								</div>
+								{#each versions as v}
+								<button 
+								class="rounded-md bg-zinc-800 p-2 select-none hover:bg-zinc-700 text-left flex items-center w-full"
+								onclick={() => changeOuptutVersion(v)}>
+									<b class="w-1/4">{v.friendly}</b>
+									<span class="w-3/4 text-xs">{v.description}</span>
+								</button>
+								{/each}
+								<span class="ml-[0.3rem] text-xs text-zinc-400">* unreleased minecraft version</span>
 							</div>
-							{#each versions as v}
-							<button 
-							class="rounded-md bg-zinc-800 p-2 select-none hover:bg-zinc-700 text-left flex items-center w-full"
-							onclick={() => {
-								$outputVersion = v;
-								versionPopup = false;
-							}}>
-								<b class="w-1/4">{v.friendly}</b>
-								<span class="w-3/4 text-xs">{v.description}</span>
-							</button>
-							{/each}
 						</div>
 						{/if}
 
 						<button
 							class="ml-1 rounded-md bg-zinc-800 px-1 font-mono select-none hover:bg-zinc-700"
 							aria-label="Click to toggle the output version."
-							onclick={() => {
-								versionPopup = !versionPopup;
-						}}>{$outputVersion.friendly}</button>
+							onclick={() => {versionPopup = !versionPopup}}>{$outputVersion.friendly}</button>
 					</div>
 					
 					<button
@@ -725,13 +771,12 @@
 		</div>
 	</Modal>
 
-	<!-- {#await import("$lib/components/modals/ExportModal.svelte") then modal}
+	{#await import("$lib/components/modals/ExportModal.svelte") then modal}
 		<modal.default
 			bind:outputDialog
-			bind:outputVersion
 			{editor}
 			{recentlyCopied} />
-	{/await} -->
+	{/await}
 
 	<Modal title="Import from NBT" bind:this={importDialog} key="I">
 		<div class="flex w-full flex-col space-y-2">

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ export const versions = [`
`15`	`15`	`index: 1`
`16`	`16`	`},`
`17`	`17`	`{`
`18`		`- friendly: "1.21.9+",`
	`18`	`+ friendly: "1.21.9*",`
`19`	`19`	`description: "'object' type added, allowing you to use non-character sprites",`
`20`	`20`	`index: 2`
`21`	`21`	`},`