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

cypress/e2e/14-mapping.cy.ts

@@ -255,6 +255,7 @@ describe('Data mapping', () => {
 		ndv.actions.typeIntoParameterInput('value', 'delete me');
 
 		ndv.actions.typeIntoParameterInput('name', 'test');
+		ndv.getters.parameterInput('name').find('input').blur();
 
 		ndv.actions.typeIntoParameterInput('value', 'fun');
 		ndv.actions.clearParameterInput('value'); // keep focus on param

packages/editor-ui/src/Interface.ts

@@ -1247,6 +1247,7 @@ export interface NDVState {
 	};
 	isMappingOnboarded: boolean;
 	isAutocompleteOnboarded: boolean;
+	highlightDraggables: boolean;
 }
 
 export interface NotificationOptions extends Partial<ElementNotificationOptions> {

packages/editor-ui/src/components/ExpressionParameterInput.vue

@@ -1,3 +1,124 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
+import ExpressionFunctionIcon from '@/components/ExpressionFunctionIcon.vue';
+import InlineExpressionEditorInput from '@/components/InlineExpressionEditor/InlineExpressionEditorInput.vue';
+import InlineExpressionEditorOutput from '@/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue';
+import { useNDVStore } from '@/stores/ndv.store';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import { createExpressionTelemetryPayload } from '@/utils/telemetryUtils';
+
+import { useTelemetry } from '@/composables/useTelemetry';
+import type { Segment } from '@/types/expressions';
+import { createEventBus, type EventBus } from 'n8n-design-system/utils';
+import type { IDataObject } from 'n8n-workflow';
+import type { EditorState, SelectionRange } from '@codemirror/state';
+
+const isFocused = ref(false);
+const segments = ref<Segment[]>([]);
+const editorState = ref<EditorState>();
+const selection = ref<SelectionRange>();
+const inlineInput = ref<InstanceType<typeof InlineExpressionEditorInput>>();
+
+type Props = {
+	path: string;
+	modelValue: string;
+	isReadOnly: boolean;
+	rows: number;
+	isAssignment: boolean;
+	additionalExpressionData: IDataObject;
+	eventBus: EventBus;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+	rows: 5,
+	isAssignment: false,
+	additionalExpressionData: () => ({}),
+	eventBus: () => createEventBus(),
+});
+
+const emit = defineEmits<{
+	(event: 'modal-opener-click'): void;
+	(event: 'update:model-value', value: string): void;
+	(event: 'focus'): void;
+	(event: 'blur'): void;
+}>();
+
+const telemetry = useTelemetry();
+const ndvStore = useNDVStore();
+const workflowsStore = useWorkflowsStore();
+
+const hoveringItemNumber = computed(() => ndvStore.hoveringItemNumber);
+const isDragging = computed(() => ndvStore.isDraggableDragging);
+const noInputData = computed(() => ndvStore.hasInputData);
+
+function focus() {
+	if (inlineInput.value) {
+		inlineInput.value.focus();
+	}
+}
+
+function onFocus() {
+	isFocused.value = true;
+	emit('focus');
+}
+
+function onBlur(event?: FocusEvent | KeyboardEvent) {
+	if (
+		event?.target instanceof Element &&
+		Array.from(event.target.classList).some((_class) => _class.includes('resizer'))
+	) {
+		return; // prevent blur on resizing
+	}
+
+	const wasFocused = isFocused.value;
+
+	isFocused.value = false;
+
+	if (wasFocused) {
+		emit('blur');
+
+		const telemetryPayload = createExpressionTelemetryPayload(
+			segments.value,
+			props.modelValue,
+			workflowsStore.workflowId,
+			ndvStore.sessionId,
+			ndvStore.activeNode?.type ?? '',
+		);
+
+		telemetry.track('User closed Expression Editor', telemetryPayload);
+	}
+}
+
+function onValueChange({ value, segments: newSegments }: { value: string; segments: Segment[] }) {
+	segments.value = newSegments;
+
+	if (isDragging.value) return;
+	if (value === '=' + props.modelValue) return; // prevent report on change of target item
+
+	emit('update:model-value', value);
+}
+
+function onSelectionChange({
+	state: newState,
+	selection: newSelection,
+}: {
+	state: EditorState;
+	selection: SelectionRange;
+}) {
+	editorState.value = newState;
+	selection.value = newSelection;
+}
+
+watch(isDragging, (newIsDragging) => {
+	if (newIsDragging) {
+		onBlur();
+	}
+});
+
+defineExpose({ focus });
+</script>
+
 <template>
 	<div
 		v-on-click-outside="onBlur"
@@ -24,7 +145,8 @@
 				:event-bus="eventBus"
 				@focus="onFocus"
 				@blur="onBlur"
-				@change="onChange"
+				@update:model-value="onValueChange"
+				@update:selection="onSelectionChange"
 			/>
 			<n8n-button
 				v-if="!isDragging"
@@ -35,10 +157,13 @@
 				size="xsmall"
 				:class="$style['expression-editor-modal-opener']"
 				data-test-id="expander"
-				@click="$emit('modal-opener-click')"
+				@click="emit('modal-opener-click')"
 			/>
 		</div>
 		<InlineExpressionEditorOutput
+			:unresolved-expression="modelValue"
+			:selection="selection"
+			:editor-state="editorState"
 			:segments="segments"
 			:is-read-only="isReadOnly"
 			:no-input-data="noInputData"
@@ -48,137 +173,6 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { mapStores } from 'pinia';
-import type { PropType } from 'vue';
-import { defineComponent } from 'vue';
-
-import { useNDVStore } from '@/stores/ndv.store';
-import { useWorkflowsStore } from '@/stores/workflows.store';
-import InlineExpressionEditorInput from '@/components/InlineExpressionEditor/InlineExpressionEditorInput.vue';
-import InlineExpressionEditorOutput from '@/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue';
-import ExpressionFunctionIcon from '@/components/ExpressionFunctionIcon.vue';
-import { createExpressionTelemetryPayload } from '@/utils/telemetryUtils';
-
-import type { Segment } from '@/types/expressions';
-import type { IDataObject } from 'n8n-workflow';
-import { useDebounce } from '@/composables/useDebounce';
-import { type EventBus, createEventBus } from 'n8n-design-system/utils';
-
-type InlineExpressionEditorInputRef = InstanceType<typeof InlineExpressionEditorInput>;
-
-export default defineComponent({
-	name: 'ExpressionParameterInput',
-	components: {
-		InlineExpressionEditorInput,
-		InlineExpressionEditorOutput,
-		ExpressionFunctionIcon,
-	},
-	props: {
-		path: {
-			type: String,
-			required: true,
-		},
-		modelValue: {
-			type: String,
-			required: true,
-		},
-		isReadOnly: {
-			type: Boolean,
-			default: false,
-		},
-		rows: {
-			type: Number,
-			default: 5,
-		},
-		isAssignment: {
-			type: Boolean,
-			default: false,
-		},
-		additionalExpressionData: {
-			type: Object as PropType<IDataObject>,
-			default: () => ({}),
-		},
-		eventBus: {
-			type: Object as PropType<EventBus>,
-			default: () => createEventBus(),
-		},
-	},
-	emits: ['focus', 'blur', 'update:model-value', 'modal-opener-click'],
-	setup() {
-		const { callDebounced } = useDebounce();
-		return { callDebounced };
-	},
-	data() {
-		return {
-			isFocused: false,
-			segments: [] as Segment[],
-		};
-	},
-	computed: {
-		...mapStores(useNDVStore, useWorkflowsStore),
-		hoveringItemNumber(): number {
-			return this.ndvStore.hoveringItemNumber;
-		},
-		isDragging(): boolean {
-			return this.ndvStore.isDraggableDragging;
-		},
-		noInputData(): boolean {
-			return !this.ndvStore.hasInputData;
-		},
-	},
-	methods: {
-		focus() {
-			const inlineInputRef = this.$refs.inlineInput as InlineExpressionEditorInputRef | undefined;
-			if (inlineInputRef?.$el) {
-				inlineInputRef.focus();
-			}
-		},
-		onFocus() {
-			this.isFocused = true;
-
-			this.$emit('focus');
-		},
-		onBlur(event?: FocusEvent | KeyboardEvent) {
-			if (
-				event?.target instanceof Element &&
-				Array.from(event.target.classList).some((_class) => _class.includes('resizer'))
-			) {
-				return; // prevent blur on resizing
-			}
-
-			if (this.isDragging) return; // prevent blur on dragging
-
-			const wasFocused = this.isFocused;
-
-			this.isFocused = false;
-
-			if (wasFocused) {
-				this.$emit('blur');
-
-				const telemetryPayload = createExpressionTelemetryPayload(
-					this.segments,
-					this.modelValue,
-					this.workflowsStore.workflowId,
-					this.ndvStore.sessionId,
-					this.ndvStore.activeNode?.type ?? '',
-				);
-
-				this.$telemetry.track('User closed Expression Editor', telemetryPayload);
-			}
-		},
-		onChange({ value, segments }: { value: string; segments: Segment[] }) {
-			this.segments = segments;
-
-			if (this.isDragging) return;
-			if (value === '=' + this.modelValue) return; // prevent report on change of target item
-
-			this.$emit('update:model-value', value);
-		},
-	},
-});
-</script>
-
 <style lang="scss" module>
 .expression-parameter-input {
 	position: relative;

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');
+		if (!hasFocus.value) {
-		focus();
+			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));

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

@@ -1,20 +1,6 @@
-<template>
-	<div :class="visible ? $style.dropdown : $style.hidden">
-		<n8n-text v-if="!noInputData" size="small" compact :class="$style.header">
-			{{ i18n.baseText('parameterInput.resultForItem') }} {{ hoveringItemNumber }}
-		</n8n-text>
-		<n8n-text :class="$style.body">
-			<div ref="root" data-test-id="inline-expression-editor-output"></div>
-		</n8n-text>
-		<div :class="$style.footer">
-			<InlineExpressionTip />
-		</div>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { EditorView } from '@codemirror/view';
-import { EditorState } from '@codemirror/state';
+import { EditorState, type SelectionRange } from '@codemirror/state';
 
 import { useI18n } from '@/composables/useI18n';
 import type { Plaintext, Resolved, Segment } from '@/types/expressions';
@@ -25,7 +11,10 @@ import InlineExpressionTip from './InlineExpressionTip.vue';
 
 interface InlineExpressionEditorOutputProps {
 	segments: Segment[];
+	unresolvedExpression: string;
 	hoveringItemNumber: number;
+	editorState?: EditorState;
+	selection?: SelectionRange;
 	isReadOnly?: boolean;
 	visible?: boolean;
 	noInputData?: boolean;
@@ -35,6 +24,8 @@ const props = withDefaults(defineProps<InlineExpressionEditorOutputProps>(), {
 	readOnly: false,
 	visible: false,
 	noInputData: false,
+	editorState: undefined,
+	selection: undefined,
 });
 
 const i18n = useI18n();
@@ -115,6 +106,24 @@ onBeforeUnmount(() => {
 });
 </script>
 
+<template>
+	<div :class="visible ? $style.dropdown : $style.hidden">
+		<n8n-text v-if="!noInputData" size="small" compact :class="$style.header">
+			{{ i18n.baseText('parameterInput.resultForItem') }} {{ hoveringItemNumber }}
+		</n8n-text>
+		<n8n-text :class="$style.body">
+			<div ref="root" data-test-id="inline-expression-editor-output"></div>
+		</n8n-text>
+		<div :class="$style.footer">
+			<InlineExpressionTip
+				:editor-state="editorState"
+				:selection="selection"
+				:unresolved-expression="unresolvedExpression"
+			/>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .hidden {
 	display: none;

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

@@ -1,127 +1,185 @@
-<template>
-	<div v-if="tip === 'drag'" :class="$style.tip">
-		<n8n-text size="small" :class="$style.tipText"
-			>{{ $locale.baseText('parameterInput.tip') }}:
-		</n8n-text>
-		<n8n-text size="small" :class="$style.text">
-			{{ $locale.baseText('parameterInput.dragTipBeforePill') }}
-		</n8n-text>
-		<div :class="[$style.pill, { [$style.highlight]: !ndvStore.isMappingOnboarded }]">
-			{{ $locale.baseText('parameterInput.inputField') }}
-		</div>
-		<n8n-text size="small" :class="$style.text">
-			{{ $locale.baseText('parameterInput.dragTipAfterPill') }}
-		</n8n-text>
-	</div>
-
-	<div v-else-if="tip === 'executePrevious'" :class="$style.tip">
-		<n8n-text size="small" :class="$style.tipText"
-			>{{ $locale.baseText('parameterInput.tip') }}:
-		</n8n-text>
-		<n8n-text size="small" :class="$style.text"
-			>{{ $locale.baseText('expressionTip.noExecutionData') }}
-		</n8n-text>
-	</div>
-
-	<div v-else :class="$style.tip">
-		<n8n-text size="small" :class="$style.tipText"
-			>{{ $locale.baseText('parameterInput.tip') }}:
-		</n8n-text>
-		<n8n-text size="small" :class="$style.text">
-			{{ i18n.baseText('parameterInput.anythingInside') }}
-		</n8n-text>
-		<code v-text="`{{ }}`"></code>
-		<n8n-text size="small" :class="$style.text">
-			{{ i18n.baseText('parameterInput.isJavaScript') }}
-		</n8n-text>
-		<n8n-link
-			:class="$style['learn-more']"
-			size="small"
-			underline
-			theme="text"
-			:to="expressionsDocsUrl"
-		>
-			{{ i18n.baseText('parameterInput.learnMore') }}
-		</n8n-link>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { useI18n } from '@/composables/useI18n';
 import { useNDVStore } from '@/stores/ndv.store';
-import { computed } from 'vue';
+import { computed, ref, watch } from 'vue';
-import { EXPRESSIONS_DOCS_URL } from '@/constants';
+import { EditorSelection, EditorState, type SelectionRange } from '@codemirror/state';
+import { type Completion, CompletionContext } from '@codemirror/autocomplete';
+import { datatypeCompletions } from '@/plugins/codemirror/completions/datatype.completions';
+import { watchDebounced } from '@vueuse/core';
+import { FIELDS_SECTION } from '@/plugins/codemirror/completions/constants';
+import { isCompletionSection } from '@/plugins/codemirror/completions/utils';
+
+type TipId = 'executePrevious' | 'drag' | 'default' | 'dotObject' | 'dotPrimitive';
+
+type Props = {
+	editorState?: EditorState;
+	unresolvedExpression?: string;
+	selection?: SelectionRange;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+	editorState: undefined,
+	unresolvedExpression: '',
+	selection: () => EditorSelection.cursor(0),
+});
 
 const i18n = useI18n();
 const ndvStore = useNDVStore();
 
-const props = defineProps<{ tip?: 'drag' | 'default' }>();
+const canAddDotToExpression = ref(false);
+const resolvedExpressionHasFields = ref(false);
 
-const tip = computed(() => {
+const canDragToFocusedInput = computed(
-	if (!ndvStore.hasInputData) {
+	() => !ndvStore.isNDVDataEmpty('input') && ndvStore.focusedMappableInput,
+);
+
+const emptyExpression = computed(() => props.unresolvedExpression.trim().length === 0);
+
+const tip = computed<TipId>(() => {
+	if (!ndvStore.hasInputData && ndvStore.isInputParentOfActiveNode) {
 		return 'executePrevious';
 	}
 
-	if (props.tip) return props.tip;
+	if (canAddDotToExpression.value) {
+		return resolvedExpressionHasFields.value ? 'dotObject' : 'dotPrimitive';
+	}
 
-	if (ndvStore.focusedMappableInput) return 'drag';
+	if (canDragToFocusedInput.value && emptyExpression.value) return 'drag';
 
 	return 'default';
 });
-const expressionsDocsUrl = EXPRESSIONS_DOCS_URL;
+
+function getCompletionsWithDot(): readonly Completion[] {
+	if (!props.editorState || !props.selection || !props.unresolvedExpression) {
+		return [];
+	}
+
+	const cursorAfterDot = props.selection.from + 1;
+	const docWithDot =
+		props.editorState.sliceDoc(0, props.selection.from) +
+		'.' +
+		props.editorState.sliceDoc(props.selection.to);
+	const selectionWithDot = EditorSelection.create([EditorSelection.cursor(cursorAfterDot)]);
+
+	if (cursorAfterDot >= docWithDot.length) {
+		return [];
+	}
+
+	const stateWithDot = EditorState.create({
+		doc: docWithDot,
+		selection: selectionWithDot,
+	});
+
+	const context = new CompletionContext(stateWithDot, cursorAfterDot, true);
+	const completionResult = datatypeCompletions(context);
+	return completionResult?.options ?? [];
+}
+
+watch(tip, (newTip) => {
+	ndvStore.setHighlightDraggables(!ndvStore.isMappingOnboarded && newTip === 'drag');
+});
+
+watchDebounced(
+	[() => props.selection, () => props.unresolvedExpression],
+	() => {
+		const completions = getCompletionsWithDot();
+		canAddDotToExpression.value = completions.length > 0;
+		resolvedExpressionHasFields.value = completions.some(
+			({ section }) => isCompletionSection(section) && section.name === FIELDS_SECTION.name,
+		);
+	},
+	{ debounce: 200 },
+);
 </script>
 
+<template>
+	<div :class="[$style.tip, { [$style.drag]: tip === 'drag' }]">
+		<n8n-text size="small" :class="$style.tipText"
+			>{{ i18n.baseText('parameterInput.tip') }}:
+		</n8n-text>
+
+		<div v-if="tip === 'drag'" :class="$style.content">
+			<n8n-text size="small" :class="$style.text">
+				{{ i18n.baseText('parameterInput.dragTipBeforePill') }}
+			</n8n-text>
+			<div :class="[$style.pill, { [$style.highlight]: !ndvStore.isMappingOnboarded }]">
+				{{ i18n.baseText('parameterInput.inputField') }}
+			</div>
+			<n8n-text size="small" :class="$style.text">
+				{{ i18n.baseText('parameterInput.dragTipAfterPill') }}
+			</n8n-text>
+		</div>
+
+		<div v-else-if="tip === 'executePrevious'" :class="$style.content">
+			<span> {{ i18n.baseText('expressionTip.noExecutionData') }} </span>
+		</div>
+
+		<div v-else-if="tip === 'dotPrimitive'" :class="$style.content">
+			<span v-html="i18n.baseText('expressionTip.typeDotPrimitive')" />
+		</div>
+
+		<div v-else-if="tip === 'dotObject'" :class="$style.content">
+			<span v-html="i18n.baseText('expressionTip.typeDotObject')" />
+		</div>
+
+		<div v-else :class="$style.content">
+			<span v-html="i18n.baseText('expressionTip.javascript')" />
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .tip {
-	display: inline-flex;
+	display: flex;
-	align-items: center;
+	align-items: flex-start;
+	gap: var(--spacing-4xs);
 	line-height: var(--font-line-height-regular);
 	color: var(--color-text-base);
 	font-size: var(--font-size-2xs);
 	padding: var(--spacing-2xs);
-	gap: var(--spacing-4xs);
+}
 
-	.tipText {
+.content {
-		color: var(--color-text-dark);
+	display: inline-block;
-		font-weight: var(--font-weight-bold);
+}
-	}
 
-	.text {
+.tipText {
-		flex-shrink: 0;
+	display: inline;
+	color: var(--color-text-dark);
+	font-weight: var(--font-weight-bold);
+}
 
-		&:last-child {
+.drag .tipText {
-			flex-shrink: 1;
+	line-height: 21px;
-			white-space: nowrap;
+}
-			min-width: 0;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-	}
 
-	code {
+.text {
-		font-size: var(--font-size-3xs);
+	display: inline;
-		background: var(--color-background-base);
+}
-		padding: var(--spacing-5xs);
-		border-radius: var(--border-radius-base);
-	}
 
-	.pill {
+code {
-		flex-shrink: 0;
+	font-size: var(--font-size-3xs);
-		display: flex;
+	background: var(--color-background-base);
-		align-items: center;
+	padding: var(--spacing-5xs);
-		color: var(--color-text-dark);
+	border-radius: var(--border-radius-base);
+}
 
-		border: var(--border-base);
+.pill {
-		border-color: var(--color-foreground-light);
+	display: inline-flex;
-		background-color: var(--color-background-xlight);
+	align-items: center;
-		padding: var(--spacing-5xs) var(--spacing-3xs);
+	color: var(--color-text-dark);
-		border-radius: var(--border-radius-base);
-	}
 
-	.highlight {
+	border: var(--border-base);
-		color: var(--color-primary);
+	border-color: var(--color-foreground-light);
-		background-color: var(--color-primary-tint-3);
+	background-color: var(--color-background-xlight);
-		border-color: var(--color-primary-tint-1);
+	padding: var(--spacing-5xs) var(--spacing-3xs);
-	}
+	margin: 0 var(--spacing-4xs);
+	border-radius: var(--border-radius-base);
+}
+
+.highlight {
+	color: var(--color-primary);
+	background-color: var(--color-primary-tint-3);
+	border-color: var(--color-primary-tint-1);
 }
 </style>

packages/editor-ui/src/components/InlineExpressionEditor/__tests__/InlineExpressionTip.test.ts

@@ -0,0 +1,128 @@
+import { renderComponent } from '@/__tests__/render';
+import InlineExpressionTip from '@/components/InlineExpressionEditor/InlineExpressionTip.vue';
+import { FIELDS_SECTION } from '@/plugins/codemirror/completions/constants';
+import type { useNDVStore } from '@/stores/ndv.store';
+import type { CompletionResult } from '@codemirror/autocomplete';
+import { EditorSelection, EditorState } from '@codemirror/state';
+import { createTestingPinia } from '@pinia/testing';
+import { waitFor } from '@testing-library/vue';
+
+let mockNdvState: Partial<ReturnType<typeof useNDVStore>>;
+let mockCompletionResult: Partial<CompletionResult>;
+
+vi.mock('@/stores/ndv.store', () => {
+	return {
+		useNDVStore: vi.fn(() => mockNdvState),
+	};
+});
+
+vi.mock('@/plugins/codemirror/completions/datatype.completions', () => {
+	return {
+		datatypeCompletions: vi.fn(() => mockCompletionResult),
+	};
+});
+
+describe('InlineExpressionTip.vue', () => {
+	beforeEach(() => {
+		mockNdvState = {
+			hasInputData: true,
+			isNDVDataEmpty: vi.fn(() => true),
+		};
+	});
+
+	test('should show the default tip', async () => {
+		const { container } = renderComponent(InlineExpressionTip, {
+			pinia: createTestingPinia(),
+		});
+		expect(container).toHaveTextContent('Tip: Anything inside {{ }} is JavaScript. Learn more');
+	});
+
+	describe('When the NDV input is not empty and a mappable input is focused', () => {
+		test('should show the drag-n-drop tip', async () => {
+			mockNdvState = {
+				hasInputData: true,
+				isNDVDataEmpty: vi.fn(() => false),
+				focusedMappableInput: 'Some Input',
+			};
+			const { container } = renderComponent(InlineExpressionTip, {
+				pinia: createTestingPinia(),
+			});
+			expect(container).toHaveTextContent('Tip: Drag aninput fieldfrom the left to use it here.');
+		});
+	});
+
+	describe('When the node has no input data', () => {
+		test('should show the execute previous nodes tip', async () => {
+			mockNdvState = {
+				hasInputData: false,
+				isInputParentOfActiveNode: true,
+				isNDVDataEmpty: vi.fn(() => false),
+				focusedMappableInput: 'Some Input',
+			};
+			const { container } = renderComponent(InlineExpressionTip, {
+				pinia: createTestingPinia(),
+			});
+			expect(container).toHaveTextContent('Tip: Execute previous nodes to use input data');
+		});
+	});
+
+	describe('When the expression can be autocompleted with a dot', () => {
+		test('should show the correct tip for objects', async () => {
+			mockNdvState = {
+				hasInputData: true,
+				isNDVDataEmpty: vi.fn(() => false),
+				focusedMappableInput: 'Some Input',
+				setHighlightDraggables: vi.fn(),
+			};
+			mockCompletionResult = { options: [{ label: 'foo', section: FIELDS_SECTION }] };
+			const selection = EditorSelection.cursor(8);
+			const expression = '{{ $json }}';
+			const { rerender, container } = renderComponent(InlineExpressionTip, {
+				pinia: createTestingPinia(),
+			});
+
+			await rerender({
+				editorState: EditorState.create({
+					doc: expression,
+					selection: EditorSelection.create([selection]),
+				}),
+				selection,
+				unresolvedExpression: expression,
+			});
+			await waitFor(() =>
+				expect(container).toHaveTextContent(
+					'Tip: Type . for data transformation options, or to access fields. Learn more',
+				),
+			);
+		});
+
+		test('should show the correct tip for primitives', async () => {
+			mockNdvState = {
+				hasInputData: true,
+				isNDVDataEmpty: vi.fn(() => false),
+				focusedMappableInput: 'Some Input',
+				setHighlightDraggables: vi.fn(),
+			};
+			mockCompletionResult = { options: [{ label: 'foo' }] };
+			const selection = EditorSelection.cursor(12);
+			const expression = '{{ $json.foo }}';
+			const { rerender, container } = renderComponent(InlineExpressionTip, {
+				pinia: createTestingPinia(),
+			});
+
+			await rerender({
+				editorState: EditorState.create({
+					doc: expression,
+					selection: EditorSelection.create([selection]),
+				}),
+				selection,
+				unresolvedExpression: expression,
+			});
+			await waitFor(() =>
+				expect(container).toHaveTextContent(
+					'Tip: Type . for data transformation options. Learn more',
+				),
+			);
+		});
+	});
+});

packages/editor-ui/src/components/NodeExecuteButton.vue

@@ -230,7 +230,7 @@ export default defineComponent({
 
 		async onClick() {
 			// Show chat if it's a chat node or a child of a chat node with no input data
-			if (this.isChatNode || (this.isChatChild && this.ndvStore.isDNVDataEmpty('input'))) {
+			if (this.isChatNode || (this.isChatChild && this.ndvStore.isNDVDataEmpty('input'))) {
 				this.ndvStore.setActiveNodeName(null);
 				nodeViewEventBus.emit('openChat');
 			} else if (this.isListeningForEvents) {

packages/editor-ui/src/components/ParameterInputFull.vue

@@ -55,7 +55,7 @@
 			</template>
 		</DraggableTarget>
 		<div v-if="showDragnDropTip" :class="$style.tip">
-			<InlineExpressionTip tip="drag" />
+			<InlineExpressionTip />
 		</div>
 		<div
 			:class="{
@@ -209,7 +209,7 @@ export default defineComponent({
 			return this.isResourceLocator ? !hasOnlyListMode(this.parameter) : true;
 		},
 		isInputDataEmpty(): boolean {
-			return this.ndvStore.isDNVDataEmpty('input');
+			return this.ndvStore.isNDVDataEmpty('input');
 		},
 		displayMode(): IRunDataDisplayMode {
 			return this.ndvStore.inputPanelDisplayMode;
@@ -220,7 +220,9 @@ export default defineComponent({
 				(this.isInputTypeString || this.isInputTypeNumber) &&
 				!this.isValueExpression &&
 				!this.isDropDisabled &&
-				!this.ndvStore.isMappingOnboarded
+				(!this.ndvStore.hasInputData || !this.isInputDataEmpty) &&
+				!this.ndvStore.isMappingOnboarded &&
+				this.ndvStore.isInputParentOfActiveNode
 			);
 		},
 	},

packages/editor-ui/src/components/RunDataJson.vue

@@ -158,7 +158,7 @@ export default defineComponent({
 			return executionDataToJson(this.inputData);
 		},
 		highlight(): boolean {
-			return !this.ndvStore.isMappingOnboarded && Boolean(this.ndvStore.focusedMappableInput);
+			return this.ndvStore.highlightDraggables;
 		},
 	},
 	methods: {

packages/editor-ui/src/components/RunDataSchema.vue

@@ -35,9 +35,7 @@ const schema = computed(() => getSchemaForExecutionData(props.data));
 
 const isDataEmpty = computed(() => isEmpty(props.data));
 
-const highlight = computed(() => {
+const highlight = computed(() => ndvStore.highlightDraggables);
-	return !ndvStore.isMappingOnboarded && Boolean(ndvStore.focusedMappableInput);
-});
 
 const onDragStart = (el: HTMLElement) => {
 	if (el?.dataset?.path) {

packages/editor-ui/src/components/RunDataTable.vue

@@ -260,7 +260,7 @@ export default defineComponent({
 			return this.ndvStore.focusedMappableInput;
 		},
 		highlight(): boolean {
-			return !this.ndvStore.isMappingOnboarded && Boolean(this.ndvStore.focusedMappableInput);
+			return this.ndvStore.highlightDraggables;
 		},
 	},
 	methods: {

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 updateSelection(viewUpdate: ViewUpdate) {
-	function onEditorUpdate(viewUpdate: ViewUpdate) {
+		const currentSelection = selection.value;
-		if (!viewUpdate.docChanged || !editor.value) return;
+		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,

packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts

@@ -902,7 +902,7 @@ const regexes = {
 	singleQuoteStringLiteral: /('.+')\.([^'{\s])*/, // 'abc'.
 	doubleQuoteStringLiteral: /(".+")\.([^"{\s])*/, // "abc".
 	dateLiteral: /\(?new Date\(\(?.*?\)\)?\.(.*)/, // new Date(). or (new Date()).
-	arrayLiteral: /(\[.*\])\.(.*)/, // [1, 2, 3].
+	arrayLiteral: /\(?(\[.*\])\)?\.(.*)/, // [1, 2, 3].
 	indexedAccess: /([^"{\s]+\[.+\])\.(.*)/, // 'abc'[0]. or 'abc'.split('')[0] or similar ones
 	objectLiteral: /\(\{.*\}\)\.(.*)/, // ({}).
 

packages/editor-ui/src/plugins/codemirror/completions/utils.ts

@@ -237,3 +237,9 @@ export const withSectionHeader = (section: CompletionSection): CompletionSection
 	section.header = renderSectionHeader;
 	return section;
 };
+
+export const isCompletionSection = (
+	section: CompletionSection | string | undefined,
+): section is CompletionSection => {
+	return typeof section === 'object';
+};

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -688,6 +688,9 @@
 	"expressionModalInput.undefined": "[undefined]",
 	"expressionModalInput.null": "null",
 	"expressionTip.noExecutionData": "Execute previous nodes to use input data",
+	"expressionTip.typeDotPrimitive": "Type <code>.</code> for data transformation options. <a target=\"_blank\" href=\"https://docs.n8n.io/code/builtin/data-transformation-functions/\">Learn more</a>",
+	"expressionTip.typeDotObject": "Type <code>.</code> for data transformation options, or to access fields. <a target=\"_blank\" href=\"https://docs.n8n.io/code/builtin/data-transformation-functions/\">Learn more</a>",
+	"expressionTip.javascript": "Anything inside <code>{'{{ }}'}</code> is JavaScript. <a target=\"_blank\" href=\"https://docs.n8n.io/code-examples/expressions/\">Learn more</a>",
 	"expressionModalInput.noExecutionData": "Execute previous nodes for preview",
 	"expressionModalInput.noNodeExecutionData": "Execute node ‘{node}’ for preview",
 	"expressionModalInput.noInputConnection": "No input connected",
@@ -1219,8 +1222,6 @@
 	"openWorkflow.workflowNotFoundError": "Could not find workflow",
 	"parameterInput.expressionResult": "e.g. {result}",
 	"parameterInput.tip": "Tip",
-	"parameterInput.anythingInside": "Anything inside ",
-	"parameterInput.isJavaScript": " is JavaScript.",
 	"parameterInput.dragTipBeforePill": "Drag an",
 	"parameterInput.inputField": "input field",
 	"parameterInput.dragTipAfterPill": "from the left to use it here.",

packages/editor-ui/src/stores/ndv.store.ts

@@ -56,6 +56,7 @@ export const useNDVStore = defineStore(STORES.NDV, {
 		},
 		isMappingOnboarded: useStorage(LOCAL_STORAGE_MAPPING_IS_ONBOARDED).value === 'true',
 		isAutocompleteOnboarded: useStorage(LOCAL_STORAGE_AUTOCOMPLETE_IS_ONBOARDED).value === 'true',
+		highlightDraggables: false,
 	}),
 	getters: {
 		activeNode(): INodeUi | null {
@@ -129,7 +130,7 @@ export const useNDVStore = defineStore(STORES.NDV, {
 		ndvInputBranchIndex(): number | undefined {
 			return this.input.branch;
 		},
-		isDNVDataEmpty() {
+		isNDVDataEmpty() {
 			return (panel: 'input' | 'output'): boolean => this[panel].data.isEmpty;
 		},
 		isInputParentOfActiveNode(): boolean {
@@ -252,6 +253,9 @@ export const useNDVStore = defineStore(STORES.NDV, {
 			this.isAutocompleteOnboarded = true;
 			useStorage(LOCAL_STORAGE_AUTOCOMPLETE_IS_ONBOARDED).value = 'true';
 		},
+		setHighlightDraggables(highlight: boolean) {
+			this.highlightDraggables = highlight;
+		},
 		updateNodeParameterIssues(issues: INodeIssues): void {
 			const workflowsStore = useWorkflowsStore();
 			const activeNode = workflowsStore.getNodeByName(this.activeNodeName || '');