feat(CherryMarkdown): support validate in form (#663)

* chore: bump version 0.10.1

* chore: bump version 9.0.5

* refactor: 增加样式支持

* refactor: 支持 Valdiate

* refactor: 代码格式化

* refactor: 重构 Height 参数

Author: ArgoZhang

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

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

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

@@ -6,4 +6,4 @@
 {
     <BootstrapLabel required="@Required" for="@Id" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
 }
-<div @attributes="@AdditionalAttributes" id="@Id"></div>
+<div @attributes="@AdditionalAttributes" id="@Id" class="@ClassString"></div>

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

@@ -62,6 +62,11 @@ public partial class CherryMarkdown
     [Parameter]
     public string? Language { get; set; }
 
+    private string? ClassString => CssBuilder.Default("bb-cherry-markdown")
+        .AddClass(CssClass)
+        .AddClass(ValidCss)
+        .Build();
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -101,9 +106,15 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     /// <inheritdoc/>
     /// </summary>
     /// <returns></returns>
-    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop,
-        new { Value, IsSupportMath, IsViewer, Locale = Language, Editor = EditorSettings ?? new(), Toolbars = ToolbarSettings ?? new() },
-        nameof(Upload));
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, new
+    {
+        Value,
+        IsSupportMath,
+        IsViewer,
+        Locale = Language,
+        Editor = EditorSettings ?? new(),
+        Toolbars = ToolbarSettings ?? new()
+    }, nameof(Upload));
 
     /// <summary>
     /// 文件上传回调

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

@@ -1,4 +1,4 @@
-import '../../js/cherry-markdown.core.js'
+import '../../js/cherry-markdown.core.js'
 import { addLink, addScript } from '../../../BootstrapBlazor/modules/utility.js'
 import Data from '../../../BootstrapBlazor/modules/data.js'
 
@@ -8,7 +8,7 @@ export async function init(id, invoke, options, callback) {
         return;
     }
 
-    await addLink('./_content/BootstrapBlazor.CherryMarkdown/css/cherry-markdown.min.css')
+    await addLink('./_content/BootstrapBlazor.CherryMarkdown/css/cherry-markdown.css')
     if (options.isSupportMath) {
         await addScript('./_content/BootstrapBlazor.CherryMarkdown/js/katex.min.js')
         await addLink('./_content/BootstrapBlazor.CherryMarkdown/css/katex.min.css')
@@ -42,7 +42,7 @@ export async function init(id, invoke, options, callback) {
 
     options.editor = {
         theme: 'Default',
-        height: '100%',
+        height: "200px",
         defaultModel: 'edit&preview',
         convertWhenPaste: true,
         ...options.editor

src/components/BootstrapBlazor.CherryMarkdown/wwwroot/css/cherry-markdown.css

@@ -0,0 +1,18 @@
+@import url('cherry-markdown.min.css');
+
+.bb-cherry-markdown {
+}
+
+    .bb-cherry-markdown.is-valid {
+        border: 1px solid var(--bs-success);
+    }
+
+    .bb-cherry-markdown.is-invalid {
+        border: 1px solid var(--bs-danger);
+    }
+
+    .bb-cherry-markdown .cherry {
+        border: 1px solid var(--bs-border-color);
+        border-radius: var(--bs-border-radius);
+        overflow: hidden;
+    }