Add configurable indentation

src/app/Store.ts

@@ -5,6 +5,7 @@ export namespace Store {
 	export const ID_LANGUAGE = 'language'
 	export const ID_THEME = 'theme'
 	export const ID_VERSION = 'schema_version'
+	export const ID_INDENT = 'indentation'
 
 	export function getLanguage() {
 		return localStorage.getItem(ID_LANGUAGE) ?? 'en'
@@ -22,6 +23,10 @@ export namespace Store {
 		return '1.17'
 	}
 
+	export function getIndent() {
+		return localStorage.getItem(ID_INDENT) ?? '2_spaces'
+	}
+
 	export function setLanguage(language: string | undefined) {
 		if (language) localStorage.setItem(ID_LANGUAGE, language)
 	}
@@ -33,4 +38,8 @@ export namespace Store {
 	export function setVersion(version: VersionId | undefined) {
 		if (version) localStorage.setItem(ID_VERSION, version)
 	}
+
+	export function setIndent(indent: string) {
+		if (indent) localStorage.setItem(ID_INDENT, indent)
+	}
 }

src/app/components/SourcePanel.tsx

@@ -1,10 +1,18 @@
 import type { DataModel } from '@mcschema/core'
 import { ModelPath } from '@mcschema/core'
-import { useEffect, useRef } from 'preact/hooks'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { Btn, BtnMenu } from '.'
 import { useModel } from '../hooks'
 import { locale } from '../Locales'
 import { transformOutput } from '../schema/transformOutput'
 import type { BlockStateRegistry } from '../Schemas'
+import { Store } from '../Store'
+
+const INDENT: Record<string, number | string> = {
+	'2_spaces': 2,
+	'4_spaces': 4,
+	tabs: '\t',
+}
 
 type SourcePanelProps = {
 	lang: string,
@@ -18,21 +26,34 @@ type SourcePanelProps = {
 }
 export function SourcePanel({ lang, name, model, blockStates, doCopy, doDownload, doImport, onError }: SourcePanelProps) {
 	const loc = locale.bind(null, lang)
+	const [indent, setIndent] = useState(Store.getIndent())
 	const source = useRef<HTMLTextAreaElement>(null)
 	const download = useRef<HTMLAnchorElement>(null)
+	const retransform = useRef<Function>()
 
-	useModel(model, model => {
-		try {
-			const props = { blockStates: blockStates ?? {} }
-			const data = model.schema.hook(transformOutput, new ModelPath(model), model.data, props)
-			source.current.value = JSON.stringify(data, null, 2) + '\n'
-		} catch (e) {
-			onError(`Error getting JSON output: ${e.message}`)
-			console.error(e)
-			source.current.value = ''
+	useEffect(() => {
+		retransform.current = () => {
+			if (!model || !blockStates) return
+			try {
+				const props = { blockStates: blockStates ?? {} }
+				const data = model.schema.hook(transformOutput, new ModelPath(model), model.data, props)
+				source.current.value = JSON.stringify(data, null, INDENT[indent]) + '\n'
+			} catch (e) {
+				onError(`Error getting JSON output: ${e.message}`)
+				console.error(e)
+				source.current.value = ''
+			}
 		}
 	})
 
+	useModel(model, () => {
+		retransform.current()
+	})
+
+	useEffect(() => {
+		retransform.current()
+	}, [indent])
+
 	const onImport = () => {
 		try {
 			const data = JSON.parse(source.current.value)
@@ -65,7 +86,20 @@ export function SourcePanel({ lang, name, model, blockStates, doCopy, doDownload
 		}
 	}, [doImport])
 
+	const changeIndent = (value: string) => {
+		Store.setIndent(value)
+		setIndent(value)
+	}
+
 	return <> 
+		<div class="controls">
+			<BtnMenu icon="gear">
+				{Object.entries(INDENT).map(([key]) =>
+					<Btn label={loc(`indentation.${key}`)} active={indent === key}
+						onClick={() => changeIndent(key)}/>
+				)}
+			</BtnMenu>
+		</div>
 		<textarea ref={source} class="source" onChange={onImport} spellcheck={false} autocorrect="off" placeholder={loc('source_placeholder')}></textarea>
 		<a ref={download} style="display: none;"></a>
 	</>