Allow disabling line numbers

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

@@ -14,6 +14,8 @@
         <option [ngValue]="language">{{ language.name }}</option>
       }
     </select>
+    <label for="showLines">Afficher les numéros de lignes</label>
+    <input type="checkbox" [(ngModel)]="linesNumbers" id="showLines" />
   </div>
 
   <div>

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

@@ -1,12 +1,69 @@
 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 { Compartment } from '@codemirror/state';
 import { CodeMirrorComponent } from '@sandkasten/codemirror6-editor';
 import { LanguageDescription } from '@codemirror/language';
 import { CODE_DEFAULTS, LANGUAGES } from '../languages';
 import { SafeHTMLPipe } from '../../safe-html.pipe';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import {
+  keymap,
+  highlightSpecialChars,
+  drawSelection,
+  highlightActiveLine,
+  dropCursor,
+  rectangularSelection,
+  crosshairCursor,
+  lineNumbers,
+  highlightActiveLineGutter,
+  gutter,
+} from '@codemirror/view';
+import { Extension, EditorState } from '@codemirror/state';
+import {
+  defaultHighlightStyle,
+  syntaxHighlighting,
+  indentOnInput,
+  bracketMatching,
+  foldGutter,
+  foldKeymap,
+} from '@codemirror/language';
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
+import {
+  autocompletion,
+  completionKeymap,
+  closeBrackets,
+  closeBracketsKeymap,
+} from '@codemirror/autocomplete';
+import { lintKeymap } from '@codemirror/lint';
+
+const basicSetup: Extension = (() => [
+  highlightActiveLineGutter(),
+  highlightSpecialChars(),
+  history(),
+  foldGutter(),
+  drawSelection(),
+  dropCursor(),
+  EditorState.allowMultipleSelections.of(true),
+  indentOnInput(),
+  syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+  bracketMatching(),
+  closeBrackets(),
+  autocompletion(),
+  rectangularSelection(),
+  crosshairCursor(),
+  highlightActiveLine(),
+  highlightSelectionMatches(),
+  keymap.of([
+    ...closeBracketsKeymap,
+    ...defaultKeymap,
+    ...searchKeymap,
+    ...historyKeymap,
+    ...foldKeymap,
+    ...completionKeymap,
+    ...lintKeymap,
+  ]),
+])();
 
 @Component({
   selector: 'app-editor',
@@ -43,6 +100,18 @@ export class EditorComponent {
       });
     });
   }
+  private _linesNumbers: boolean = true;
+  get linesNumbers() {
+    return this._linesNumbers;
+  }
+  set linesNumbers(lines: boolean) {
+    this._linesNumbers = lines;
+    this.codemirror.editor?.dispatch({
+      effects: this.gutterCompartment.reconfigure(
+        lines ? lineNumbers() : gutter({})
+      ),
+    });
+  }
 
   // Contenu de l'éditeur que l'on passera au serveur
   editorContent: string =
@@ -55,8 +124,10 @@ export class EditorComponent {
   @ViewChild(CodeMirrorComponent) private codemirror!: CodeMirrorComponent;
 
   private readonly languageCompartment = new Compartment();
+  private readonly gutterCompartment = new Compartment();
   protected readonly extensions: Extension[] = [
     basicSetup,
+    this.gutterCompartment.of(lineNumbers()),
     this.languageCompartment.of(this.selectedLanguage.support!),
   ];