feat(nodes-base): Multiline autocompletion for code-node-editor (#4220

)

* ⚡ Simplify typings

* ⚡ Consolidate helpers in utils

* ⚡ Multiline autocompletion for standalone vars

* 🔥 Remove unneeded mixins

* ✏️ Update copy

* ✏️ Prep TODOs

* ⚡ Multiline completion for `$input.method` + `$input.item`

* 🔥 Remove unused method

* 🔥 Remove another unused method

* 🚚 Move luxon strings to helpers

* ⚡ Multiline autocompletion for methods output

* ⚡ Refactor to use optional chaining

* 👕 Fix lint

* ✏️ Update TODOs

* ⚡ Multiline autocompletion for `json` fields

* 📘 Add typings

* ⚡ De-duplicate callback to forEach

* 🐛 Fix autocompletions not working with leading whitespace

* 🌐 Apply i18n

* 👕 Fix lint

* :constructor: Second-period var usage completions

* 👕 Fix lint

* 👕 Add exception

* ⚡ Add completion telemetry

* 📘 Add typing

* ⚡ Major refactoring to organize

* 🐛 Fix multiline `.all()[index]`

* 🐛 Do not autoclose square brackets prior to `.json`

* 🐛 Fix accessor for multiline `jsonField` completions

* ⚡ Add completions for half-assignments

* 🐛 Fix `jsonField` completions for `x.json`

* ✏️ Improve comments

* 🐛 Fix `.json[field]` for multiline matches

* ⚡ Cleanup

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

@@ -16,6 +16,7 @@ import { workflowHelpers } from '../mixins/workflowHelpers';
 import { codeNodeEditorEventBus } from '@/event-bus/code-node-editor-event-bus';
 import { CODE_NODE_EDITOR_THEME } from './theme';
 import { ALL_ITEMS_PLACEHOLDER, EACH_ITEM_PLACEHOLDER } from './constants';
+import { CODE_NODE_TYPE } from '@/constants';
 
 export default mixins(linterExtension, completerExtension, workflowHelpers).extend({
 	name: 'code-node-editor',
@@ -106,7 +107,29 @@ export default mixins(linterExtension, completerExtension, workflowHelpers).exte
 			this.linterCompartment.of(this.linterExtension()),
 			EditorState.readOnly.of(this.isReadOnly),
 			EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
-				if (viewUpdate.docChanged) this.$emit('valueChanged', this.content);
+				if (!viewUpdate.docChanged) return;
+
+				const completionTx = viewUpdate.transactions.find((tx) => tx.isUserEvent('input.complete'));
+
+				if (completionTx) {
+					try {
+						// @ts-ignore - undocumented field
+						const { fromA, toA, toB } = viewUpdate?.changedRanges[0];
+						const context = this.content.slice(fromA, toA);
+						const insertedText = this.content.slice(toA, toB);
+
+						this.$telemetry.track('User autocompleted code', {
+							instance_id: this.$store.getters.instanceId,
+							node_type: CODE_NODE_TYPE,
+							field_name: 'jsCode',
+							field_type: 'code',
+							context,
+							inserted_text: insertedText,
+						});
+					} catch (_) {}
+				}
+
+				this.$emit('valueChanged', this.content);
 			}),
 		];
 

packages/editor-ui/src/components/CodeNodeEditor/baseExtensions.ts

@@ -1,5 +1,4 @@
 import {
-	drawSelection,
 	dropCursor,
 	EditorView,
 	highlightActiveLine,