update json widget to automatically scale (#345)

* updated json widget to scale 1-5 rows depending on input

* scale json widget when copy pasting into empty field

* make scrollbar more visible in json widget

Author: Vegita2

CHANGELOG.md

@@ -4,6 +4,9 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
+### Changed
+- Changed scaling behaviour for json widget. Depending on content, it scales to 1-5 rows initially. When the user pastes multi-line json it also rescales to fit the content. [#344](https://github.com/CCDirectLink/crosscode-map-editor/issues/344)
+
 ## [2.0.1] 2026-03-16
 ### Fixed
 - Added scrollbar back to character selector [#342](https://github.com/CCDirectLink/crosscode-map-editor/issues/342)

webapp/src/app/components/widgets/json-widget/json-widget.component.html

@@ -2,9 +2,12 @@
 	@if (!noPropName) {
 		<label class="property-name">{{ key }}:</label>
 	}
-	<textarea class="default-input"
-	          [ngModel]="json.stringify(settings[key], null, 2)"
-	          (input)="setCustomSetting(key, $any($event.target).value)">
+	<textarea
+		class="default-input"
+		[ngModel]="getJsonVal()"
+		(input)="setCustomSetting(key, $any($event.target).value)"
+		[rows]="rows()"
+	>
 	</textarea>
 	<button class="mini-button" (click)="openJsonEditor()">+</button>
 </div>

webapp/src/app/components/widgets/json-widget/json-widget.component.scss

@@ -1,5 +1,8 @@
 .default-input {
 	background-color: rgba(83, 192, 255, 0.4);
+	height: auto;
+	
+	scrollbar-color: var(--gray-800) transparent;
 }
 
 .mini-button {

webapp/src/app/components/widgets/json-widget/json-widget.component.ts

@@ -1,24 +1,40 @@
-import { Component, Input, inject } from '@angular/core';
+import { Component, inject, Input, signal } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { JsonEditorComponent } from '../../json-editor/json-editor.component';
 import { AbstractWidget } from '../abstract-widget';
 import { FlexModule } from '@angular/flex-layout/flex';
 import { MatTooltip } from '@angular/material/tooltip';
 import { FormsModule } from '@angular/forms';
+import { Helper } from '../../../services/phaser/helper';
 
 @Component({
-    selector: 'app-json-widget',
-    templateUrl: './json-widget.component.html',
-    styleUrls: ['./json-widget.component.scss', '../widget.scss'],
-    imports: [FlexModule, MatTooltip, FormsModule]
+	selector: 'app-json-widget',
+	templateUrl: './json-widget.component.html',
+	styleUrls: ['./json-widget.component.scss', '../widget.scss'],
+	imports: [FlexModule, MatTooltip, FormsModule]
 })
 export class JsonWidgetComponent extends AbstractWidget {
 	private dialog = inject(MatDialog);
-
 
 	@Input() noPropName = false;
 	private timer = -1;
-	json = JSON;
+	
+	rows = signal(1);
+	
+	override ngOnInit() {
+		super.ngOnInit();
+		this.updateRows();
+	}
+	
+	private updateRows(newVal?: string) {
+		const setting = this.getJsonVal(newVal);
+		const rows = setting?.split('\n').length ?? 1;
+		this.rows.set(Helper.clamp(rows, 1, 5));
+	}
+	
+	getJsonVal(newVal?: string) {
+		return JSON.stringify(newVal ?? this.settings[this.key], null, 2);
+	}
 
 	openJsonEditor() {
 		const ref = this.dialog.open(JsonEditorComponent, {
@@ -39,10 +55,21 @@ export class JsonWidgetComponent extends AbstractWidget {
 		if (this.timer >= 0) {
 			clearTimeout(this.timer);
 		}
+		
+		// scales textarea when copy pasting into empty field
+		try {
+			const newVal = JSON.parse(value);
+			const prev = this.settings[key];
+			if (!prev && newVal) {
+				this.updateRows(newVal);
+			}
+		} catch (e) {}
+		
 		this.timer = window.setTimeout(() => {
 			value = JSON.parse(value);
 			this.settings[key] = value;
 			this.updateType(value);
 		}, 500);
 	}
+	
 }