feat(cherry-markdown): add IsSupportMath parameter (#470)

* update

* chore: bump version 9.0.1

Co-Authored-By: j4587698 <24642446+j4587698@users.noreply.github.com>

* chore: 增加字库

* refactor: 移除 Option 配置类

---------

Co-authored-by: Argo Zhang <argo@live.ca>
Co-authored-by: j4587698 <24642446+j4587698@users.noreply.github.com>

Author: j4587698

src/components/BootstrapBlazor.CherryMarkdown/BootstrapBlazor.CherryMarkdown.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.0.0</Version>
+    <Version>9.0.1</Version>
   </PropertyGroup>
 
   <PropertyGroup>

src/components/BootstrapBlazor.CherryMarkdown/Components/CherryMarkdown/CherryMarkdown.razor.cs

@@ -11,8 +11,6 @@ namespace BootstrapBlazor.Components;
 /// </summary>
 public partial class CherryMarkdown
 {
-    private CherryMarkdownOption Option { get; } = new();
-
     /// <summary>
     /// 获得/设置 编辑器设置
     /// </summary>
@@ -25,6 +23,12 @@ public partial class CherryMarkdown
     [Parameter]
     public ToolbarSettings? ToolbarSettings { get; set; }
 
+    /// <summary>
+    /// 获得/ 设置 是否使用 Katex 渲染数学公式 默认 true
+    /// </summary>
+    [Parameter]
+    public bool IsSupportMath { get; set; } = true;
+
     private string? _lastValue;
     /// <summary>
     /// 获得/设置 组件值
@@ -60,27 +64,7 @@ public partial class CherryMarkdown
     /// 获取/设置 组件是否为浏览器模式
     /// </summary>
     [Parameter]
-    public bool? IsViewer { get; set; }
-
-    /// <summary>
-    /// OnInitialized 方法
-    /// </summary>
-    protected override void OnInitialized()
-    {
-        base.OnInitialized();
-
-        _lastValue = Value;
-        Option.Value = Value;
-        Option.Editor = EditorSettings ?? new EditorSettings();
-        Option.Toolbars = ToolbarSettings ?? new ToolbarSettings();
-        if (IsViewer == true)
-        {
-            Option.Editor.DefaultModel = "previewOnly";
-            Option.Toolbars.Toolbar = false;
-        }
-
-        _lastValue = Value;
-    }
+    public bool IsViewer { get; set; }
 
     /// <summary>
     /// <inheritdoc/>
@@ -91,6 +75,12 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         await base.OnAfterRenderAsync(firstRender);
 
+        if (firstRender)
+        {
+            _lastValue = Value;
+            return;
+        }
+
         if (Value != _lastValue)
         {
             _lastValue = Value;
@@ -102,7 +92,9 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     /// <inheritdoc/>
     /// </summary>
     /// <returns></returns>
-    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, Option, nameof(Upload));
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop,
+        new { Value, IsSupportMath, IsViewer, Editor = EditorSettings ?? new(), Toolbars = ToolbarSettings ?? new() },
+        nameof(Upload));
 
     /// <summary>
     /// 文件上传回调
@@ -111,7 +103,6 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     [JSInvokable]
     public async Task<string> Upload(CherryMarkdownUploadFile uploadFile)
     {
-#if NET6_0_OR_GREATER
         var ret = "";
         if (Module != null)
         {
@@ -127,10 +118,6 @@ public async Task<string> Upload(CherryMarkdownUploadFile uploadFile)
             }
         }
         return ret;
-#else
-        await Task.Yield();
-        throw new NotSupportedException();
-#endif
     }
 
     /// <summary>

src/components/BootstrapBlazor.CherryMarkdown/Components/CherryMarkdown/CherryMarkdown.razor.js

@@ -1,86 +1,100 @@
-import '../../js/cherry-markdown.min.js'
-import { addLink } from '../../../BootstrapBlazor/modules/utility.js'
+import '../../js/cherry-markdown.core.js'
+import { addLink, addScript } from '../../../BootstrapBlazor/modules/utility.js'
 import Data from '../../../BootstrapBlazor/modules/data.js'
 
-export async function init(id, invoker, options, callback) {
-    await addLink('./_content/BootstrapBlazor.CherryMarkdown/css/cherry-markdown.min.css')
-
+export async function init(id, invoke, options, callback) {
     const el = document.getElementById(id);
     if (el === null) {
         return;
     }
-    const md = {}
-    Data.set(id, md)
-
-    md._invoker = invoker
-    md._invokerMethod = callback
-    md._element = el
-    md._options = options
 
-    if (md._options.toolbars.toolbar === null) {
-        delete md._options.toolbars.toolbar
-    }
-    if (md._options.toolbars.bubble === null) {
-        delete md._options.toolbars.bubble
+    await addLink('./_content/BootstrapBlazor.CherryMarkdown/css/cherry-markdown.min.css')
+    if (options.isSupportMath) {
+        await addScript('./_content/BootstrapBlazor.CherryMarkdown/js/katex.min.js')
+        await addLink('./_content/BootstrapBlazor.CherryMarkdown/css/katex.min.css')
+        options.engine = {
+            syntax: {
+                mathBlock: { engine: 'katex', },
+                inlineMath: { engine: 'katex' }
+            }
+        }
+        options.externals = { katex: window.katex };
+        delete options.isSupportMath;
     }
-    if (md._options.toolbars.float === null) {
-        delete md._options.toolbars.float
+    if (options.isViewer) {
+        options.editor.defaultModel = 'previewOnly';
+        options.toolbars.Toolbar = false;
     }
 
-    const fileUpload = (file, callback) => {
-        md._file = file
-        md._invoker.invokeMethodAsync(md._invokerMethod, {
+    const fileUpload = (file, cb) => {
+        md.file = file
+        invoke.invokeMethodAsync(callback, {
             fileName: file.name,
             fileSize: file.size,
             contentType: file.type,
             lastModified: new Date(file.lastModified).toISOString(),
         }).then(data => {
             if (data !== "") {
-                callback(data)
+                cb(data)
             }
         })
     }
 
-    md._editor = new Cherry({
-        el: md._element,
-        value: md._options.value,
-        editor: md._options.editor,
-        toolbars: md._options.toolbars,
+    options.editor = {
+        theme: 'Default',
+        height: '100%',
+        defaultModel: 'edit&preview',
+        convertWhenPaste: true,
+        ...options.editor
+    }
+
+    const op = {
+        el,
+        ...options,
         callback: {
             afterChange: (markdown, html) => {
-                md._invoker.invokeMethodAsync('Update', [markdown, html])
+                invoke.invokeMethodAsync('Update', [markdown, html])
             }
         },
         fileUpload: fileUpload
-    });
+    };
+    const editor = new Cherry(op);
+    const md = { invoke, editor };
+    Data.set(id, md);
 }
 
 export function update(id, val) {
-    const md = Data.get(id)
-    md._editor.setMarkdown(val, true)
+    const md = Data.get(id);
+    const { editor } = md;
+    if (md) {
+        editor.setMarkdown(val, true)
+    }
 }
 
 export function fetch(id) {
     const md = Data.get(id)
-    return md._file
+    const { file } = md;
+    return file
 }
 
 export function invoke(id, method, parameters) {
     const md = Data.get(id)
+    const { editor, invoke } = md;
+
     if (method.indexOf('.') < 0) {
-        md._editor[method](...parameters)
+        editor[method](...parameters)
     }
     else {
         const methods = method.split('.');
-        let m = md._editor[methods[0]];
+        let m = editor[methods[0]];
         for (let i = 1; i < methods.length; i++) {
             m = m[methods[i]]
         }
         m(...parameters);
     }
-    const val = md._editor.getMarkdown();
-    const html = md._editor.getHtml();
-    md._invoker.invokeMethodAsync('Update', [val, html]);
+    const val = editor.getMarkdown();
+    const html = editor.getHtml();
+    invoke.invokeMethodAsync('Update', [val, html]);
 }
 
 export function dispose(id) {

src/components/BootstrapBlazor.CherryMarkdown/Components/CherryMarkdown/CherryMarkdownOption.cs

@@ -2,6 +2,8 @@
 // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
 // Website: https://www.blazor.zone or https://argozhang.github.io/
 
+using System.Text.Json.Serialization;
+
 namespace BootstrapBlazor.Components;
 
 /// <summary>
@@ -12,23 +14,27 @@ public class EditorSettings
     /// <summary>
     /// CodeMirror主题，默认为 default
     /// </summary>
-    public string Theme { get; set; } = "default";
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public string? Theme { get; set; }
 
     /// <summary>
     /// 编辑器高度，默认为100%
     /// </summary>
-    public string Height { get; set; } = "100%";
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public string? Height { get; set; }
 
     /// <summary>
     /// 编辑器显示模式
     /// edit&amp;preview: 双栏编辑预览模式，默认值
     /// editOnly: 只显示编辑器
     /// previewOnly: 预览模式
     /// </summary>
-    public string DefaultModel { get; set; } = "edit&preview";
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public string? DefaultModel { get; set; }
 
     /// <summary>
-    /// 粘贴Html时自动转换为Markdown格式
+    /// 粘贴 Html 时自动转换为 Markdown 格式
     /// </summary>
-    public bool ConvertWhenPaste { get; set; } = true;
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public bool? ConvertWhenPaste { get; set; }
 }

src/components/BootstrapBlazor.CherryMarkdown/Components/CherryMarkdown/EditorSettings.cs

@@ -2,6 +2,8 @@
 // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
 // Website: https://www.blazor.zone or https://argozhang.github.io/
 
+using System.Text.Json.Serialization;
+
 namespace BootstrapBlazor.Components;
 
 /// <summary>
@@ -12,20 +14,24 @@ public class ToolbarSettings
     /// <summary>
     /// 主题，light 、dark（默认值）
     /// </summary>
-    public string Theme { get; set; } = "dark";
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public string? Theme { get; set; }
 
     /// <summary>
     /// 自定义工具栏按钮，null则为默认工具栏，false则不显示工具栏
     /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
     public object? Toolbar { get; set; }
 
     /// <summary>
     /// 选中后的悬浮菜单，null为默认悬浮菜单，false则不显示悬浮菜单
     /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
     public object? Bubble { get; set; }
 
     /// <summary>
     /// 新行的悬浮菜单，null为默认悬浮菜单，false则不显示悬浮菜单
     /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
     public object? Float { get; set; }
 }