Dynamically import Quill

We load Quill only if it is needed (after all, only admins need Quill)

front/dist/index.html

@@ -6,12 +6,6 @@
               content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
-        <!-- Include stylesheet -->
-        <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
-
-        <!-- Include the Quill library -->
-        <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
-
         <!-- Global site tag (gtag.js) - Google Analytics -->
         <script async src="https://www.googletagmanager.com/gtag/js?id=UA-10196481-11"></script>
         <script>

front/package.json

@@ -6,6 +6,7 @@
   "devDependencies": {
     "@types/google-protobuf": "^3.7.3",
     "@types/jasmine": "^3.5.10",
+    "@types/quill": "^1.3.7",
     "@typescript-eslint/eslint-plugin": "^2.26.0",
     "@typescript-eslint/parser": "^2.26.0",
     "eslint": "^6.8.0",
@@ -20,9 +21,9 @@
     "webpack-merge": "^4.2.2"
   },
   "dependencies": {
-    "@types/axios": "^0.14.0",
     "@types/simple-peer": "^9.6.0",
     "@types/socket.io-client": "^1.4.32",
+    "axios": "^0.20.0",
     "generic-type-guard": "^3.2.0",
     "google-protobuf": "^3.13.0",
     "phaser": "^3.22.0",

front/src/Administration/ConsoleGlobalMessageManager.ts

@@ -1,7 +1,3 @@
-import {GameScene} from "../Phaser/Game/GameScene";
-
-const Quill = require("quill");
-
 import {HtmlUtils} from "../WebRtc/HtmlUtils";
 import {UserInputManager} from "../Phaser/UserInput/UserInputManager";
 import {RoomConnection} from "../Connexion/RoomConnection";
@@ -26,6 +22,7 @@ export class ConsoleGlobalMessageManager {
     private buttonMainConsole: HTMLDivElement;
     private activeConsole: boolean = false;
     private userInputManager!: UserInputManager;
+    private static cssLoaded: boolean = false;
 
     constructor(private Connection: RoomConnection, userInputManager : UserInputManager) {
         this.buttonMainConsole = document.createElement('div');
@@ -123,24 +120,30 @@ export class ConsoleGlobalMessageManager {
         section.appendChild(buttonDiv);
         this.divMainConsole.appendChild(section);
 
-        //TODO refactor
+        (async () => {
-        setTimeout(() => {
+            // Start loading CSS
+            const cssPromise = ConsoleGlobalMessageManager.loadCss();
+            // Import quill
+            const Quill = await import("quill") as any;
+            // Wait for CSS to be loaded
+            await cssPromise;
+
             const toolbarOptions = [
                 ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                 ['blockquote', 'code-block'],
 
-                [{ 'header': 1 }, { 'header': 2 }],               // custom button values
+                [{'header': 1}, {'header': 2}],               // custom button values
-                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
+                [{'list': 'ordered'}, {'list': 'bullet'}],
-                [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
+                [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
-                [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
+                [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
-                [{ 'direction': 'rtl' }],                         // text direction
+                [{'direction': 'rtl'}],                         // text direction
 
-                [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
+                [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
-                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+                [{'header': [1, 2, 3, 4, 5, 6, false]}],
 
-                [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
+                [{'color': []}, {'background': []}],          // dropdown with defaults from theme
-                [{ 'font': [] }],
+                [{'font': []}],
-                [{ 'align': [] }],
+                [{'align': []}],
 
                 ['clean'],
 
@@ -154,8 +157,28 @@ export class ConsoleGlobalMessageManager {
                     toolbar: toolbarOptions
                 },
             });
+        })();
+    }
 
-        }, 1000);
+    private static loadCss(): Promise<void> {
+        return new Promise<void>((resolve, reject) => {
+            if (ConsoleGlobalMessageManager.cssLoaded) {
+                resolve();
+                return;
+            }
+            const fileref = document.createElement("link")
+            fileref.setAttribute("rel", "stylesheet")
+            fileref.setAttribute("type", "text/css")
+            fileref.setAttribute("href", "https://cdn.quilljs.com/1.3.7/quill.snow.css");
+            document.getElementsByTagName("head")[0].appendChild(fileref);
+            ConsoleGlobalMessageManager.cssLoaded = true;
+            fileref.onload = () => {
+                resolve();
+            }
+            fileref.onerror = () => {
+                reject();
+            }
+        });
     }
 
     createUploadAudioPart(){