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

packages/editor-ui/src/composables/useExpressionEditor.ts

@@ -25,7 +25,13 @@ import {
 	isEmptyExpression,
 } from '@/utils/expressions';
 import { completionStatus } from '@codemirror/autocomplete';
-import { Compartment, EditorState, type Extension } from '@codemirror/state';
+import {
+	Compartment,
+	EditorState,
+	type SelectionRange,
+	type Extension,
+	EditorSelection,
+} from '@codemirror/state';
 import { EditorView, type ViewUpdate } from '@codemirror/view';
 import { debounce, isEqual } from 'lodash-es';
 import { useRouter } from 'vue-router';
@@ -59,6 +65,7 @@ export const useExpressionEditor = ({
 	const editor = ref<EditorView>();
 	const hasFocus = ref(false);
 	const segments = ref<Segment[]>([]);
+	const selection = ref<SelectionRange>(EditorSelection.cursor(0)) as Ref<SelectionRange>;
 	const customExtensions = ref<Compartment>(new Compartment());
 	const readOnlyExtensions = ref<Compartment>(new Compartment());
 	const telemetryExtensions = ref<Compartment>(new Compartment());
@@ -108,7 +115,7 @@ export const useExpressionEditor = ({
 					// For some reason, expressions that resolve to a number 0 are breaking preview in the SQL editor
 					// This fixes that but as as TODO we should figure out why this is happening
 					resolved: String(resolved),
-					state: getResolvableState(fullError ?? error, completionStatus !== null),
+					state: getResolvableState(fullError ?? error, autocompleteStatus.value !== null),
 					error: fullError,
 				});
 
@@ -131,11 +138,22 @@ export const useExpressionEditor = ({
 		highlighter.addColor(editor.value, resolvableSegments.value);
 	}
 
-	const debouncedUpdateSegments = debounce(updateSegments, 200);
-	function onEditorUpdate(viewUpdate: ViewUpdate) {
-		if (!viewUpdate.docChanged || !editor.value) return;
+	function updateSelection(viewUpdate: ViewUpdate) {
+		const currentSelection = selection.value;
+		const newSelection = viewUpdate.state.selection.ranges[0];
 
+		if (!currentSelection?.eq(newSelection)) {
+			selection.value = newSelection;
+		}
+	}
+
+	const debouncedUpdateSegments = debounce(updateSegments, 200);
+
+	function onEditorUpdate(viewUpdate: ViewUpdate) {
 		autocompleteStatus.value = completionStatus(viewUpdate.view.state);
+		updateSelection(viewUpdate);
+
+		if (!viewUpdate.docChanged) return;
 
 		debouncedUpdateSegments();
 	}
@@ -157,6 +175,7 @@ export const useExpressionEditor = ({
 				EditorView.updateListener.of(onEditorUpdate),
 				EditorView.focusChangeEffect.of((_, newHasFocus) => {
 					hasFocus.value = newHasFocus;
+					selection.value = state.selection.ranges[0];
 					return null;
 				}),
 				EditorView.contentAttributes.of({ 'data-gramm': 'false' }), // disable grammarly
@@ -389,6 +408,7 @@ export const useExpressionEditor = ({
 	return {
 		editor,
 		hasFocus,
+		selection,
 		segments: {
 			all: segments,
 			html: htmlSegments,