feat(editor): Add examples for root expression methods

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

@@ -6,6 +6,7 @@ import type { INodeUi } from '@/Interface';
 import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { escapeMappingString } from '@/utils/mappingUtils';
+import { sanitizeHtml } from '@/utils/htmlUtils';
 
 function getAutoCompletableNodeNames(nodes: INodeUi[]) {
 	return nodes
@@ -54,6 +55,12 @@ export const baseCompletions = defineComponent({
 
 			if (!preCursor || (preCursor.from === preCursor.to && !context.explicit)) return null;
 
+			const renderInfo = (description: string) => () => {
+				const info = document.createElement('span');
+				info.innerHTML = sanitizeHtml(description);
+				return info;
+			};
+
 			const TOP_LEVEL_COMPLETIONS_IN_BOTH_MODES: Completion[] = [
 				{
 					label: `${prefix}execution`,
@@ -96,7 +103,7 @@ export const baseCompletions = defineComponent({
 					label: `${prefix}nodeVersion`,
 					info: this.$locale.baseText('codeNodeEditor.completer.$nodeVersion'),
 				},
-			];
+			].map((item) => ({ ...item, info: renderInfo(item.info) }));
 
 			const options: Completion[] = TOP_LEVEL_COMPLETIONS_IN_BOTH_MODES.map(addVarType);
 

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

@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue';
 import { addVarType, escape } from '../utils';
 import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
+import { sanitizeHtml } from '@/utils/htmlUtils';
 
 export const executionCompletions = defineComponent({
 	methods: {
@@ -22,7 +23,7 @@ export const executionCompletions = defineComponent({
 				// This is being loaded from the locales file. This could
 				// cause an XSS of some kind but multiple other locales strings
 				// do the same thing.
-				wrapper.innerHTML = text;
+				wrapper.innerHTML = sanitizeHtml(text);
 				return () => wrapper;
 			};
 
@@ -46,25 +47,25 @@ export const executionCompletions = defineComponent({
 				{
 					label: `${matcher}.customData.set("key", "value")`,
 					info: buildLinkNode(
-						this.$locale.baseText('codeNodeEditor.completer.$execution.customData.set()'),
+						this.$locale.baseText('codeNodeEditor.completer.$execution.customData.set'),
 					),
 				},
 				{
 					label: `${matcher}.customData.get("key")`,
 					info: buildLinkNode(
-						this.$locale.baseText('codeNodeEditor.completer.$execution.customData.get()'),
+						this.$locale.baseText('codeNodeEditor.completer.$execution.customData.get'),
 					),
 				},
 				{
 					label: `${matcher}.customData.setAll({})`,
 					info: buildLinkNode(
-						this.$locale.baseText('codeNodeEditor.completer.$execution.customData.setAll()'),
+						this.$locale.baseText('codeNodeEditor.completer.$execution.customData.setAll'),
 					),
 				},
 				{
 					label: `${matcher}.customData.getAll()`,
 					info: buildLinkNode(
-						this.$locale.baseText('codeNodeEditor.completer.$execution.customData.getAll()'),
+						this.$locale.baseText('codeNodeEditor.completer.$execution.customData.getAll'),
 					),
 				},
 			];

packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts

@@ -809,11 +809,19 @@ describe('Resolution-based completions', () => {
 		test('should not display type information for other completions', () => {
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue({
 				str: 'bar',
+				id: '123',
+				isExecuted: false,
 			});
 
-			expect(completions('{{ $execution.| }}')?.every((item) => !item.detail)).toBe(true);
-			expect(completions('{{ $input.params.| }}')?.every((item) => !item.detail)).toBe(true);
-			expect(completions('{{ $("My Node").| }}')?.every((item) => !item.detail)).toBe(true);
+			expect(completions('{{ $execution.| }}')).not.toContainEqual(
+				expect.objectContaining({ detail: expect.any(String) }),
+			);
+			expect(completions('{{ $input.params.| }}')).not.toContainEqual(
+				expect.objectContaining({ detail: expect.any(String) }),
+			);
+			expect(completions('{{ $("My Node").| }}')).not.toContainEqual(
+				expect.objectContaining({ detail: expect.any(String) }),
+			);
 		});
 	});
 });