!2670 feat(#I534U3): markdown component dynamic import asset css and js

* Merge branch 'main' into dev-markdown * chore: bump version 6.1.0 * feat: 增加动态加载样式脚本 * doc: 更新 Markdown 示例改为动态加载 * fix: 修复 addLink 脚本 * chore: 脚本改用动态 import 方式 * refactor: 重构代码精简逻辑 * chore: 精简代码删除注释行 * doc: 更新示例
2024-12-01 19:50:31 +08:00 · 2022-04-17 18:13:24 +00:00 · 2022-04-17 18:13:24 +00:00 · 5a92056a97
commit 5a92056a97
parent 0338d89505
9 changed files with 106 additions and 125 deletions
--- a/src/BootstrapBlazor.Server/Pages/_Layout.cshtml
+++ b/src/BootstrapBlazor.Server/Pages/_Layout.cshtml
@ -19,7 +19,6 @@
    <link rel="stylesheet" href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" asp-append-version="true">
    <link rel="stylesheet" href="_content/BootstrapBlazor.Chart/css/bootstrap.blazor.chart.bundle.min.css" asp-append-version="true">
-    <link rel="stylesheet" href="_content/BootstrapBlazor.Markdown/css/bootstrap.blazor.markdown.min.css" asp-append-version="true">
    <link rel="stylesheet" href="_content/BootstrapBlazor.Shared/BootstrapBlazor.Shared.bundle.scp.css" asp-append-version="true">
    <link rel="stylesheet" href="_content/BootstrapBlazor.Shared/lib/highlight/vs.css" asp-append-version="true">
    <link rel="stylesheet" href="_content/BootstrapBlazor.Shared/css/site.css" asp-append-version="true">
@ -57,7 +56,6 @@
    <script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js" asp-append-version="true"></script>
    <script src="_content/BootstrapBlazor.Chart/js/bootstrap.blazor.chart.bundle.min.js" asp-append-version="true"></script>
    <script src="_content/BootstrapBlazor.TableExport/js/export.min.js" asp-append-version="true"></script>
-    <script src="_content/BootstrapBlazor.Markdown/js/bootstrap.blazor.markdown.min.js" asp-append-version="true"></script>
    <script src="_content/BootstrapBlazor.Shared/lib/highlight/highlight.min.js" asp-append-version="true"></script>
    <script src="_content/BootstrapBlazor.Shared/lib/summernote/summernote-zh-CN.min.js" asp-append-version="true"></script>
    <script src="_content/BootstrapBlazor.Shared/js/common.js" asp-append-version="true"></script>
--- a/src/BootstrapBlazor.Shared/Locales/en.json
+++ b/src/BootstrapBlazor.Shared/Locales/en.json
@ -1317,8 +1317,10 @@
    "P2": "This component relies on <a href='https://www.nuget.org/packages?q-BootstrapBlazor.Markdown' target'_blank'><code>BootstrapBlazor.Markdown</code></a>, which needs to reference its component package when using this component",
    "P3": "Nuget package installation",
    "P4": "Install the</code> components of <code>BootstrapBlazor.Markdown using <a href='https://www.nuget.org/packages?q-BootstrapBlazor.Markdown' target'_blank'>nuget.org</a>",
-    "H2": "CSS file",
-    "H3": "JS file",
+    "Css": "CSS file",
+    "CssText": "dynamic import css",
+    "Js": "JS file",
+    "JsText": "dynamic import javascript",
    "H4": "Localization",
    "Tips1": "The component has a built-in Chinese to switch between current cultural information for Chinese",
    "Block1Title": "Common usage",
--- a/src/BootstrapBlazor.Shared/Locales/zh.json
+++ b/src/BootstrapBlazor.Shared/Locales/zh.json
@ -1319,8 +1319,10 @@
    "P2": "本组件依赖于 <a href='https://www.nuget.org/packages?q=BootstrapBlazor.Markdown' target='_blank'><code>BootstrapBlazor.Markdown</code></a>，使用本组件时需要引用其组件包",
    "P3": "Nuget 包安装",
    "P4": "使用 <a href='https://www.nuget.org/packages?q=BootstrapBlazor.Markdown' target='_blank'>nuget.org</a> 进行 <code>BootstrapBlazor.Markdown</code> 组件的安装",
-    "H2": "CSS 文件",
-    "H3": "JS 文件",
+    "Css": "CSS 文件",
+    "CssText": "无需设置组件自动动态加载",
+    "Js": "JS 文件",
+    "JsText": "无需设置组件自动动态加载",
    "H4": "本地化",
    "Tips1": "组件内置中文，切换当前文化信息即可获得中文",
    "Block1Title": "普通用法",
--- a/src/BootstrapBlazor.Shared/Samples/Markdowns.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Markdowns.razor
@ -24,13 +24,13 @@
 <div class="code-label">Package Manager</div>
 <Pre class="no-highlight">Install-Package BootstrapBlazor.Markdown -Version @Version</Pre>

-<h4>@Localizer["H2"]</h4>
+<h4>@Localizer["Css"]</h4>

-<Pre>&lt;link rel="stylesheet" href="_content/BootstrapBlazor.Markdown/css/bootstrap.blazor.markdown.min.css" /&gt;</Pre>
+<p>@Localizer["CssText"]</p>

-<h4>@Localizer["H3"]</h4>
+<h4>@Localizer["Js"]</h4>

-<Pre>&lt;script src="_content/BootstrapBlazor.Markdown/js/bootstrap.blazor.markdown.min.js"&gt;&lt;/script&gt;</Pre>
+<p>@Localizer["JsText"]</p>

 <h4>@Localizer["H4"]</h4>

@ -54,7 +54,7 @@
 </DemoBlock>

 <DemoBlock Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]" Name="Async">
-    <Button Text="@Localizer["ButtonText"]" IsAsync="true" OnClick="GetAsyncString" Icon="fa fa-fa" />
+    <Button Text="@Localizer["ButtonText"]" IsAsync="true" OnClick="GetAsyncString" Icon="fa fa-fa" class="mb-3" />
    <Markdown @bind-Value="@AsyncValue"></Markdown>
 </DemoBlock>

@ -63,34 +63,26 @@
    <Markdown Height="500" MinHeight="300" Placeholder="@Localizer["PlaceHolder"]" PreviewStyle="PreviewStyle.Tab" InitialEditType="InitialEditType.Wysiwyg" Language="@Language"></Markdown>
 </DemoBlock>

-<DemoBlock Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]" Name="Browser">
+<DemoBlock Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]" Name="IsViewer">
    <p>@((MarkupString)Localizer["P7"].Value)</p>
    <Markdown IsViewer="true" Value="# Viewer Mode"></Markdown>
 </DemoBlock>

-<DemoBlock Title="暗黑模式" Introduction="启用暗黑模式" Name="Browser">
+<DemoBlock Title="暗黑模式" Introduction="启用暗黑模式" Name="IsDark">
    <Markdown IsDark="true" Value="# Dark Mode"></Markdown>
 </DemoBlock>

-<h3>启用插件</h3>
-<p>启用插件需要引入插件对应的css和js文件</p>
-
-<p>代码高亮插件：</p>
-<p>引入</p>
-
-<Pre>&lt;link rel="stylesheet" href="_content/BootstrapBlazor.Markdown/css/bootstrap.blazor.markdown.highlight.min.css" /&gt;</Pre>
-
-<Pre>&lt;script src="_content/BootstrapBlazor.Markdown/js/bootstrap.blazor.markdown.highlight.min.js"&gt;&lt;/script&gt;</Pre>
-
-<DemoBlock Title="启用代码高亮插件" Introduction="使用<code>EnableHighlight=true</code>启用插件，使用```后加代码格式的方式使用高亮，如```js 则使用js高亮语法" Name="Browser">
+<DemoBlock Title="启用代码高亮插件" Introduction="使用 <code>EnableHighlight=true</code> 启用插件，使用```后加代码格式的方式使用高亮，如```js 则使用 js 高亮语法" Name="EnableHighlight">
    <Markdown EnableHighlight="true" Value="@JsString"></Markdown>
 </DemoBlock>

-<DemoBlock Title="外部操作Markdown" Introduction="使用Api从外部操作Editor，具体的Api参照<a href='https://nhn.github.io/tui.editor/latest/ToastUIEditorCore'>tui.editor api</a>" Name="Browser">
+<DemoBlock Title="外部操作 Markdown" Introduction="使用 Api 从外部操作 Editor，具体的Api参照 <a href='https://nhn.github.io/tui.editor/latest/ToastUIEditorCore'>tui.editor api</a>" Name="Browser">
    <Markdown @ref="Markdown"></Markdown>
-    <Button OnClick="@(() => Markdown.DoMethodAsync("insertText", "# test"))">插入一行文字</Button>
-    <Button OnClick="@(() => Markdown.DoMethodAsync("insertText", "![椰子树](https://i.niupic.com/images/2022/04/01/9Y6T.jpg)"))">插入一张图片</Button>
-    <Button OnClick="@(() => Markdown.DoMethodAsync("moveCursorToEnd"))">光标移动到最后</Button>
+    <div class="mt-3">
+        <Button OnClick="@(() => Markdown.DoMethodAsync("insertText", "# test"))">插入一行文字</Button>
+        <Button OnClick="@(() => Markdown.DoMethodAsync("insertText", "![椰子树](https://i.niupic.com/images/2022/04/01/9Y6T.jpg)"))">插入一张图片</Button>
+        <Button OnClick="@(() => Markdown.DoMethodAsync("moveCursorToEnd"))">光标移动到最后</Button>
+    </div>
 </DemoBlock>

 <AttributeTable Items="GetAttributes()"></AttributeTable>
--- a/src/Extensions/Components/BootstrapBlazor.Markdown/BootstrapBlazor.Markdown.csproj
+++ b/src/Extensions/Components/BootstrapBlazor.Markdown/BootstrapBlazor.Markdown.csproj
@ -3,7 +3,7 @@
  <Import Project="..\..\..\bundleconfig.props" />

  <PropertyGroup>
-    <Version>6.0.3</Version>
+    <Version>6.1.0</Version>
  </PropertyGroup>

  <PropertyGroup>
--- a/src/Extensions/Components/BootstrapBlazor.Markdown/Components/Markdown/Markdown.js
+++ b/src/Extensions/Components/BootstrapBlazor.Markdown/Components/Markdown/Markdown.js
@ -1,53 +1,47 @@
-/*!
- * Markdown : Argo@163.com
- * @version 5.1.0
- */
+export function bb_markdown(el, obj, value, method) {
+    // 自动加载样式
+    BootstrapBlazorModules.addLink('_content/BootstrapBlazor.Markdown/css/bootstrap.blazor.markdown.min.css');

-(function ($) {
-    $.extend({
-        bb_markdown: function (el, obj, value, method) {
-            var $el = $(el);
-            if (method === "setMarkdown") {
-                //$el.toastuiEditor('setMarkdown', value);
-                var editor = $.data(el, 'editor');
-                editor.setMarkdown(value);
+    var $el = $(el);
+    if (method === "setMarkdown") {
+        var editor = $.data(el, 'editor');
+        editor.setMarkdown(value);
+    }
+    else {
+        $.extend(value, {
+            events: {
+                blur: function () {
+                    var editor = $.data(el, 'editor');
+                    var val = editor.getMarkdown();
+                    var html = editor.getHTML();
+                    obj.invokeMethodAsync(method, [val, html]);
+                }
            }
-            else {
-                $.extend(value, {
-                    events: {
-                        blur: function () {
-                            var editor = $.data(el, 'editor');
-                            var val = editor.getMarkdown();
-                            var html = editor.getHTML();
-                            obj.invokeMethodAsync(method, [val, html]);
-                        }
-                    }
-                });
+        });

-                // 修复弹窗内初始化值不正确问题
-                var handler = window.setInterval(function () {
-                    if ($el.is(':visible')) {
-                        window.clearInterval(handler);
-                        value.el = el;
-                        value.plugins = [];
-                        if (value.enableHighlight) {
-                            value.plugins.push(toastui.Editor.plugin.codeSyntaxHighlight);
-                        }
-                        delete value.enableHighlight;
-                        const editor = toastui.Editor.factory(value);
-                        $.data(el, 'editor', editor);
-                    }
-                }, 100);
+        // 修复弹窗内初始化值不正确问题
+        var handler = window.setInterval(function () {
+            if ($el.is(':visible')) {
+                window.clearInterval(handler);
+                value.el = el;
+                value.plugins = [];
+                if (value.enableHighlight) {
+                    value.plugins.push(toastui.Editor.plugin.codeSyntaxHighlight);
+                }
+                delete value.enableHighlight;
+                const editor = toastui.Editor.factory(value);
+                $.data(el, 'editor', editor);
            }
-        },
-        bb_markdown_method: function (el, obj, method, parameter) {
-            var editor = $.data(el, 'editor');
-            if (editor) {
-                editor[method](...parameter);
-                var val = editor.getMarkdown();
-                var html = editor.getHTML();
-                obj.invokeMethodAsync('Update', [val, html]);
-            }
-        }
-    });
-})(jQuery);
+        }, 100);
+    }
+};
+
+export function bb_markdown_method(el, obj, method, parameter) {
+    var editor = $.data(el, 'editor');
+    if (editor) {
+        editor[method](...parameter);
+        var val = editor.getMarkdown();
+        var html = editor.getHTML();
+        obj.invokeMethodAsync('Update', [val, html]);
+    }
+}
--- a/src/Extensions/Components/BootstrapBlazor.Markdown/Components/Markdown/Markdown.min.js
+++ b/src/Extensions/Components/BootstrapBlazor.Markdown/Components/Markdown/Markdown.min.js
@ -1,5 +1 @@
-/*!
- * Markdown : Argo@163.com
- * @version 5.1.0
- */
-(function(n){n.extend({bb_markdown:function(t,i,r,u){var o=n(t),f,e;u==="setMarkdown"?(f=n.data(t,"editor"),f.setMarkdown(r)):(n.extend(r,{events:{blur:function(){var r=n.data(t,"editor"),f=r.getMarkdown(),e=r.getHTML();i.invokeMethodAsync(u,[f,e])}}}),e=window.setInterval(function(){if(o.is(":visible")){window.clearInterval(e);r.el=t;r.plugins=[];r.enableHighlight&&r.plugins.push(toastui.Editor.plugin.codeSyntaxHighlight);delete r.enableHighlight;const i=toastui.Editor.factory(r);n.data(t,"editor",i)}},100))},bb_markdown_method:function(t,i,r,u){var f=n.data(t,"editor"),e,o;f&&(f[r](...u),e=f.getMarkdown(),o=f.getHTML(),i.invokeMethodAsync("Update",[e,o]))}})})(jQuery);
+export function bb_markdown(n,t,i,r){var u,f,e;BootstrapBlazorModules.addLink("_content/BootstrapBlazor.Markdown/css/bootstrap.blazor.markdown.min.css");u=$(n);r==="setMarkdown"?(f=$.data(n,"editor"),f.setMarkdown(i)):($.extend(i,{events:{blur:function(){var i=$.data(n,"editor"),u=i.getMarkdown(),f=i.getHTML();t.invokeMethodAsync(r,[u,f])}}}),e=window.setInterval(function(){if(u.is(":visible")){window.clearInterval(e);i.el=n;i.plugins=[];i.enableHighlight&&i.plugins.push(toastui.Editor.plugin.codeSyntaxHighlight);delete i.enableHighlight;const t=toastui.Editor.factory(i);$.data(n,"editor",t)}},100))}export function bb_markdown_method(n,t,i,r){var u=$.data(n,"editor"),f,e;u&&(u[i](...r),f=u.getMarkdown(),e=u.getHTML(),t.invokeMethodAsync("Update",[f,e]))}
--- a/src/Extensions/Components/BootstrapBlazor.Markdown/Components/Markdown/Markdown.razor.cs
+++ b/src/Extensions/Components/BootstrapBlazor.Markdown/Components/Markdown/Markdown.razor.cs
@ -11,7 +11,7 @@ namespace BootstrapBlazor.Components;
 /// <summary>
 /// Markdown 组件
 /// </summary>
-public partial class Markdown : IDisposable
+public partial class Markdown : IAsyncDisposable
 {
    /// <summary>
    /// 获得/设置 DOM 元素实例
@ -54,11 +54,23 @@ public partial class Markdown : IDisposable
    [Parameter]
    public string? Placeholder { get; set; }

+    private string? _value;
    /// <summary>
    /// 获得/设置 组件值
    /// </summary>
    [Parameter]
-    public string? Value { get; set; }
+    public string? Value
+    {
+        get => _value;
+        set
+        {
+            if (_value != value)
+            {
+                _value = value;
+                IsRender = true;
+            }
+        }
+    }

    /// <summary>
    /// 获得/设置 组件值回调
@ -96,12 +108,16 @@ public partial class Markdown : IDisposable
    [Parameter]
    public bool EnableHighlight { get; set; } = false;

+    [NotNull]
    private JSInterop<Markdown>? Interop { get; set; }

    private readonly MarkdownOption _markdownOption = new();

    private bool IsRender { get; set; }

+    [NotNull]
+    private JSModule? Module { get; set; }
+
    /// <summary>
    /// OnInitialized 方法
    /// </summary>
@ -121,16 +137,6 @@ public partial class Markdown : IDisposable
        _markdownOption.EnableHighlight = EnableHighlight;
    }

-    /// <summary>
-    /// OnParametersSetAsync 方法
-    /// </summary>
-    protected override void OnParametersSet()
-    {
-        base.OnParametersSet();
-
-        IsRender = true;
-    }
-
    /// <summary>
    /// OnAfterRenderAsync 方法
    /// </summary>
@ -143,22 +149,17 @@ public partial class Markdown : IDisposable
        if (firstRender)
        {
            IsRender = false;
-            if (Interop == null)
-            {
-                Interop = new JSInterop<Markdown>(JSRuntime);
-            }
-
-            await Interop.InvokeVoidAsync(this, MarkdownElement, "bb_markdown", _markdownOption, nameof(Update));
+            Interop = new JSInterop<Markdown>(JSRuntime);
+            var jSObjectReference = await JSRuntime.InvokeAsync<IJSObjectReference>(identifier: "import", $"./_content/BootstrapBlazor.Markdown/js/bootstrap.blazor.markdown.min.js");
+            Module = new JSModule(jSObjectReference);
+            await Module.InvokeVoidAsync("bb_markdown", MarkdownElement, Interop, _markdownOption, nameof(Update));
+            //await Interop.InvokeVoidAsync(this, MarkdownElement, "bb_markdown", _markdownOption, nameof(Update));
        }

        if (IsRender)
        {
-            if (Interop == null)
-            {
-                Interop = new JSInterop<Markdown>(JSRuntime);
-            }
-
-            await Interop.InvokeVoidAsync(this, MarkdownElement, "bb_markdown", Value ?? "", "setMarkdown");
+            await Module.InvokeVoidAsync("bb_markdown", MarkdownElement, Interop, Value ?? "", "setMarkdown");
+            //await Interop.InvokeVoidAsync(this, MarkdownElement, "bb_markdown", Value ?? "", "setMarkdown");
        }
    }

@ -200,34 +201,34 @@ public partial class Markdown : IDisposable
    /// <param name="method"></param>
    /// <param name="parameters"></param>
    /// <returns></returns>
-    public async ValueTask DoMethodAsync(string method, params object[] parameters)
-    {
-        if (Interop == null)
-        {
-            Interop = new JSInterop<Markdown>(JSRuntime);
-        }
-        await Interop.InvokeVoidAsync(this, MarkdownElement, "bb_markdown_method", method, parameters);
-    }
+    public ValueTask DoMethodAsync(string method, params object[] parameters) => Module.InvokeVoidAsync("bb_markdown_method", MarkdownElement, Interop, method, parameters);

    /// <summary>
    /// Dispose 方法
    /// </summary>
    /// <param name="disposing"></param>
-    protected virtual void Dispose(bool disposing)
+    protected virtual async ValueTask DisposeAsync(bool disposing)
    {
        if (disposing)
        {
-            Interop?.Dispose();
-            Interop = null;
+            if (Interop != null)
+            {
+                Interop.Dispose();
+                Interop = null;
+            }
+            if (Module != null)
+            {
+                await Module.DisposeAsync();
+            }
        }
    }

    /// <summary>
    /// Dispose 方法
    /// </summary>
-    public void Dispose()
+    public async ValueTask DisposeAsync()
    {
-        Dispose(true);
+        await DisposeAsync(true);
        GC.SuppressFinalize(this);
    }
 }
--- a/src/Extensions/Components/BootstrapBlazor.Markdown/wwwroot/js/bootstrap.blazor.markdown.min.js
+++ b/src/Extensions/Components/BootstrapBlazor.Markdown/wwwroot/js/bootstrap.blazor.markdown.min.js