From 75cddb2e84e42597a987553d22770d35afd711be Mon Sep 17 00:00:00 2001 From: bastien ollier Date: Wed, 24 Jan 2024 14:21:41 +0100 Subject: [PATCH] add color in result --- package-lock.json | 29 +++++++++++++++++-- package.json | 1 + src/app/app.module.ts | 8 +++-- .../components/editor/editor.component.html | 15 +--------- src/app/components/editor/editor.component.ts | 7 +++-- src/app/safe-html.pipe.spec.ts | 8 +++++ src/app/safe-html.pipe.ts | 15 ++++++++++ tsconfig.json | 1 + 8 files changed, 62 insertions(+), 22 deletions(-) create mode 100644 src/app/safe-html.pipe.spec.ts create mode 100644 src/app/safe-html.pipe.ts diff --git a/package-lock.json b/package-lock.json index 08b6afe..5ddfa8b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "@emailjs/browser": "^3.11.0", "@ngx-translate/core": "^15.0.0", "@ngx-translate/http-loader": "^8.0.0", + "ansi-to-html": "^0.7.2", "codemirror": "^5.65.16", "rxjs": "~7.8.1", "sse.js": "^2.2.0", @@ -3799,6 +3800,28 @@ "node": ">=4" } }, + "node_modules/ansi-to-html": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.7.2.tgz", + "integrity": "sha512-v6MqmEpNlxF+POuyhKkidusCHWWkaLcGRURzivcU3I9tv7k4JVhFcnukrM5Rlk2rUywdZuzYAZ+kbZqWCnfN3g==", + "dependencies": { + "entities": "^2.2.0" + }, + "bin": { + "ansi-to-html": "bin/ansi-to-html" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/ansi-to-html/node_modules/entities": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", + "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, "node_modules/anymatch": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", @@ -6343,9 +6366,9 @@ "dev": true }, "node_modules/follow-redirects": { - "version": "1.15.3", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz", - "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==", + "version": "1.15.5", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz", + "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==", "dev": true, "funding": [ { diff --git a/package.json b/package.json index 116746e..8d84586 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@emailjs/browser": "^3.11.0", "@ngx-translate/core": "^15.0.0", "@ngx-translate/http-loader": "^8.0.0", + "ansi-to-html": "^0.7.2", "codemirror": "^5.65.16", "rxjs": "~7.8.1", "sse.js": "^2.2.0", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c39c84a..d6b567d 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -24,6 +24,7 @@ import { TranslateLoader, TranslateModule } from '@ngx-translate/core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; import { TranslationService } from './services/translation.service'; +import { SafeHTMLPipe } from './safe-html.pipe'; @NgModule({ declarations: [ @@ -37,8 +38,8 @@ import { TranslationService } from './services/translation.service'; FormComponent, PrivacyPolicyComponent, TermsOfServiceComponent, - OurStoryComponent - + OurStoryComponent, + SafeHTMLPipe ], imports: [ BrowserModule, @@ -59,7 +60,8 @@ import { TranslationService } from './services/translation.service'; deps: [HttpClient] }, defaultLanguage: 'fr' - }) + }), + //SafeHTMLPipe ], providers: [TranslationService], bootstrap: [AppComponent] diff --git a/src/app/components/editor/editor.component.html b/src/app/components/editor/editor.component.html index d02a36c..3945bba 100644 --- a/src/app/components/editor/editor.component.html +++ b/src/app/components/editor/editor.component.html @@ -14,20 +14,7 @@ -
- - -
+ 

 
   

     
diff --git a/src/app/components/editor/editor.component.ts b/src/app/components/editor/editor.component.ts
index 44c7e73..54906c5 100644
--- a/src/app/components/editor/editor.component.ts
+++ b/src/app/components/editor/editor.component.ts
@@ -3,6 +3,8 @@ 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 = {
@@ -30,7 +32,7 @@ int main() {
    return 0;
 }`,
   "text/x-sh": `#!/bin/bash
-echo "Bonjour ceci est un test de code en shell"`,
+echo "Bonjour ceci est un test de code en shell"style`,
 };
 
 // Langages autorisés
@@ -68,10 +70,11 @@ export class EditorComponent implements OnInit {
   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 += result.text;
+        this.resultContent += convert.toHtml(result.text);
       }
     });
   }
diff --git a/src/app/safe-html.pipe.spec.ts b/src/app/safe-html.pipe.spec.ts
new file mode 100644
index 0000000..400afdd
--- /dev/null
+++ b/src/app/safe-html.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { SafeHTMLPipe } from './safe-html.pipe';
+
+describe('SafeHTMLPipe', () => {
+  it('create an instance', () => {
+    const pipe = new SafeHTMLPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/src/app/safe-html.pipe.ts b/src/app/safe-html.pipe.ts
new file mode 100644
index 0000000..963ebbd
--- /dev/null
+++ b/src/app/safe-html.pipe.ts
@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'safeHTML',
+})
+export class SafeHTMLPipe implements PipeTransform {
+
+  constructor(protected sanitizer: DomSanitizer) {}
+
+  transform(value: unknown, ...args: unknown[]): unknown {
+    return this.sanitizer.bypassSecurityTrustHtml(value as string);
+  }
+
+}
diff --git a/tsconfig.json b/tsconfig.json
index ed966d4..64a863e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,6 +19,7 @@
     "target": "ES2022",
     "module": "ES2022",
     "useDefineForClassFields": false,
+    "allowSyntheticDefaultImports": true,
     "lib": [
       "ES2022",
       "dom"