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`

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

@@ -68,7 +68,15 @@
 					@valueChanged="expressionUpdated"
 				></text-edit>
 
-				<div v-if="isEditor === true" class="code-edit clickable ph-no-capture" @click="displayEditDialog()">
+				<code-node-editor
+					v-if="getArgument('editor') === 'codeNodeEditor' && isCodeNode(node)"
+					:mode="node.parameters.mode"
+					:jsCode="node.parameters.jsCode"
+					:isReadOnly="isReadOnly"
+					@valueChanged="valueChanged"
+				/>
+
+				<div v-else-if="isEditor === true" class="code-edit clickable ph-no-capture" @click="displayEditDialog()">
 					<prism-editor
 						v-if="!codeEditDialogVisible"
 						:lineNumbers="true"
@@ -315,6 +323,7 @@ import ResourceLocator from '@/components/ResourceLocator/ResourceLocator.vue';
 // @ts-ignore
 import PrismEditor from 'vue-prism-editor';
 import TextEdit from '@/components/TextEdit.vue';
+import CodeNodeEditor from '@/components/CodeNodeEditor/CodeNodeEditor.vue';
 import { externalHooks } from '@/components/mixins/externalHooks';
 import { nodeHelpers } from '@/components/mixins/nodeHelpers';
 import { showMessage } from '@/components/mixins/showMessage';
@@ -325,6 +334,7 @@ import { isResourceLocatorValue } from '@/typeGuards';
 import mixins from 'vue-typed-mixins';
 import { CUSTOM_API_CALL_KEY } from '@/constants';
 import { mapGetters } from 'vuex';
+import { CODE_NODE_TYPE } from '@/constants';
 import { PropType } from 'vue';
 
 export default mixins(
@@ -337,6 +347,7 @@ export default mixins(
 		name: 'parameter-input',
 		components: {
 			CodeEdit,
+			CodeNodeEditor,
 			ExpressionEdit,
 			NodeCredentials,
 			CredentialsSelect,
@@ -889,6 +900,9 @@ export default mixins(
 
 				this.$emit('focus');
 			},
+			isCodeNode(node: INodeUi): boolean {
+				return node.type === CODE_NODE_TYPE;
+			},
 			rgbaToHex (value: string): string | null {
 				// Convert rgba to hex from: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
 				const valueMatch = (value as string).match(/^rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d+(\.\d+)?)\)$/);
@@ -1148,7 +1162,6 @@ export default mixins(
 }
 
 .list-option {
-	max-width: 340px;
 	margin: 6px 0;
 	white-space: normal;
 	padding-right: 20px;