From 59998eb267951005d1d459f610cc650c39256022 Mon Sep 17 00:00:00 2001
From: OrigamingWasTaken <contact@origaming.ch>
Date: Sat, 2 Nov 2024 22:01:00 +0100
Subject: [PATCH] Fix "Import" button in Flags editor

---
 .../components/flag-editor/flag-table.svelte  |  67 ++--
 frontend/src/windows/main/pages/Info.svelte   |   2 +-
 frontend/src/windows/main/ts/utils/index.ts   |  57 ----
 frontend/src/windows/main/ts/utils/json.ts    | 306 ++++++++++++++++++
 package.json                                  |   2 +-
 5 files changed, 355 insertions(+), 79 deletions(-)
 create mode 100644 frontend/src/windows/main/ts/utils/json.ts

diff --git a/frontend/src/windows/main/components/flag-editor/flag-table.svelte b/frontend/src/windows/main/components/flag-editor/flag-table.svelte
index 4dc3664..342c24b 100644
--- a/frontend/src/windows/main/components/flag-editor/flag-table.svelte
+++ b/frontend/src/windows/main/components/flag-editor/flag-table.svelte
@@ -4,17 +4,18 @@
 	import * as Card from '$lib/components/ui/card';
 	import { Checkbox } from '$lib/components/ui/checkbox';
 	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import { Input } from '$lib/components/ui/input';
 	import { Label } from '$lib/components/ui/label';
 	import { Switch } from '$lib/components/ui/switch';
 	import * as Table from '$lib/components/ui/table';
 	import { clipboard } from '@neutralinojs/lib';
 	import beautify from 'json-beautify';
-	import { Braces, Clipboard, Delete, Plus, Search, Ellipsis, Edit, Trash2, Copy } from 'lucide-svelte';
+	import { Braces, Clipboard, Delete, Ellipsis, Plus, Search } from 'lucide-svelte';
 	import { createEventDispatcher } from 'svelte';
 	import { toast } from 'svelte-sonner';
-	import { correctAndParseJSON } from '../../ts/utils/';
-	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import { correctAndParseJSON } from '../../ts/utils/json';
+	import Textarea from '$lib/components/ui/textarea/textarea.svelte';
 
 	type FastFlag = string | boolean | null | number;
 	interface EditorFlag {
@@ -103,24 +104,15 @@
 	let willBeReplacedFlags: string[] = [];
 	let newEditorFlags: EditorFlag[] = [];
 
-	async function importFlags(): Promise<void> {
-		let clipboardContent: string = '';
-		try {
-			clipboardContent = await clipboard.readText();
-		} catch (err) {
-			toast.error("Couldn't read clipboard");
-			console.error("Couldn't read clipboard:", err);
-			return;
-		}
+	let openImportFlagsDialog = false;
+	let importFlagsDialogValue: string;
+	function showImportFlagsDialog() {
+		openImportFlagsDialog = true;
+	}
 
+	async function importFlags(flagsString: string): Promise<void> {
 		let flagsJson: Record<string, FastFlag> = {};
-		try {
-			flagsJson = correctAndParseJSON(clipboardContent).parsedJSON;
-		} catch (err) {
-			console.error(err)
-			toast.error("Couldn't import flags, your JSON is probably invalid (malformatted)");
-			return;
-		}
+		flagsJson = correctAndParseJSON(flagsString, { friendly: true }); // Throws error if invalid
 
 		newEditorFlags = [];
 		for (const [flag, value] of Object.entries(flagsJson)) {
@@ -201,7 +193,7 @@
 <Card.Root class="p-4 w-full mr-[5px]">
 	<div class="flex gap-2 mb-4">
 		<Button on:click={addFlag} variant="outline"><Plus class="h-5 w-5 mr-2" />Add Flag</Button>
-		<Button on:click={importFlags} variant="outline"><Braces class="h-5 w-5 mr-2" />Import</Button>
+		<Button on:click={showImportFlagsDialog} variant="outline"><Braces class="h-5 w-5 mr-2" />Import</Button>
 		<Button
 			on:click={copyFlags}
 			variant="outline"
@@ -395,3 +387,38 @@
 		</Dialog.Footer>
 	</Dialog.Content>
 </Dialog.Root>
+
+<Dialog.Root bind:open={openImportFlagsDialog}>
+	<Dialog.Content class="sm:max-w-[550px]">
+		<Dialog.Header>
+			<Dialog.Title>Import flags</Dialog.Title>
+			<Dialog.Description>Paste your fast flags JSON here.</Dialog.Description>
+		</Dialog.Header>
+		<div class="grid gap-4 py-4">
+			<Textarea
+				bind:value={importFlagsDialogValue}
+				placeholder={'{\n   "DFFlagUseAppleBlox": true,\n   "FFlagEnableUltraBurgers": false\n}'}
+				class="col-span-3 min-h-48 text-start align-top"
+			/>
+		</div>
+		<Dialog.Footer>
+			<Button
+				on:click={async () => {
+					const imported = await importFlags(importFlagsDialogValue || '')
+						.then(() => {
+							return true;
+						})
+						.catch((err) => {
+							console.error(err);
+							toast.error(err.toString());
+							return false;
+						});
+					if (imported) {
+						openImportFlagsDialog = false;
+						importFlagsDialogValue = '';
+					}
+				}}>Import</Button
+			>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/frontend/src/windows/main/pages/Info.svelte b/frontend/src/windows/main/pages/Info.svelte
index 6d5fb57..998dc96 100644
--- a/frontend/src/windows/main/pages/Info.svelte
+++ b/frontend/src/windows/main/pages/Info.svelte
@@ -54,4 +54,4 @@
 		.build();
 </script>
 
-<Panel {panel} on:button={onButtonClicked} {render} />
+<Panel {panel} on:button={onButtonClicked} {render} autosave={false} />
diff --git a/frontend/src/windows/main/ts/utils/index.ts b/frontend/src/windows/main/ts/utils/index.ts
index 1a1748a..f4e7318 100644
--- a/frontend/src/windows/main/ts/utils/index.ts
+++ b/frontend/src/windows/main/ts/utils/index.ts
@@ -30,63 +30,6 @@ interface JSONParseResult {
 	corrections: string[];
 }
 
-/**
- * Attempts to correct and parse potentially invalid JSON input with support for nested JSON objects.
- * Specifically handles the case of double-escaped nested JSON strings.
- *
- * @param {string} input - The JSON string to correct and parse
- * @returns {JSONParseResult} Object containing parsed JSON and correction records
- * @throws {Error} If the JSON cannot be parsed after attempted corrections
- */
-export function correctAndParseJSON(input: string): JSONParseResult {
-	const corrections: string[] = [];
-	let jsonString = input.trim();
-
-	// Step 1: First try to parse as-is
-	try {
-		const parsed = JSON.parse(jsonString);
-		return { parsedJSON: parsed, corrections };
-	} catch (e) {
-		// Continue with corrections if direct parsing fails
-	}
-
-	// Step 2: Handle escaped string values that should be objects
-	try {
-		// Replace escaped quotes with temporary markers
-		jsonString = jsonString.replace(/\\"/g, '__QUOTE__');
-
-		// Parse the JSON with temporary markers
-		let parsed = JSON.parse(jsonString.replace(/__QUOTE__/g, '"'));
-
-		// Process any string values that look like they should be objects
-		for (const key in parsed) {
-			if (typeof parsed[key] === 'string') {
-				try {
-					// If the string value looks like JSON, try to parse it
-					if (parsed[key].includes('{') && parsed[key].includes('}')) {
-						const unescaped = parsed[key].replace(/\\\\"/g, '"').replace(/\\"/g, '"').replace(/\\\\/g, '\\');
-						parsed[key] = JSON.parse(unescaped);
-						corrections.push(`Parsed nested JSON in key: ${key}`);
-					}
-				} catch (innerError) {
-					// If parsing the nested JSON fails, leave it as a string
-					corrections.push(`Failed to parse nested JSON in key: ${key}`);
-				}
-			}
-		}
-
-		return { parsedJSON: parsed, corrections };
-	} catch (error) {
-		// If all parsing attempts fail, throw an error with details
-		throw new Error(
-			`Failed to parse JSON: ${(error as Error).message}\nNear: ${jsonString.substring(
-				Math.max(0, (error as any).pos - 50),
-				Math.min(jsonString.length, (error as any).pos + 50)
-			)}`
-		);
-	}
-}
-
 /**
  * Returns the current date in a format compatible with POSIX path names.
  * The format is: YYYY-MM-DD_HH-mm-ss
diff --git a/frontend/src/windows/main/ts/utils/json.ts b/frontend/src/windows/main/ts/utils/json.ts
new file mode 100644
index 0000000..f7d2bcc
--- /dev/null
+++ b/frontend/src/windows/main/ts/utils/json.ts
@@ -0,0 +1,306 @@
+/**
+ * Options for JSON parsing
+ */
+interface ParseOptions {
+	/** Whether to provide user-friendly error messages */
+	friendly?: boolean;
+	/** Default value for incomplete key-value pairs */
+	defaultValue?: string | number | boolean | null;
+}
+
+/**
+ * Token types for JSON parsing
+ */
+type TokenType = 'startObject' | 'endObject' | 'startArray' | 'endArray' | 'key' | 'value' | 'colon' | 'comma' | 'string';
+
+/**
+ * Token interface representing parsed elements
+ */
+interface Token {
+	type: TokenType;
+	content?: string;
+	line?: number;
+	column?: number;
+}
+
+/**
+ * Custom error class for JSON parsing errors
+ */
+class JSONParseError extends Error {
+	public line?: number;
+	public column?: number;
+	public friendly: string;
+
+	constructor(message: string, friendly: string, line?: number, column?: number) {
+		super(message);
+		this.name = 'JSONParseError';
+		this.friendly = friendly;
+		this.line = line;
+		this.column = column;
+	}
+}
+
+/**
+ * Attempts to parse and correct malformed JSON strings with user-friendly error reporting.
+ *
+ * @param input - The potentially malformed JSON string to parse
+ * @param options - Parsing options
+ * @returns The parsed JavaScript object
+ * @throws JSONParseError with user-friendly messages if parsing fails
+ *
+ * @example
+ * // Basic usage with friendly errors
+ * try {
+ *   const result = correctAndParseJSON('{"key: value}', { friendly: true });
+ * } catch (e) {
+ *   if (e instanceof JSONParseError) {
+ *     console.log(e.friendly); // "Missing quotes around the key 'key'"
+ *   }
+ * }
+ */
+function correctAndParseJSON(input: string, options: ParseOptions = {}): any {
+	const { friendly = false, defaultValue = null } = options;
+
+	if (!input?.trim()) {
+		throw new JSONParseError('Empty input', 'The input is empty. Please provide some JSON data.', 1, 1);
+	}
+
+	let jsonString = input.trim();
+	let currentLine = 1;
+	let currentColumn = 1;
+
+	// Helper to track position
+	function updatePosition(str: string): void {
+		for (const char of str) {
+			if (char === '\n') {
+				currentLine++;
+				currentColumn = 1;
+			} else {
+				currentColumn++;
+			}
+		}
+	}
+
+	// Create user-friendly error
+	function createError(message: string, friendly: string): JSONParseError {
+		return new JSONParseError(message, friendly, currentLine, currentColumn);
+	}
+
+	// First normalize basic structure
+	if (jsonString.includes(':') && !jsonString.startsWith('{')) {
+		jsonString = '{' + jsonString;
+	}
+	if (jsonString.endsWith('}') && jsonString.startsWith('{')) {
+		// We're good
+	} else if (jsonString.includes(':')) {
+		jsonString = jsonString + '}';
+	}
+
+	// First try direct parse
+	try {
+		return JSON.parse(jsonString);
+	} catch (e) {
+		// Continue with corrections
+	}
+
+	// Clean up the string
+	jsonString = jsonString
+		.replace(/\/\/.*$/gm, '') // Remove line comments
+		.replace(/\/\*[\s\S]*?\*\//g, '') // Remove block comments
+		.replace(/\b(undefined|NaN)\b/g, 'null') // Handle special values
+		.trim();
+
+	function tokenize(str: string): Token[] {
+		const tokens: Token[] = [];
+		let buffer = '';
+		const state = {
+			inString: false,
+			quoteChar: null as string | null,
+			braceDepth: 0,
+			bracketDepth: 0,
+			escaping: false,
+		};
+
+		function pushToken(type: TokenType, value: string): void {
+			if (value?.trim()) {
+				tokens.push({
+					type,
+					content: value.trim(),
+					line: currentLine,
+					column: currentColumn - value.length,
+				});
+			}
+		}
+
+		for (let i = 0; i < str.length; i++) {
+			const char = str[i];
+			updatePosition(char);
+
+			if (state.escaping) {
+				buffer += char;
+				state.escaping = false;
+				continue;
+			}
+
+			if (char === '\\') {
+				state.escaping = true;
+				buffer += char;
+				continue;
+			}
+
+			if ((char === '"' || char === "'") && !state.escaping) {
+				if (!state.inString) {
+					if (buffer.trim()) pushToken('value', buffer);
+					buffer = '';
+					state.inString = true;
+					state.quoteChar = char;
+				} else if (char === state.quoteChar) {
+					pushToken('string', buffer);
+					buffer = '';
+					state.inString = false;
+					state.quoteChar = null;
+				} else {
+					buffer += char;
+				}
+				continue;
+			}
+
+			if (!state.inString) {
+				if (char === '{') {
+					if (buffer.trim()) pushToken('value', buffer);
+					tokens.push({ type: 'startObject', line: currentLine, column: currentColumn });
+					buffer = '';
+					state.braceDepth++;
+					continue;
+				}
+				if (char === '}') {
+					if (buffer.trim()) pushToken('value', buffer);
+					tokens.push({ type: 'endObject', line: currentLine, column: currentColumn });
+					buffer = '';
+					state.braceDepth--;
+					continue;
+				}
+				if (char === ':') {
+					if (buffer.trim()) pushToken('key', buffer);
+					tokens.push({ type: 'colon', line: currentLine, column: currentColumn });
+					buffer = '';
+					continue;
+				}
+				if (char === ',') {
+					if (buffer.trim()) pushToken('value', buffer);
+					tokens.push({ type: 'comma', line: currentLine, column: currentColumn });
+					buffer = '';
+					continue;
+				}
+				if (char === '\n' || char === '\r') {
+					if (buffer.trim()) pushToken('value', buffer);
+					buffer = '';
+					continue;
+				}
+			}
+
+			buffer += char;
+		}
+
+		// Handle any remaining buffer
+		if (buffer.trim()) {
+			pushToken('value', buffer);
+		}
+
+		return tokens;
+	}
+
+	function buildJSON(tokens: Token[]): string {
+		let result = '';
+		let lastType: TokenType | null = null;
+		let lastToken: Token | null = null;
+
+		for (let i = 0; i < tokens.length; i++) {
+			const token = tokens[i];
+			const { type, content, line, column } = token;
+
+			// Validate token sequence
+			if (friendly) {
+				if (type === 'key' && lastType === 'key') {
+					throw createError(
+						'Missing colon between keys',
+						`Missing colon after key "${lastToken?.content}" at line ${lastToken?.line}`
+					);
+				}
+				if (type === 'value' && lastType === 'key' && !tokens.some((t) => t.type === 'colon')) {
+					throw createError(
+						'Missing colon before value',
+						`Missing colon between key "${lastToken?.content}" and value "${content}"`
+					);
+				}
+			}
+
+			const needsComma =
+				lastType &&
+				!['comma', 'colon', 'startObject'].includes(lastType) &&
+				!['endObject', 'comma', 'colon'].includes(type);
+
+			if (needsComma) result += ',';
+
+			switch (type) {
+				case 'startObject':
+					result += '{';
+					break;
+				case 'endObject':
+					result += '}';
+					break;
+				case 'key':
+					result += `"${content?.replace(/"/g, '\\"')}"`;
+					break;
+				case 'colon':
+					result += ':';
+					break;
+				case 'comma':
+					result += ',';
+					break;
+				case 'string':
+				case 'value':
+					if (content === undefined && defaultValue !== undefined) {
+						result += JSON.stringify(defaultValue);
+					} else if (/^-?\d+\.?\d*$/.test(content || '') || /^(true|false|null)$/i.test(content || '')) {
+						result += (content || '').toLowerCase();
+					} else {
+						result += `"${(content || '').replace(/"/g, '\\"')}"`;
+					}
+					break;
+			}
+
+			lastType = type;
+			lastToken = token;
+		}
+
+		return result;
+	}
+
+	try {
+		const tokens = tokenize(jsonString);
+		const processed = buildJSON(tokens);
+		return JSON.parse(processed);
+	} catch (error) {
+		if (friendly) {
+			if (error instanceof JSONParseError) {
+				throw error;
+			}
+
+			// Convert standard JSON errors to friendly messages
+			const errorMsg = (error as Error).message;
+			if (errorMsg.includes('Unexpected token')) {
+				throw createError(errorMsg, `Invalid character found in JSON. Check for missing quotes or commas.`);
+			}
+			if (errorMsg.includes('Expected')) {
+				throw createError(
+					errorMsg,
+					`JSON structure is incorrect. Make sure all brackets and braces are properly closed.`
+				);
+			}
+		}
+		throw error;
+	}
+}
+
+export { correctAndParseJSON, JSONParseError, type ParseOptions };
diff --git a/package.json b/package.json
index e9ffe5c..3b24cb3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "appleblox",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "description": "Lightweight and fast Roblox launcher for MacOS",
   "main": "frontend/src/windows/main/main.ts",
   "scripts": {