mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 10:02:05 +00:00
feat(Code Node): create Code node (#3965)
* Introduce node deprecation (#3930) ✨ Introduce node deprecation * 🚧 Scaffold out Code node * 👕 Fix lint * 📘 Create types file * 🚚 Rename theme * 🔥 Remove unneeded prop * ⚡ Override keybindings * ⚡ Expand lintings * ⚡ Create editor content getter * 🚚 Ensure all helpers use `$` * ✨ Add autocompletion * ⚡ Filter out welcome note node * ⚡ Convey error line number * ⚡ Highlight error line * ⚡ Restore logging from node * ✨ More autocompletions * ⚡ Streamline completions * ✏️ Update placeholders * ⚡ Update linter to new methods * 🔥 Remove `$nodeItem` completions * ⚡ Re-update placeholders * 🎨 Fix formatting * 📦 Update `package-lock.json` * ⚡ Refresh with multi-line empty string * ⚡ Account for syntax errors * 🔥 Remove unneeded variant * ⚡ Minor improvements * ⚡ Add more autocompletions * 🚚 Rename extension * 🔥 Remove outdated comments * 🚚 Rename field * ✨ More autocompletions * ⚡ Fix up error display when empty text * 🔥 Remove logging * ✨ More error validation * 🐛 Fix `pairedItem` to `pairedItem()` * ⚡ Add item to validation info * 📦 Update `package-lock.json` * ⚡ Leftover fixes * ⚡ Set `insertNewlineAndIndent` * 📦 Update `package-lock.json` * 📦 Re-update `package-lock.json` * 👕 Add lint exception * 📘 Add type to mixin type * Clean up comment * ⚡ Refactor completion per new requirements * ⚡ Adjust placeholders * ⚡ Add `json` autocompletions for `$input` * 🎨 Set border * ⚡ Restore local completion source * ⚡ Implement autocompletion for imports * ⚡ Add `.*` to follow user typing on autocompletion * 📘 Fix typings in autocompletions * 👕 Add linting for use of `item()` * 📦 Update `package-lock.json` * 🐛 Fix for `$items(nodeName)[0]` * ⚡ Filter down built-in modules list * ⚡ Refactor error handling * ⚡ Linter and validation improvements * ⚡ Apply review feedback * ♻️ More general refactorings * ⚡ Add dot notation utility * Customize input handler * ⚡ Support `.json.` completions * ⚡ Adjust placeholder * ⚡ Sort imports * 🔥 Remove blank rows addition * ⚡ Add more error validation * 📦 Update `package-lock.json` * ⚡ Make date logging consistent * 🔧 Adjust linting highlight range * ⚡ Add line numbers to each item mode errors * ⚡ Allow for links in error descriptions * ⚡ More input validation * ⚡ Expand linting to loops * ⚡ Deprecate Function and Function Item nodes * 🐛 Fix placeholder syntax * 📘 Narrow down type * 🚚 Rename using kebab-case * 🔥 Remove `mapGetters` * ✏️ Fix casing * ⚡ Adjust import for type * ✏️ Fix quotes * 🐛 Fix `activeNode` reference * ⚡ Use constant * 🔥 Remove logging * ✏️ Fix typo * ⚡ Add missing `notice` * ✏️ Add tags * ✏️ Fix alias * ✏️ Update copy * 🔥 Remove wrong linting * ✏️ Update copy * ⚡ Add validation for `null` * ⚡ Add validation for non-object and non-array * ⚡ Add validation for non-array with json * ✏️ Intentionally use wrong spelling * ⚡ More validation * ✏️ More copy updates * ✏️ Placeholder updates * ⏪ Restore spelling * ⚡ Fix var name * ✏️ More copy updates * ⚡ Add luxon autocompletions * ⚡ Make scrollable * ⚡ Fix comma from merge conflict resolution * 📦 Update `package-lock.json` * 👕 Fix lint detail * 🎨 Set font family * ⚡ Bring in expressions fix * ♻️ Address feedback * ⚡ Exclude codemirror packages from render chunks * 🐛 Fix placeholder not showing on first load * feat(editor-ui): Replace `lezer` with `esprima` in client linter (#4192) * 🔥 Remove addition from misresolved conflict * ⚡ Replace `lezer` with `esprima` in client linter * ⚡ Add missing key * 📦 Update `package-lock.json` * ⚡ Match dependencies * 📦 Update `package-lock.json` * 📦 Re-update `package-lock.json` * ⚡ Match whitespace * 🐛 Fix selection * ⚡ Expand validation * 🔥 Remove validation * ✏️ Update copy * 🚚 Move to constants * ⚡ More `null` validation * ⚡ Support `all()` with index to access item * ⚡ Gloss over n8n syntax error * 🎨 Re-style diagnostic button * 🔥 Remove `item` as `itemAlias` * ⚡ Add linting for `item.json` in single item mode * ⚡ Refactor to add label info descriptions * ⚡ More autocompletions * 👕 Fix lint * ⚡ Simplify typings * 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 * 📦 Update `package-lock.json` * 👕 Fix lint * 🐛 Rely on original value for custom matcher * ⚡ Create `customMatcherJsonFieldCompletions` to simplify setup * 🐛 Include selector in `customMatcherJsonField` completions * ✏️ Make naming consistent * ✏️ Add docline * ⚡ Finish self-review cleanup * 🔥 Remove outdated comment * 📌 Pin luxon to major-minor * ✏️ Fix typo * 📦 Update `package-lock.json` * 📦 Update `package-lock.json` * 📦 Re-update `package-lock.json` * ➕ Add `luxon` for Gmail node * 📦 Update `package-lock.json` * ⚡ Replace Function with Code in suggested nodes * 🐛 Fix `$prevNode` completions * ✏️ Update `$execution.mode` copy * ⚡ Separate luxon getters from methods * ⚡ Adjusting linter to tolerate `.binary` * ⚡ Adjust top-level item keys check * ⚡ Anticipate user expecting `item` to pre-exist * ⚡ Add linting for legacy item access * ⚡ Add hint for attempted `items` access * ⚡ Add keybinding for toggling comments * ✏️ Update copy of `all`, `first`, `last` and `itemMatching` * 🐛 Make `input.all()` etc act on copies * 📦 Update `package-lock.json` * 🐛 Fix guard in `$input.last()` * ♻️ Address Jan's feedback * ⬆️ Upgrade `eslint-plugin-n8n-nodes-base` * 📦 Update `package-lock.json` * 🔥 Remove unneeded exceptions * ⚡ Restore placeholder logic * ⚡ Add placeholders to client * ⚡ Account for shadow item * ✏️ More completion info labels * 👕 Fix lint * ✏️ Update copy * ✏️ Update copy * ✏️ More copy updates * 📦 Update `package-lock.json` * ⚡ Add more validation * ⚡ Add placheolder on first load * Replace `Cmd` with `Mod` * 📦 Update `package-lock.json`
This commit is contained in:
Iván Ovejero
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div ref="codeNodeEditor" class="ph-no-capture" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import mixins from 'vue-typed-mixins';
|
||||
|
||||
import { Compartment, EditorState } from '@codemirror/state';
|
||||
import { EditorView, ViewUpdate } from '@codemirror/view';
|
||||
import { javascript } from '@codemirror/lang-javascript';
|
||||
|
||||
import { baseExtensions } from './baseExtensions';
|
||||
import { linterExtension } from './linter';
|
||||
import { completerExtension } from './completer';
|
||||
import { CODE_NODE_EDITOR_THEME } from './theme';
|
||||
import { workflowHelpers } from '../mixins/workflowHelpers'; // for json field completions
|
||||
import { codeNodeEditorEventBus } from '@/event-bus/code-node-editor-event-bus';
|
||||
import { CODE_NODE_TYPE } from '@/constants';
|
||||
import { ALL_ITEMS_PLACEHOLDER, EACH_ITEM_PLACEHOLDER } from './constants';
|
||||
|
||||
export default mixins(linterExtension, completerExtension, workflowHelpers).extend({
|
||||
name: 'code-node-editor',
|
||||
props: {
|
||||
mode: {
|
||||
type: String,
|
||||
validator: (value: string): boolean =>
|
||||
['runOnceForAllItems', 'runOnceForEachItem'].includes(value),
|
||||
},
|
||||
isReadOnly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
jsCode: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editor: null as EditorView | null,
|
||||
linterCompartment: new Compartment(),
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
mode() {
|
||||
this.reloadLinter();
|
||||
this.refreshPlaceholder();
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
content(): string {
|
||||
if (!this.editor) return '';
|
||||
|
||||
return this.editor.state.doc.toString();
|
||||
},
|
||||
placeholder(): string {
|
||||
return {
|
||||
runOnceForAllItems: ALL_ITEMS_PLACEHOLDER,
|
||||
runOnceForEachItem: EACH_ITEM_PLACEHOLDER,
|
||||
}[this.mode];
|
||||
},
|
||||
previousPlaceholder(): string {
|
||||
return {
|
||||
runOnceForAllItems: EACH_ITEM_PLACEHOLDER,
|
||||
runOnceForEachItem: ALL_ITEMS_PLACEHOLDER,
|
||||
}[this.mode];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
reloadLinter() {
|
||||
if (!this.editor) return;
|
||||
|
||||
this.editor.dispatch({
|
||||
effects: this.linterCompartment.reconfigure(this.linterExtension()),
|
||||
});
|
||||
},
|
||||
refreshPlaceholder() {
|
||||
if (!this.editor) return;
|
||||
|
||||
if (!this.content.trim() || this.content.trim() === this.previousPlaceholder) {
|
||||
this.editor.dispatch({
|
||||
changes: { from: 0, to: this.content.length, insert: this.placeholder },
|
||||
});
|
||||
}
|
||||
},
|
||||
highlightLine(line: number | 'final') {
|
||||
if (!this.editor) return;
|
||||
|
||||
if (line === 'final') {
|
||||
this.editor.dispatch({
|
||||
selection: { anchor: this.content.trim().length },
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.editor.dispatch({
|
||||
selection: { anchor: this.editor.state.doc.line(line).from },
|
||||
});
|
||||
},
|
||||
trackCompletion(viewUpdate: ViewUpdate) {
|
||||
const completionTx = viewUpdate.transactions.find((tx) => tx.isUserEvent('input.complete'));
|
||||
|
||||
if (!completionTx) return;
|
||||
|
||||
try {
|
||||
// @ts-ignore - undocumented fields
|
||||
const { fromA, toB } = viewUpdate?.changedRanges[0];
|
||||
const full = this.content.slice(fromA, toB);
|
||||
const lastDotIndex = full.lastIndexOf('.');
|
||||
|
||||
let context = null;
|
||||
let insertedText = null;
|
||||
|
||||
if (lastDotIndex === -1) {
|
||||
context = '';
|
||||
insertedText = full;
|
||||
} else {
|
||||
context = full.slice(0, lastDotIndex);
|
||||
insertedText = full.slice(lastDotIndex + 1);
|
||||
}
|
||||
|
||||
this.$telemetry.track('User autocompleted code', {
|
||||
instance_id: this.$store.getters.instanceId,
|
||||
node_type: CODE_NODE_TYPE,
|
||||
field_name: this.mode === 'runOnceForAllItems' ? 'jsCodeAllItems' : 'jsCodeEachItem',
|
||||
field_type: 'code',
|
||||
context,
|
||||
inserted_text: insertedText,
|
||||
});
|
||||
} catch (_) {}
|
||||
},
|
||||
},
|
||||
destroyed() {
|
||||
codeNodeEditorEventBus.$off('error-line-number', this.highlightLine);
|
||||
},
|
||||
mounted() {
|
||||
codeNodeEditorEventBus.$on('error-line-number', this.highlightLine);
|
||||
|
||||
const stateBasedExtensions = [
|
||||
this.linterCompartment.of(this.linterExtension()),
|
||||
EditorState.readOnly.of(this.isReadOnly),
|
||||
EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
|
||||
if (!viewUpdate.docChanged) return;
|
||||
|
||||
this.trackCompletion(viewUpdate);
|
||||
|
||||
this.$emit('valueChanged', this.content);
|
||||
}),
|
||||
];
|
||||
|
||||
// empty on first load, default param value
|
||||
if (this.jsCode === '') {
|
||||
this.$emit('valueChanged', this.placeholder);
|
||||
}
|
||||
|
||||
const state = EditorState.create({
|
||||
doc: this.jsCode === '' ? this.placeholder : this.jsCode,
|
||||
extensions: [
|
||||
...baseExtensions,
|
||||
...stateBasedExtensions,
|
||||
CODE_NODE_EDITOR_THEME,
|
||||
javascript(),
|
||||
this.autocompletionExtension(),
|
||||
],
|
||||
});
|
||||
|
||||
this.editor = new EditorView({
|
||||
parent: this.$refs.codeNodeEditor as HTMLDivElement,
|
||||
state,
|
||||
});
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user