Update prod

.github/workflows/ci.yml

@@ -17,7 +17,7 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
 
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v6

.nvmrc

@@ -1 +1 @@
-24.0.0
+lts/*

README.md

@@ -9,7 +9,7 @@ Check it out at: https://text.datapackhub.net/
 :eyes: To prove it works, the generated text from the image above is below:
 
 ```
-["",{italic:true,text:"so many"}," ",{color:"yellow",text:"cool features!"},"\n- ",{bold:true,text:"bold"},", ",{italic:true,text:"italic"},", ",{strikethrough:true,text:"strikethrough"},", ",{underlined:true,text:"underlined"},", obfuscated\n- ",{color:"red",text:"any "},{color:"blue",text:"colours "},"(",{color:"#DD7171",text:"including custom colours"},") and ",{shadow_color:34047,text:"shadow colours"},"\n- ",{underlined:true,text:"",extra:[{color:"#f22f24",text:"c"},{color:"#f23922",text:"r"},{color:"#f24421",text:"e"},{color:"#f34e1f",text:"a"},{color:"#f3581e",text:"t"},{color:"#f3621c",text:"e"},{color:"#f36c1b",text:" "},{color:"#f37719",text:"g"},{color:"#f38118",text:"r"},{color:"#f48b16",text:"a"},{color:"#f49515",text:"d"},{color:"#f49f13",text:"i"},{color:"#f4aa12",text:"e"},{color:"#f4b410",text:"n"},{color:"#f4be0f",text:"t"},{color:"#f4c80d",text:"s"},{color:"#f5d20c",text:" "},{color:"#f5dd0a",text:"t"},{color:"#f5e709",text:"o"},{color:"#f5f107",text:"o!!!"}]},"\n- ",{bold:true,text:"custom sources"}," (",{color:"red",text:"nbt"},", ",{color:"gold",text:"scores"},", ",{color:"yellow",text:"translate keys"},", ",{color:"dark_green",text:"selectors"},", ",{color:"blue",text:"keybinds"},")\n- ",{text:"click events like this",click_event:{action:"open_url",url:"https://text.datapackhub.net/"}},"\n- ",{text:"hover events like this",hover_event:{action:"show_text",value:"i'm a hover event!"}},"\n- export to ",{color:"yellow",underlined:true,text:"json"}," and ",{color:"light_purple",underlined:true,text:"lore item components"}," (as well as normal nbt)\n- ",{color:"light_purple",underlined:true,text:"import from nbt into the editor"},"\n- save and load so you never lose your work\n\n",{color:"yellow",text:"check it out:"}," ",{color:"aqua",underlined:true,text:"https://text.datapackhub.net",click_event:{action:"open_url",url:"https://text.datapackhub.net"}}]
+["",{italic:true,text:"so many"}," ",{color:"yellow",text:"cool features!"},"\n- ",{bold:true,text:"bold"},", ",{italic:true,text:"italic"},", ",{strikethrough:true,text:"strikethrough"},", ",{underlined:true,text:"underlined"},", ",{obfuscated:true,text:"obfuscated\n"},"- ",{color:"red",text:"any "},{color:"blue",text:"colours "},"(",{color:"#DD7171",text:"including custom colours"},") and ",{shadow_color:34047,text:"shadow colours"},"\n- ",{underlined:true,text:"",extra:[{color:"#f22f24",text:"c"},{color:"#f23922",text:"r"},{color:"#f24421",text:"e"},{color:"#f34e1f",text:"a"},{color:"#f3581e",text:"t"},{color:"#f3621c",text:"e"},{color:"#f36c1b",text:" "},{color:"#f37719",text:"g"},{color:"#f38118",text:"r"},{color:"#f48b16",text:"a"},{color:"#f49515",text:"d"},{color:"#f49f13",text:"i"},{color:"#f4aa12",text:"e"},{color:"#f4b410",text:"n"},{color:"#f4be0f",text:"t"},{color:"#f4c80d",text:"s"},{color:"#f5d20c",text:" "},{color:"#f5dd0a",text:"t"},{color:"#f5e709",text:"o"},{color:"#f5f107",text:"o!!!"}]},"\n- ",{bold:true,text:"custom sources"}," (",{color:"red",text:"nbt"},", ",{color:"gold",text:"scores"},", ",{color:"yellow",text:"translate keys"},", ",{color:"dark_green",text:"selectors"},", ",{color:"blue",text:"keybinds"},")\n- ",{text:"click events like this",click_event:{action:"open_url",url:"https://text.datapackhub.net/"}},"\n- ",{text:"hover events like this",hover_event:{action:"show_text",value:"i'm a hover event!"}},"\n- export to ",{color:"yellow",underlined:true,text:"json"}," and ",{color:"light_purple",underlined:true,text:"lore item components"}," (as well as normal nbt)\n- ",{color:"light_purple",underlined:true,text:"import from nbt into the editor"},"\n- save and load so you never lose your work\n\n",{color:"yellow",text:"check it out:"}," ",{color:"aqua",underlined:true,text:"https://text.datapackhub.net",click_event:{action:"open_url",url:"https://text.datapackhub.net"}}]
 ```
 
 ## Bugs and feature requests

package.json

@@ -15,42 +15,43 @@
 		"test:e2e": "playwright test"
 	},
 	"devDependencies": {
-		"@iconify-json/tabler": "^1.2.33",
-		"@playwright/test": "^1.59.1",
+		"@iconify-json/tabler": "^1.2.35",
+		"@playwright/test": "^1.61.1",
 		"@sveltejs/adapter-auto": "^7.0.1",
-		"@sveltejs/kit": "^2.58.0",
-		"@sveltejs/vite-plugin-svelte": "^7.0.0",
-		"@tailwindcss/vite": "^4.2.4",
+		"@sveltejs/kit": "^2.69.3",
+		"@sveltejs/vite-plugin-svelte": "^7.2.0",
+		"@tailwindcss/vite": "^4.3.2",
 		"@testing-library/jest-dom": "^6.9.1",
-		"@testing-library/svelte": "^5.3.1",
-		"@tiptap/extension-color": "^3.22.4",
-		"@tiptap/extension-font-family": "^3.22.4",
-		"@tiptap/extension-text-style": "^3.22.4",
-		"@types/node": "^25.6.0",
+		"@testing-library/svelte": "^5.4.2",
+		"@tiptap/extension-color": "^3.27.4",
+		"@tiptap/extension-font-family": "^3.27.4",
+		"@tiptap/extension-text-style": "^3.27.4",
+		"@types/node": "^26.1.1",
 		"file-type": "^22.0.1",
-		"jsdom": "^29.0.2",
-		"oxlint": "^1.61.0",
-		"prettier": "^3.8.3",
-		"prettier-plugin-svelte": "^3.5.1",
-		"prettier-plugin-tailwindcss": "^0.7.3",
-		"svelte": "^5.55.5",
-		"svelte-check": "^4.4.6",
-		"tailwindcss": "^4.2.4",
+		"jsdom": "^29.1.1",
+		"oxlint": "^1.74.0",
+		"prettier": "^3.9.5",
+		"prettier-plugin-svelte": "^4.1.1",
+		"prettier-plugin-tailwindcss": "^0.8.0",
+		"svelte": "^5.56.5",
+		"svelte-check": "^4.7.2",
+		"tailwindcss": "^4.3.2",
 		"typescript": "^6.0.3",
 		"unplugin-icons": "^23.0.1",
-		"vite": "^8.0.10",
-		"vitest": "^4.1.5"
+		"vite": "^8.1.4",
+		"vitest": "^4.1.10"
 	},
 	"type": "module",
 	"dependencies": {
-		"@tiptap/core": "^3.22.4",
-		"@tiptap/extension-placeholder": "^3.22.4",
-		"@tiptap/pm": "^3.22.4",
-		"@tiptap/starter-kit": "^3.22.4",
-		"bits-ui": "^2.18.0",
-		"html2canvas-pro": "^2.0.2",
+		"@tiptap/core": "^3.27.4",
+		"@tiptap/extension-placeholder": "^3.27.4",
+		"@tiptap/pm": "^3.27.4",
+		"@tiptap/starter-kit": "^3.27.4",
+		"bits-ui": "^2.18.1",
+		"html2canvas-pro": "^2.2.4",
 		"idb": "^8.0.3",
-		"svelte-awesome-color-picker": "^4.1.2",
+		"svelte-awesome-color-picker": "^4.1.3",
+		"svelte-highlight": "^7.11.0",
 		"tippy.js": "^6.3.7",
 		"typescript-color-gradient": "^4.2.0"
 	}

src/app.css

@@ -21,17 +21,13 @@
 }
 
 /* Use MinecraftEnchantingBold if parent uses MinecraftEnchanting font */
-*[style*="font-family: MinecraftEnchanting"] strong,
-*[style*="font-family: 'MinecraftEnchanting'"] strong,
-*[style*='font-family: "MinecraftEnchanting"'] strong {
+*[style*="font-family: MinecraftEnchanting"] strong {
 	font-family: MinecraftEnchantingBold;
 	font-weight: 100;
 }
 
 /* Use MinecraftIllagerBold if parent uses MinecraftIllager font */
-*[style*="font-family: MinecraftIllager"] strong,
-*[style*="font-family: 'MinecraftIllager'"] strong,
-*[style*='font-family: "MinecraftIllager"'] strong {
+*[style*="font-family: MinecraftIllager"] strong {
 	font-family: MinecraftIllagerBold;
 	font-weight: 100;
 }
@@ -78,7 +74,7 @@ button {
 	--custom-source-align: top;
 }
 
-.obfuscated {
+.obfuscated:not(:has([data-atlas-object-node], [data-player-object-node])) {
 	filter: blur(2px);
 }
 
@@ -97,4 +93,30 @@ button {
 .tippy-box[data-theme~="dph"] {
 	background-color: var(--color-zinc-700);
 	font-family: "Lexend", sans-serif;
-}
+}
+
+pre code.hljs {
+	background: transparent !important;
+	padding: 0 !important;
+	@apply break-all whitespace-pre-wrap;
+}
+
+.hljs-attr {
+	color: #55ffff !important;
+}
+.hljs-string {
+	color: #55ff55 !important;
+}
+.hljs-number {
+	color: #ffaa00 !important;
+}
+.hljs-literal {
+	color: #ffaa00 !important;
+}
+.hljs-params {
+	color: #ffb86c !important;
+}
+.hljs-comment {
+	color: #6272a4 !important;
+	font-style: italic;
+}

src/app.d.ts

@@ -1,3 +1,5 @@
+import "unplugin-icons/types/svelte";
+
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {

src/lib/components/modals/CustomSourceModal.svelte

@@ -44,7 +44,6 @@
 			selector: "",
 		},
 		object: {
-			object: "",
 			atlas: "",
 			sprite: "",
 			player: {

src/lib/components/modals/UnicodeSelectorModal.svelte

@@ -3,7 +3,7 @@
 	import { Editor } from "@tiptap/core";
 
 	// prettier-ignore
-	const chars = ["¶","×","Ø","Þ","÷","ø","þ","…","™","►","•","♦","≈","❛","∘","∙","✿","⚈","∆","∇","≡","≣","≪","≫","⋘","⋙","‡","₪","۩","۞","⌗","⌘","∅","∏","∑","√","∞","〰","〽","╱","╲","╳","᜵","᜶","ᚋ","ᚌ","ᚍ","ᚎ","ᚏ","⊏","⊐","⊓","⊔","⊕","⊖","⊗","⊘","⊙","⊞","⊟","⊠","⊡","╭","╮","╰","╯","←","↑","→","↓","↔","↕","↖","↗","↘","↙","↩","↪","▶","◀","⤴","⤵","⇐","⇑","⇒","⇓","⇔","⇕","⇦","⇧","⇨","⇩","➡","⬅","⬆","⬇","☚","☛","☜","☝","☞","☟","∎","▁","▂","▃","▄","▅","▆","▇","█","▉","▊","▋","▌","▍","▎","▏","▐","░","▒","▓","▚","▞","■","□","▢","▣","▤","▥","▦","◧","◨","◩","◪","▲","△","▶","▷","◆","◇","◊","○","◌","●","◐","◑","◒","◓","◔","◕","◢","◣","◤","◥","★","☆","⭐","◻","◼","◽","◾","⚪","⚫","✳","✴","❇","፠","።","፧","፨","⁂","⁑","⁎","ᐁ","ᐃ","ᐅ","ᐊ","ᑌ","ᑎ","ᑐ","ᑕ","ᒣ","ᒥ","ᒧ","ᒪ","⬖","⬗","⬘","⬙","⬚","⬛","⬜","⬝","⬞","⬟","⬠","⬡","⬢","⬣","⬤","⬥","⬦","⬧","⬨","─","│","┅","┇","┌","┐","└","┘","├","┤","┬","┴","┼","═","║","╔","╗","╚","╝","╠","╣","╧","╩","╬","⓪","①","②","③","④","⑤","⑥","⑦","⑧","⑨","⑩","⑪","⑫","⑬","⑭","⑮","⑯","⑰","⑱","⑲","⑳","⓿","❶","❷","❸","❹","❺","❻","❼","❽","❾","❿","⓫","⓬","⓭","⓮","⓯","⓰","⓱","⓲","⓳","⓴","⓵","⓶","⓷","⓸","⓹","⓺","⓻","⓼","⓽","⓾","☐","☑","☒","⚐","⚑","♠","♣","♥","♦","✔","✖","❤","©","®","‼","⁉","™","Ⓜ","♻","⚠","⚡","☠","☢","☮","☯","☺","☻","☹","♀","♂","♩","♪","♫","♬","⚀","⚁","⚂","⚃","⚄","⚅","☀","☁","☂","☔","☃","☼","☽","☾","❄","⌚","⌛","☎","✂","✉","✎","✏","✒","♿","⚓","✈","✌","☕","♨","☺","♈","♉","♊","♋","♌","♍","♎","♏","♐","♑","♒","♓"]
+	const chars = ["¶","×","Ø","Þ","÷","ø","þ","…","™","►","•","♦","≈","❛","∘","∙","✿","⚈","∆","∇","≡","≣","≪","≫","⋘","⋙","‡","₪","۩","۞","⌗","⌘","∅","∏","∑","√","∞","〰","〽","╱","╲","╳","᜵","᜶","ᚋ","ᚌ","ᚍ","ᚎ","ᚏ","⊏","⊐","⊓","⊔","⊕","⊖","⊗","⊘","⊙","⊞","⊟","⊠","⊡","╭","╮","╰","╯","←","↑","→","↓","↔","↕","↖","↗","↘","↙","↩","↪","▶","◀","⤴","⤵","⇐","⇑","⇒","⇓","⇔","⇕","⇦","⇧","⇨","⇩","➡","⬅","⬆","⬇","☚","☛","☜","☝","☞","☟","∎","▁","▂","▃","▄","▅","▆","▇","█","▉","▊","▋","▌","▍","▎","▏","▐","░","▒","▓","▚","▞","■","□","▢","▣","▤","▥","▦","◧","◨","◩","◪","▲","△","▶","▷","◆","◇","◊","○","◌","●","◐","◑","◒","◓","◔","◕","◢","◣","◤","◥","★","☆","⭐","◻","◼","◽","◾","⚪","⚫","✳","✴","❇","፠","።","፧","፨","⁂","⁑","⁎","ᐁ","ᐃ","ᐅ","ᐊ","ᑌ","ᑎ","ᑐ","ᑕ","ᒣ","ᒥ","ᒧ","ᒪ","⬖","⬗","⬘","⬙","⬚","⬛","⬜","⬝","⬞","⬟","⬠","⬡","⬢","⬣","⬤","⬥","⬦","⬧","⬨","─","│","┅","┇","┌","┐","└","┘","├","┤","┬","┴","┼","═","║","╔","╗","╚","╝","╠","╣","╧","╩","╬","⓪","①","②","③","④","⑤","⑥","⑦","⑧","⑨","⑩","⑪","⑫","⑬","⑭","⑮","⑯","⑰","⑱","⑲","⑳","⓿","❶","❷","❸","❹","❺","❻","❼","❽","❾","❿","⓫","⓬","⓭","⓮","⓯","⓰","⓱","⓲","⓳","⓴","⓵","⓶","⓷","⓸","⓹","⓺","⓻","⓼","⓽","⓾","☐","☑","☒","⚐","⚑","♠","♣","♥","♦","✔","✖","❤","©","®","‼","⁉","™","Ⓜ","♻","⚠","⚡","☠","☢","☮","☯","☺","☻","☹","♀","♂","♩","♪","♫","♬","⚀","⚁","⚂","⚃","⚄","⚅","☀","☁","☂","☔","☃","☼","☽","☾","❄","⌚","⌛","☎","✂","✉","✎","✏","✒","♿","⚓","✈","✌","☕","♨","☺","♈","♉","♊","♋","♌","♍","♎","♏","♐","♑","♒","♓"];
 
 	let {
 		unicodeSelectorDialog = $bindable(),

src/lib/components/text/TextStyleButtons.svelte

@@ -86,7 +86,6 @@
 
 {#if !editor.isActive("shadowColor") || isColorPickerOpen}
 	<ColorPicker
-		isAlpha={false}
 		bind:hex={shadowColorValue}
 		bind:isOpen={isColorPickerOpen}
 		--cp-bg-color="#18181b"

src/lib/text/nbt/export.ts

@@ -66,14 +66,14 @@ export function addTypeSpecificValues(
 			break;
 		case "atlas_object":
 			if (exportVersion.index >= 2) {
-				current.object = "atlas";
-				if(current.atlas) {
-					current.atlas = c.attrs?.atlas;	
+				if (c.attrs?.atlas && c.attrs?.atlas !== "") {
+					current.atlas = c.attrs?.atlas;
 				}
 				current.sprite = c.attrs?.sprite;
 
 				current.bold = undefined;
 				current.italic = undefined;
+				current.obfuscated = undefined;
 			} else {
 				current.text = "";
 			}
@@ -88,6 +88,7 @@ export function addTypeSpecificValues(
 
 				current.bold = undefined;
 				current.italic = undefined;
+				current.obfuscated = undefined;
 			} else {
 				current.text = "";
 			}
@@ -211,9 +212,10 @@ export function translateJSON(
 
 				const shadowColorMark = c.marks?.find((m) => m.type === "shadowColor");
 				if (shadowColorMark) {
-					current.shadow_color =
-						parseInt(shadowColorMark.attrs?.shadowColor.replace(/^#/, ""), 16) +
-						(0xff << 24); // TODO: transparency coming eventually?
+					current.shadow_color = parseInt(
+						rgbaToArgbHex(shadowColorMark.attrs?.shadowColor).replace(/^#/, ""),
+						16,
+					);
 				}
 
 				current = addTypeSpecificValues(current, c, true);
@@ -238,7 +240,22 @@ export function translateJSON(
 			return JSON.stringify(data[0]);
 		}
 
-		return JSON.stringify(data);
+		let finalResult = JSON.stringify(data);
+
+		const shadowColorMatches = finalResult.matchAll(/"shadow_color":(-?\d+)/g);
+		for (const match of shadowColorMatches) {
+			if (match[1]) {
+				const num = parseInt(match[1]);
+				if (num > 2 ** 31 - 1 || num < (-2) ** 31) {
+					finalResult = finalResult.replaceAll(
+						match[0],
+						`shadow_color:${num}L`,
+					);
+				}
+			}
+		}
+
+		return finalResult;
 	} else if (options.exportType === "item_lore") {
 		let data: (StringyMCText[] | StringyMCText)[] = [];
 
@@ -273,3 +290,15 @@ export function translateJSON(
 
 	return "[]";
 }
+
+function rgbaToArgbHex(rgbaHex: string): string {
+	// Remove the leading '#' if it exists
+	const hex = rgbaHex.startsWith("#") ? rgbaHex.slice(1) : rgbaHex;
+
+	// Extract RGB and Alpha components
+	const rgb = hex.slice(0, 6);
+	const alpha = hex.slice(6, 8);
+
+	// Return with alpha placed at the beginning
+	return `#${alpha}${rgb}`;
+}

src/lib/text/nbt/import.ts

@@ -182,7 +182,7 @@ function mapPropertiesToType(source: MinecraftText): JSONContent {
 				key: source.keybind,
 			},
 		};
-	} else if (source.atlas) {
+	} else if (source.sprite || source.atlas) {
 		finalText = {
 			type: "atlas_object",
 			attrs: {
@@ -242,7 +242,7 @@ function applyStyling(
 	}
 
 	if (text.shadow_color) {
-		const hex = "#" + text.shadow_color.toString(16).padStart(6, "0");
+		const hex = "#" + text.shadow_color.toString(16).padStart(8, "0");
 		finalText.marks?.push({
 			type: "shadowColor",
 			attrs: {

src/lib/text/nbt/optimiser.ts

@@ -208,12 +208,12 @@ function mergeTextComponents(output: StringyMCText[]) {
 		// Merge whitespace objects to next component
 		if (isDefinedTextObject(current) && isDefinedTextObject(next)) {
 			// which direction to merge
-			if (next.text.match(/^\s*$/)) {
+			if (next.text.match(/^\s+$/)) {
 				current.text += next.text;
 				output.splice(i + 1, 1);
 				i--;
 				continue;
-			} else if (current.text.match(/^\s*$/)) {
+			} else if (current.text.match(/^\s+$/)) {
 				next.text = current.text + next.text;
 				output.splice(i, 1);
 				i--;

src/lib/text/utils.ts

@@ -21,7 +21,17 @@ export const colorMap = [
 	{ name: "black", value: "#000000", code: "0" },
 ];
 
-export const sourceKeys = ["atlas_object", "player_object", "selector", "block_nbt", "entity_nbt", "storage_nbt", "keybind", "score", "translate"] as const;
+export const sourceKeys = [
+	"atlas_object",
+	"player_object",
+	"selector",
+	"block_nbt",
+	"entity_nbt",
+	"storage_nbt",
+	"keybind",
+	"score",
+	"translate",
+] as const;
 
 /**
  * Returns true if the specified mark is present in the content's marks, otherwise undefined.
@@ -170,4 +180,4 @@ export function isDefinedTextObject(
 
 export function getNodeAtSelection(editor: Editor) {
 	return editor.state.selection.$head.nodeBefore;
-}
+}

src/lib/tiptap/extensions/index.ts

@@ -1,3 +1,15 @@
+import {
+	ClickEventMark,
+	FixedTextStyle,
+	FontsExtension,
+	HoverEventMark,
+	Obfuscation,
+	ShadowColorMark,
+} from "$lib/tiptap/extensions/index";
+import { getSchema } from "@tiptap/core";
+import Color from "@tiptap/extension-color";
+import StarterKit from "@tiptap/starter-kit";
+
 export interface ClickEventAttributes {
 	action: string | null;
 	value: string | null;
@@ -109,18 +121,39 @@ export interface NodeOptions {
 	HTMLAttributes: Record<string, any>;
 }
 
+export const markSchema = getSchema([
+	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,
+	FontsExtension,
+]);
+
 export { FixedTextStyle } from "./FixedTextStyle";
+export { FontsExtension } from "./fonts";
 export { ClickEventMark } from "./marks/ClickEventMark";
 export { HoverEventMark } from "./marks/HoverEventMark";
 export { Obfuscation } from "./marks/ObfuscationMark";
 export { ShadowColorMark } from "./marks/ShadowColorMark";
+export { AtlasObjectNode } from "./nodes/AtlasObjectNode";
 export { BlockNBTNode } from "./nodes/BlockNBTNode";
 export { EntityNBTNode } from "./nodes/EntityNBTNode";
 export { KeybindNode } from "./nodes/KeybindNode";
+export { PlayerObjectNode } from "./nodes/PlayerObjectNode";
 export { ScoreNode } from "./nodes/ScoreNode";
 export { SelectorNode } from "./nodes/SelectorNode";
 export { StorageNBTNode } from "./nodes/StorageNBTNode";
 export { TranslateNode } from "./nodes/TranslateNode";
-export { AtlasObjectNode } from "./nodes/AtlasObjectNode";
-export { PlayerObjectNode } from "./nodes/PlayerObjectNode";
-export { FontsExtension } from "./fonts";