half finished bug fixes

Author: HoodieRocks

src/lib/components/text/MiniEditor.svelte

@@ -19,11 +19,9 @@
 	} from "$lib/text/general";
 	import { addTypeSpecificValues } from "$lib/text/nbt_or_json";
 	import {
-		ClickEventMark,
 		FontsExtension,
-		HoverEventMark,
 		Obfuscation,
-		ShadowColorMark,
+		ShadowColorMark
 	} from "$lib/tiptap/extensions/index";
 	import TextStyleButtons from "./TextStyleButtons.svelte";
 
@@ -45,8 +43,6 @@
 				Color,
 				TextStyle,
 				Obfuscation,
-				ClickEventMark,
-				HoverEventMark,
 				ShadowColorMark,
 				FontsExtension,
 				Placeholder.configure({

src/lib/text/nbt.ts

@@ -30,7 +30,12 @@ export function snbtToDocument(raw: StringyMCText[]): JSONContent {
 export function convertToTextOrEmpty(raw: string): StringyMCText[] {
 	if (raw === "") return [];
 
+	// convert unquoted keys to quoted keys and unquoted string values to quoted string values
 	raw = raw.replace(/([,{]\s*)([a-zA-Z_$][a-zA-Z0-9_$]*)\s*:/g, '$1"$2":');
+	raw = raw.replace(
+		/(?<=[{,]\s*"[a-zA-Z_$][a-zA-Z0-9_$]*"\s*:\s*)([a-zA-Z_$][a-zA-Z0-9_$]*)/g,
+		'"$1"',
+	);
 
 	if (raw.match(/^"\w*"/)) {
 		return [raw.replace(/"/g, "")];
@@ -47,12 +52,12 @@ export function convertToTextOrEmpty(raw: string): StringyMCText[] {
 	} catch (err) {
 		return [
 			"",
-			{color:"red",text:"An error occurred while parsing the SNBT."},
-			{color:"yellow",text:" Please send the "},
-			{color:"gold",text:"following error message"},
-			{color:"yellow",text:" to Datapack Hub staff:\n"},
-			{color:"white",bold:true,text:"Error: "},
-			{color:"gray",text:err!.toString()}
+			{ color: "red", text: "An error occurred while parsing the SNBT." },
+			{ color: "yellow", text: " Please send the " },
+			{ color: "gold", text: "following error message" },
+			{ color: "yellow", text: " to Datapack Hub staff:\n" },
+			{ color: "white", bold: true, text: "Error: " },
+			{ color: "gray", text: err!.toString() },
 		];
 	}
 
@@ -84,53 +89,44 @@ function processTextComponent(text: StringyMCText, baseDocument: JSONContent) {
 	finalText = applyStyling(text, finalText);
 
 	let paragraphContent = baseDocument.content?.at(-1)?.content;
-
-	if (!paragraphContent) {
-		baseDocument.content!.at(-1)!.content = [];
-		paragraphContent = baseDocument.content!.at(-1)!.content;
-	}
-
 	paragraphContent!.push(finalText);
 
 	// Extra property
 	if (text.extra) {
 		text.extra!.forEach((txt) => {
-			if (typeof txt == "object") {
-				Object.assign(txt, {
-					bold: txt.bold ?? text.bold,
-					italic: txt.italic ?? text.italic,
-					underlined: txt.underlined ?? text.underlined,
-					obfuscated: txt.obfuscated ?? text.obfuscated,
-					strikethrough: txt.strikethrough ?? text.strikethrough,
-					color: txt.color ?? text.color,
-					shadow_color: txt.shadow_color ?? text.shadow_color,
-					click_event: txt.click_event ?? text.click_event,
-					clickEvent: txt.clickEvent ?? text.clickEvent,
-					hover_event: txt.hover_event ?? text.hover_event,
-					hoverEvent: txt.hoverEvent ?? text.hoverEvent,
-					font: txt.font ?? text.font,
-				});
-				processTextComponent(txt, baseDocument);
-			} else {
-				let newComponent = {
-					text: txt,
-				};
-				Object.assign(newComponent, {
-					bold: text.bold,
-					italic: text.italic,
-					underlined: text.underlined,
-					obfuscated: text.obfuscated,
-					strikethrough: text.strikethrough,
-					color: text.color,
-					shadow_color: text.shadow_color,
-					click_event: text.click_event,
-					clickEvent: text.clickEvent,
-					hover_event: text.hover_event,
-					hoverEvent: text.hoverEvent,
-					font: text.font,
-				});
-				processTextComponent(newComponent, baseDocument);
-			}
+			const newText = typeof txt === "object" ? { ...txt } : { text: txt };
+			// Object.assign(newText, {
+			// 	bold: text.bold,
+			// 	italic: text.italic,
+			// 	underlined: text.underlined,
+			// 	obfuscated: text.obfuscated,
+			// 	strikethrough: text.strikethrough,
+			// 	color: text.color,
+			// 	shadow_color: text.shadow_color,
+			// 	click_event: text.click_event,
+			// 	clickEvent: text.clickEvent,
+			// 	hover_event: text.hover_event,
+			// 	hoverEvent: text.hoverEvent,
+			// 	font: text.font,
+			// });
+
+			Object.assign(newText, {
+				bold: text.bold ?? newText.bold,
+				italic: text.italic ?? newText.italic,
+				underlined: text.underlined ?? newText.underlined,
+				obfuscated: text.obfuscated ?? newText.obfuscated,
+				strikethrough: text.strikethrough ?? newText.strikethrough,
+				color: text.color ?? newText.color,
+				shadow_color: text.shadow_color ?? newText.shadow_color,
+				click_event: text.click_event ?? newText.click_event,
+				clickEvent: text.clickEvent ?? newText.clickEvent,
+				hover_event: text.hover_event ?? newText.hover_event,
+				hoverEvent: text.hoverEvent ?? newText.hoverEvent,
+				font: text.font ?? newText.font,
+			});
+
+			console.log(newText);
+			processTextComponent(newText, baseDocument);
 		});
 	}
 }
@@ -244,9 +240,9 @@ function applyStyling(
 	}
 
 	if (text.font) {
-		if (finalText.marks.some((mark) => mark.type === "textStyle")) {
-			finalText.marks.find((mark) => mark.type === "textStyle")!.attrs!.font =
-				text.font;
+		const textStyle = finalText.marks.find((mark) => mark.type === "textStyle");
+		if (textStyle) {
+			textStyle.attrs!.font = text.font;
 		} else {
 			finalText.marks?.push({
 				type: "textStyle",

src/lib/text/nbt_or_json.ts

@@ -301,7 +301,8 @@ export function optimise(arr: StringyMCText[], lore = false): StringyMCText[] {
 						}
 					} else {
 						if (extras[0]) {
-							merged = { ...sharedAll, ...first, extra: extras };
+							if (!merged?.extra) merged = { ...sharedAll, ...first, extra: extras };
+							else merged.extra = [...merged.extra, ...extras];
 						} else {
 							merged = { ...sharedAll, ...first };
 						}

src/lib/tiptap/extensions/marks/HoverEventMark.ts

@@ -55,7 +55,7 @@ export const HoverEventMark = Mark.create({
 				(attributes: HoverEventAttributes) =>
 				({ chain }) => {
 					return chain().setMark(this.name, attributes).run();
-				},
+					},
 			unsetHoverEvent:
 				() =>
 				({ chain }) => {

src/routes/+page.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-	import { convert, translateJSON } from "$lib/text/nbt_or_json";
+	import { convert } from "$lib/text/nbt_or_json";
 
 	import {
+		AtlasObjectNode,
 		BlockNBTNode,
 		ClickEventMark,
 		EntityNBTNode,
@@ -10,13 +11,12 @@
 		HoverEventMark,
 		KeybindNode,
 		Obfuscation,
+		PlayerObjectNode,
 		ScoreNode,
 		SelectorNode,
 		ShadowColorMark,
 		StorageNBTNode,
-		TranslateNode,
-		AtlasObjectNode,
-		PlayerObjectNode,
+		TranslateNode
 	} from "$lib/tiptap/extensions/index";
 	// Components
 	import Modal from "$lib/components/Modal.svelte";
@@ -30,7 +30,7 @@
 	import Placeholder from "@tiptap/extension-placeholder";
 	import StarterKit from "@tiptap/starter-kit";
 	import { onDestroy, onMount } from "svelte";
-	// Icons
+// Icons
 	import IconUndo from "~icons/tabler/arrow-back-up";
 	import IconRedo from "~icons/tabler/arrow-forward-up";
 	import IconTick from "~icons/tabler/check";
@@ -55,10 +55,10 @@
 
 	import ToolbarButton from "$lib/components/text/ToolbarButton.svelte";
 	import { openDataStore } from "$lib/db";
+	import { outputVersion } from "$lib/stores";
 	import { fontLUT } from "$lib/tiptap/extensions/fonts";
 	import { tooltip } from "$lib/tooltip";
 	import { versions, type Version } from "$lib/types";
-	import { outputVersion } from "$lib/stores";
 
 	let tiptapJSON: JSONContent = $state()!;
 
@@ -94,9 +94,9 @@
 	let clickEventValue = $state("");
 	let clickEventDialog: Modal = $state()!;
 
-	let hoverEventValue: any = $state();
 	let hoverEventEditor: MiniEditor = $state()!;
 	let hoverEventDialog: Modal = $state()!;
+	let hoverEventValue = $state("");
 
 	let fontDialog: Modal = $state()!;
 	let fontUploadModal: Modal = $state()!;
@@ -548,7 +548,7 @@
 
 	<div>
 		{#if page.url.searchParams.has("dev")}
-			<code class="inline-block overflow-x-scroll p-3"
+			<code class="inline-block overflow-x-scroll p-3 text-xs"
 				>DEV ONLY: {editor
 					? JSON.stringify(editor.getJSON())
 					: "Loading..."}</code>
@@ -590,7 +590,7 @@
 				<div class="relative inline-block">
 					{#if versionPopup}
 						<div
-							class="absolute bottom-full left-1/2 z-10 mb-2 flex w-[400px] -translate-x-1/2 flex-col space-y-1 rounded-md bg-zinc-900 shadow-md shadow-zinc-950">
+							class="absolute bottom-full left-1/2 z-10 mb-2 flex w-100 -translate-x-1/2 flex-col space-y-1 rounded-md bg-zinc-900 shadow-md shadow-zinc-950">
 							{#if versionPopupConfirmationVisible}
 								<div
 									class="absolute flex h-full w-full flex-col items-center rounded-md bg-zinc-900 px-4 py-4 backdrop-blur-md">

src/tests/unit/snbt_importing.spec.ts

@@ -43,9 +43,7 @@ it("should apply a hex color to a text node", async () => {
 it("should throw an error if the format is invalid", async () => {
 	const broken = await readTestDataFile("bad/broken.snbt");
 	const converted = convertToTextOrEmpty(broken);
-	expect(JSON.stringify(converted)).toContain(
-		/An error occurred while parsing the SNBT/,
-	);
+	expect(JSON.stringify(converted).includes("An error occurred while parsing the SNBT")).toBe(true);
 });
 
 it("should return a one length array if passed with a single component", async () => {