diff --git a/src/MermaidJS.Blazor/Extensions/IServiceCollectionExtensions.cs b/src/MermaidJS.Blazor/Extensions/IServiceCollectionExtensions.cs
index ce1d408..ec2b304 100644
--- a/src/MermaidJS.Blazor/Extensions/IServiceCollectionExtensions.cs
+++ b/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
///
/// Adds the necessary services for using the component.
///
- public static IServiceCollection AddMermaidJS(this IServiceCollection services)
+ public static IServiceCollection AddMermaidJS(this IServiceCollection services, Action? configure = default)
{
- return services.AddTransient();
+ return services
+ .AddOptions()
+ .Configure(options =>
+ {
+ if (configure is not null)
+ {
+ configure(options);
+ }
+ })
+ .AddTransient();
}
}
}
diff --git a/src/MermaidJS.Blazor/Internal/MermaidDiagramInterop.cs b/src/MermaidJS.Blazor/Internal/MermaidDiagramInterop.cs
index 16475c0..f3c574d 100644
--- a/src/MermaidJS.Blazor/Internal/MermaidDiagramInterop.cs
+++ b/src/MermaidJS.Blazor/Internal/MermaidDiagramInterop.cs
@@ -1,6 +1,7 @@
using System;
using System.Threading.Tasks;
+using Microsoft.Extensions.Options;
using Microsoft.JSInterop;
namespace MermaidJS.Blazor.Internal
@@ -8,11 +9,13 @@ namespace MermaidJS.Blazor.Internal
internal class MermaidDiagramInterop
{
private readonly IJSRuntime _jsRuntime;
+ private readonly IOptionsSnapshot _mermaidOptions;
private readonly Lazy> _jsModule;
- public MermaidDiagramInterop(IJSRuntime jsRuntime)
+ public MermaidDiagramInterop(IJSRuntime jsRuntime, IOptionsSnapshot mermaidOptions)
{
_jsRuntime = jsRuntime;
+ _mermaidOptions = mermaidOptions;
_jsModule = new(() => jsRuntime.InvokeAsync("import", "./_content/MermaidJS.Blazor/MermaidDiagramInterop.js").AsTask());
}
@@ -28,7 +31,7 @@ public async Task> 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;
}
diff --git a/src/MermaidJS.Blazor/MermaidLogLevels.cs b/src/MermaidJS.Blazor/MermaidLogLevels.cs
new file mode 100644
index 0000000..d3bbe6a
--- /dev/null
+++ b/src/MermaidJS.Blazor/MermaidLogLevels.cs
@@ -0,0 +1,33 @@
+namespace MermaidJS.Blazor
+{
+ ///
+ /// Acceptable values for the logLevel initialization option.
+ ///
+ public static class MermaidLogLevels
+ {
+ ///
+ ///
+ ///
+ public const int Debug = 1;
+
+ ///
+ ///
+ ///
+ public const int Info = 2;
+
+ ///
+ ///
+ ///
+ public const int Warn = 3;
+
+ ///
+ ///
+ ///
+ public const int Error = 4;
+
+ ///
+ ///
+ ///
+ public const int Fatal = 5;
+ }
+}
diff --git a/src/MermaidJS.Blazor/MermaidOptions.cs b/src/MermaidJS.Blazor/MermaidOptions.cs
new file mode 100644
index 0000000..3ef9250
--- /dev/null
+++ b/src/MermaidJS.Blazor/MermaidOptions.cs
@@ -0,0 +1,51 @@
+using System.Collections.Generic;
+using System.Linq;
+
+namespace MermaidJS.Blazor
+{
+ ///
+ /// Options used when initializing MermaidJS.
+ ///
+ public class MermaidOptions
+ {
+ ///
+ /// Controls whether or arrow markers in html code are absolute paths or anchors.
+ ///
+ public bool ArrowMarkerAbsolute { get; set; }
+
+ ///
+ /// Specifies the font to be used in the rendered diagrams.
+ ///
+ public string FontFamily { get; set; } = "'trebuchet ms', verdana, arial, sans-serif;";
+
+ ///
+ /// This option decides the amount of logging to be used.
+ ///
+ public int LogLevel { get; set; } = 5;
+
+ ///
+ /// The maximum number of characters allowed in a diagram definition.
+ ///
+ public int MaxTextSize { get; set; } = 50000;
+
+ ///
+ /// 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.
+ ///
+ public List Secure { get; set; } = new string[] { "secure", "securityLevel", "startOnLoad", "maxTextSize" }.ToList();
+
+ ///
+ /// Level of trust for parsed diagram.
+ ///
+ public string SecurityLevel { get; set; } = "strict";
+
+ ///
+ /// Dictates whether mermaind starts on Page load.
+ ///
+ public bool StartOnLoad { get; set; } = true;
+
+ ///
+ /// Name of a pre-defined MermaidJS theme.
+ ///
+ public string? Theme { get; set; }
+ }
+}
diff --git a/src/MermaidJS.Blazor/MermaidSecurityLevels.cs b/src/MermaidJS.Blazor/MermaidSecurityLevels.cs
new file mode 100644
index 0000000..2bbae71
--- /dev/null
+++ b/src/MermaidJS.Blazor/MermaidSecurityLevels.cs
@@ -0,0 +1,23 @@
+namespace MermaidJS.Blazor
+{
+ ///
+ /// Acceptable values for the securityLevel initialization option.
+ ///
+ public static class MermaidSecurityLevels
+ {
+ ///
+ /// HTML tags in text are allowed, (only script element is removed), click functionality is enabled.
+ ///
+ public const string AntiScript = "antiscript";
+
+ ///
+ /// Tags in text are allowed, click functionality is enabled.
+ ///
+ public const string Loose = "loose";
+
+ ///
+ /// Default. Tags in text are encoded, click functionality is disabled.
+ ///
+ public const string Strict = "strict";
+ }
+}
diff --git a/src/MermaidJS.Blazor/wwwroot/MermaidDiagramInterop.js b/src/MermaidJS.Blazor/wwwroot/MermaidDiagramInterop.js
index 7717a99..f0845e0 100644
--- a/src/MermaidJS.Blazor/wwwroot/MermaidDiagramInterop.js
+++ b/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);
});
}