modifications to JSInterop in RichTextEditor

Oqtane.Client/Modules/Controls/RichTextEditor.razor

@@ -117,8 +117,9 @@
     {
         if (firstRender)
         {
-            await RichTextEditorInterop.CreateEditor(
+            var interop = new RichTextEditorInterop(JsRuntime);
-                JsRuntime,
+
+            await interop.CreateEditor(
                 _editorElement,
                 _toolBar,
                 ReadOnly,
@@ -126,14 +127,10 @@
                 Theme,
                 DebugLevel);
 
-            await RichTextEditorInterop.LoadEditorContent(
+            await interop.LoadEditorContent(_editorElement, Content);
-                JsRuntime,
-                _editorElement, Content);
 
             // preserve a copy of the rich text content ( Quill sanitizes content so we need to retrieve it from the editor )
-            _original = await RichTextEditorInterop.GetHtml(
+            _original = await interop.GetHtml(_editorElement);
-                JsRuntime,
-                _editorElement);
         }
     }
 
@@ -146,25 +143,22 @@
 
     public async Task RefreshRichText()
     {
-        await RichTextEditorInterop.LoadEditorContent(
+        var interop = new RichTextEditorInterop(JsRuntime);
-            JsRuntime,
+        await interop.LoadEditorContent(_editorElement, _content);
-            _editorElement, _content);
     }
 
     public async Task RefreshRawHtml()
     {
-        _content = await RichTextEditorInterop.GetHtml(
+        var interop = new RichTextEditorInterop(JsRuntime);
-            JsRuntime,
+        _content = await interop.GetHtml(_editorElement);
-            _editorElement);
         StateHasChanged();
     }
 
     public async Task<string> GetHtml()
     {
         // get rich text content
-        string content = await RichTextEditorInterop.GetHtml(
+        var interop = new RichTextEditorInterop(JsRuntime);
-                JsRuntime,
+        string content = await interop.GetHtml(_editorElement);
-                _editorElement);
 
         if (_original != content)
         {
@@ -185,9 +179,8 @@
             var fileid = _fileManager.GetFileId();
             if (fileid != -1)
             {
-                await RichTextEditorInterop.InsertImage(
+                var interop = new RichTextEditorInterop(JsRuntime);
-                    JsRuntime,
+                await interop.InsertImage(_editorElement, ContentUrl(fileid));
-                    _editorElement, ContentUrl(fileid));
                 _filemanagervisible = false;
                 _message = string.Empty;
             }
@@ -207,22 +200,19 @@
     // other rich text editor methods which can be used by developers
     public async Task<string> GetText()
     {
-        return await RichTextEditorInterop.GetText(
+        var interop = new RichTextEditorInterop(JsRuntime);
-            JsRuntime,
+        return await interop.GetText(_editorElement);
-            _editorElement);
     }
 
     public async Task<string> GetContent()
     {
-        return await RichTextEditorInterop.GetContent(
+        var interop = new RichTextEditorInterop(JsRuntime);
-            JsRuntime,
+        return await interop.GetContent(_editorElement);
-            _editorElement);
     }
 
     public async Task EnableEditor(bool mode)
     {
-        await RichTextEditorInterop.EnableEditor(
+        var interop = new RichTextEditorInterop(JsRuntime);
-            JsRuntime,
+        await interop.EnableEditor(_editorElement, mode);
-            _editorElement, mode);
     }
 }

Oqtane.Client/Modules/Controls/RichTextEditorInterop.cs

@@ -4,10 +4,16 @@ using System.Threading.Tasks;
 
 namespace Oqtane.Modules.Controls
 {
-    public static class RichTextEditorInterop
+    public class RichTextEditorInterop
     {
-        internal static ValueTask<object> CreateEditor(
+        private readonly IJSRuntime _jsRuntime;
-            IJSRuntime jsRuntime,
+
+        public RichTextEditorInterop(IJSRuntime jsRuntime)
+        {
+            _jsRuntime = jsRuntime;
+        }
+
+        public Task CreateEditor(
             ElementReference quillElement,
             ElementReference toolbar,
             bool readOnly,
@@ -15,66 +21,104 @@ namespace Oqtane.Modules.Controls
             string theme,
             string debugLevel)
         {
-            return jsRuntime.InvokeAsync<object>(
+            try
+            {
+                _jsRuntime.InvokeAsync<object>(
                     "interop.createQuill",
                     quillElement, toolbar, readOnly,
                     placeholder, theme, debugLevel);
+                return Task.CompletedTask;
+            }
+            catch
+            {
+                return Task.CompletedTask;
+            }
         }
 
-        internal static ValueTask<string> GetText(
+        public ValueTask<string> GetText(ElementReference quillElement)
-            IJSRuntime jsRuntime,
-            ElementReference quillElement)
         {
-            return jsRuntime.InvokeAsync<string>(
+            try
+            {
+                return _jsRuntime.InvokeAsync<string>(
                     "interop.getQuillText",
                     quillElement);
             }
-
+            catch
-        internal static ValueTask<string> GetHtml(
-            IJSRuntime jsRuntime,
-            ElementReference quillElement)
             {
-            return jsRuntime.InvokeAsync<string>(
+                return new ValueTask<string>(Task.FromResult(string.Empty));
+            }
+        }
+
+        public ValueTask<string> GetHtml(ElementReference quillElement)
+        {
+            try
+            {
+                return _jsRuntime.InvokeAsync<string>(
                     "interop.getQuillHTML",
                     quillElement);
             }
-
+            catch
-        internal static ValueTask<string> GetContent(
-            IJSRuntime jsRuntime,
-            ElementReference quillElement)
             {
-            return jsRuntime.InvokeAsync<string>(
+                return new ValueTask<string>(Task.FromResult(string.Empty));
+            }
+        }
+
+        public ValueTask<string> GetContent(ElementReference quillElement)
+        {
+            try
+            {
+                return _jsRuntime.InvokeAsync<string>(
                     "interop.getQuillContent",
                     quillElement);
             }
-
+            catch
-        internal static ValueTask<object> LoadEditorContent(
-            IJSRuntime jsRuntime,
-            ElementReference quillElement,
-            string content)
             {
-            return jsRuntime.InvokeAsync<object>(
+                return new ValueTask<string>(Task.FromResult(string.Empty));
+            }
+        }
+
+        public Task LoadEditorContent(ElementReference quillElement, string content)
+        {
+            try
+            {
+                _jsRuntime.InvokeAsync<object>(
                     "interop.loadQuillContent",
                     quillElement, content);
+                return Task.CompletedTask;
+            }
+            catch
+            {
+                return Task.CompletedTask;
+            }
         }
 
-        internal static ValueTask<object> EnableEditor(
+        public Task EnableEditor(ElementReference quillElement, bool mode)
-            IJSRuntime jsRuntime,
-            ElementReference quillElement,
-            bool mode)
         {
-            return jsRuntime.InvokeAsync<object>(
+            try
+            {
+                _jsRuntime.InvokeAsync<object>(
                     "interop.enableQuillEditor", quillElement, mode);
+                return Task.CompletedTask;
+            }
+            catch
+            {
+                return Task.CompletedTask;
+            }
         }
 
-        internal static ValueTask<object> InsertImage(
+        public Task InsertImage(ElementReference quillElement, string imageUrl)
-            IJSRuntime jsRuntime,
-            ElementReference quillElement,
-            string imageUrl)
         {
-            return jsRuntime.InvokeAsync<object>(
+            try
+            {
+                _jsRuntime.InvokeAsync<object>(
                     "interop.insertQuillImage",
                     quillElement, imageUrl);
+                return Task.CompletedTask;
+            }
+            catch
+            {
+                return Task.CompletedTask;
+            }
         }
     }
 }

Oqtane.Client/UI/Interop.cs

@@ -1,6 +1,4 @@
-using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
-using Microsoft.JSInterop;
-using System;
 using System.Threading.Tasks;
 
 namespace Oqtane.UI
@@ -18,7 +16,7 @@ namespace Oqtane.UI
         {
             try
             {
-                _jsRuntime.InvokeAsync<string>(
+                _jsRuntime.InvokeAsync<object>(
                 "interop.setCookie",
                 name, value, days);
                 return Task.CompletedTask;
@@ -47,7 +45,7 @@ namespace Oqtane.UI
         {
             try
             {
-                _jsRuntime.InvokeAsync<string>(
+                _jsRuntime.InvokeAsync<object>(
                     "interop.updateTitle",
                     title);
                 return Task.CompletedTask;
@@ -62,7 +60,7 @@ namespace Oqtane.UI
         {
             try
             {
-                _jsRuntime.InvokeAsync<string>(
+                _jsRuntime.InvokeAsync<object>(
                     "interop.includeMeta",
                     id, attribute, name, content);
                 return Task.CompletedTask;
@@ -77,7 +75,7 @@ namespace Oqtane.UI
         {
             try
             {
-                _jsRuntime.InvokeAsync<string>(
+                _jsRuntime.InvokeAsync<object>(
                     "interop.includeLink",
                     id, rel, url, type, integrity, crossorigin);
                 return Task.CompletedTask;
@@ -92,7 +90,7 @@ namespace Oqtane.UI
         {
             try
             {
-                _jsRuntime.InvokeAsync<string>(
+                _jsRuntime.InvokeAsync<object>(
                     "interop.includeScript",
                     id, src, content, location, integrity, crossorigin);
                 return Task.CompletedTask;
@@ -107,7 +105,7 @@ namespace Oqtane.UI
         {
             try
             {
-                _jsRuntime.InvokeAsync<string>(
+                _jsRuntime.InvokeAsync<object>(
                     "interop.includeLink",
                     id, "stylesheet", url, "text/css");
                 return Task.CompletedTask;
@@ -122,7 +120,7 @@ namespace Oqtane.UI
         {
             try
             {
-                _jsRuntime.InvokeAsync<string>(
+                _jsRuntime.InvokeAsync<object>(
                     "interop.removeElementsById",
                     prefix, first, last);
                 return Task.CompletedTask;
@@ -152,7 +150,7 @@ namespace Oqtane.UI
         {
             try
             {
-                _jsRuntime.InvokeAsync<string>(
+                _jsRuntime.InvokeAsync<object>(
                 "interop.submitForm",
                 path, fields);
                 return Task.CompletedTask;
@@ -181,7 +179,7 @@ namespace Oqtane.UI
         {
             try
             {
-                _jsRuntime.InvokeAsync<string>(
+                _jsRuntime.InvokeAsync<object>(
                 "interop.uploadFiles",
                 posturl, folder, id);
                 return Task.CompletedTask;

Oqtane.Server/wwwroot/Modules/Templates/Internal/Oqtane.Server/wwwroot/Modules/[Owner].[Module]s/Module.css

@@ -0,0 +1 @@
+/* Module Custom Styles */

Oqtane.Server/wwwroot/Modules/Templates/Internal/Oqtane.Server/wwwroot/Modules/[Owner].[Module]s/Module.js

@@ -0,0 +1 @@
+/* Module Script */

Oqtane.Server/wwwroot/Modules/Templates/Internal/Oqtane.Server/wwwroot/Modules/[Owner].[Module]s/resources.txt

@@ -0,0 +1 @@
+This is the location where static resources such as images, style sheets, or scripts for this module will be located. Static assets can be organized in subfolders. When the module package is deployed the assets will be extracted under the web root in a folder that matches the module namespace.