Update to CodeMirror 6

1 year ago · 22721aa2e3
parent d41629abd0
commit 22721aa2e3
8 changed files with 310 additions and 214 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -17,12 +17,16 @@
        "@angular/platform-browser": "^17.1.0",
        "@angular/platform-browser-dynamic": "^17.1.0",
        "@angular/router": "^17.1.0",
-        "@ctrl/ngx-codemirror": "^7.0.0",
+        "@codemirror/lang-cpp": "^6.0.2",
+        "@codemirror/lang-javascript": "^6.2.1",
+        "@codemirror/state": "^6.4.0",
+        "@codemirror/view": "^6.23.0",
        "@emailjs/browser": "^3.12.1",
        "@ngx-translate/core": "^15.0.0",
        "@ngx-translate/http-loader": "^8.0.0",
+        "@sandkasten/codemirror6-editor": "^0.0.2",
        "ansi-to-html": "^0.7.2",
-        "codemirror": "^5.65.16",
+        "codemirror": "^6.0.1",
        "rxjs": "~7.8.1",
        "sse.js": "^2.2.0",
        "tslib": "^2.6.2",
@ -2262,6 +2266,105 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.12.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.12.0.tgz",
+      "integrity": "sha512-r4IjdYFthwbCQyvqnSlx0WBHRHi8nBvU+WjJxFUij81qsBfhNudf/XKKmmC2j3m0LaOYUQTf3qiEK1J8lO1sdg==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/commands": {
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.3.3.tgz",
+      "integrity": "sha512-dO4hcF0fGT9tu1Pj1D2PvGvxjeGkbC6RGcZw6Qs74TH+Ed1gw98jmUgd2axWvIZEqTeTuFrg1lEB1KV6cK9h1A==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.4.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "node_modules/@codemirror/lang-cpp": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-cpp/-/lang-cpp-6.0.2.tgz",
+      "integrity": "sha512-6oYEYUKHvrnacXxWxYa6t4puTlbN3dgV662BDfSH8+MfjQjVmP697/KYTDOqpxgerkvoNm7q5wlFMBeX8ZMocg==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/cpp": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-javascript": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.1.tgz",
+      "integrity": "sha512-jlFOXTejVyiQCW3EQwvKH0m99bUYIw40oPmFjSX2VS78yzfe0HELZ+NEo9Yfo1MkGRpGlj3Gnu4rdxV1EnAs5A==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.6.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/javascript": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/language": {
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.0.tgz",
+      "integrity": "sha512-2vaNn9aPGCRFKWcHPFksctzJ8yS5p7YoaT+jHpc0UGKzNuAIx4qy6R5wiqbP+heEEdyaABA582mNqSHzSoYdmg==",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.1.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/lint": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.4.2.tgz",
+      "integrity": "sha512-wzRkluWb1ptPKdzlsrbwwjYCPLgzU6N88YBAmlZi8WFyuiEduSd05MnJYNogzyc8rPK7pj6m95ptUApc8sHKVA==",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/search": {
+      "version": "6.5.5",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.5.tgz",
+      "integrity": "sha512-PIEN3Ke1buPod2EHbJsoQwlbpkz30qGZKcnmH1eihq9+bPQx8gelauUwLYaY4vBOuBAuEhmpDLii4rj/uO0yMA==",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.4.0.tgz",
+      "integrity": "sha512-hm8XshYj5Fo30Bb922QX9hXB/bxOAVH+qaqHBzw5TKa72vOeslyGwd4X8M0c1dJ9JqxlaMceOQ8RsL9tC7gU0A=="
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.23.0.tgz",
+      "integrity": "sha512-/51px9N4uW8NpuWkyUX+iam5+PM6io2fm+QmRnzwqBy5v/pwGg9T0kILFtYeum8hjuvENtgsGNKluOfqIICmeQ==",
+      "dependencies": {
+        "@codemirror/state": "^6.4.0",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
    "node_modules/@colors/colors": {
      "version": "1.5.0",
      "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
@ -2271,20 +2374,6 @@
        "node": ">=0.1.90"
      }
    },
-    "node_modules/@ctrl/ngx-codemirror": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@ctrl/ngx-codemirror/-/ngx-codemirror-7.0.0.tgz",
-      "integrity": "sha512-qvIWtSTw/8fdXDnofBTX6LmTW9646HhawG2+Qyagf1vH40jCy0ZbHnkC20UYOVpUX+QCd1e/PQpkvWQ/1iGFzQ==",
-      "dependencies": {
-        "@types/codemirror": "^5.60.7",
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "@angular/core": ">=16.0.0-0",
-        "@angular/forms": ">=16.0.0-0",
-        "codemirror": "^5.65.9"
-      }
-    },
    "node_modules/@discoveryjs/json-ext": {
      "version": "0.5.7",
      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@ -2864,6 +2953,47 @@
      "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
      "dev": true
    },
+    "node_modules/@lezer/common": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz",
+      "integrity": "sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ=="
+    },
+    "node_modules/@lezer/cpp": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@lezer/cpp/-/cpp-1.1.2.tgz",
+      "integrity": "sha512-macwKtyeUO0EW86r3xWQCzOV9/CF8imJLpJlPv3sDY57cPGeUZ8gXWOWNlJr52TVByMV3PayFQCA5SHEERDmVQ==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.0.tgz",
+      "integrity": "sha512-WrS5Mw51sGrpqjlh3d4/fOwpEV2Hd3YOkp9DBt4k8XZQcoTHZFB7sx030A6OcahF4J1nDQAa3jXlTVVYH50IFA==",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/javascript": {
+      "version": "1.4.13",
+      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.13.tgz",
+      "integrity": "sha512-5IBr8LIO3xJdJH1e9aj/ZNLE4LSbdsx25wFmGRAZsj2zSmwAYjx26JyU/BYOCpRQlu1jcv1z3vy4NB9+UkfRow==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.1.3",
+        "@lezer/lr": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/lr": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.14.tgz",
+      "integrity": "sha512-z5mY4LStlA3yL7aHT/rqgG614cfcvklS+8oFRFBYrs4YaWLJyKKM4+nN6KopToX0o9Hj6zmH6M5kinOYuy06ug==",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
    "node_modules/@ljharb/through": {
      "version": "2.3.11",
      "resolved": "https://registry.npmjs.org/@ljharb/through/-/through-2.3.11.tgz",
@ -3323,6 +3453,20 @@
        "win32"
      ]
    },
+    "node_modules/@sandkasten/codemirror6-editor": {
+      "version": "0.0.2",
+      "resolved": "https://codefirst.iut.uca.fr/git/api/packages/sandkasten/npm/%40sandkasten%2Fcodemirror6-editor/-/0.0.2/codemirror6-editor-0.0.2.tgz",
+      "integrity": "sha512-hwqtIlIJFT1muFRqY66OC6qYtxj8XS0yG0SfDWh856CrZRcjSed5q4JBWROZqyPerc7L4PQiO3YmUnzR0YtCOA==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^17.1.0",
+        "@angular/core": "^17.1.0",
+        "@codemirror/state": "^6.4.0",
+        "@codemirror/view": "^6.23.0"
+      }
+    },
    "node_modules/@schematics/angular": {
      "version": "17.1.0",
      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-17.1.0.tgz",
@ -3482,14 +3626,6 @@
        "@types/node": "*"
      }
    },
-    "node_modules/@types/codemirror": {
-      "version": "5.60.15",
-      "resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.15.tgz",
-      "integrity": "sha512-dTOvwEQ+ouKJ/rE9LT1Ue2hmP6H1mZv5+CCnNWu2qtiOe2LQa9lCprEY20HxiDmV/Bxh+dXjywmy5aKvoGjULA==",
-      "dependencies": {
-        "@types/tern": "*"
-      }
-    },
    "node_modules/@types/connect": {
      "version": "3.4.38",
      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
@ -3547,7 +3683,8 @@
    "node_modules/@types/estree": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "dev": true
    },
    "node_modules/@types/express": {
      "version": "4.17.21",
@ -3681,14 +3818,6 @@
        "@types/node": "*"
      }
    },
-    "node_modules/@types/tern": {
-      "version": "0.23.9",
-      "resolved": "https://registry.npmjs.org/@types/tern/-/tern-0.23.9.tgz",
-      "integrity": "sha512-ypzHFE/wBzh+BlH6rrBgS5I/Z7RD21pGhZ2rltb/+ZrVM1awdZwjx7hE5XfuYgHWk9uvV5HLZN3SloevCAp3Bw==",
-      "dependencies": {
-        "@types/estree": "*"
-      }
-    },
    "node_modules/@types/ws": {
      "version": "8.5.10",
      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
@ -4819,9 +4948,18 @@
      }
    },
    "node_modules/codemirror": {
-      "version": "5.65.16",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.16.tgz",
-      "integrity": "sha512-br21LjYmSlVL0vFCPWPfhzUCT34FM/pAdK7rRIZwa0rrtrIdotvP4Oh4GUHsu2E3IrQMCfRkL/fN3ytMNxVQvg=="
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz",
+      "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      }
    },
    "node_modules/color-convert": {
      "version": "1.9.3",
@ -5127,6 +5265,11 @@
        "js-yaml": "bin/js-yaml.js"
      }
    },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
+    },
    "node_modules/critters": {
      "version": "0.0.20",
      "resolved": "https://registry.npmjs.org/critters/-/critters-0.0.20.tgz",
@ -10882,6 +11025,11 @@
        "node": ">=6"
      }
    },
+    "node_modules/style-mod": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.0.tgz",
+      "integrity": "sha512-Ca5ib8HrFn+f+0n4N4ScTIA9iTOQ7MaGS1ylHcoVqW9J7w2w8PzN6g9gKmTYgGEBH8e120+RCmhpje6jC5uGWA=="
+    },
    "node_modules/supports-color": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@ -11514,6 +11662,11 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
+    },
    "node_modules/watchpack": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
--- a/package.json
+++ b/package.json
@ -19,12 +19,16 @@
    "@angular/platform-browser": "^17.1.0",
    "@angular/platform-browser-dynamic": "^17.1.0",
    "@angular/router": "^17.1.0",
-    "@ctrl/ngx-codemirror": "^7.0.0",
+    "@codemirror/lang-cpp": "^6.0.2",
+    "@codemirror/lang-javascript": "^6.2.1",
+    "@codemirror/state": "^6.4.0",
+    "@codemirror/view": "^6.23.0",
    "@emailjs/browser": "^3.12.1",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
+    "@sandkasten/codemirror6-editor": "^0.0.2",
    "ansi-to-html": "^0.7.2",
-    "codemirror": "^5.65.16",
+    "codemirror": "^6.0.1",
    "rxjs": "~7.8.1",
    "sse.js": "^2.2.0",
    "tslib": "^2.6.2",
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -17,7 +17,7 @@ import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-poli
 import { ReactiveFormsModule } from '@angular/forms';

 import { FormsModule } from '@angular/forms';
-import { CodemirrorModule } from '@ctrl/ngx-codemirror';
+import { CodeMirrorComponent } from '@sandkasten/codemirror6-editor';

 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
@ -46,7 +46,6 @@ import { SafeHTMLPipe } from './safe-html.pipe';
    AppRoutingModule,
    ReactiveFormsModule,
    FormsModule,
-    CodemirrorModule,
    // Injection des HttpClient pour notre module de traduction
    HttpClientModule,
    // Initialisation du module de traduction
@ -60,7 +59,8 @@ import { SafeHTMLPipe } from './safe-html.pipe';
        deps: [HttpClient]
      },
      defaultLanguage: 'fr'
-    })
+    }),
+    CodeMirrorComponent
  ],
  providers: [TranslationService],
  bootstrap: [AppComponent]
--- a/src/app/components/editor/editor.component.html
+++ b/src/app/components/editor/editor.component.html
@ -1,35 +1,19 @@
 <div>
  <div>
-    <ngx-codemirror
-      [options]="{
-        theme: 'material',
-        lineNumbers: true,
-        lineWrapping: true,
-        mode: mode,
-        autofocus: true
-      }"
+    <codemirror6-editor
      [(ngModel)]="editorContent"
-      [autoFocus]="true"
-    >
-    </ngx-codemirror>
+      [extensions]="extensions"
+    ></codemirror6-editor>
  </div>

  <pre [innerHTML]="resultContent | safeHTML"></pre>

  <div>
    <label for="language">Langage de programmation</label>
-    <select
-      id="language"
-      name="language"
-      [(ngModel)]="mode"
-      (ngModelChange)="changeMode()">
-
-      <option value="text/typescript" selected>TypeScript</option>
-      <option value="text/javascript">JavaScript</option>
-      <option value="text/x-csrc">C</option>
-      <option value="text/x-c++src">C++</option>
-      <option value="text/x-sh">Shell</option>
-
+    <select id="language" [(ngModel)]="selectedLanguage">
+      @for (language of languages; track language.name) {
+        <option [ngValue]="language">{{ language.name }}</option>
+      }
    </select>
  </div>

@ -38,10 +22,6 @@
  </div>

  <button (click)="onRunButtonClicked()" [disabled]="isLoaded">Lancer</button>
-  <div *ngIf="!isLoaded">
-    <p>Chargement: {{ loadingProgress }}%</p>
-    <div class="loading-bar" [style.width.%]="loadingProgress"></div>
-  </div>

  <div>
    <label for="fileInput">Charger à partir d'un fichier</label>
--- a/src/app/components/editor/editor.component.ts
+++ b/src/app/components/editor/editor.component.ts
@ -1,96 +1,55 @@
-import { Component, OnInit } from "@angular/core";
-import { Router } from "@angular/router";
-import { CodeExecutionService } from "src/app/services/codeExecution.service";
-import "codemirror/mode/shell/shell.js";
-import "codemirror/mode/clike/clike.js";
-import Convert from 'ansi-to-html';
-
-
-// Exemple de code pour chaque langage autorisé
-const codeDefaults = {
-  "text/typescript": `const component = {
-    name: "@exemple/Typescript",
-    author: "Sandkasten",
-    repo: "https://codefirst.iut.uca.fr/git/sandkasten/sandkasten-web.git"
-};
-const hello: string = 'Bonjour ceci est un test de code en typescript';`,
-  "text/javascript": `const component = {
-    name: "@exemple/Javascript",
-    author: "Sandkasten",
-    repo: "https://codefirst.iut.uca.fr/git/sandkasten/sandkasten-web.git"
-};
-const hello = 'Bonjour ceci est un test de code en javascript';`,
-  "text/x-c++src": `#include <iostream>
-using namespace std;
-int main() {
-  cout << "Bonjour ceci est un test de code en c++" << endl;
-  return 0;
-}`,
-  "text/x-csrc": `#include <stdio.h>
-int main() {
-   printf("Bonjour ceci est un test de code en c");
-   return 0;
-}`,
-  "text/x-sh": `#!/bin/bash
-echo "Bonjour ceci est un test de code en shell"`,
-};
-
-// Langages autorisés
-type AllowedLanguage = keyof typeof codeDefaults;
+import { Component, ViewChild } from '@angular/core';
+import { CodeExecutionService } from 'src/app/services/codeExecution.service';
+import { basicSetup } from 'codemirror';
+import { Compartment, Extension } from '@codemirror/state';
+import { CodeMirrorComponent } from '@sandkasten/codemirror6-editor';
+import { LanguageDescription } from '@codemirror/language';
+import { CODE_DEFAULTS, LANGUAGES } from '../languages';

@Component({
  selector: "app-editor",
  templateUrl: "./editor.component.html",
  styleUrls: ["./editor.component.scss"],
 })
-export class EditorComponent implements OnInit {
-  loadingProgress: number = 0; // Pour suivre la progression du chargement
+export class EditorComponent {
  isLoaded: boolean = false; // Pour vérifier si le chargement est terminé

+  readonly languages: LanguageDescription[] = LANGUAGES;
  // Mode par défaut
-  mode: AllowedLanguage = "text/typescript";
-  options = {
-    lineNumbers: true,
-    mode: this.mode,
-  };
-  defaults = codeDefaults;
+  private _selectedLanguage = this.languages.find((lang) => lang.name === "JavaScript")!;
+  get selectedLanguage(): LanguageDescription {
+    return this._selectedLanguage;
+  }
+  set selectedLanguage(value: LanguageDescription) {
+    this._selectedLanguage = value;
+    if (value.name in CODE_DEFAULTS) {
+      this.editorContent = CODE_DEFAULTS[value.name as keyof typeof CODE_DEFAULTS];
+    }
+    this.selectedLanguage.load().then((language) => {
+      this.codemirror.editor?.dispatch({
+        effects: this.languageCompartment.reconfigure(language)
+      });
+    });
+  }

  // Contenu de l'éditeur que l'on passera au serveur
-  editorContent: string = this.defaults[this.mode as keyof typeof codeDefaults];
+  editorContent: string = CODE_DEFAULTS[this.selectedLanguage.name as keyof typeof CODE_DEFAULTS];
  resultContent: string = "";

  // Message d'erreur
  errorMessage: string = "";

-  constructor(
-    private router: Router,
-    private codeExecutionService: CodeExecutionService
-  ) {}
-
-  ngOnInit(): void {
-    // Appel à changeMode pour mettre à jour le contenu de l'éditeur et le mode
-    this.changeMode();
-    const convert = new Convert();
-
-    this.codeExecutionService.getResult().subscribe((result) => {
-      if (result.type !== 'exit') {
-        this.resultContent += convert.toHtml(result.text);
-      }
-    });
-  }
+  @ViewChild(CodeMirrorComponent) private codemirror!: CodeMirrorComponent;

-  // Change le langage de l'éditeur
-  changeMode(): void {
-    this.options = {
-      ...this.options,
-      mode: this.mode,
-    };
-    this.editorContent = this.defaults[this.mode as keyof typeof codeDefaults];
-  }
+  private readonly languageCompartment = new Compartment();
+  protected readonly extensions: Extension[] = [
+    basicSetup,
+    this.languageCompartment.of(this.selectedLanguage.support!)
+  ];

-  // Affiche le contenu de l'éditeur
-  handleChange($event: Event): void {
-    console.log("ngModelChange", $event);
+  constructor(
+    private codeExecutionService: CodeExecutionService
+  ) {
  }

  // Efface le contenu de l'éditeur
@ -98,77 +57,34 @@ export class EditorComponent implements OnInit {
    this.editorContent = "";
  }

-  loadFromFile(event: any): void {
-    const file = event.target.files[0];
-    if (file) {
-      const allowedExtensions = ["sh", "js", "ts", "cpp", "c"];
-      const extension = file.name.split(".").pop()?.toLowerCase();
-
-      if (extension && allowedExtensions.includes(extension)) {
-        // Identifiez le mode en fonction de l'extension
-        const modeMap: Record<string, AllowedLanguage> = {
-          sh: "text/x-sh",
-          js: "text/javascript",
-          ts: "text/typescript",
-          cpp: "text/x-c++src",
-          c: "text/x-csrc",
-        };
-        this.mode = modeMap[extension];
+  onRunButtonClicked() {
+    // Le code à exécuter est le contenu de l'éditeur
+    const codeToExecute = this.editorContent;

-        // Mettez à jour le contenu de l'éditeur et le mode
-        this.changeMode();
+    this.codeExecutionService.executeCode(codeToExecute, this.selectedLanguage.name);

-        const reader = new FileReader();
-        reader.onload = (e) => {
-          this.editorContent = e.target?.result as string;
-          this.errorMessage = ""; // Réinitialisez le message d'erreur en cas de succès.
-        };
-        reader.readAsText(file);
-      } else {
-        this.errorMessage =
-          "Unsupported file type. Please select a file with one of the following extensions: sh, js, ts, cpp, c";
-        console.error(this.errorMessage);
-      }
-    }
+    this.resultContent = '';
  }

-  saveToFile(): void {
-    const languageExtensionMap: Record<AllowedLanguage, string> = {
-      "text/x-sh": "sh",
-      "text/javascript": "js",
-      "text/typescript": "ts",
-      "text/x-c++src": "cpp",
-      "text/x-csrc": "c",
-    };
-
-    if (languageExtensionMap[this.mode]) {
-      const extension = languageExtensionMap[this.mode];
-      if (this.editorContent.trim() === "") {
-        this.errorMessage = "Cannot save an empty file.";
-        console.error(this.errorMessage);
-      } else {
-        this.errorMessage = ""; // Réinitialisez le message d'erreur en cas de succès.
-        const blob = new Blob([this.editorContent], { type: "text/plain" });
-        const a = document.createElement("a");
-        a.href = window.URL.createObjectURL(blob);
-        a.download = `code.${extension}`;
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
+  loadFromFile(event: Event) {
+    const file = (event.target as HTMLInputElement).files![0];
+    for (const language of this.languages) {
+      if (language.extensions.some(ext => file.name.endsWith(`.${ext}`))) {
+        this.selectedLanguage = language;
+        return;
      }
-    } else {
-      this.errorMessage =
-        "Unsupported language. Please select one of the following languages: shell, javascript, typescript, c++, c";
-      console.error(this.errorMessage);
    }
+    const extensions = this.languages.flatMap(lang => lang.extensions);
+    this.errorMessage =
+      `Unsupported language. Please select one of the following languages: ${extensions.join(', ')}.`;
+    console.error(this.errorMessage);
  }

-  onRunButtonClicked() {
-    // Le code à exécuter est le contenu de l'éditeur
-    const codeToExecute = this.editorContent;
-
-    this.codeExecutionService.executeCode(codeToExecute, this.mode);
-
-    this.resultContent = '';
+  saveToFile() {
+    const blob = new Blob([this.editorContent], { type: 'text/plain' });
+    const a = document.createElement('a');
+    a.download = `code.${this.selectedLanguage.extensions![0]}`;
+    a.href = URL.createObjectURL(blob);
+    a.click();
  }
 }
--- a/src/app/components/languages.ts
+++ b/src/app/components/languages.ts
@ -0,0 +1,49 @@
+import {LanguageDescription} from "@codemirror/language";
+import {javascript} from "@codemirror/lang-javascript";
+
+export const CODE_DEFAULTS = {
+  'C': /** @lang C */ `#include <stdio.h>
+int main() {
+    printf("Hello, World!\\n");
+    return 0;
+}`,
+  'C++': /** @lang C++ */ `#include <iostream>
+int main() {
+    std::cout << "Hello, World!\\n";
+    return 0;
+}`,
+  'JavaScript': /** @lang JS */ `console.log("Hello, World!");`,
+  'TypeScript': /** @lang TS */ `console.log("Hello, World!");`
+};
+
+export const LANGUAGES = [
+  LanguageDescription.of({
+    name: 'C',
+    extensions: ['c', 'h', 'ino'],
+    load() {
+      return import("@codemirror/lang-cpp").then(m => m.cpp())
+    }
+  }),
+  LanguageDescription.of({
+    name: "C++",
+    alias: ['cpp'],
+    extensions: ['cpp', "c++", 'cc', 'cxx', 'hpp', "h++", 'hh', 'hxx'],
+    load() {
+      return import("@codemirror/lang-cpp").then(m => m.cpp())
+    }
+  }),
+  LanguageDescription.of({
+    name: 'JavaScript',
+    alias: ['ecmascript', 'js', 'node'],
+    extensions: ['js', 'mjs', 'cjs'],
+    support: javascript(),
+  }),
+  LanguageDescription.of({
+    name: 'TypeScript',
+    alias: ['ts'],
+    extensions: ['ts'],
+    load() {
+      return import("@codemirror/lang-javascript").then(m => m.javascript({typescript: true}))
+    }
+  }),
+];
--- a/src/main.ts
+++ b/src/main.ts
@ -1,6 +1,3 @@
-import 'codemirror/mode/javascript/javascript';
-import 'codemirror/mode/markdown/markdown';
-
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

 import { AppModule } from './app/app.module';
--- a/src/styles.scss
+++ b/src/styles.scss
@ -1,6 +1,3 @@
-@import 'codemirror/lib/codemirror.css';
-@import 'codemirror/theme/material.css';
-
 //region Colors
 $color-purple: #605FFC;
 $color-white: #FFFFFF;