Skip to content

Commit

Permalink
feat(editor): New Code editor based on the TypeScript language service (
Browse files Browse the repository at this point in the history 
#12285)
  • Loading branch information
@elsmr
elsmr authored Jan 8, 2025
1 parent ac497c8 commit 52ae02a
Show file tree
Hide file tree
Showing 58 changed files with 2,861 additions and 758 deletions.
4 changes: 2 additions & 2 deletions cypress/e2e/6-code-node.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ for (const item of $input.all()) {
return
`);
getParameter().get('.cm-lint-marker-error').should('have.length', 6);
getParameter().get('.cm-lintRange-error').should('have.length', 6);
getParameter().contains('itemMatching').realHover();
cy.get('.cm-tooltip-lint').should(
'have.text',
Expand All @@ -81,7 +81,7 @@ $input.item()
return []
`);

getParameter().get('.cm-lint-marker-error').should('have.length', 5);
getParameter().get('.cm-lintRange-error').should('have.length', 5);
getParameter().contains('all').realHover();
cy.get('.cm-tooltip-lint').should(
'have.text',
Expand Down
1 change: 1 addition & 0 deletions packages/design-system/src/css/_primitives.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
Expand Down
35 changes: 23 additions & 12 deletions packages/design-system/src/css/_tokens.dark.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);

Expand Down
35 changes: 23 additions & 12 deletions packages/design-system/src/css/_tokens.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: #005cc5;
--color-code-tags-parameter: #24292e;
--color-code-tags-function: #6f42c1;
--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);
Expand All @@ -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);

Expand Down
5 changes: 5 additions & 0 deletions packages/editor-ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
Loading

0 comments on commit 52ae02a

Please sign in to comment.