After several attempts to add extensions to the editor, I can't get past a problem that seems to me to be linked to an incompatibility between Code Mirror packages

package-lock.json

@@ -17,6 +17,8 @@
         "@angular/platform-browser": "^17.1.1",
         "@angular/platform-browser-dynamic": "^17.1.1",
         "@angular/router": "^17.1.1",
+        "@codemirror/basic-setup": "^0.20.0",
+        "@codemirror/gutter": "^0.19.9",
         "@codemirror/lang-cpp": "^6.0.2",
         "@codemirror/lang-javascript": "^6.2.1",
         "@codemirror/state": "^6.4.0",
@@ -2436,6 +2438,112 @@
         "@lezer/common": "^1.0.0"
       }
     },
+    "node_modules/@codemirror/basic-setup": {
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/basic-setup/-/basic-setup-0.20.0.tgz",
+      "integrity": "sha512-W/ERKMLErWkrVLyP5I8Yh8PXl4r+WFNkdYVSzkXYPQv2RMPSkWpr2BgggiSJ8AHF/q3GuApncDD8I4BZz65fyg==",
+      "deprecated": "In version 6.0, this package has been renamed to just 'codemirror'",
+      "dependencies": {
+        "@codemirror/autocomplete": "^0.20.0",
+        "@codemirror/commands": "^0.20.0",
+        "@codemirror/language": "^0.20.0",
+        "@codemirror/lint": "^0.20.0",
+        "@codemirror/search": "^0.20.0",
+        "@codemirror/state": "^0.20.0",
+        "@codemirror/view": "^0.20.0"
+      }
+    },
+    "node_modules/@codemirror/basic-setup/node_modules/@codemirror/autocomplete": {
+      "version": "0.20.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-0.20.3.tgz",
+      "integrity": "sha512-lYB+NPGP+LEzAudkWhLfMxhTrxtLILGl938w+RcFrGdrIc54A+UgmCoz+McE3IYRFp4xyQcL4uFJwo+93YdgHw==",
+      "dependencies": {
+        "@codemirror/language": "^0.20.0",
+        "@codemirror/state": "^0.20.0",
+        "@codemirror/view": "^0.20.0",
+        "@lezer/common": "^0.16.0"
+      }
+    },
+    "node_modules/@codemirror/basic-setup/node_modules/@codemirror/commands": {
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-0.20.0.tgz",
+      "integrity": "sha512-v9L5NNVA+A9R6zaFvaTbxs30kc69F6BkOoiEbeFw4m4I0exmDEKBILN6mK+GksJtvTzGBxvhAPlVFTdQW8GB7Q==",
+      "dependencies": {
+        "@codemirror/language": "^0.20.0",
+        "@codemirror/state": "^0.20.0",
+        "@codemirror/view": "^0.20.0",
+        "@lezer/common": "^0.16.0"
+      }
+    },
+    "node_modules/@codemirror/basic-setup/node_modules/@codemirror/language": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-0.20.2.tgz",
+      "integrity": "sha512-WB3Bnuusw0xhVvhBocieYKwJm04SOk5bPoOEYksVHKHcGHFOaYaw+eZVxR4gIqMMcGzOIUil0FsCmFk8yrhHpw==",
+      "dependencies": {
+        "@codemirror/state": "^0.20.0",
+        "@codemirror/view": "^0.20.0",
+        "@lezer/common": "^0.16.0",
+        "@lezer/highlight": "^0.16.0",
+        "@lezer/lr": "^0.16.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/basic-setup/node_modules/@codemirror/lint": {
+      "version": "0.20.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-0.20.3.tgz",
+      "integrity": "sha512-06xUScbbspZ8mKoODQCEx6hz1bjaq9m8W8DxdycWARMiiX1wMtfCh/MoHpaL7ws/KUMwlsFFfp2qhm32oaCvVA==",
+      "dependencies": {
+        "@codemirror/state": "^0.20.0",
+        "@codemirror/view": "^0.20.2",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/basic-setup/node_modules/@codemirror/search": {
+      "version": "0.20.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-0.20.1.tgz",
+      "integrity": "sha512-ROe6gRboQU5E4z6GAkNa2kxhXqsGNbeLEisbvzbOeB7nuDYXUZ70vGIgmqPu0tB+1M3F9yWk6W8k2vrFpJaD4Q==",
+      "dependencies": {
+        "@codemirror/state": "^0.20.0",
+        "@codemirror/view": "^0.20.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/basic-setup/node_modules/@codemirror/state": {
+      "version": "0.20.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-0.20.1.tgz",
+      "integrity": "sha512-ms0tlV5A02OK0pFvTtSUGMLkoarzh1F8mr6jy1cD7ucSC2X/VLHtQCxfhdSEGqTYlQF2hoZtmLv+amqhdgbwjQ=="
+    },
+    "node_modules/@codemirror/basic-setup/node_modules/@codemirror/view": {
+      "version": "0.20.7",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-0.20.7.tgz",
+      "integrity": "sha512-pqEPCb9QFTOtHgAH5XU/oVy9UR/Anj6r+tG5CRmkNVcqSKEPmBU05WtN/jxJCFZBXf6HumzWC9ydE4qstO3TxQ==",
+      "dependencies": {
+        "@codemirror/state": "^0.20.0",
+        "style-mod": "^4.0.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
+    "node_modules/@codemirror/basic-setup/node_modules/@lezer/common": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-0.16.1.tgz",
+      "integrity": "sha512-qPmG7YTZ6lATyTOAWf8vXE+iRrt1NJd4cm2nJHK+v7X9TsOF6+HtuU/ctaZy2RCrluxDb89hI6KWQ5LfQGQWuA=="
+    },
+    "node_modules/@codemirror/basic-setup/node_modules/@lezer/highlight": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-0.16.0.tgz",
+      "integrity": "sha512-iE5f4flHlJ1g1clOStvXNLbORJoiW4Kytso6ubfYzHnaNo/eo5SKhxs4wv/rtvwZQeZrK3we8S9SyA7OGOoRKQ==",
+      "dependencies": {
+        "@lezer/common": "^0.16.0"
+      }
+    },
+    "node_modules/@codemirror/basic-setup/node_modules/@lezer/lr": {
+      "version": "0.16.3",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-0.16.3.tgz",
+      "integrity": "sha512-pau7um4eAw94BEuuShUIeQDTf3k4Wt6oIUOYxMmkZgDHdqtIcxWND4LRxi8nI9KuT4I1bXQv67BCapkxt7Ywqw==",
+      "dependencies": {
+        "@lezer/common": "^0.16.0"
+      }
+    },
     "node_modules/@codemirror/commands": {
       "version": "6.3.3",
       "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.3.3.tgz",
@@ -2447,6 +2555,37 @@
         "@lezer/common": "^1.1.0"
       }
     },
+    "node_modules/@codemirror/gutter": {
+      "version": "0.19.9",
+      "resolved": "https://registry.npmjs.org/@codemirror/gutter/-/gutter-0.19.9.tgz",
+      "integrity": "sha512-PFrtmilahin1g6uL27aG5tM/rqR9DZzZYZsIrCXA5Uc2OFTFqx4owuhoU9hqfYxHp5ovfvBwQ+txFzqS4vog6Q==",
+      "deprecated": "As of 0.20.0, this package has been merged into @codemirror/view",
+      "dependencies": {
+        "@codemirror/rangeset": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/view": "^0.19.23"
+      }
+    },
+    "node_modules/@codemirror/gutter/node_modules/@codemirror/state": {
+      "version": "0.19.9",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-0.19.9.tgz",
+      "integrity": "sha512-psOzDolKTZkx4CgUqhBQ8T8gBc0xN5z4gzed109aF6x7D7umpDRoimacI/O6d9UGuyl4eYuDCZmDFr2Rq7aGOw==",
+      "dependencies": {
+        "@codemirror/text": "^0.19.0"
+      }
+    },
+    "node_modules/@codemirror/gutter/node_modules/@codemirror/view": {
+      "version": "0.19.48",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-0.19.48.tgz",
+      "integrity": "sha512-0eg7D2Nz4S8/caetCTz61rK0tkHI17V/d15Jy0kLOT8dTLGGNJUponDnW28h2B6bERmPlVHKh8MJIr5OCp1nGw==",
+      "dependencies": {
+        "@codemirror/rangeset": "^0.19.5",
+        "@codemirror/state": "^0.19.3",
+        "@codemirror/text": "^0.19.0",
+        "style-mod": "^4.0.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
     "node_modules/@codemirror/lang-cpp": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/@codemirror/lang-cpp/-/lang-cpp-6.0.2.tgz",
@@ -2493,6 +2632,23 @@
         "crelt": "^1.0.5"
       }
     },
+    "node_modules/@codemirror/rangeset": {
+      "version": "0.19.9",
+      "resolved": "https://registry.npmjs.org/@codemirror/rangeset/-/rangeset-0.19.9.tgz",
+      "integrity": "sha512-V8YUuOvK+ew87Xem+71nKcqu1SXd5QROMRLMS/ljT5/3MCxtgrRie1Cvild0G/Z2f1fpWxzX78V0U4jjXBorBQ==",
+      "deprecated": "As of 0.20.0, this package has been merged into @codemirror/state",
+      "dependencies": {
+        "@codemirror/state": "^0.19.0"
+      }
+    },
+    "node_modules/@codemirror/rangeset/node_modules/@codemirror/state": {
+      "version": "0.19.9",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-0.19.9.tgz",
+      "integrity": "sha512-psOzDolKTZkx4CgUqhBQ8T8gBc0xN5z4gzed109aF6x7D7umpDRoimacI/O6d9UGuyl4eYuDCZmDFr2Rq7aGOw==",
+      "dependencies": {
+        "@codemirror/text": "^0.19.0"
+      }
+    },
     "node_modules/@codemirror/search": {
       "version": "6.5.5",
       "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.5.tgz",
@@ -2508,6 +2664,12 @@
       "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.4.0.tgz",
       "integrity": "sha512-hm8XshYj5Fo30Bb922QX9hXB/bxOAVH+qaqHBzw5TKa72vOeslyGwd4X8M0c1dJ9JqxlaMceOQ8RsL9tC7gU0A=="
     },
+    "node_modules/@codemirror/text": {
+      "version": "0.19.6",
+      "resolved": "https://registry.npmjs.org/@codemirror/text/-/text-0.19.6.tgz",
+      "integrity": "sha512-T9jnREMIygx+TPC1bOuepz18maGq/92q2a+n4qTqObKwvNMg+8cMTslb8yxeEDEq7S3kpgGWxgO1UWbQRij0dA==",
+      "deprecated": "As of 0.20.0, this package has been merged into @codemirror/state"
+    },
     "node_modules/@codemirror/view": {
       "version": "6.23.1",
       "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.23.1.tgz",

package.json

@@ -21,6 +21,8 @@
     "@angular/platform-browser": "^17.1.1",
     "@angular/platform-browser-dynamic": "^17.1.1",
     "@angular/router": "^17.1.1",
+    "@codemirror/basic-setup": "^0.20.0",
+    "@codemirror/gutter": "^0.19.9",
     "@codemirror/lang-cpp": "^6.0.2",
     "@codemirror/lang-javascript": "^6.2.1",
     "@codemirror/state": "^6.4.0",

src/app/components/editor/editor.component.html

@@ -7,6 +7,10 @@
 
   <pre [innerHTML]="resultContent | safeHTML"></pre>
 
+  <button type="button" (click)="toggleLineNumbers()">
+    Afficher les numéros de ligne
+  </button>
+
   <div>
     <label for="language">Langage de programmation</label>
     <select id="language" [(ngModel)]="selectedLanguage">

src/app/components/editor/editor.component.ts

@@ -8,6 +8,10 @@ import { CODE_DEFAULTS, LANGUAGES } from '../languages';
 import { SafeHTMLPipe } from '../../safe-html.pipe';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
+import '@codemirror/basic-setup';
+import { StateEffect } from '@codemirror/state';
+import { lineNumbers } from '@codemirror/view';
+
 @Component({
   selector: 'app-editor',
   templateUrl: './editor.component.html',
@@ -23,6 +27,8 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 export class EditorComponent {
   isLoaded: boolean = false; // Pour vérifier si le chargement est terminé
 
+  showLineNumbers: boolean = true;
+
   readonly languages: LanguageDescription[] = LANGUAGES;
   // Mode par défaut
   private _selectedLanguage = this.languages.find(
@@ -55,12 +61,14 @@ export class EditorComponent {
   @ViewChild(CodeMirrorComponent) private codemirror!: CodeMirrorComponent;
 
   private readonly languageCompartment = new Compartment();
-  protected readonly extensions: Extension[] = [
+  protected extensions: Extension[] = [
     basicSetup,
     this.languageCompartment.of(this.selectedLanguage.support!),
   ];
 
-  constructor(private codeExecutionService: CodeExecutionService) {}
+  constructor(private codeExecutionService: CodeExecutionService) {
+    this.updateEditorConfig();
+  }
 
   // Efface le contenu de l'éditeur
   clear(): void {
@@ -105,4 +113,23 @@ export class EditorComponent {
     a.href = URL.createObjectURL(blob);
     a.click();
   }
+
+  // Méthodes pour changer les options de l'éditeur
+
+  updateEditorConfig() {
+    const lineNumbersExtension = this.showLineNumbers ? lineNumbers() : [];
+    this.extensions = [
+      basicSetup,
+      this.languageCompartment.of(this.selectedLanguage.support!),
+      lineNumbersExtension,
+    ];
+    this.codemirror.editor?.dispatch({
+      effects: StateEffect.reconfigure.of(this.extensions),
+    });
+  }
+
+  toggleLineNumbers() {
+    this.showLineNumbers = !this.showLineNumbers;
+    this.updateEditorConfig();
+  }
 }