support MudBlazor 7.0.0 preview (#266)

README.md

@@ -2,12 +2,15 @@
 [![Nuget downloads](https://img.shields.io/nuget/dt/MudBlazor.Markdown?label=nuget%20downloads&logo=nuget&style=plastic)](https://www.nuget.org/packages/MudBlazor.Markdown/)  
 # Markdown component for [MudBlazor](https://github.com/Garderoben/MudBlazor)
 
-This README covers configuration steps for Blazor Server and Blazor WebAssembly. For images how the markup component looks like in the browser go to the [README of samples](/samples).
+This README covers configuration steps for Blazor Server and Blazor WebAssembly. For images of how the markup component looks like in the browser go to the [README of samples](/samples).
 
 ## Update guide
 For guidance with update errors please visit the [wiki page](https://github.com/MyNihongo/MudBlazor.Markdown/wiki/Update-guide).
 
 ## Getting started
+> NB! MudBLazor does not work well with the static SSR format because some code is executed in `OnAfterRender` or `OnAfterRenderAsync` that is not invoked by default.  
+> Specify `@rendermode="InteractiveServer"` on the markdown component to make it work (e.g. `<MudMarkdown @rendermode="InteractiveServer" Value="some markdown here" />`)
+
 Install the NuGet package.
 ```
 dotnet add package MudBlazor.Markdown
@@ -19,6 +22,7 @@ Add the following using statement in `_Imports.razor`.
 Add the following nodes in either `App.razor` or `MainLayout.razor`.
 ```razor
 <MudThemeProvider />
+<MudPopoverProvider />
 <MudDialogProvider />
 <MudSnackbarProvider />
 ```
@@ -41,7 +45,7 @@ public void ConfigureServices(IServiceCollection services)
 {
     services.AddMudServices();
     services.AddMudMarkdownServices();
-    // Optionally if default clipboard functionality fails it is possible to add a custom service
+    // Optionally if the default clipboard functionality fails it is possible to add a custom service
     // NB! MauiClipboardService is just an example
     builder.Services.AddMudMarkdownClipboardService<MauiClipboardService>();
 }
@@ -51,7 +55,7 @@ For the Blazor WebAssembly in the `Program.cs` add this method.
 var builder = WebAssemblyHostBuilder.CreateDefault(args);
 builder.Services.AddMudServices();
 builder.Services.AddMudMarkdownServices();
-// Optionally if default clipboard functionality fails it is possible to add a custom service
+// Optionally if the default clipboard functionality fails it is possible to add a custom service
 // NB! MauiClipboardService is just an example
 builder.Services.AddMudMarkdownClipboardService<MauiClipboardService>();
 ```
@@ -83,4 +87,4 @@ The `<MudMarkdown>` supports the palette of the `MudTheme` which makes styling e
 - ChipDefault - background-color of the code block;
 - TextDisabled - border-color of the quoted text and border-color of the h1 and h2 bottom divider;
 - TextPrimary - regular text in the markdown;
-- TextSecondary - color of the quoted text;
+- TextSecondary - the colour of the quoted text;

samples/MudBlazor.Markdown.Core/MudBlazor.Markdown.Core.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
 	<PropertyGroup>
-		<TargetFramework>net6.0</TargetFramework>
+		<TargetFramework>net8.0</TargetFramework>
 		<Nullable>enable</Nullable>
 		<ImplicitUsings>enable</ImplicitUsings>
 	</PropertyGroup>

samples/MudBlazor.Markdown.Samples.sln

@@ -11,6 +11,8 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MudBlazor.Markdown.Core", "
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MudBlazor.Markdown.Server", "Server\MudBlazor.Markdown.Server.csproj", "{1A77149A-AE40-4596-83E6-25C8BE3EFA76}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "MudBlazor.Markdown.SSR", "SSR\MudBlazor.Markdown.SSR.csproj", "{3EB55216-730C-4797-8082-0616E0FA4DEB}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -33,6 +35,10 @@ Global
 		{1A77149A-AE40-4596-83E6-25C8BE3EFA76}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{1A77149A-AE40-4596-83E6-25C8BE3EFA76}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{1A77149A-AE40-4596-83E6-25C8BE3EFA76}.Release|Any CPU.Build.0 = Release|Any CPU
+		{3EB55216-730C-4797-8082-0616E0FA4DEB}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{3EB55216-730C-4797-8082-0616E0FA4DEB}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{3EB55216-730C-4797-8082-0616E0FA4DEB}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{3EB55216-730C-4797-8082-0616E0FA4DEB}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE

samples/SSR/Components/App.razor

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <base href="/" />
+    <link rel="stylesheet" href="app.css" />
+    <link rel="stylesheet" href="MudBlazor.Markdown.SSR.styles.css" />
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
+    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
+    <link href="_content/MudBlazor.Markdown/MudBlazor.Markdown.min.css" rel="stylesheet" />
+    <link rel="icon" type="image/png" href="favicon.png" />
+    <HeadOutlet />
+</head>
+
+<body>
+    <Routes />
+    <script src="_framework/blazor.web.js"></script>
+    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
+    <script src="_content/MudBlazor.Markdown/MudBlazor.Markdown.min.js"></script>
+</body>
+
+</html>

samples/SSR/Components/Layout/MainLayout.razor

@@ -0,0 +1,44 @@
+@using MudBlazor.Markdown.Core.Services
+@inherits LayoutComponentBase
+
+<MudThemeProvider />
+<MudPopoverProvider />
+<MudDialogProvider />
+<MudSnackbarProvider />
+
+<MudLayout>
+	<MudAppBar Fixed="true" Elevation="5">
+		<MudText Typo="Typo.h4">SSR sample</MudText>
+		<MudSpacer />
+		<MudTooltip Text="Toggle theme">
+			<MudIconButton Icon="@Icons.Material.Rounded.Brightness4" Color="Color.Inherit" OnClick="@ToggleThemeAsync" />
+		</MudTooltip>
+	</MudAppBar>
+
+	<MudMainContent>
+		<MudContainer Class="pt-2 pb-5">
+			@Body
+		</MudContainer>
+	</MudMainContent>
+</MudLayout>
+
+<div id="blazor-error-ui">
+    An unhandled error has occurred.
+    <a href="" class="reload">Reload</a>
+    <a class="dismiss">🗙</a>
+</div>
+
+@code
+{
+	[Inject]
+	private IThemeService? ThemeService { get; init; }
+
+	private async Task ToggleThemeAsync()
+	{
+		if (ThemeService == null)
+			return;
+
+		await ThemeService.ToggleThemeAsync()
+			.ConfigureAwait(false);
+	}
+}

samples/SSR/Components/Layout/MainLayout.razor.css

@@ -0,0 +1,18 @@
+#blazor-error-ui {
+    background: lightyellow;
+    bottom: 0;
+    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
+    display: none;
+    left: 0;
+    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
+    position: fixed;
+    width: 100%;
+    z-index: 1000;
+}
+
+    #blazor-error-ui .dismiss {
+        cursor: pointer;
+        position: absolute;
+        right: 0.75rem;
+        top: 0.5rem;
+    }

samples/SSR/Components/Pages/Home.razor

@@ -0,0 +1,14 @@
+@page "/"
+
+<PageTitle>Home</PageTitle>
+
+<MudMarkdown Value="@Value1" />
+
+<MudText Typo="Typo.caption">C#</MudText>
+<MudMarkdown @rendermode="InteractiveServer" Value="@Value2" />
+
+@code
+{
+    private const string Value1 = "`MudMarkdown` is a third party component that renders markdown text.";
+    private const string Value2 = "```csharp\n// comment\nvar x = 5;\nvoid Increment() {\n  x++;\n  Console.WriteLine(x);\n}\nIncrement();\n```";
+}

samples/SSR/Components/Routes.razor

@@ -0,0 +1,6 @@
+<Router AppAssembly="typeof(Program).Assembly">
+	<Found Context="routeData">
+		<RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
+		<FocusOnNavigate RouteData="routeData" Selector="h1" />
+	</Found>
+</Router>

samples/SSR/Components/_Imports.razor

@@ -0,0 +1,11 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using static Microsoft.AspNetCore.Components.Web.RenderMode
+@using Microsoft.AspNetCore.Components.Web.Virtualization
+@using Microsoft.JSInterop
+@using MudBlazor.Markdown.SSR
+@using MudBlazor.Markdown.SSR.Components
+@using MudBlazor

samples/SSR/MudBlazor.Markdown.SSR.csproj

@@ -0,0 +1,13 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+	<PropertyGroup>
+		<TargetFramework>net8.0</TargetFramework>
+		<Nullable>enable</Nullable>
+		<ImplicitUsings>enable</ImplicitUsings>
+	</PropertyGroup>
+
+	<ItemGroup>
+		<ProjectReference Include="..\MudBlazor.Markdown.Core\MudBlazor.Markdown.Core.csproj" />
+	</ItemGroup>
+
+</Project>

samples/SSR/Program.cs

@@ -0,0 +1,33 @@
+using MudBlazor;
+using MudBlazor.Markdown.Core.Utils.ServiceRegistration;
+using MudBlazor.Markdown.SSR.Components;
+using MudBlazor.Services;
+
+var builder = WebApplication.CreateBuilder(args);
+builder.Services.AddCoreServices();
+builder.Services.AddMudServices();
+builder.Services.AddMudMarkdownServices();
+
+// Add services to the container.
+builder.Services.AddRazorComponents()
+    .AddInteractiveServerComponents();
+
+var app = builder.Build();
+
+// Configure the HTTP request pipeline.
+if (!app.Environment.IsDevelopment())
+{
+    app.UseExceptionHandler("/Error", createScopeForErrors: true);
+    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
+    app.UseHsts();
+}
+
+app.UseHttpsRedirection();
+
+app.UseStaticFiles();
+app.UseAntiforgery();
+
+app.MapRazorComponents<App>()
+    .AddInteractiveServerRenderMode();
+
+app.Run();

samples/SSR/Properties/launchSettings.json

@@ -0,0 +1,38 @@
+{
+  "$schema": "http://json.schemastore.org/launchsettings.json",
+    "iisSettings": {
+      "windowsAuthentication": false,
+      "anonymousAuthentication": true,
+      "iisExpress": {
+        "applicationUrl": "http://localhost:49250",
+        "sslPort": 44359
+      }
+    },
+    "profiles": {
+      "http": {
+        "commandName": "Project",
+        "dotnetRunMessages": true,
+        "launchBrowser": true,
+        "applicationUrl": "http://localhost:5118",
+        "environmentVariables": {
+          "ASPNETCORE_ENVIRONMENT": "Development"
+        }
+      },
+      "https": {
+        "commandName": "Project",
+        "dotnetRunMessages": true,
+        "launchBrowser": true,
+        "applicationUrl": "https://localhost:7202;http://localhost:5118",
+        "environmentVariables": {
+          "ASPNETCORE_ENVIRONMENT": "Development"
+        }
+      },
+      "IIS Express": {
+        "commandName": "IISExpress",
+        "launchBrowser": true,
+        "environmentVariables": {
+          "ASPNETCORE_ENVIRONMENT": "Development"
+        }
+      }
+    }
+  }

samples/SSR/appsettings.Development.json

@@ -0,0 +1,8 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  }
+}

samples/SSR/appsettings.json

@@ -0,0 +1,9 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "AllowedHosts": "*"
+}

samples/SSR/wwwroot/app.css

@@ -0,0 +1,51 @@
+html, body {
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+a, .btn-link {
+    color: #006bb7;
+}
+
+.btn-primary {
+    color: #fff;
+    background-color: #1b6ec2;
+    border-color: #1861ac;
+}
+
+.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
+  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
+}
+
+.content {
+    padding-top: 1.1rem;
+}
+
+h1:focus {
+    outline: none;
+}
+
+.valid.modified:not([type=checkbox]) {
+    outline: 1px solid #26b050;
+}
+
+.invalid {
+    outline: 1px solid #e50000;
+}
+
+.validation-message {
+    color: #e50000;
+}
+
+.blazor-error-boundary {
+    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
+    padding: 1rem 1rem 1rem 3.7rem;
+    color: white;
+}
+
+    .blazor-error-boundary::after {
+        content: "An error has occurred."
+    }
+
+.darker-border-checkbox.form-check-input {
+    border-color: #929292;
+}

samples/Server/App.razor

@@ -1,6 +1,6 @@
 @using MudBlazor.Markdown.Core.Services
 
-<Router AppAssembly="@typeof(Program).Assembly" AdditionalAssemblies="new[] { typeof(MarkdownPage).Assembly }" PreferExactMatches="@true">
+<Router AppAssembly="@typeof(Program).Assembly" AdditionalAssemblies="new[] { typeof(MarkdownPage).Assembly }">
 	<Found Context="routeData">
 		<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
 	</Found>
@@ -12,6 +12,7 @@
 </Router>
 
 <MudThemeProvider IsDarkMode="_isDarkTheme" />
+<MudPopoverProvider />
 <MudDialogProvider />
 <MudSnackbarProvider />
 

samples/Server/Pages/Error.cshtml

@@ -8,7 +8,6 @@
 	<meta charset="utf-8" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 	<title>Error</title>
-	<link href="~/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
 	<link href="~/css/app.css" rel="stylesheet" />
 </head>
 

samples/Server/Pages/_Host.cshtml

@@ -12,8 +12,6 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 	<title>MudBlazor.Markdown.Server</title>
 	<base href="~/" />
-	<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
-	<link href="css/site.css" rel="stylesheet" />
 	<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
 	<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
 	<link href="_content/MudBlazor.Markdown/MudBlazor.Markdown.min.css" rel="stylesheet" />