oqtane · sbwalker · Jun 14, 2020 · May 30, 2020 · Jun 10, 2020 · Jun 11, 2020
diff --git a/Oqtane.Client/Modules/Controls/RichTextEditor.razor b/Oqtane.Client/Modules/Controls/RichTextEditor.razor
@@ -117,6 +117,11 @@
     {
         if (firstRender)
         {
+            var oqtaneInterop = new Interop(JsRuntime);
+
+            await oqtaneInterop.LoadInteropScript("js/quill-interop.js");
+
+
             var interop = new RichTextEditorInterop(JsRuntime);
 
             await interop.CreateEditor(

diff --git a/Oqtane.Client/Modules/Controls/RichTextEditorInterop.cs b/Oqtane.Client/Modules/Controls/RichTextEditorInterop.cs
@@ -13,7 +13,7 @@ public RichTextEditorInterop(IJSRuntime jsRuntime)
             _jsRuntime = jsRuntime;
         }
 
-        public Task CreateEditor(
+        public async Task CreateEditor(
             ElementReference quillElement,
             ElementReference toolbar,
             bool readOnly,
@@ -23,15 +23,14 @@ public Task CreateEditor(
         {
             try
             {
-                _jsRuntime.InvokeAsync<object>(
+                await _jsRuntime.InvokeAsync<object>(
                     "Oqtane.RichTextEditor.createQuill",
-                    quillElement, toolbar, readOnly,
-                    placeholder, theme, debugLevel);
-                return Task.CompletedTask;
+                    quillElement, toolbar, readOnly, placeholder, theme, debugLevel);
+                return;
             }
             catch
             {
-                return Task.CompletedTask;
+                // handle exception
             }
         }
 

diff --git a/Oqtane.Client/Modules/HtmlText/Edit.razor b/Oqtane.Client/Modules/HtmlText/Edit.razor
@@ -29,10 +29,7 @@
         new Resource { ResourceType = ResourceType.Stylesheet, Url = ModulePath() + "Module.css" },
         // the following resources should be declared in the RichTextEditor component however the framework currently only supports resource management for modules and themes
         new Resource { ResourceType = ResourceType.Stylesheet, Url = "css/quill/quill1.3.6.bubble.css" },
-        new Resource { ResourceType = ResourceType.Stylesheet, Url = "css/quill/quill1.3.6.snow.css" },
-        new Resource { ResourceType = ResourceType.Script, Url = "js/quill1.3.6.min.js" },
-        new Resource { ResourceType = ResourceType.Script, Url = "js/quill-blot-formatter.min.js" },
-        new Resource { ResourceType = ResourceType.Script, Url = "js/quill-interop.js" }
+        new Resource { ResourceType = ResourceType.Stylesheet, Url = "css/quill/quill1.3.6.snow.css" }
     };
 
     private RichTextEditor RichTextEditorHtml;

diff --git a/Oqtane.Client/UI/Interop.cs b/Oqtane.Client/UI/Interop.cs
@@ -234,5 +234,18 @@ public Task RedirectBrowser(string url, int wait)
                 return Task.CompletedTask;
             }
         }
+
+        public async Task LoadInteropScript(string filePath)
+        {
+            try
+            {
+                await  _jsRuntime.InvokeAsync<bool>("Oqtane.Interop.loadInteropScript", filePath);
+            }
+            catch
+            {
+                // handle exception
+            }
+
+        }
     }
 }
diff --git a/Oqtane.Server/Pages/_Host.cshtml b/Oqtane.Server/Pages/_Host.cshtml
@@ -16,6 +16,7 @@
     <link id="app-manifest" rel="manifest" />
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <link rel="stylesheet" href="css/app.css" />
+    <script src="js/loadjs.min.js"></script>
 </head>
 <body>
     @(Html.AntiForgeryToken())

diff --git a/Oqtane.Server/wwwroot/js/interop.js b/Oqtane.Server/wwwroot/js/interop.js
@@ -321,5 +321,15 @@ Oqtane.Interop = {
         setInterval(function () {
             window.location.href = url;
         }, wait * 1000);
+    },
+    loadInteropScript: async function (filePath) {
+        const promise = new Promise((resolve, reject) => {
+            loadjs(filePath, { returnPromise: true })
+                .then(function () { resolve(true) })
+                .catch(function (pathsNotFound) { reject(false) });
+        });
+
+        const result = await promise;
+        return;
     }
 };
diff --git a/Oqtane.Server/wwwroot/js/loadjs.min.js b/Oqtane.Server/wwwroot/js/loadjs.min.js
diff --git a/Oqtane.Server/wwwroot/js/quill-interop.js b/Oqtane.Server/wwwroot/js/quill-interop.js
@@ -1,24 +1,31 @@
 var Oqtane = Oqtane || {};
 
 Oqtane.RichTextEditor = {
-    createQuill: function (
+    createQuill: async function (
         quillElement, toolBar, readOnly,
         placeholder, theme, debugLevel) {
 
-        Quill.register('modules/blotFormatter', QuillBlotFormatter.default);
+        const loadQuill = loadjs(['js/quill1.3.6.min.js', 'js/quill-blot-formatter.min.js'], 'Quill',
+            { async: true, returnPromise: true })
+            .then(function () { /* foo.js & bar.js loaded */
+                Quill.register('modules/blotFormatter', QuillBlotFormatter.default);
 
-        var options = {
-            debug: debugLevel,
-            modules: {
-                toolbar: toolBar,
-                blotFormatter: {}
-            },
-            placeholder: placeholder,
-            readOnly: readOnly,
-            theme: theme
-        };
+                var options = {
+                    debug: debugLevel,
+                    modules: {
+                        toolbar: toolBar,
+                        blotFormatter: {}
+                    },
+                    placeholder: placeholder,
+                    readOnly: readOnly,
+                    theme: theme
+                };
 
-        new Quill(quillElement, options);
+                new Quill(quillElement, options);
+            })
+            .catch(function (pathsNotFound) { /* at least one didn't load */ });
+
+        await loadQuill;
     },
     getQuillContent: function (editorElement) {
         return JSON.stringify(editorElement.__quill.getContents());