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 @@
}
+
+
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!),
];