From 4aab04a9aa3d70614687808a6744da6d7e2e91cb Mon Sep 17 00:00:00 2001
From: clfreville2 <clement.freville2@etu.uca.fr>
Date: Mon, 5 Feb 2024 11:19:35 +0100
Subject: [PATCH] Allow disabling line numbers

---
 .../components/editor/editor.component.html   |  2 +
 src/app/components/editor/editor.component.ts | 75 ++++++++++++++++++-
 2 files changed, 75 insertions(+), 2 deletions(-)

diff --git a/src/app/components/editor/editor.component.html b/src/app/components/editor/editor.component.html
index a6f7bcc..4ae2c11 100644
--- a/src/app/components/editor/editor.component.html
+++ b/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>
diff --git a/src/app/components/editor/editor.component.ts b/src/app/components/editor/editor.component.ts
index 211deca..d8793e5 100644
--- a/src/app/components/editor/editor.component.ts
+++ b/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!),
   ];