feat: state autocompletion for builder settings fields

src/ui/package.json

@@ -19,6 +19,7 @@
 		"@tato30/vue-pdf": "^1.9.6",
 		"arquero": "^5.2.0",
 		"chroma-js": "^2.4.2",
+		"fuse.js": "7.0.0",
 		"mapbox-gl": "3.2.0",
 		"marked": "^12.0.1",
 		"monaco-editor": "^0.47.0",

src/ui/src/builder/BuilderFieldsAlign.vue

@@ -43,10 +43,9 @@
 				/>
 			</div>
 
-			<input
+			<BuilderTemplateInput
 				v-if="mode == 'css'"
 				ref="freehandInputEl"
-				type="text"
 				:value="component.content[fieldKey]"
 				@input="handleInputCss"
 			/>
@@ -70,6 +69,7 @@ import { Component } from "../streamsyncTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
 import BuilderSelect from "./BuilderSelect.vue";
+import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 
 const ss = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);

src/ui/src/builder/BuilderFieldsColor.vue

@@ -48,11 +48,10 @@
 					@input="handleInput"
 				/>
 			</div>
-
-			<input
+			
+			<BuilderTemplateInput
 				v-if="mode == 'css'"
 				ref="freehandInputEl"
-				type="text"
 				:value="component.content[fieldKey]"
 				@input="handleInput"
 			/>
@@ -74,6 +73,7 @@ import {
 import { Component } from "../streamsyncTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
+import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 
 const ss = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);

src/ui/src/builder/BuilderFieldsKeyValue.vue

@@ -38,16 +38,14 @@
 				</div>
 			</div>
 			<div class="formAdd">
-				<input
+				<BuilderTemplateInput
 					ref="assistedKeyEl"
-					v-model="formAdd.key"
-					type="text"
+					v-model:value="formAdd.key"
 					placeholder="Type a key..."
 					@keydown.enter="addAssistedEntry"
 				/>
-				<input
-					v-model="formAdd.value"
-					type="text"
+				<BuilderTemplateInput
+					v-model:value="formAdd.value"
 					placeholder="Type a value..."
 					@keydown.enter="addAssistedEntry"
 				/>
@@ -81,6 +79,7 @@ import { Component } from "../streamsyncTypes";
 import BuilderFieldsObject from "./BuilderFieldsObject.vue";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
+import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 
 const ss = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -250,13 +249,7 @@ onMounted(async () => {
 	padding: 12px;
 }
 
-textarea {
-	resize: vertical;
-	height: 8em;
-	padding: 12px;
-}
-
-input {
+.BuilderTemplateInput {
 	margin-bottom: 8px;
 }
 </style>

src/ui/src/builder/BuilderFieldsObject.vue

@@ -1,25 +1,19 @@
 <template>
-	<textarea
-		v-capture-tabs
-		class="BuilderFieldsObject"
-		variant="code"
+	<BuilderTemplateTextarea
 		:value="component.content[fieldKey]"
-		autocorrect="off"
-		autocomplete="off"
-		spellcheck="false"
-		:placeholder="templateField.default"
 		@input="
 			(ev: Event) =>
 				formatAndSetContentValue((ev.target as HTMLInputElement).value)
 		"
-	></textarea>
+	/>
 </template>
 
 <script setup lang="ts">
 import { toRefs, inject, computed } from "vue";
 import { Component } from "../streamsyncTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
+import BuilderTemplateTextarea from "./BuilderTemplateTextarea.vue";
 
 const ss = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);

src/ui/src/builder/BuilderFieldsPadding.vue

@@ -113,10 +113,9 @@
 				</div>
 			</div>
 
-			<input
+			<BuilderTemplateInput
 				v-if="mode == 'css'"
 				ref="freehandInputEl"
-				type="text"
 				:value="component.content[fieldKey]"
 				@input="handleInputCss"
 			/>
@@ -141,6 +140,7 @@ import injectionKeys from "../injectionKeys";
 import BuilderSelect from "./BuilderSelect.vue";
 import { languages } from "monaco-editor";
 import css = languages.css;
+import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 
 const ss = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);

src/ui/src/builder/BuilderFieldsShadow.vue

@@ -113,10 +113,9 @@
 				</div>
 			</div>
 
-			<input
+			<BuilderTemplateInput
 				v-if="mode == 'css'"
 				ref="freehandInputEl"
-				type="text"
 				:value="component.content[fieldKey]"
 				@input="handleCSSInput"
 			/>
@@ -138,6 +137,7 @@ import {
 import { Component } from "../streamsyncTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
+import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 
 const ss = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);

src/ui/src/builder/BuilderFieldsText.vue

@@ -6,70 +6,47 @@
 				templateField.control == FieldControl.Text
 			"
 		>
-			<input
-				type="text"
-				:value="component.content[fieldKey]"
+			<BuilderTemplateInput
 				class="content"
-				autocorrect="off"
-				autocomplete="off"
-				spellcheck="false"
+				:value="component.content[fieldKey]"
 				:placeholder="templateField?.default"
-				:list="
-					templateField.options
-						? `list-${componentId}-${fieldKey}`
-						: undefined
-				"
+				:options="templateField.options"
 				@input="handleInput"
 			/>
-			<datalist
-				v-if="templateField.options"
-				:id="`list-${componentId}-${fieldKey}`"
-			>
-				<option
-					v-for="(option, optionKey) in options"
-					:key="optionKey"
-					:value="optionKey"
-				>
-					<template
-						v-if="option.toLowerCase() !== optionKey.toLowerCase()"
-					>
-						{{ option }}
-					</template>
-				</option>
-			</datalist>
 		</template>
 		<template v-else-if="templateField.control == FieldControl.Textarea">
-			<textarea
-				v-capture-tabs
+			<BuilderTemplateTextarea
 				class="content"
 				:value="component.content[fieldKey]"
 				:placeholder="templateField?.default"
-				autocorrect="off"
-				autocomplete="off"
-				spellcheck="false"
 				@input="handleInput"
-			>
-			</textarea>
+			/>
 		</template>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { toRefs, inject, computed } from "vue";
+import { toRefs, inject, computed, ref, watch } from "vue";
 import { Component, FieldControl } from "../streamsyncTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
+import BuilderTemplateInput from "./BuilderTemplateInput.vue";
+import BuilderTemplateTextarea from "./BuilderTemplateTextarea.vue";
+import Fuse from 'fuse.js';
 
 const ss = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const { setContentValue } = useComponentActions(ss, ssbm);
 
+const autocompleteOptions = ref<string[]>([]);
+
 const props = defineProps<{
 	componentId: Component["id"];
 	fieldKey: string;
 }>();
 const { componentId, fieldKey } = toRefs(props);
 const component = computed(() => ss.getComponentById(componentId.value));
+const value = computed(() => component.value.content[fieldKey.value]);
 const templateField = computed(() => {
 	const { type } = component.value;
 	const definition = ss.getComponentDefinition(type);
@@ -93,14 +70,38 @@ const handleInput = (ev: Event) => {
 		(ev.target as HTMLInputElement).value,
 	);
 };
+
 </script>
 
+<style>
+.BuilderFieldsText .content {
+	padding: 16px 12px 12px 12px;
+	width: 100%;
+}
+</style>
+
 <style scoped>
 @import "./sharedStyles.css";
 
-.content {
-	padding: 16px 12px 12px 12px;
+.field-state-autocomplete {
+	position: absolute;
+	background-color: var(--builderBackgroundColor);
+	border: 1px solid var(--builderSeparatorColor);
+	border-radius: 4px;
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+	max-height: 200px;
+	overflow-y: auto;
 	width: 100%;
+	z-index: 2;
+}
+
+.field-state-autocomplete-option {
+	padding: 8px 12px;
+	cursor: pointer;
+}
+
+.field-state-autocomplete-option:hover {
+	background-color: var(--builderSubtleHighlightColorSolid);
 }
 
 textarea {

src/ui/src/builder/BuilderFieldsWidth.vue

@@ -52,10 +52,10 @@
 				</div>
 			</div>
 
-			<input
+
+			<BuilderTemplateInput
 				v-if="mode == 'css'"
 				ref="freehandInputEl"
-				type="text"
 				:value="component.content[fieldKey]"
 				@input="handleInputCss"
 			/>
@@ -78,6 +78,7 @@ import { Component } from "../streamsyncTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
 import BuilderSelect from "./BuilderSelect.vue";
+import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 
 const ss = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);