From bd844aaf9401bff9c47927f6abbd138c7d0e642b Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Wed, 9 Feb 2022 12:16:44 -0800
Subject: [PATCH] Add the TextInput widget (#518)

* Separate out the number input from a generic field input

* Add TextInput widget

Co-authored-by: mfish33 <32677537+mfish33@users.noreply.github.com>
---
 frontend/src/App.vue                          |   2 +-
 frontend/src/components/panels/LayerTree.vue  |   9 +-
 frontend/src/components/widgets/WidgetRow.vue |   3 +
 .../src/components/widgets/WidgetSection.vue  |   4 +-
 .../widgets/floating-menus/ColorPicker.vue    |   1 +
 .../widgets/floating-menus/MenuList.vue       |  10 +-
 .../widgets/inputs/CheckboxInput.vue          |   1 +
 .../widgets/inputs/DropdownInput.vue          |   1 +
 .../components/widgets/inputs/FieldInput.vue  | 116 ++++++++++++
 .../widgets/inputs/MenuBarInput.vue           |   4 +-
 .../components/widgets/inputs/NumberInput.vue | 175 ++++++------------
 .../widgets/inputs/OptionalInput.vue          |   1 +
 .../components/widgets/inputs/RadioInput.vue  |   3 +-
 .../components/widgets/inputs/TextInput.vue   |  68 +++++++
 .../scrollbars/PersistentScrollbar.vue        |   8 +-
 .../src/components/workspace/Workspace.vue    |  10 +-
 frontend/src/dispatcher/js-messages.ts        |   2 +-
 17 files changed, 278 insertions(+), 140 deletions(-)
 create mode 100644 frontend/src/components/widgets/inputs/FieldInput.vue
 create mode 100644 frontend/src/components/widgets/inputs/TextInput.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index aa7c577d..83f0d3e4 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -11,7 +11,7 @@
 				API which is required for using the editor. However, you can still explore the user interface.
 			</p>
 			<LayoutRow>
-				<button class="unsupported-modal-button" @click="closeModal()">I understand, let's just see the interface</button>
+				<button class="unsupported-modal-button" @click="() => closeModal()">I understand, let's just see the interface</button>
 			</LayoutRow>
 		</LayoutCol>
 	</div>
diff --git a/frontend/src/components/panels/LayerTree.vue b/frontend/src/components/panels/LayerTree.vue
index e922f624..0cac727f 100644
--- a/frontend/src/components/panels/LayerTree.vue
+++ b/frontend/src/components/panels/LayerTree.vue
@@ -29,7 +29,7 @@
 			</PopoverButton>
 		</LayoutRow>
 		<LayoutRow class="layer-tree" :scrollableY="true">
-			<LayoutCol class="list" ref="layerTreeList" @click="() => deselectAllLayers()" @dragover="(e) => draggable && updateInsertLine(e)" @dragend="draggable && drop()">
+			<LayoutCol class="list" ref="layerTreeList" @click="() => deselectAllLayers()" @dragover="(e) => draggable && updateInsertLine(e)" @dragend="() => draggable && drop()">
 				<LayoutRow
 					class="layer-row"
 					v-for="(listing, index) in layers"
@@ -69,14 +69,15 @@
 							<IconLabel v-if="listing.entry.layer_type === 'Folder'" :icon="'NodeTypeFolder'" title="Folder" />
 							<IconLabel v-else :icon="'NodeTypePath'" title="Path" />
 						</LayoutRow>
-						<LayoutRow class="layer-name" @dblclick="onEditLayerName(listing)">
+						<LayoutRow class="layer-name" @dblclick="() => onEditLayerName(listing)">
 							<input
+								data-text-input
 								type="text"
 								:value="listing.entry.name"
 								:placeholder="listing.entry.layer_type"
 								:disabled="!listing.editingName"
 								@change="(e) => onEditLayerNameChange(listing, e.target)"
-								@blur="onEditLayerNameDeselect(listing)"
+								@blur="() => onEditLayerNameDeselect(listing)"
 								@keydown.enter="(e) => onEditLayerNameChange(listing, e.target)"
 								@keydown.escape="onEditLayerNameDeselect(listing)"
 							/>
@@ -379,7 +380,7 @@ export default defineComponent({
 			listing.editingName = true;
 			const tree = (this.$refs.layerTreeList as typeof LayoutCol).$el as HTMLElement;
 			this.$nextTick(() => {
-				(tree.querySelector("input:not([disabled])") as HTMLInputElement).select();
+				(tree.querySelector("[data-text-input]:not([disabled])") as HTMLInputElement).select();
 			});
 		},
 		async onEditLayerNameChange(listing: LayerListingInfo, inputElement: EventTarget | null) {
diff --git a/frontend/src/components/widgets/WidgetRow.vue b/frontend/src/components/widgets/WidgetRow.vue
index 7a385db3..51ec5afd 100644
--- a/frontend/src/components/widgets/WidgetRow.vue
+++ b/frontend/src/components/widgets/WidgetRow.vue
@@ -13,6 +13,7 @@
 				:incrementCallbackIncrease="() => updateLayout(component.widget_id, 'Increment')"
 				:incrementCallbackDecrease="() => updateLayout(component.widget_id, 'Decrement')"
 			/>
+			<TextInput v-if="component.kind === 'TextInput'" v-bind="component.props" @update:value="(value: number) => updateLayout(component.widget_id, value)" />
 			<IconButton v-if="component.kind === 'IconButton'" v-bind="component.props" :action="() => updateLayout(component.widget_id, null)" />
 			<OptionalInput v-if="component.kind === 'OptionalInput'" v-bind="component.props" @update:checked="(value: boolean) => updateLayout(component.widget_id, value)" />
 			<RadioInput v-if="component.kind === 'RadioInput'" v-bind="component.props" @update:selectedIndex="(value: number) => updateLayout(component.widget_id, value)" />
@@ -40,6 +41,7 @@ import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
 import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
 import OptionalInput from "@/components/widgets/inputs/OptionalInput.vue";
 import RadioInput from "@/components/widgets/inputs/RadioInput.vue";
+import TextInput from "@/components/widgets/inputs/TextInput.vue";
 import Separator from "@/components/widgets/separators/Separator.vue";
 
 export default defineComponent({
@@ -57,6 +59,7 @@ export default defineComponent({
 		Separator,
 		PopoverButton,
 		NumberInput,
+		TextInput,
 		IconButton,
 		OptionalInput,
 		RadioInput,
diff --git a/frontend/src/components/widgets/WidgetSection.vue b/frontend/src/components/widgets/WidgetSection.vue
index 0ce946c7..81671cd4 100644
--- a/frontend/src/components/widgets/WidgetSection.vue
+++ b/frontend/src/components/widgets/WidgetSection.vue
@@ -47,9 +47,7 @@ const WidgetSection = defineComponent({
 			throw new Error("Layout row type does not exist");
 		},
 	},
-	components: {
-		WidgetRow,
-	},
+	components: { WidgetRow },
 });
 export default WidgetSection;
 </script>
diff --git a/frontend/src/components/widgets/floating-menus/ColorPicker.vue b/frontend/src/components/widgets/floating-menus/ColorPicker.vue
index a048bff9..d7627a3d 100644
--- a/frontend/src/components/widgets/floating-menus/ColorPicker.vue
+++ b/frontend/src/components/widgets/floating-menus/ColorPicker.vue
@@ -131,6 +131,7 @@ type ColorPickerState = "Idle" | "MoveHue" | "MoveOpacity" | "MoveSaturation";
 // TODO: Such as removing the `picker*` data variables and reducing the number of functions which call each other in weird, non-obvious ways.
 
 export default defineComponent({
+	emits: ["update:color"],
 	props: {
 		color: { type: Object as PropType<RGBA>, required: true },
 	},
diff --git a/frontend/src/components/widgets/floating-menus/MenuList.vue b/frontend/src/components/widgets/floating-menus/MenuList.vue
index 69003f98..c6e2bfd5 100644
--- a/frontend/src/components/widgets/floating-menus/MenuList.vue
+++ b/frontend/src/components/widgets/floating-menus/MenuList.vue
@@ -7,9 +7,9 @@
 				:key="entryIndex"
 				class="row"
 				:class="{ open: isMenuEntryOpen(entry), active: entry === activeEntry }"
-				@click="handleEntryClick(entry)"
-				@pointerenter="handleEntryPointerEnter(entry)"
-				@pointerleave="handleEntryPointerLeave(entry)"
+				@click="() => handleEntryClick(entry)"
+				@pointerenter="() => handleEntryPointerEnter(entry)"
+				@pointerleave="() => handleEntryPointerLeave(entry)"
 				:data-hover-menu-spawner-extend="entry.children && []"
 			>
 				<CheckboxInput v-if="entry.checkbox" v-model:checked="entry.checked" :outlineStyle="true" class="entry-checkbox" />
@@ -160,6 +160,10 @@ const KEYBOARD_LOCK_USE_FULLSCREEN = "This hotkey is reserved by the browser, bu
 const KEYBOARD_LOCK_SWITCH_BROWSER = "This hotkey is reserved by the browser, but becomes available in Chrome, Edge, and Opera which support the Keyboard.lock() API";
 
 const MenuList = defineComponent({
+	emits: {
+		"update:activeEntry": null,
+		widthChanged: (width: number) => typeof width === "number",
+	},
 	inject: ["fullscreen"],
 	props: {
 		direction: { type: String as PropType<MenuDirection>, default: "Bottom" },
diff --git a/frontend/src/components/widgets/inputs/CheckboxInput.vue b/frontend/src/components/widgets/inputs/CheckboxInput.vue
index 5689a660..49872366 100644
--- a/frontend/src/components/widgets/inputs/CheckboxInput.vue
+++ b/frontend/src/components/widgets/inputs/CheckboxInput.vue
@@ -88,6 +88,7 @@ import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
+	emits: ["update:checked"],
 	data() {
 		return {
 			id: `${Math.random()}`.substring(2),
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.vue b/frontend/src/components/widgets/inputs/DropdownInput.vue
index 32219aac..a28aee1a 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.vue
+++ b/frontend/src/components/widgets/inputs/DropdownInput.vue
@@ -98,6 +98,7 @@ declare global {
 }
 
 export default defineComponent({
+	emits: ["update:selectedIndex"],
 	props: {
 		menuEntries: { type: Array as PropType<SectionsOfMenuListEntries>, required: true },
 		selectedIndex: { type: Number as PropType<number>, required: true },
diff --git a/frontend/src/components/widgets/inputs/FieldInput.vue b/frontend/src/components/widgets/inputs/FieldInput.vue
new file mode 100644
index 00000000..25a7a5ac
--- /dev/null
+++ b/frontend/src/components/widgets/inputs/FieldInput.vue
@@ -0,0 +1,116 @@
+<!-- This is a base component, extended by others like NumberInput and TextInput. It should not be used directly. -->
+<template>
+	<LayoutRow class="field-input" :class="{ disabled }">
+		<input
+			:class="{ 'has-label': label }"
+			:id="`field-input-${id}`"
+			ref="input"
+			type="text"
+			v-model="inputValue"
+			:spellcheck="spellcheck"
+			:disabled="disabled"
+			@focus="() => $emit('textFocused')"
+			@blur="() => $emit('textChanged')"
+			@change="() => $emit('textChanged')"
+			@keydown.enter="() => $emit('textChanged')"
+			@keydown.esc="() => $emit('cancelTextChange')"
+		/>
+		<label v-if="label" :for="`field-input-${id}`">{{ label }}</label>
+		<slot></slot>
+	</LayoutRow>
+</template>
+
+<style lang="scss">
+.field-input {
+	min-width: 80px;
+	height: 24px;
+	position: relative;
+	border-radius: 2px;
+	background: var(--color-1-nearblack);
+	overflow: hidden;
+	flex-direction: row-reverse;
+
+	label {
+		flex: 1 1 100%;
+		line-height: 18px;
+		margin-left: 8px;
+		padding: 3px 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	&:not(.disabled) label {
+		cursor: text;
+	}
+
+	input {
+		flex: 1 1 100%;
+		width: 0;
+		min-width: 30px;
+		height: 18px;
+		line-height: 18px;
+		margin: 0 8px;
+		padding: 3px 0;
+		outline: none;
+		border: none;
+		background: none;
+		color: var(--color-e-nearwhite);
+		text-align: center;
+
+		&:not(:focus).has-label {
+			text-align: right;
+			margin-left: 0;
+			margin-right: 8px;
+		}
+
+		&:focus {
+			text-align: left;
+
+			& + label {
+				display: none;
+			}
+		}
+	}
+
+	&.disabled {
+		background: var(--color-2-mildblack);
+
+		label,
+		input {
+			color: var(--color-8-uppergray);
+		}
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+
+export default defineComponent({
+	emits: ["update:value", "textFocused", "textChanged", "cancelTextChange"],
+	props: {
+		value: { type: String as PropType<string>, required: true },
+		label: { type: String as PropType<string>, required: false },
+		spellcheck: { type: Boolean as PropType<boolean>, default: false },
+		disabled: { type: Boolean as PropType<boolean>, default: false },
+	},
+	data() {
+		return {
+			id: `${Math.random()}`.substring(2),
+		};
+	},
+	computed: {
+		inputValue: {
+			get() {
+				return this.value;
+			},
+			set(value: string) {
+				this.$emit("update:value", value);
+			},
+		},
+	},
+	components: { LayoutRow },
+});
+</script>
diff --git a/frontend/src/components/widgets/inputs/MenuBarInput.vue b/frontend/src/components/widgets/inputs/MenuBarInput.vue
index 0ee32485..1ab9f195 100644
--- a/frontend/src/components/widgets/inputs/MenuBarInput.vue
+++ b/frontend/src/components/widgets/inputs/MenuBarInput.vue
@@ -1,12 +1,12 @@
 <template>
 	<div class="menu-bar-input">
 		<div class="entry-container">
-			<div @click="visitWebsite('https://www.graphite.design')" class="entry">
+			<div @click="() => visitWebsite('https://www.graphite.design')" class="entry">
 				<IconLabel :icon="'GraphiteLogo'" />
 			</div>
 		</div>
 		<div class="entry-container" v-for="(entry, index) in menuEntries" :key="index">
-			<div @click="handleEntryClick(entry)" class="entry" :class="{ open: entry.ref && entry.ref.isOpen() }" data-hover-menu-spawner>
+			<div @click="() => handleEntryClick(entry)" class="entry" :class="{ open: entry.ref && entry.ref.isOpen() }" data-hover-menu-spawner>
 				<IconLabel :icon="entry.icon" v-if="entry.icon" />
 				<span v-if="entry.label">{{ entry.label }}</span>
 			</div>
diff --git a/frontend/src/components/widgets/inputs/NumberInput.vue b/frontend/src/components/widgets/inputs/NumberInput.vue
index 39c231e8..d6a0a7f6 100644
--- a/frontend/src/components/widgets/inputs/NumberInput.vue
+++ b/frontend/src/components/widgets/inputs/NumberInput.vue
@@ -1,73 +1,24 @@
 <template>
-	<LayoutRow class="number-input" :class="{ disabled }">
-		<input
-			:class="{ 'has-label': label }"
-			:id="`number-input-${id}`"
-			type="text"
-			spellcheck="false"
-			v-model="text"
-			@change="onTextChanged()"
-			@keydown.esc="onCancelTextChange"
-			ref="input"
-			:disabled="disabled"
-		/>
-		<label v-if="label" :for="`number-input-${id}`">{{ label }}</label>
-		<button v-if="!Number.isNaN(value)" class="arrow left" @click="onIncrement('Decrease')"></button>
-		<button v-if="!Number.isNaN(value)" class="arrow right" @click="onIncrement('Increase')"></button>
-	</LayoutRow>
+	<FieldInput
+		class="number-input"
+		v-model:value="text"
+		:label="label"
+		:spellcheck="false"
+		:disabled="disabled"
+		@textFocused="() => onTextFocused()"
+		@textChanged="() => onTextChanged()"
+		@cancelTextChange="() => onCancelTextChange()"
+		ref="fieldInput"
+	>
+		<button v-if="!Number.isNaN(value)" class="arrow left" @click="() => onIncrement('Decrease')"></button>
+		<button v-if="!Number.isNaN(value)" class="arrow right" @click="() => onIncrement('Increase')"></button>
+	</FieldInput>
 </template>
 
 <style lang="scss">
 .number-input {
-	min-width: 80px;
-	height: 24px;
-	position: relative;
-	border-radius: 2px;
-	background: var(--color-1-nearblack);
-	overflow: hidden;
-	flex-direction: row-reverse;
-
-	label {
-		flex: 1 1 100%;
-		line-height: 18px;
-		margin-left: 8px;
-		padding: 3px 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	&:not(.disabled) label {
-		cursor: text;
-	}
-
-	input {
-		flex: 1 1 100%;
-		width: 0;
-		min-width: 30px;
-		height: 18px;
-		line-height: 18px;
-		margin: 0 8px;
-		padding: 3px 0;
-		outline: none;
-		border: none;
-		background: none;
-		color: var(--color-e-nearwhite);
-		text-align: center;
-
-		&:not(:focus).has-label {
-			text-align: right;
-			margin-left: 0;
-			margin-right: 8px;
-		}
-
-		&:focus {
-			text-align: left;
-
-			& + label,
-			& ~ .arrow {
-				display: none;
-			}
-		}
+	input:focus ~ .arrow {
+		display: none;
 	}
 
 	&:not(:hover) .arrow {
@@ -127,17 +78,8 @@
 		}
 	}
 
-	&.disabled {
-		background: var(--color-2-mildblack);
-
-		label,
-		input {
-			color: var(--color-8-uppergray);
-		}
-
-		.arrow {
-			display: none;
-		}
+	&.disabled .arrow {
+		display: none;
 	}
 }
 </style>
@@ -147,9 +89,10 @@ import { defineComponent, PropType } from "vue";
 
 import { IncrementBehavior, IncrementDirection } from "@/utilities/widgets";
 
-import LayoutRow from "@/components/layout/LayoutRow.vue";
+import FieldInput from "@/components/widgets/inputs/FieldInput.vue";
 
 export default defineComponent({
+	emits: ["update:value"],
 	props: {
 		value: { type: Number as PropType<number>, required: true },
 		min: { type: Number as PropType<number>, required: false },
@@ -167,9 +110,8 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			text: this.generateText(this.value),
+			text: this.displayText(this.value),
 			editing: false,
-			id: `${Math.random()}`.substring(2),
 		};
 	},
 	methods: {
@@ -177,8 +119,10 @@ export default defineComponent({
 			if (Number.isNaN(this.value)) this.text = "";
 			else if (this.unitIsHiddenWhenEditing) this.text = `${this.value}`;
 			else this.text = `${this.value}${this.unit}`;
+
 			this.editing = true;
-			const inputElement = this.$refs.input as HTMLInputElement;
+
+			const inputElement = (this.$refs.fieldInput as typeof FieldInput).$refs.input as HTMLInputElement;
 			// Setting the value directly is required to make `inputElement.select()` work
 			inputElement.value = this.text;
 			inputElement.select();
@@ -187,59 +131,66 @@ export default defineComponent({
 		// enter key (via the `change` event) or when the <input> element is defocused (with the `blur` event binding)
 		onTextChanged() {
 			// The `inputElement.blur()` call at the bottom of this function causes itself to be run again, so this check skips a second run
-			if (!this.editing) return;
-			const newValue = parseFloat(this.text);
-			this.updateValue(newValue);
-			this.editing = false;
-			const inputElement = this.$refs.input as HTMLElement;
-			inputElement.blur();
+			if (this.editing) {
+				const newValue = parseFloat(this.text);
+				this.updateValue(newValue);
+
+				this.editing = false;
+
+				const inputElement = (this.$refs.fieldInput as typeof FieldInput).$refs.input as HTMLInputElement;
+				inputElement.blur();
+			}
 		},
 		onCancelTextChange() {
 			this.updateValue(NaN);
+
 			this.editing = false;
-			const inputElement = this.$refs.input as HTMLElement;
+
+			const inputElement = (this.$refs.fieldInput as typeof FieldInput).$refs.input as HTMLInputElement;
 			inputElement.blur();
 		},
 		onIncrement(direction: IncrementDirection) {
 			if (Number.isNaN(this.value)) return;
-			switch (this.incrementBehavior) {
-				case "Add": {
+
+			({
+				Add: (): void => {
 					const directionAddend = direction === "Increase" ? this.incrementFactor : -this.incrementFactor;
 					this.updateValue(this.value + directionAddend);
-					break;
-				}
-				case "Multiply": {
+				},
+				Multiply: (): void => {
 					const directionMultiplier = direction === "Increase" ? this.incrementFactor : 1 / this.incrementFactor;
 					this.updateValue(this.value * directionMultiplier);
-					break;
-				}
-				case "Callback": {
+				},
+				Callback: (): void => {
 					if (direction === "Increase" && this.incrementCallbackIncrease) this.incrementCallbackIncrease();
 					if (direction === "Decrease" && this.incrementCallbackDecrease) this.incrementCallbackDecrease();
-					break;
-				}
-				default:
-					break;
-			}
+				},
+				None: (): void => undefined,
+			}[this.incrementBehavior]());
 		},
 		updateValue(newValue: number) {
-			let sanitized = newValue;
 			const invalid = Number.isNaN(newValue);
+
+			let sanitized = newValue;
 			if (invalid) sanitized = this.value;
 			if (this.isInteger) sanitized = Math.round(sanitized);
 			if (typeof this.min === "number" && !Number.isNaN(this.min)) sanitized = Math.max(sanitized, this.min);
 			if (typeof this.max === "number" && !Number.isNaN(this.max)) sanitized = Math.min(sanitized, this.max);
+
 			if (!invalid) this.$emit("update:value", sanitized);
-			this.text = this.generateText(sanitized);
+
+			this.text = this.displayText(sanitized);
 		},
-		generateText(value: number): string {
+		displayText(value: number): string {
 			// Find the amount of digits on the left side of the decimal
 			// 10.25 == 2
 			// 1.23 == 1
-			// 0.23 == 0 (Reason for the slightly more complicated code)
+			// 0.23 == 0 (reason for the slightly more complicated code)
 			const leftSideDigits = Math.max(Math.floor(value).toString().length, 0) * Math.sign(value);
 			const roundingPower = 10 ** Math.max(this.displayDecimalPlaces - leftSideDigits, 0);
+
 			const displayValue = Math.round(value * roundingPower) / roundingPower;
+
 			return `${displayValue}${this.unit}`;
 		},
 	},
@@ -250,23 +201,15 @@ export default defineComponent({
 				this.text = "-";
 				return;
 			}
+
 			// The simple `clamp()` function can't be used here since `undefined` values need to be boundless
 			let sanitized = newValue;
 			if (typeof this.min === "number") sanitized = Math.max(sanitized, this.min);
 			if (typeof this.max === "number") sanitized = Math.min(sanitized, this.max);
-			this.text = this.generateText(sanitized);
+
+			this.text = this.displayText(sanitized);
 		},
 	},
-	mounted() {
-		const inputElement = this.$refs.input as HTMLInputElement;
-		inputElement.addEventListener("focus", this.onTextFocused);
-		inputElement.addEventListener("blur", this.onTextChanged);
-	},
-	beforeUnmount() {
-		const inputElement = this.$refs.input as HTMLInputElement;
-		inputElement.removeEventListener("focus", this.onTextFocused);
-		inputElement.removeEventListener("blur", this.onTextChanged);
-	},
-	components: { LayoutRow },
+	components: { FieldInput },
 });
 </script>
diff --git a/frontend/src/components/widgets/inputs/OptionalInput.vue b/frontend/src/components/widgets/inputs/OptionalInput.vue
index 9c924429..f39a4556 100644
--- a/frontend/src/components/widgets/inputs/OptionalInput.vue
+++ b/frontend/src/components/widgets/inputs/OptionalInput.vue
@@ -41,6 +41,7 @@ import LayoutRow from "@/components/layout/LayoutRow.vue";
 import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
 
 export default defineComponent({
+	emits: ["update:checked"],
 	props: {
 		checked: { type: Boolean as PropType<boolean>, required: true },
 		icon: { type: String as PropType<IconName>, default: "Checkmark" },
diff --git a/frontend/src/components/widgets/inputs/RadioInput.vue b/frontend/src/components/widgets/inputs/RadioInput.vue
index 86266b4b..c7e2aeae 100644
--- a/frontend/src/components/widgets/inputs/RadioInput.vue
+++ b/frontend/src/components/widgets/inputs/RadioInput.vue
@@ -1,6 +1,6 @@
 <template>
 	<LayoutRow class="radio-input">
-		<button :class="{ active: index === selectedIndex }" v-for="(entry, index) in entries" :key="index" @click="handleEntryClick(entry)" :title="entry.tooltip">
+		<button :class="{ active: index === selectedIndex }" v-for="(entry, index) in entries" :key="index" @click="() => handleEntryClick(entry)" :title="entry.tooltip">
 			<IconLabel v-if="entry.icon" :icon="entry.icon" />
 			<TextLabel v-if="entry.label">{{ entry.label }}</TextLabel>
 		</button>
@@ -81,6 +81,7 @@ export interface RadioEntryData {
 export type RadioEntries = RadioEntryData[];
 
 export default defineComponent({
+	emits: ["update:selectedIndex"],
 	props: {
 		entries: { type: Array as PropType<RadioEntries>, required: true },
 		selectedIndex: { type: Number as PropType<number>, required: true },
diff --git a/frontend/src/components/widgets/inputs/TextInput.vue b/frontend/src/components/widgets/inputs/TextInput.vue
new file mode 100644
index 00000000..8d985899
--- /dev/null
+++ b/frontend/src/components/widgets/inputs/TextInput.vue
@@ -0,0 +1,68 @@
+<template>
+	<FieldInput
+		class="text-input"
+		v-model:value="text"
+		:label="label"
+		:spellcheck="true"
+		:disabled="disabled"
+		@textFocused="() => onTextFocused()"
+		@textChanged="() => onTextChanged()"
+		@cancelTextChange="() => onCancelTextChange()"
+		ref="fieldInput"
+	></FieldInput>
+</template>
+
+<style lang="scss"></style>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+
+import FieldInput from "@/components/widgets/inputs/FieldInput.vue";
+
+export default defineComponent({
+	emits: ["update:value"],
+	props: {
+		value: { type: String as PropType<string>, required: true },
+		label: { type: String as PropType<string>, required: false },
+		disabled: { type: Boolean as PropType<boolean>, default: false },
+	},
+	data() {
+		return {
+			editing: false,
+		};
+	},
+	computed: {
+		text: {
+			get() {
+				return this.value;
+			},
+			set(value: string) {
+				this.$emit("update:value", value);
+			},
+		},
+	},
+	methods: {
+		onTextFocused() {
+			this.editing = true;
+
+			const inputElement = (this.$refs.fieldInput as typeof FieldInput).$refs.input as HTMLInputElement;
+			// Setting the value directly is required to make `inputElement.select()` work
+			inputElement.value = this.text;
+			inputElement.select();
+		},
+		// Called only when `value` is changed from the <input> element via user input and committed, either with the
+		// enter key (via the `change` event) or when the <input> element is defocused (with the `blur` event binding)
+		onTextChanged() {
+			// The `inputElement.blur()` call in `onCancelTextChange()` causes itself to be run again, so this if statement skips a second run
+			if (this.editing) this.onCancelTextChange();
+		},
+		onCancelTextChange() {
+			this.editing = false;
+
+			const inputElement = (this.$refs.fieldInput as typeof FieldInput).$refs.input as HTMLInputElement;
+			inputElement.blur();
+		},
+	},
+	components: { FieldInput },
+});
+</script>
diff --git a/frontend/src/components/widgets/scrollbars/PersistentScrollbar.vue b/frontend/src/components/widgets/scrollbars/PersistentScrollbar.vue
index 2d31f96d..9561383a 100644
--- a/frontend/src/components/widgets/scrollbars/PersistentScrollbar.vue
+++ b/frontend/src/components/widgets/scrollbars/PersistentScrollbar.vue
@@ -1,10 +1,10 @@
 <template>
 	<div class="persistent-scrollbar" :class="direction.toLowerCase()">
-		<button class="arrow decrease" @pointerdown="changePosition(-50)"></button>
+		<button class="arrow decrease" @pointerdown="() => changePosition(-50)"></button>
 		<div class="scroll-track" ref="scrollTrack" @pointerdown="(e) => grabArea(e)">
 			<div class="scroll-thumb" @pointerdown="(e) => grabHandle(e)" :class="{ dragging }" ref="handle" :style="[thumbStart, thumbEnd, sides]"></div>
 		</div>
-		<button class="arrow increase" @click="changePosition(50)"></button>
+		<button class="arrow increase" @click="() => changePosition(50)"></button>
 	</div>
 </template>
 
@@ -121,6 +121,10 @@ const handleToTrack = (handleLen: number, handlePos: number): number => lerp(han
 const pointerPosition = (direction: ScrollbarDirection, e: PointerEvent): number => (direction === "Vertical" ? e.clientY : e.clientX);
 
 export default defineComponent({
+	emits: {
+		"update:handlePosition": null,
+		pressTrack: (pointerOffset: number) => typeof pointerOffset === "number",
+	},
 	props: {
 		direction: { type: String as PropType<ScrollbarDirection>, default: "Vertical" },
 		handlePosition: { type: Number as PropType<number>, default: 0.5 },
diff --git a/frontend/src/components/workspace/Workspace.vue b/frontend/src/components/workspace/Workspace.vue
index 528f2db0..14cb4b4f 100644
--- a/frontend/src/components/workspace/Workspace.vue
+++ b/frontend/src/components/workspace/Workspace.vue
@@ -118,22 +118,18 @@ export default defineComponent({
 				nextSibling.style.flexGrow = (nextSiblingSize + mouseDelta).toString();
 				previousSibling.style.flexGrow = (previousSiblingSize - mouseDelta).toString();
 
-				window.dispatchEvent(
-					new CustomEvent("resize", {
-						detail: {},
-					})
-				);
+				window.dispatchEvent(new CustomEvent("resize", { detail: {} }));
 			}
 
-			document.addEventListener("pointermove", updatePosition);
-
 			function cleanup(event: PointerEvent): void {
 				gutter.releasePointerCapture(event.pointerId);
+
 				document.removeEventListener("pointermove", updatePosition);
 				document.removeEventListener("pointerleave", cleanup);
 				document.removeEventListener("pointerup", cleanup);
 			}
 
+			document.addEventListener("pointermove", updatePosition);
 			document.addEventListener("pointerleave", cleanup);
 			document.addEventListener("pointerup", cleanup);
 		},
diff --git a/frontend/src/dispatcher/js-messages.ts b/frontend/src/dispatcher/js-messages.ts
index 06a86c25..6460c785 100644
--- a/frontend/src/dispatcher/js-messages.ts
+++ b/frontend/src/dispatcher/js-messages.ts
@@ -412,7 +412,7 @@ export function isWidgetSection(layoutRow: WidgetRow | WidgetSection): layoutRow
 	return Boolean((layoutRow as WidgetSection).layout);
 }
 
-export type WidgetKind = "NumberInput" | "Separator" | "IconButton" | "PopoverButton" | "OptionalInput" | "RadioInput";
+export type WidgetKind = "NumberInput" | "Separator" | "IconButton" | "PopoverButton" | "OptionalInput" | "RadioInput" | "TextInput";
 
 export interface Widget {
 	kind: WidgetKind;