Apply suggestion and add coloration for c, c++ and shell

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

@@ -1,50 +1,52 @@
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { CodeExecutionService } from 'src/app/services/codeExecution.service';
+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";
 
 // Exemple de code pour chaque langage autorisé
 const codeDefaults = {
-  'text/typescript': `const component = {
+  "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 = {
+  "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 <iostream>
+  "text/x-c++src": `#include <iostream>
 using namespace std;
 int main() {
   cout << "Bonjour ceci est un test de code en c++" << endl;
   return 0;
 }`,
-  'text/x-csrc': `#include <stdio.h>
+  "text/x-csrc": `#include <stdio.h>
 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"`
+  "text/x-sh": `#!/bin/bash
+echo "Bonjour ceci est un test de code en shell"`,
 };
 
 // Langages autorisés
-type AllowedLanguage = 'text/x-sh' | 'text/javascript' | 'text/typescript' | 'text/x-c++src' | 'text/x-csrc';
+type AllowedLanguage = keyof typeof codeDefaults;
 
 @Component({
-  selector: 'app-editor',
-  templateUrl: './editor.component.html',
-  styleUrls: ['./editor.component.scss']
+  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
   isLoaded: boolean = false; // Pour vérifier si le chargement est terminé
 
   // Mode par défaut
-  mode: AllowedLanguage = 'text/typescript';
+  mode: AllowedLanguage = "text/typescript";
   options = {
     lineNumbers: true,
     mode: this.mode,
@@ -53,13 +55,15 @@ export class EditorComponent implements OnInit {
 
   // Contenu de l'éditeur que l'on passera au serveur
   editorContent: string = this.defaults[this.mode as keyof typeof codeDefaults];
-  resultContent: string = '';
+  resultContent: string = "";
 
   // Message d'erreur
-  errorMessage: string = '';
+  errorMessage: string = "";
 
-  constructor(private router: Router, private codeExecutionService: CodeExecutionService) {
-  }
+  constructor(
+    private router: Router,
+    private codeExecutionService: CodeExecutionService
+  ) {}
 
   ngOnInit(): void {
     // Appel à changeMode pour mettre à jour le contenu de l'éditeur et le mode
@@ -77,28 +81,28 @@ export class EditorComponent implements OnInit {
 
   // Affiche le contenu de l'éditeur
   handleChange($event: Event): void {
-    console.log('ngModelChange', $event);
+    console.log("ngModelChange", $event);
   }
 
   // Efface le contenu de l'éditeur
   clear(): void {
-    this.editorContent = '';
+    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();
+      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<string, AllowedLanguage> = {
-          'sh': 'text/x-sh',
-          'js': 'text/javascript',
-          'ts': 'text/typescript',
-          'cpp': 'text/x-c++src',
-          'c': 'text/x-csrc'
+          sh: "text/x-sh",
+          js: "text/javascript",
+          ts: "text/typescript",
+          cpp: "text/x-c++src",
+          c: "text/x-csrc",
         };
         this.mode = modeMap[extension];
 
@@ -108,11 +112,12 @@ export class EditorComponent implements OnInit {
         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.
+          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';
+        this.errorMessage =
+          "Unsupported file type. Please select a file with one of the following extensions: sh, js, ts, cpp, c";
         console.error(this.errorMessage);
       }
     }
@@ -120,22 +125,22 @@ export class EditorComponent implements OnInit {
 
   saveToFile(): void {
     const languageExtensionMap: Record<AllowedLanguage, string> = {
-      "text/x-sh" : 'sh',
-      "text/javascript": 'js',
-      "text/typescript": 'ts',
-      "text/x-c++src" : 'cpp',
-      "text/x-csrc": 'c'
+      "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.';
+      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');
+        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);
@@ -143,7 +148,8 @@ export class EditorComponent implements OnInit {
         document.body.removeChild(a);
       }
     } else {
-      this.errorMessage = 'Unsupported language. Please select one of the following languages: shell, javascript, typescript, c++, c';
+      this.errorMessage =
+        "Unsupported language. Please select one of the following languages: shell, javascript, typescript, c++, c";
       console.error(this.errorMessage);
     }
   }
@@ -154,7 +160,7 @@ export class EditorComponent implements OnInit {
 
     this.codeExecutionService.executeCode(codeToExecute, this.mode);
 
-    this.codeExecutionService.getResult().subscribe(result => {
+    this.codeExecutionService.getResult().subscribe((result) => {
       this.resultContent = result;
     });
   }