Add some settings to the editor

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

@@ -104,4 +104,23 @@
 			<pre id="resultDiv" [innerHTML]="resultContent | safeHTML"></pre>
 		</div>
 	</div>
+
+	<div class="editor-bottom">
+		<div>
+			<label for="showLines">Afficher les numéros de lignes</label>
+			<input type="checkbox" [(ngModel)]="linesNumbers" id="showLines"/>
+		</div>
+
+		<div>
+			<label for="indentUnit">Nombre d'espaces à l'indentation</label>
+			<input type="number" [(ngModel)]="indentUnit" id="indentUnit" min="0" max="20"/>
+		</div>
+
+		<div>
+			<label for="wrapLines">Line Wrapping</label>
+			<input type="checkbox" [(ngModel)]="lineWrapping" id="wrapLines"/>
+		</div>
+	</div>
+
+
 </div>

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

@@ -1,11 +1,11 @@
 import {Component, ViewChild} from '@angular/core';
 import {CodeExecutionService} from 'src/app/services/codeExecution.service';
-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 {Extension, EditorState, Compartment} from '@codemirror/state';
 import {
     keymap,
     highlightSpecialChars,
@@ -17,17 +17,18 @@ import {
     lineNumbers,
     highlightActiveLineGutter,
     gutter,
+    EditorView,
 } from '@codemirror/view';
-import { Extension, EditorState } from '@codemirror/state';
 import {
     defaultHighlightStyle,
     syntaxHighlighting,
     indentOnInput,
     bracketMatching,
     foldGutter,
+    indentUnit,
     foldKeymap,
 } from '@codemirror/language';
-import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+import {defaultKeymap, history, historyKeymap, indentWithTab} from '@codemirror/commands';
 import {searchKeymap, highlightSelectionMatches} from '@codemirror/search';
 import {
     autocompletion,
@@ -37,6 +38,9 @@ import {
 } from '@codemirror/autocomplete';
 import {lintKeymap} from '@codemirror/lint';
 
+
+const DEFAULT_INDENT_UNIT = 4;
+
 const basicSetup: Extension = (() => [
     highlightActiveLineGutter(),
     highlightSpecialChars(),
@@ -62,6 +66,7 @@ const basicSetup: Extension = (() => [
         ...foldKeymap,
         ...completionKeymap,
         ...lintKeymap,
+        indentWithTab,
     ]),
 ])();
 
@@ -88,11 +93,11 @@ export class EditorComponent {
     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.editorContent = CODE_DEFAULTS[value.name as keyof typeof CODE_DEFAULTS];
         }
         this.selectedLanguage.load().then((language) => {
             this.codemirror.editor?.dispatch({
@@ -100,10 +105,12 @@ export class EditorComponent {
             });
         });
     }
+
     private _linesNumbers: boolean = true;
     get linesNumbers() {
         return this._linesNumbers;
     }
+
     set linesNumbers(lines: boolean) {
         this._linesNumbers = lines;
         this.codemirror.editor?.dispatch({
@@ -113,9 +120,33 @@ export class EditorComponent {
         });
     }
 
+    private _indentUnit = DEFAULT_INDENT_UNIT;
+    get indentUnit() {
+        return this._indentUnit;
+    }
+
+    set indentUnit(unit: number) {
+        this._indentUnit = unit;
+        this.codemirror.editor?.dispatch({
+            effects: this.indentUnitCompartment.reconfigure(
+                unit ? indentUnit.of(" ".repeat(unit)) : indentUnit.of(" ".repeat(DEFAULT_INDENT_UNIT))),
+        });
+    }
+
+    private _lineWrapping = true;
+    get lineWrapping() {
+        return this._lineWrapping;
+    }
+
+    set lineWrapping(wrap: boolean) {
+        this._lineWrapping = wrap;
+        this.codemirror.editor?.dispatch({
+            effects: this.lineWrappingCompartment.reconfigure(wrap ? EditorView.lineWrapping : []),
+        });
+    }
+
     // Contenu de l'éditeur que l'on passera au serveur
-  editorContent: string =
-    CODE_DEFAULTS[this.selectedLanguage.name as keyof typeof CODE_DEFAULTS];
+    editorContent: string = CODE_DEFAULTS[this.selectedLanguage.name as keyof typeof CODE_DEFAULTS];
     resultContent: string = '';
 
     // Message d'erreur
@@ -125,13 +156,19 @@ export class EditorComponent {
 
     private readonly languageCompartment = new Compartment();
     private readonly gutterCompartment = new Compartment();
+    private readonly indentUnitCompartment = new Compartment();
+    private readonly lineWrappingCompartment = new Compartment();
+
     protected readonly extensions: Extension[] = [
         basicSetup,
         this.gutterCompartment.of(lineNumbers()),
         this.languageCompartment.of(this.selectedLanguage.support!),
+        this.indentUnitCompartment.of(indentUnit.of(" ".repeat(this._indentUnit))),
+        this.lineWrappingCompartment.of(EditorView.lineWrapping),
     ];
 
-  constructor(private codeExecutionService: CodeExecutionService) {}
+    constructor(private codeExecutionService: CodeExecutionService) {
+    }
 
     // Efface le contenu de l'éditeur
     clear(): void {