feat(editor): Show expression infobox on hover and cursor position (#9507)

Co-authored-by: Giulio Andreini <andreini@netseven.it>

packages/editor-ui/src/components/CodeNodeEditor/completions/jsonField.completions.ts

@@ -73,7 +73,6 @@ function useJsonFieldCompletions() {
 	 * - Complete `$input.item.json[` to `['field']`.
 	 */
 	const inputJsonFieldCompletions = (context: CompletionContext): CompletionResult | null => {
-		console.log('🚀 ~ inputJsonFieldCompletions ~ context:', context);
 		const patterns = {
 			first: /\$input\.first\(\)\.json(\[|\.).*/,
 			last: /\$input\.last\(\)\.json(\[|\.).*/,
@@ -158,7 +157,6 @@ function useJsonFieldCompletions() {
 
 			if (name === 'all') {
 				const regexMatch = preCursor.text.match(regex);
-				console.log('🚀 ~ selectorJsonFieldCompletions ~ regexMatch:', regexMatch);
 				if (!regexMatch?.groups?.index) continue;
 
 				const { index } = regexMatch.groups;

packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue

@@ -24,6 +24,7 @@ import {
 } from '@/plugins/codemirror/keymap';
 import type { Segment } from '@/types/expressions';
 import { removeExpressionPrefix } from '@/utils/expressions';
+import { infoBoxTooltips } from '@/plugins/codemirror/tooltips/InfoBoxTooltip';
 
 type Props = {
 	modelValue: string;
@@ -68,6 +69,7 @@ const extensions = computed(() => [
 	expressionInputHandler(),
 	EditorView.lineWrapping,
 	EditorView.domEventHandlers({ scroll: forceParse }),
+	infoBoxTooltips(),
 ]);
 const editorValue = ref<string>(removeExpressionPrefix(props.modelValue));
 const {

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

@@ -20,6 +20,7 @@ import { removeExpressionPrefix } from '@/utils/expressions';
 import { createEventBus, type EventBus } from 'n8n-design-system/utils';
 import type { IDataObject } from 'n8n-workflow';
 import { inputTheme } from './theme';
+import { infoBoxTooltips } from '@/plugins/codemirror/tooltips/InfoBoxTooltip';
 
 type Props = {
 	modelValue: string;
@@ -56,6 +57,7 @@ const extensions = computed(() => [
 	history(),
 	expressionInputHandler(),
 	EditorView.lineWrapping,
+	infoBoxTooltips(),
 ]);
 const editorValue = ref<string>(removeExpressionPrefix(props.modelValue));
 const {
@@ -138,7 +140,12 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-	<div ref="root" :class="$style.editor" data-test-id="inline-expression-editor-input"></div>
+	<div
+		ref="root"
+		title=""
+		:class="$style.editor"
+		data-test-id="inline-expression-editor-input"
+	></div>
 </template>
 
 <style lang="scss" module>