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

packages/design-system/src/css/_primitives.scss

@@ -16,6 +16,7 @@
 	--prim-gray-490: hsl(var(--prim-gray-h), 3%, 51%);
 	--prim-gray-420: hsl(var(--prim-gray-h), 4%, 58%);
 	--prim-gray-320: hsl(var(--prim-gray-h), 10%, 68%);
+	--prim-gray-320-alpha-010: hsla(var(--prim-gray-h), 10%, 68%, 0.1);
 	--prim-gray-200: hsl(var(--prim-gray-h), 18%, 80%);
 	--prim-gray-120: hsl(var(--prim-gray-h), 25%, 88%);
 	--prim-gray-70: hsl(var(--prim-gray-h), 32%, 93%);

packages/design-system/src/css/_tokens.dark.scss

@@ -139,12 +139,20 @@
 	--color-infobox-examples-border-color: var(--prim-gray-670);
 
 	// Code
-	--color-code-tags-string: var(--prim-color-alt-f-tint-150);
-	--color-code-tags-primitive: var(--prim-color-alt-b-shade-100);
-	--color-code-tags-keyword: var(--prim-color-alt-g-tint-150);
-	--color-code-tags-operator: var(--prim-color-alt-h);
-	--color-code-tags-variable: var(--prim-color-primary-tint-100);
-	--color-code-tags-definition: var(--prim-color-alt-e);
+	--color-code-tags-string: #9ecbff;
+	--color-code-tags-regex: #9ecbff;
+	--color-code-tags-primitive: #79b8ff;
+	--color-code-tags-keyword: #f97583;
+	--color-code-tags-variable: #79b8ff;
+	--color-code-tags-parameter: #e1e4e8;
+	--color-code-tags-function: #b392f0;
+	--color-code-tags-constant: #79b8ff;
+	--color-code-tags-property: #79b8ff;
+	--color-code-tags-type: #b392f0;
+	--color-code-tags-class: #b392f0;
+	--color-code-tags-heading: #79b8ff;
+	--color-code-tags-invalid: #f97583;
+	--color-code-tags-comment: #6a737d;
 	--color-json-default: var(--prim-color-secondary-tint-200);
 	--color-json-null: var(--color-danger);
 	--color-json-boolean: var(--prim-color-alt-a);
@@ -155,15 +163,18 @@
 	--color-json-brackets-hover: var(--prim-color-alt-e);
 	--color-json-line: var(--prim-gray-200);
 	--color-json-highlight: var(--color-background-base);
-	--color-code-background: var(--prim-gray-800);
+	--color-code-background: var(--prim-gray-820);
 	--color-code-background-readonly: var(--prim-gray-740);
-	--color-code-lineHighlight: var(--prim-gray-740);
+	--color-code-lineHighlight: var(--prim-gray-320-alpha-010);
 	--color-code-foreground: var(--prim-gray-70);
 	--color-code-caret: var(--prim-gray-10);
-	--color-code-selection: var(--prim-color-alt-e-alpha-04);
-	--color-code-gutterBackground: var(--prim-gray-670);
-	--color-code-gutterForeground: var(--prim-gray-320);
-	--color-code-tags-comment: var(--prim-gray-200);
+	--color-code-selection: #3392ff44;
+	--color-code-selection-highlight: #17e5e633;
+	--color-code-gutter-background: var(--prim-gray-820);
+	--color-code-gutter-foreground: var(--prim-gray-320);
+	--color-code-gutter-foreground-active: var(--prim-gray-10);
+	--color-code-indentation-marker: var(--prim-gray-740);
+	--color-code-indentation-marker-active: var(--prim-gray-670);
 	--color-line-break: var(--prim-gray-420);
 	--color-code-line-break: var(--prim-color-secondary-tint-100);
 

packages/design-system/src/css/_tokens.scss

@@ -183,12 +183,20 @@
 	--color-infobox-examples-border-color: var(--color-foreground-light);
 
 	// Code
-	--color-code-tags-string: var(--prim-color-alt-f);
-	--color-code-tags-primitive: var(--prim-color-alt-b-shade-100);
-	--color-code-tags-keyword: var(--prim-color-alt-g);
-	--color-code-tags-operator: var(--prim-color-alt-h);
-	--color-code-tags-variable: var(--prim-color-alt-c-shade-100);
-	--color-code-tags-definition: var(--prim-color-alt-e-shade-150);
+	--color-code-tags-string: #032f62;
+	--color-code-tags-regex: #032f62;
+	--color-code-tags-primitive: #005cc5;
+	--color-code-tags-keyword: #d73a49;
+	--color-code-tags-variable: #e36209;
+	--color-code-tags-parameter: #24292e;
+	--color-code-tags-function: #005cc5;
+	--color-code-tags-constant: #005cc5;
+	--color-code-tags-property: #005cc5;
+	--color-code-tags-type: #005cc5;
+	--color-code-tags-class: #6f42c1;
+	--color-code-tags-heading: #005cc5;
+	--color-code-tags-invalid: #cb2431;
+	--color-code-tags-comment: #6a737d;
 	--color-json-default: var(--prim-color-secondary-shade-100);
 	--color-json-null: var(--prim-color-alt-c);
 	--color-json-boolean: var(--prim-color-alt-a);
@@ -201,13 +209,16 @@
 	--color-json-highlight: var(--prim-gray-70);
 	--color-code-background: var(--prim-gray-0);
 	--color-code-background-readonly: var(--prim-gray-40);
-	--color-code-lineHighlight: var(--prim-gray-40);
+	--color-code-lineHighlight: var(--prim-gray-320-alpha-010);
 	--color-code-foreground: var(--prim-gray-670);
-	--color-code-caret: var(--prim-gray-420);
-	--color-code-selection: var(--prim-gray-120);
-	--color-code-gutterBackground: var(--prim-gray-0);
-	--color-code-gutterForeground: var(--prim-gray-320);
-	--color-code-tags-comment: var(--prim-gray-420);
+	--color-code-caret: var(--prim-gray-820);
+	--color-code-selection: #0366d625;
+	--color-code-selection-highlight: #34d05840;
+	--color-code-gutter-background: var(--prim-gray-0);
+	--color-code-gutter-foreground: var(--prim-gray-320);
+	--color-code-gutter-foreground-active: var(--prim-gray-670);
+	--color-code-indentation-marker: var(--prim-gray-70);
+	--color-code-indentation-marker-active: var(--prim-gray-200);
 	--color-line-break: var(--prim-gray-320);
 	--color-code-line-break: var(--prim-color-secondary-tint-200);
 

packages/editor-ui/package.json

@@ -25,6 +25,7 @@
     "@codemirror/lang-python": "^6.1.6",
     "@codemirror/language": "^6.10.1",
     "@codemirror/lint": "^6.8.0",
+    "@codemirror/search": "^6.5.6",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.26.3",
     "@fontsource/open-sans": "^4.5.0",
@@ -39,6 +40,8 @@
     "@n8n/codemirror-lang": "workspace:*",
     "@n8n/codemirror-lang-sql": "^1.0.2",
     "@n8n/permissions": "workspace:*",
+    "@replit/codemirror-indentation-markers": "^6.5.3",
+    "@typescript/vfs": "^1.6.0",
     "@sentry/vue": "catalog:frontend",
     "@vue-flow/background": "^1.3.2",
     "@vue-flow/controls": "^1.1.2",
@@ -52,6 +55,7 @@
     "change-case": "^5.4.4",
     "chart.js": "^4.4.0",
     "codemirror-lang-html-n8n": "^1.0.0",
+    "comlink": "^4.4.1",
     "dateformat": "^3.0.3",
     "email-providers": "^2.0.1",
     "esprima-next": "5.8.4",
@@ -70,6 +74,7 @@
     "qrcode.vue": "^3.3.4",
     "stream-browserify": "^3.0.0",
     "timeago.js": "^4.0.2",
+    "typescript": "^5.5.2",
     "uuid": "catalog:",
     "v3-infinite-loading": "^1.2.2",
     "vue": "catalog:frontend",