feat(editor): New Code editor based on the TypeScript language service

[elsmr]

Summary

TODO: needs tests

• TypeScript autocomplete
• TypeScript linting
• TypeScript hover tips
• Search & replace
• New keyboard shortcuts based on the VSCode keymap
• Auto-formatting using prettier (Alt+Shift+F)
• Remember folded regions and history after refresh
• Multi cursor
• Type function in the Code node using JSDoc types
• Web Worker Architecture
• Drag/drop in all Code node modes
• Indentation markers

Related Linear tickets, Github issues, and Community forum posts

https://linear.app/n8n/issue/NODE-1466/overhaul-code-node-p0

Review / Merge checklist

• PR title and summary are descriptive. (conventions)
• Docs updated or follow-up ticket created.
• Tests included.
• PR Labeled with release/backport (if the PR is an urgent fix that needs to be backported)

[codecov]

Codecov Report

Attention: Patch coverage is 30.16989% with 1192 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
...ackages/editor-ui/src/composables/useCodeEditor.ts	0.63%	315 Missing ⚠️
.../codemirror/typescript/worker/typescript.worker.ts	0.00%	158 Missing ⚠️
.../src/plugins/codemirror/typescript/worker/cache.ts	0.93%	106 Missing ⚠️
...gins/codemirror/typescript/client/useTypescript.ts	1.23%	80 Missing ⚠️
...src/plugins/codemirror/typescript/worker/linter.ts	0.00%	75 Missing ⚠️
...lugins/codemirror/typescript/client/completions.ts	4.83%	59 Missing ⚠️
...ins/codemirror/typescript/worker/npmTypesLoader.ts	2.04%	48 Missing ⚠️
...lugins/codemirror/typescript/worker/completions.ts	0.00%	45 Missing ⚠️
...ugins/codemirror/typescript/worker/dynamicTypes.ts	36.61%	45 Missing ⚠️
...ugins/codemirror/typescript/client/hoverTooltip.ts	4.44%	43 Missing ⚠️
... and 14 more

📢 Thoughts on this report? Let us know!

[dana-gill]

A comment about the lockfile, but if the packages were added via package.json and not pnpm, then lgtm 🎉

[dana-gill]

I've been burned by the lockfile before so I just wanted to double check that you made the package additions using package.json and not using pnpm i as mentioned here, right? If that's the case, lgtm 🥳 Amazing change and really cool feature!

[github-actions]

✅ No visual regressions found.

[github-actions]

⚠️ Some Cypress E2E specs are failing, please fix them before merging

[cypress]

n8n    Run #8421

Run Properties:   Failed #8421  •  9dceb02ec3: 🌳 🖥️ browsers:node18.12.0-chrome107 🤖 elsmr 🗃️ e2e/*

Project	n8n
Branch Review	node-1466-overhaul-code-node-p0
Run status	Failed #8421
Run duration	06m 33s
Commit	9dceb02ec3: 🌳 🖥️ browsers:node18.12.0-chrome107 🤖 elsmr 🗃️ e2e/*
Committer	Elias Meire
View all properties for this run ↗︎

---

Test results
Failures	16
Flaky	2
Pending	0
Skipped	0
Passing	300
View all changes introduced in this branch ↗︎

---

Tests for review

  5-ndv.cy.ts • 2 failed tests

View Output Video

Test		Artifacts
NDV > should allow editing code in fullscreen in the Code node		Test Replay Screenshots Video
NDV > should properly show node execution indicator		Test Replay Screenshots Video

  12-canvas.cy.ts • 2 failed tests

View Output Video

Test		Artifacts
Canvas Node Manipulation and Navigation > should add nodes and check execution success		Test Replay Screenshots Video
Canvas Node Manipulation and Navigation > should preserve connections after rename & node-view switch		Test Replay Screenshots Video

  12-canvas-actions.cy.ts • 1 failed test

View Output Video

Test		Artifacts
Canvas Actions > Node hover actions > should execute node		Test Replay Screenshots Video

  45-ai-assistant.cy.ts • 2 failed tests

View Output Video

Test		Artifacts
AI Assistant::enabled > should apply code diff to code node		Test Replay Screenshots Video
AI Assistant::enabled > Should ignore node execution success and error messages after the node run successfully once		Test Replay Screenshots Video

  6-code-node.cy.ts • 9 failed tests

View Output Video

Test		Artifacts
Code node > Code editor > should execute the placeholder successfully in both modes		Test Replay Screenshots Video
Code node > Code editor > should show lint errors in `runOnceForAllItems` mode		Test Replay Screenshots Video
Code node > Code editor > should show lint errors in `runOnceForEachItem` mode		Test Replay Screenshots Video
... > generate code button should have correct state & tooltips		Test Replay Screenshots Video
... > should send correct schema and replace code		Test Replay Screenshots Video
... > should show error based on status code 400		Test Replay Screenshots Video
... > should show error based on status code 413		Test Replay Screenshots Video
... > should show error based on status code 429		Test Replay Screenshots Video
... > should show error based on status code 500		Test Replay Screenshots Video

The first 5 failed specs are shown, see all 50 specs in Cypress Cloud.

  19-execution.cy.ts • 1 flaky test

View Output Video

Test		Artifacts
Execution > connections should be colored differently for pinned data > when executing a node		Test Replay Screenshots Video

  14-mapping.cy.ts • 1 flaky test

View Output Video

Test		Artifacts
Data mapping > maps expressions from json view		Test Replay Screenshots Video