Add some settings to the editor

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

@@ -25,7 +25,7 @@
 						style="display: none"
 						type="file"
 						id="fileInput"
-          (change)="loadFromFile($event)" />
+						(change)="loadFromFile($event)"/>
 			</div>
 
 			<div class="param-editor">
@@ -41,13 +41,13 @@
 								stroke="#1C274C"
 								stroke-width="1.5"
 								stroke-linecap="round"
-              stroke-linejoin="round" />
+								stroke-linejoin="round"/>
 						<path
 								d="M12 3V16M12 16L16 11.625M12 16L8 11.625"
 								stroke="#1C274C"
 								stroke-width="1.5"
 								stroke-linecap="round"
-              stroke-linejoin="round" />
+								stroke-linejoin="round"/>
 					</svg>
 				</button>
 			</div>
@@ -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 {Component, ViewChild} from '@angular/core';
+import {CodeExecutionService} from 'src/app/services/codeExecution.service';
+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,25 +17,29 @@ 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 { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
+import {defaultKeymap, history, historyKeymap, indentWithTab} from '@codemirror/commands';
+import {searchKeymap, highlightSelectionMatches} from '@codemirror/search';
 import {
     autocompletion,
     completionKeymap,
     closeBrackets,
     closeBracketsKeymap,
 } from '@codemirror/autocomplete';
-import { lintKeymap } from '@codemirror/lint';
+import {lintKeymap} from '@codemirror/lint';
+
+
+const DEFAULT_INDENT_UNIT = 4;
 
 const basicSetup: Extension = (() => [
     highlightActiveLineGutter(),
@@ -46,7 +50,7 @@ const basicSetup: Extension = (() => [
     dropCursor(),
     EditorState.allowMultipleSelections.of(true),
     indentOnInput(),
-  syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+    syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
     bracketMatching(),
     closeBrackets(),
     autocompletion(),
@@ -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 {
@@ -170,7 +207,7 @@ export class EditorComponent {
     }
 
     saveToFile() {
-    const blob = new Blob([this.editorContent], { type: 'text/plain' });
+        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);