feat(editor): Show tip when user can type dot after an expression (#8931)

packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue

@@ -1,11 +1,7 @@
-<template>
-	<div ref="root" :class="$style.editor" data-test-id="inline-expression-editor-input"></div>
-</template>
-
 <script setup lang="ts">
 import { startCompletion } from '@codemirror/autocomplete';
 import { history } from '@codemirror/commands';
-import { Prec } from '@codemirror/state';
+import { type EditorState, Prec, type SelectionRange } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, toValue, watch } from 'vue';
 
@@ -42,7 +38,8 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-	(event: 'change', value: { value: string; segments: Segment[] }): void;
+	(event: 'update:model-value', value: { value: string; segments: Segment[] }): void;
+	(event: 'update:selection', value: { state: EditorState; selection: SelectionRange }): void;
 	(event: 'focus'): void;
 }>();
 
@@ -64,6 +61,7 @@ const editorValue = ref<string>(removeExpressionPrefix(props.modelValue));
 const {
 	editor: editorRef,
 	segments,
+	selection,
 	readEditorValue,
 	setCursorPosition,
 	hasFocus,
@@ -79,22 +77,27 @@ const {
 
 defineExpose({
 	focus: () => {
-		setCursorPosition('lastExpression');
-		focus();
+		if (!hasFocus.value) {
+			setCursorPosition('lastExpression');
+			focus();
+		}
 	},
 });
 
 async function onDrop() {
+	await nextTick();
+
 	const editor = toValue(editorRef);
 	if (!editor) return;
 
-	await nextTick();
 	focus();
 
 	setCursorPosition('lastExpression');
 
 	if (!ndvStore.isAutocompleteOnboarded) {
-		startCompletion(editor);
+		setTimeout(() => {
+			startCompletion(editor);
+		});
 	}
 }
 
@@ -106,12 +109,21 @@ watch(
 );
 
 watch(segments.display, (newSegments) => {
-	emit('change', {
+	emit('update:model-value', {
 		value: '=' + readEditorValue(),
 		segments: newSegments,
 	});
 });
 
+watch(selection, (newSelection: SelectionRange) => {
+	if (editorRef.value) {
+		emit('update:selection', {
+			state: editorRef.value.state,
+			selection: newSelection,
+		});
+	}
+});
+
 watch(hasFocus, (focused) => {
 	if (focused) emit('focus');
 });
@@ -125,6 +137,10 @@ onBeforeUnmount(() => {
 });
 </script>
 
+<template>
+	<div ref="root" :class="$style.editor" data-test-id="inline-expression-editor-input"></div>
+</template>
+
 <style lang="scss" module>
 .editor div[contenteditable='false'] {
 	background-color: var(--disabled-fill, var(--color-background-light));