added text editor

src/data/inspector-data.ts

@@ -1,4 +1,4 @@
-export type InspectableTypes = 'string' | 'number' | 'boolean' | 'point' | 'rect' | 'default';
+export type InspectableTypes = 'string' | 'text' | 'number' | 'boolean' | 'point' | 'rect' | 'default';
 
 export interface InspectorPropertyModel {
 	name: string;

src/editor-view/editor-view.scss

@@ -1,5 +1,12 @@
 @import 'colors';
 
+@mixin basic-input-properties {
+	font-size: 14px;
+	color: $input-foreground;
+	padding: 2px 4px;
+	transition: all 0.1s;
+}
+
 phred-editor-view {
 	flex: 1;
 	display: flex;
@@ -43,27 +50,12 @@ phred-editor-view {
 	$slider-background-color: rgba(white, 0.1);
 
 	input {
-		font-size: 14px;
-		color: $input-foreground;
-		padding: 2px 4px;
-		transition: all 0.1s;
+		@include basic-input-properties;
 
 		&[readonly] {
 			color: rgba($input-foreground, 0.5);
 		}
 
-		&[type='text'],
-		&[type='number'] {
-			width: 100%;
-			background-color: $input-background;
-			border: 1px solid transparent;
-			outline: none !important; 
-
-			&:not([readonly]):focus {
-				border-color: $focused-input-border;
-			}
-		}
-
 		// ------------- SLIDER ------------- //
 
 		&[type='range'] {
@@ -158,6 +150,22 @@ phred-editor-view {
 		}
 	}
 
+	input[type='text'],
+	input[type='number'],
+	textarea {
+		@include basic-input-properties;
+
+		width: 100%;
+		background-color: $input-background;
+		border: 1px solid transparent;
+		outline: none !important;
+		resize: none;
+
+		&:not([readonly]):focus {
+			border-color: $focused-input-border;
+		}
+	}
+
 	// ============= BUTTON ============= //
 
 	.button,

src/editor-view/properties/editors/rect/rect-property-editor.ts

@@ -20,7 +20,7 @@ export class RectPropertyEditor extends PropertyEditor<PIXI.Rectangle> {
 
 	protected createInnerContent(fieldId: string, value: PIXI.Rectangle, prop: InspectorPropertyModel) {
 		const parent = this.appendChild(document.createElement('div'));
-		parent.classList.add('vertical-content')
+		parent.classList.add('vertical-content');
 
 		const xinput = this.xinput = document.createElement(NumberPropertyEditor.tagName) as NumberPropertyEditor;
 		xinput.setContent({ name: 'x', typeHint: 'number', data: prop.data }, value.x, false, fieldId);

src/editor-view/properties/editors/string/text-property-editor.ts

@@ -0,0 +1,34 @@
+import { InspectorPropertyModel } from 'data/inspector-data';
+import { PropertyEditor } from '../property-editor';
+
+export class TextPropertyEditor extends PropertyEditor<string> {
+	public static readonly tagName: string = 'phred-text-property-editor';
+	private input: HTMLTextAreaElement;
+
+	protected createInnerContent(fieldId: string, _value: string, prop: InspectorPropertyModel) {
+		const input = this.input = document.createElement('textarea');
+		input.id = fieldId;
+		input.onkeydown = e => {
+			if (e.ctrlKey && e.code === 'Enter') {
+				e.preventDefault();
+				this.dispatchEvent(new Event('change'));
+			}
+		};
+		if (prop.data) Object.keys(prop.data).forEach(p => input.setAttribute(p, prop.data[p]));
+		return input;
+	}
+
+	public setInternalValue(value: string) {
+		value = value ?? '';
+		this._internalValue = value;
+		this.input.value = value;
+	}
+
+	public updateInternalValue(): string {
+		const value = this.input.value || '';
+		this._internalValue = value;
+		return value;
+	}
+}
+
+customElements.define(TextPropertyEditor.tagName, TextPropertyEditor);