refactor(editor): Move editor-ui and design-system to frontend dir (no-changelog) (#13564)

packages/frontend/editor-ui/src/components/InlineTextEdit.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import ExpandableInputEdit from '@/components/ExpandableInput/ExpandableInputEdit.vue';
+import ExpandableInputPreview from '@/components/ExpandableInput/ExpandableInputPreview.vue';
+import { createEventBus } from '@n8n/utils/event-bus';
+
+const props = withDefaults(
+	defineProps<{
+		isEditEnabled: boolean;
+		modelValue: string;
+		placeholder: string;
+		maxLength: number;
+		previewValue: string;
+		disabled: boolean;
+	}>(),
+	{
+		isEditEnabled: false,
+		modelValue: '',
+		placeholder: '',
+		maxLength: 0,
+		previewValue: '',
+		disabled: false,
+	},
+);
+
+const emit = defineEmits<{
+	toggle: [];
+	submit: [payload: { name: string; onSubmit: (updated: boolean) => void }];
+}>();
+
+const isDisabled = ref(props.disabled);
+const newValue = ref('');
+const escPressed = ref(false);
+const inputBus = ref(createEventBus());
+
+watch(
+	() => props.disabled,
+	(value) => {
+		isDisabled.value = value;
+	},
+);
+
+function onInput(val: string) {
+	if (isDisabled.value) return;
+	newValue.value = val;
+}
+
+function onClick() {
+	if (isDisabled.value) return;
+	newValue.value = props.modelValue;
+	emit('toggle');
+}
+
+function onBlur() {
+	if (isDisabled.value) return;
+	if (!escPressed.value) {
+		submit();
+	}
+	escPressed.value = false;
+}
+
+function submit() {
+	if (isDisabled.value) return;
+	const onSubmit = (updated: boolean) => {
+		isDisabled.value = false;
+		if (!updated) {
+			inputBus.value.emit('focus');
+		}
+	};
+	isDisabled.value = true;
+	emit('submit', { name: newValue.value, onSubmit });
+}
+
+function onEscape() {
+	if (isDisabled.value) return;
+	escPressed.value = true;
+	emit('toggle');
+}
+</script>
+
+<template>
+	<span class="inline-edit" @keydown.stop>
+		<span v-if="isEditEnabled && !isDisabled">
+			<ExpandableInputEdit
+				v-model="newValue"
+				:placeholder="placeholder"
+				:maxlength="maxLength"
+				:autofocus="true"
+				:event-bus="inputBus"
+				@update:model-value="onInput"
+				@esc="onEscape"
+				@blur="onBlur"
+				@enter="submit"
+			/>
+		</span>
+
+		<span v-else class="preview" @click="onClick">
+			<ExpandableInputPreview :model-value="previewValue || modelValue" />
+		</span>
+	</span>
+</template>
+
+<style lang="scss" scoped>
+.preview {
+	cursor: pointer;
+}
+</style>