Skip to content

Commit

Permalink
RTE - Improvements to dynamic reference loading (#2124)
Browse files Browse the repository at this point in the history
* RTE - Improvements to dynamic reference loading

* Add all dynamic references in one go

* Add migration notes

Co-authored-by: Mladen Macanović <[email protected]>
  • Loading branch information
njannink and stsrki authored Mar 31, 2021
1 parent 07a6ee4 commit 92fcebd
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 41 deletions.
7 changes: 7 additions & 0 deletions Source/Extensions/Blazorise.RichTextEdit/DynamicReference.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
namespace Blazorise.RichTextEdit
{
/// <summary>
/// Dynamic reference definition. <see cref="RichTextEditOptions.DynamicReferences"/>
/// </summary>
public record DynamicReference( string Uri, DynamicReferenceType Type );
}
16 changes: 16 additions & 0 deletions Source/Extensions/Blazorise.RichTextEdit/Enums.cs
Original file line number Diff line number Diff line change
Expand Up @@ -43,4 +43,20 @@ public enum RichTextEditTheme
/// </summary>
Bubble
}

/// <summary>
/// Dynamic reference type enumeration
/// </summary>
public enum DynamicReferenceType
{
/// <summary>
/// CSS stylesheet
/// </summary>
Stylesheet,

/// <summary>
/// Javascript
/// </summary>
Script
}
}
75 changes: 36 additions & 39 deletions Source/Extensions/Blazorise.RichTextEdit/RichTextEditJsInterop.cs
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
#region Using directives
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using Blazorise.Utilities;
Expand Down Expand Up @@ -156,33 +159,23 @@ private async ValueTask InitializeJsInterop()
return;
}

await LoadScript();
await LoadDynamicReferences();
await CheckIsLoaded();

isLoaded = true;
}

private async ValueTask LoadScript()
private async ValueTask LoadDynamicReferences()
{
// Make sure only one thread loads the javascript files
if ( options.DynamicLoadReferences && Interlocked.Increment( ref loadStarted ) == 1 )
if ( options.DynamicallyLoadReferences && Interlocked.Increment( ref loadStarted ) == 1 )
{
var qjsVersion = options.QuillJsVersion;

await LoadElementAsync( $@"https://cdn.quilljs.com/{qjsVersion}/quill.js", true );
await LoadElementAsync( @"_content/Blazorise.RichTextEdit/blazorise.richtextedit.js", true );
await LoadElementAsync( @"_content/Blazorise.RichTextEdit/Blazorise.RichTextEdit.bundle.scp.css", false );

if ( options.UseBubbleTheme )
{
await LoadElementAsync( $@"https://cdn.quilljs.com/{qjsVersion}/quill.bubble.css", false );
}

if ( options.UseShowTheme )
{
await LoadElementAsync( $@"https://cdn.quilljs.com/{qjsVersion}/quill.snow.css", false );
}
await LoadElementsAsync( options.DynamicReferences );
}
}

private async ValueTask CheckIsLoaded()
{
var loaderLoopBreaker = 0;
while ( !await IsLoaded() )
{
Expand All @@ -204,31 +197,35 @@ private async ValueTask<bool> IsLoaded()
return quillLoaded && await jsRuntime.InvokeAsync<bool>( "window.hasOwnProperty", JsRoot );
}

private async ValueTask LoadElementAsync( string uri, bool isScript )
/// <summary>
/// Dynamically load an additional script or stylesheet.
/// </summary>
public async ValueTask LoadElementsAsync( IEnumerable<DynamicReference> references )
{
string bootStrapScript;
if ( isScript )
{
bootStrapScript = "(function()" +
"{" +
"var s = document.createElement('script'); " +
"s.type = 'text/javascript';" +
$"s.src='{uri}'; " +
"document['body'].appendChild(s); " +
"})();";
}
else
StringBuilder bootStrapScript = new( "(function() {" );

foreach ( var (reference, index) in references.Select( ( reference, index ) => (reference, index) ) )
{
bootStrapScript = "(function()" +
"{" +
"var l = document.createElement('link'); " +
"l.rel = 'stylesheet';" +
$"l.href='{uri}'; " +
"document['head'].appendChild(l); " +
"})();";
var element = $"e{index}";
if ( reference.Type == DynamicReferenceType.Script )
{
bootStrapScript.AppendLine( $" var {element} = document.createElement( 'script' ); " );
bootStrapScript.AppendLine( $" {element}.type = 'text/javascript';" );
bootStrapScript.AppendLine( $" {element}.src='{reference.Uri}'; " );
bootStrapScript.AppendLine( $" document['body'].appendChild( {element} );" );
}
else
{
bootStrapScript.AppendLine( $" var {element} = document.createElement( 'link' ); " );
bootStrapScript.AppendLine( $" {element}.rel = 'stylesheet';" );
bootStrapScript.AppendLine( $" {element}.href='{reference.Uri}'; " );
bootStrapScript.AppendLine( $" document['head'].appendChild( {element} );" );
}
}

await jsRuntime.InvokeVoidAsync( "eval", bootStrapScript );
bootStrapScript.AppendLine( "} )();" );

await jsRuntime.InvokeVoidAsync( "eval", bootStrapScript.ToString() );
}

#endregion
Expand Down
40 changes: 38 additions & 2 deletions Source/Extensions/Blazorise.RichTextEdit/RichTextEditOptions.cs
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
namespace Blazorise.RichTextEdit
using System.Collections.Generic;
using static Blazorise.RichTextEdit.DynamicReferenceType;

namespace Blazorise.RichTextEdit
{
/// <summary>
/// Blazorise RichTextEdit extension options
/// </summary>
public sealed class RichTextEditOptions
{
private List<DynamicReference> dynamicReferences;

/// <summary>
/// Load the QuillJs snow theme related resources
/// </summary>
Expand All @@ -23,6 +28,37 @@ public sealed class RichTextEditOptions
/// <summary>
/// Load the RichTextEdit scripts and stylesheets on demand.
/// </summary>
public bool DynamicLoadReferences { get; set; } = true;
public bool DynamicallyLoadReferences { get; set; } = true;

/// <summary>
/// Dynamic references to be loaded when initializing the RichTextEdit component.
/// </summary>
public List<DynamicReference> DynamicReferences
{
get => dynamicReferences ?? GetDefaultReferences();
set => dynamicReferences = value;
}

private List<DynamicReference> GetDefaultReferences()
{
List<DynamicReference> references = new()
{
new( $@"https://cdn.quilljs.com/{QuillJsVersion}/quill.js", Script ),
new( @"_content/Blazorise.RichTextEdit/blazorise.richtextedit.js", Script ),
new( @"_content/Blazorise.RichTextEdit/blazorise.richtextedit.bundle.scp.css", Stylesheet )
};

if ( UseBubbleTheme )
{
references.Add( new( $@"https://cdn.quilljs.com/{QuillJsVersion}/quill.bubble.css", Stylesheet ) );
}

if ( UseShowTheme )
{
references.Add( new( $@"https://cdn.quilljs.com/{QuillJsVersion}/quill.snow.css", Stylesheet ) );
}

return references;
}
}
}
4 changes: 4 additions & 0 deletions docs/_posts/2021-03-24-release-notes-094.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ tags:
- 0.9.4
---

## Migration

- In `RichTextEditOptions`, rename `DynamicLoadReferences` to `DynamicallyLoadReferences`

## Highlights 🚀

### Async Validation
Expand Down

0 comments on commit 92fcebd

Please sign in to comment.