-
-
+ [extensions]="extensions"
+ >
-
@@ -38,10 +22,6 @@
diff --git a/src/app/components/editor/editor.component.ts b/src/app/components/editor/editor.component.ts
index 593b443..f3bee3a 100644
--- a/src/app/components/editor/editor.component.ts
+++ b/src/app/components/editor/editor.component.ts
@@ -1,96 +1,55 @@
-import { Component, OnInit } from "@angular/core";
-import { Router } from "@angular/router";
-import { CodeExecutionService } from "src/app/services/codeExecution.service";
-import "codemirror/mode/shell/shell.js";
-import "codemirror/mode/clike/clike.js";
-import Convert from 'ansi-to-html';
-
-
-// Exemple de code pour chaque langage autorisé
-const codeDefaults = {
- "text/typescript": `const component = {
- name: "@exemple/Typescript",
- author: "Sandkasten",
- repo: "https://codefirst.iut.uca.fr/git/sandkasten/sandkasten-web.git"
-};
-const hello: string = 'Bonjour ceci est un test de code en typescript';`,
- "text/javascript": `const component = {
- name: "@exemple/Javascript",
- author: "Sandkasten",
- repo: "https://codefirst.iut.uca.fr/git/sandkasten/sandkasten-web.git"
-};
-const hello = 'Bonjour ceci est un test de code en javascript';`,
- "text/x-c++src": `#include
-using namespace std;
-int main() {
- cout << "Bonjour ceci est un test de code en c++" << endl;
- return 0;
-}`,
- "text/x-csrc": `#include
-int main() {
- printf("Bonjour ceci est un test de code en c");
- return 0;
-}`,
- "text/x-sh": `#!/bin/bash
-echo "Bonjour ceci est un test de code en shell"`,
-};
-
-// Langages autorisés
-type AllowedLanguage = keyof typeof codeDefaults;
+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 { CodeMirrorComponent } from '@sandkasten/codemirror6-editor';
+import { LanguageDescription } from '@codemirror/language';
+import { CODE_DEFAULTS, LANGUAGES } from '../languages';
@Component({
selector: "app-editor",
templateUrl: "./editor.component.html",
styleUrls: ["./editor.component.scss"],
})
-export class EditorComponent implements OnInit {
- loadingProgress: number = 0; // Pour suivre la progression du chargement
+export class EditorComponent {
isLoaded: boolean = false; // Pour vérifier si le chargement est terminé
+ readonly languages: LanguageDescription[] = LANGUAGES;
// Mode par défaut
- mode: AllowedLanguage = "text/typescript";
- options = {
- lineNumbers: true,
- mode: this.mode,
- };
- defaults = codeDefaults;
+ private _selectedLanguage = this.languages.find((lang) => lang.name === "JavaScript")!;
+ 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.selectedLanguage.load().then((language) => {
+ this.codemirror.editor?.dispatch({
+ effects: this.languageCompartment.reconfigure(language)
+ });
+ });
+ }
// Contenu de l'éditeur que l'on passera au serveur
- editorContent: string = this.defaults[this.mode as keyof typeof codeDefaults];
+ editorContent: string = CODE_DEFAULTS[this.selectedLanguage.name as keyof typeof CODE_DEFAULTS];
resultContent: string = "";
// Message d'erreur
errorMessage: string = "";
- constructor(
- private router: Router,
- private codeExecutionService: CodeExecutionService
- ) {}
-
- ngOnInit(): void {
- // Appel à changeMode pour mettre à jour le contenu de l'éditeur et le mode
- this.changeMode();
- const convert = new Convert();
-
- this.codeExecutionService.getResult().subscribe((result) => {
- if (result.type !== 'exit') {
- this.resultContent += convert.toHtml(result.text);
- }
- });
- }
+ @ViewChild(CodeMirrorComponent) private codemirror!: CodeMirrorComponent;
- // Change le langage de l'éditeur
- changeMode(): void {
- this.options = {
- ...this.options,
- mode: this.mode,
- };
- this.editorContent = this.defaults[this.mode as keyof typeof codeDefaults];
- }
+ private readonly languageCompartment = new Compartment();
+ protected readonly extensions: Extension[] = [
+ basicSetup,
+ this.languageCompartment.of(this.selectedLanguage.support!)
+ ];
- // Affiche le contenu de l'éditeur
- handleChange($event: Event): void {
- console.log("ngModelChange", $event);
+ constructor(
+ private codeExecutionService: CodeExecutionService
+ ) {
}
// Efface le contenu de l'éditeur
@@ -98,77 +57,34 @@ export class EditorComponent implements OnInit {
this.editorContent = "";
}
- loadFromFile(event: any): void {
- const file = event.target.files[0];
- if (file) {
- const allowedExtensions = ["sh", "js", "ts", "cpp", "c"];
- const extension = file.name.split(".").pop()?.toLowerCase();
-
- if (extension && allowedExtensions.includes(extension)) {
- // Identifiez le mode en fonction de l'extension
- const modeMap: Record = {
- sh: "text/x-sh",
- js: "text/javascript",
- ts: "text/typescript",
- cpp: "text/x-c++src",
- c: "text/x-csrc",
- };
- this.mode = modeMap[extension];
+ onRunButtonClicked() {
+ // Le code à exécuter est le contenu de l'éditeur
+ const codeToExecute = this.editorContent;
- // Mettez à jour le contenu de l'éditeur et le mode
- this.changeMode();
+ this.codeExecutionService.executeCode(codeToExecute, this.selectedLanguage.name);
- const reader = new FileReader();
- reader.onload = (e) => {
- this.editorContent = e.target?.result as string;
- this.errorMessage = ""; // Réinitialisez le message d'erreur en cas de succès.
- };
- reader.readAsText(file);
- } else {
- this.errorMessage =
- "Unsupported file type. Please select a file with one of the following extensions: sh, js, ts, cpp, c";
- console.error(this.errorMessage);
- }
- }
+ this.resultContent = '';
}
- saveToFile(): void {
- const languageExtensionMap: Record = {
- "text/x-sh": "sh",
- "text/javascript": "js",
- "text/typescript": "ts",
- "text/x-c++src": "cpp",
- "text/x-csrc": "c",
- };
-
- if (languageExtensionMap[this.mode]) {
- const extension = languageExtensionMap[this.mode];
- if (this.editorContent.trim() === "") {
- this.errorMessage = "Cannot save an empty file.";
- console.error(this.errorMessage);
- } else {
- this.errorMessage = ""; // Réinitialisez le message d'erreur en cas de succès.
- const blob = new Blob([this.editorContent], { type: "text/plain" });
- const a = document.createElement("a");
- a.href = window.URL.createObjectURL(blob);
- a.download = `code.${extension}`;
- document.body.appendChild(a);
- a.click();
- document.body.removeChild(a);
+ loadFromFile(event: Event) {
+ const file = (event.target as HTMLInputElement).files![0];
+ for (const language of this.languages) {
+ if (language.extensions.some(ext => file.name.endsWith(`.${ext}`))) {
+ this.selectedLanguage = language;
+ return;
}
- } else {
- this.errorMessage =
- "Unsupported language. Please select one of the following languages: shell, javascript, typescript, c++, c";
- console.error(this.errorMessage);
}
+ const extensions = this.languages.flatMap(lang => lang.extensions);
+ this.errorMessage =
+ `Unsupported language. Please select one of the following languages: ${extensions.join(', ')}.`;
+ console.error(this.errorMessage);
}
- onRunButtonClicked() {
- // Le code à exécuter est le contenu de l'éditeur
- const codeToExecute = this.editorContent;
-
- this.codeExecutionService.executeCode(codeToExecute, this.mode);
-
- this.resultContent = '';
+ saveToFile() {
+ 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);
+ a.click();
}
}
diff --git a/src/app/components/languages.ts b/src/app/components/languages.ts
new file mode 100644
index 0000000..abd7f0a
--- /dev/null
+++ b/src/app/components/languages.ts
@@ -0,0 +1,49 @@
+import {LanguageDescription} from "@codemirror/language";
+import {javascript} from "@codemirror/lang-javascript";
+
+export const CODE_DEFAULTS = {
+ 'C': /** @lang C */ `#include
+int main() {
+ printf("Hello, World!\\n");
+ return 0;
+}`,
+ 'C++': /** @lang C++ */ `#include
+int main() {
+ std::cout << "Hello, World!\\n";
+ return 0;
+}`,
+ 'JavaScript': /** @lang JS */ `console.log("Hello, World!");`,
+ 'TypeScript': /** @lang TS */ `console.log("Hello, World!");`
+};
+
+export const LANGUAGES = [
+ LanguageDescription.of({
+ name: 'C',
+ extensions: ['c', 'h', 'ino'],
+ load() {
+ return import("@codemirror/lang-cpp").then(m => m.cpp())
+ }
+ }),
+ LanguageDescription.of({
+ name: "C++",
+ alias: ['cpp'],
+ extensions: ['cpp', "c++", 'cc', 'cxx', 'hpp', "h++", 'hh', 'hxx'],
+ load() {
+ return import("@codemirror/lang-cpp").then(m => m.cpp())
+ }
+ }),
+ LanguageDescription.of({
+ name: 'JavaScript',
+ alias: ['ecmascript', 'js', 'node'],
+ extensions: ['js', 'mjs', 'cjs'],
+ support: javascript(),
+ }),
+ LanguageDescription.of({
+ name: 'TypeScript',
+ alias: ['ts'],
+ extensions: ['ts'],
+ load() {
+ return import("@codemirror/lang-javascript").then(m => m.javascript({typescript: true}))
+ }
+ }),
+];
diff --git a/src/main.ts b/src/main.ts
index 01f6524..0a62114 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,3 @@
-import 'codemirror/mode/javascript/javascript';
-import 'codemirror/mode/markdown/markdown';
-
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
diff --git a/src/styles.scss b/src/styles.scss
index e78eea3..1d0b411 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,6 +1,3 @@
-@import 'codemirror/lib/codemirror.css';
-@import 'codemirror/theme/material.css';
-
//region Colors
$color-purple: #605FFC;
$color-white: #FFFFFF;