Add Ability to Set Initialization Options (#8)

src/MermaidJS.Blazor/Extensions/IServiceCollectionExtensions.cs

@@ -1,4 +1,6 @@
-using MermaidJS.Blazor;
+using System;
+
+using MermaidJS.Blazor;
 using MermaidJS.Blazor.Internal;
 
 namespace Microsoft.Extensions.DependencyInjection
@@ -8,9 +10,18 @@ public static class IServiceCollectionExtensions
         /// <summary>
         /// Adds the necessary services for using the <see cref="MermaidDiagram"/> component.
         /// </summary>
-        public static IServiceCollection AddMermaidJS(this IServiceCollection services)
+        public static IServiceCollection AddMermaidJS(this IServiceCollection services, Action<MermaidOptions>? configure = default)
         {
-            return services.AddTransient<MermaidDiagramInterop>();
+            return services
+                .AddOptions()
+                .Configure<MermaidOptions>(options =>
+                {
+                    if (configure is not null)
+                    {
+                        configure(options);
+                    }
+                })
+                .AddTransient<MermaidDiagramInterop>();
         }
     }
 }

src/MermaidJS.Blazor/Internal/MermaidDiagramInterop.cs

@@ -1,18 +1,21 @@
 using System;
 using System.Threading.Tasks;
 
+using Microsoft.Extensions.Options;
 using Microsoft.JSInterop;
 
 namespace MermaidJS.Blazor.Internal
 {
     internal class MermaidDiagramInterop
     {
         private readonly IJSRuntime _jsRuntime;
+        private readonly IOptionsSnapshot<MermaidOptions> _mermaidOptions;
         private readonly Lazy<Task<IJSObjectReference>> _jsModule;
 
-        public MermaidDiagramInterop(IJSRuntime jsRuntime)
+        public MermaidDiagramInterop(IJSRuntime jsRuntime, IOptionsSnapshot<MermaidOptions> mermaidOptions)
         {
             _jsRuntime = jsRuntime;
+            _mermaidOptions = mermaidOptions;
             _jsModule = new(() => jsRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/MermaidJS.Blazor/MermaidDiagramInterop.js").AsTask());
         }
 
@@ -28,7 +31,7 @@ public async Task<DotNetObjectReference<MermaidDiagram>> RegisterComponent(Merma
             var jsModule = await _jsModule.Value;
             var componentRef = DotNetObjectReference.Create(component);
 
-            await jsModule.InvokeVoidAsync("registerComponent", component.Id, componentRef);
+            await jsModule.InvokeVoidAsync("registerComponent", component.Id, componentRef, _mermaidOptions.Value);
 
             return componentRef;
         }

src/MermaidJS.Blazor/MermaidLogLevels.cs

@@ -0,0 +1,33 @@
+namespace MermaidJS.Blazor
+{
+    /// <summary>
+    /// Acceptable values for the logLevel initialization option.
+    /// </summary>
+    public static class MermaidLogLevels
+    {
+        /// <summary>
+        /// 
+        /// </summary>
+        public const int Debug = 1;
+
+        /// <summary>
+        /// 
+        /// </summary>
+        public const int Info = 2;
+
+        /// <summary>
+        /// 
+        /// </summary>
+        public const int Warn = 3;
+
+        /// <summary>
+        /// 
+        /// </summary>
+        public const int Error = 4;
+
+        /// <summary>
+        /// 
+        /// </summary>
+        public const int Fatal = 5;
+    }
+}

src/MermaidJS.Blazor/MermaidOptions.cs

@@ -0,0 +1,51 @@
+using System.Collections.Generic;
+using System.Linq;
+
+namespace MermaidJS.Blazor
+{
+    /// <summary>
+    /// Options used when initializing MermaidJS.
+    /// </summary>
+    public class MermaidOptions
+    {
+        /// <summary>
+        /// Controls whether or arrow markers in html code are absolute paths or anchors.
+        /// </summary>
+        public bool ArrowMarkerAbsolute { get; set; }
+
+        /// <summary>
+        /// Specifies the font to be used in the rendered diagrams.
+        /// </summary>
+        public string FontFamily { get; set; } = "'trebuchet ms', verdana, arial, sans-serif;";
+
+        /// <summary>
+        /// This option decides the amount of logging to be used.
+        /// </summary>
+        public int LogLevel { get; set; } = 5;
+
+        /// <summary>
+        /// The maximum number of characters allowed in a diagram definition.
+        /// </summary>
+        public int MaxTextSize { get; set; } = 50000;
+
+        /// <summary>
+        /// This option controls which currentConfig keys are considered secure and can only be changed via call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to the secure keys in the current currentConfig. This prevents malicious graph directives from overriding a site's default security.
+        /// </summary>
+        public List<string> Secure { get; set; } = new string[] { "secure", "securityLevel", "startOnLoad", "maxTextSize" }.ToList();
+
+        /// <summary>
+        /// Level of trust for parsed diagram.
+        /// </summary>
+        public string SecurityLevel { get; set; } = "strict";
+
+        /// <summary>
+        /// Dictates whether mermaind starts on Page load.
+        /// </summary>
+        public bool StartOnLoad { get; set; } = true;
+
+        /// <summary>
+        /// Name of a pre-defined MermaidJS theme.
+        /// </summary>
+        public string? Theme { get; set; }
+    }
+}

src/MermaidJS.Blazor/MermaidSecurityLevels.cs

@@ -0,0 +1,23 @@
+namespace MermaidJS.Blazor
+{
+    /// <summary>
+    /// Acceptable values for the securityLevel initialization option.
+    /// </summary>
+    public static class MermaidSecurityLevels
+    {
+        /// <summary>
+        /// HTML tags in text are allowed, (only script element is removed), click functionality is enabled.
+        /// </summary>
+        public const string AntiScript = "antiscript";
+
+        /// <summary>
+        /// Tags in text are allowed, click functionality is enabled.
+        /// </summary>
+        public const string Loose = "loose";
+
+        /// <summary>
+        /// Default. Tags in text are encoded, click functionality is disabled.
+        /// </summary>
+        public const string Strict = "strict";
+    }
+}

src/MermaidJS.Blazor/wwwroot/MermaidDiagramInterop.js

@@ -1,4 +1,4 @@
-function initializeGlobals() {
+function initializeGlobals(options) {
     function loadMermaid() {
         return new Promise((resolve) => {
             if (!window.mermaid) {
@@ -8,7 +8,7 @@
                 script.async = false;
                 script.defer = false;
                 script.onload = () => {
-                    window.mermaid.mermaidAPI.initialize({ securityLevel: "loose" });
+                    window.mermaid.mermaidAPI.initialize(options);
 
                     resolve();
                 };
@@ -69,8 +69,8 @@ export function beginRender(componentId, definition) {
     });
 }
 
-export function registerComponent(componentId, componentRef) {
-    initializeGlobals().then(() => {
+export function registerComponent(componentId, componentRef, options) {
+    initializeGlobals(options).then(() => {
         window.mermaidDiagramBlazorComponents.set(componentId, componentRef);
     });
 }