Editor localization in hosted Blazor Webassembly

[wibram]

I am trying to change the editor (summernote) in a hosted blazor webassembly .Net 7 application to german but it only works with 'en-US'.

What I have done so far:

1. Added BootstrapBlazor.SummerNote 7.3.0 through NuGet to the Blazor.Client project.
2. Added jquery 3.5.1 javascript file into the index.html file. (boostrap 5.2.2 was already included)
3. Added to Program.cs:
   builder.Services.AddBootstrapBlazor();
4. Created a new component with:
   <Editor @bind-Value="@EditorValue" IsEditor="true" ShowSubmit="true" Language="en-US" />

This is working fine.

Then for the localization in german:

1. Added "de.json" into the folder "Locales" as Embedded Resource.
2. In Program.cs:

builder.Services.AddBootstrapBlazor( localizationConfigure: op => {
    op.AdditionalJsonAssemblies = new Assembly[] {
        typeof( App ).Assembly
    };
} );
builder.Services.Configure<BootstrapBlazor.Components.BootstrapBlazorOptions>( op => {
    op.DefaultCultureInfo = "de";
    op.FallbackCulture = "de";
    op.SupportedCultures = new List<string> { "de" };
} );
var culture = new CultureInfo( "de-DE" ); // <- "de" instead of "de-DE" does not work
CultureInfo.DefaultThreadCurrentCulture = culture;
CultureInfo.DefaultThreadCurrentUICulture = culture;

3. Changing the Editor (with "de" or "de-DE"):
   <Editor @bind-Value="@EditorValue" IsEditor="true" ShowSubmit="true" Language="de" />

I am getting this error message:

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Cannot read properties of undefined (reading 'bb_editor')
TypeError: Cannot read properties of undefined (reading 'bb_editor')
at initEditor (https://localhost:7001/_content/BootstrapBlazor.SummerNote/Components/Editor/Editor.razor.js:26:65)
at Module.init (https://localhost:7001/_content/BootstrapBlazor.SummerNote/Components/Editor/Editor.razor.js:113:5)
Microsoft.JSInterop.JSException: Cannot read properties of undefined (reading 'bb_editor')
TypeError: Cannot read properties of undefined (reading 'bb_editor')

[ArgoZhang]

@wibram hi. we did not provide the Editor German localization file. Get it from here Summernote.org

<!-- include summernote-de-DE -->
<script src="lang/summernote-de-DE.js"></script>

Feel free to contact us if you have any questions.

[ArgoZhang]

@wibram Sorry I got this is a bug. let me fix it quickly

[ArgoZhang]

@wibram release v7.3.1 fixed

the suggestion set ShowSubmit="false" or fill the localization of Submit Button your self

$.summernote.lang["de-DE"].bb_editor = {
    tooltip: "Click to edit",
    submit: "submit"
}

[wibram]

Thank you for your quick fix. I have tested it but I am not able to get the german tooltips for the toolbar buttons. Only the Placeholder is in german. And I get this error: "Uncaught TypeError: Cannot read properties of undefined (reading 'lang')".

As suggested I have added a simple demo app (only Client project has been altered):
GitHub

I think I am doing something wrong.

[ArgoZhang]

sorry for the delayed reply.

Workaround 1

missing the script tag <script src="_content/BootstrapBlazor.SummerNote/js/summernote-bs5.min.js"></script> before the de-DE lang plugin

the whole script like below

<script src="_framework/blazor.webassembly.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="_content/BootstrapBlazor.SummerNote/js/summernote-bs5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/lang/summernote-de-DE.min.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>

Workaround 2

step1

upgrade BootstrapBlazor.SummerNote to 7.3.2

step2

remove de-DE language script tag like below

<script src="_framework/blazor.webassembly.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>

step3

update Editor component set LanguageUrl="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/lang/summernote-de-DE.min.js"

<Editor @bind-Value="@EditorValue" IsEditor="true" ShowSubmit="false" Language="de-DE" LanguageUrl="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/lang/summernote-de-DE.min.js" />

BTW

you can remove the set CultureInfo code. They are not necessary.

//builder.Services.Configure<BootstrapBlazor.Components.BootstrapBlazorOptions>( op =>
//{
//    op.DefaultCultureInfo = "de-DE";
//    op.FallbackCulture = "de-DE";
//    op.SupportedCultures = new List<string> { "de-DE", "en-US" };
//} );

//var culture = new CultureInfo( "de-DE" );
//CultureInfo.DefaultThreadCurrentCulture = culture;
//CultureInfo.DefaultThreadCurrentUICulture = culture;

[wibram]

Thank you so much