feat: 增加 Vditor 组件

Author: ArgoZhang

src/components/BootstrapBlazor.Vditor/BootstrapBlazor.Vditor.csproj

@@ -0,0 +1,20 @@
+<Project Sdk="Microsoft.NET.Sdk.Razor">
+
+  <PropertyGroup>
+    <Version>9.0.0</Version>
+  </PropertyGroup>
+
+  <PropertyGroup>
+    <PackageTags>Bootstrap Blazor WebAssembly wasm UI Components Vditor Markdown</PackageTags>
+    <Description>Bootstrap UI components extensions of Vditor Markdown</Description>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="BootstrapBlazor" Version="$(BBVersion)" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Using Include="Microsoft.JSInterop" />
+  </ItemGroup>
+
+</Project>

src/components/BootstrapBlazor.Vditor/Vditor.razor

@@ -0,0 +1,5 @@
+@namespace BootstrapBlazor.Components
+@inherits ValidateBase<string>
+@attribute [JSModuleAutoLoader("./_content/BootstrapBlazor.Vditor/Vditor.razor.js", JSObjectReference = true)]
+
+<div @attributes="@AdditionalAttributes" class="@ClassString" id="@Id"></div>

src/components/BootstrapBlazor.Vditor/Vditor.razor.cs

@@ -0,0 +1,71 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// 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 Microsoft.AspNetCore.Components;
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// Vditor component
+/// </summary>
+public partial class Vditor
+{
+    /// <summary>
+    /// 获得/设置 组件 <see cref="VditorOptions"/> 实例 默认 null
+    /// </summary>
+    [Parameter]
+    public VditorOptions? Options { get; set; }
+
+    private string? ClassString => CssBuilder.Default("bb-vditor")
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+
+    private string? _lastValue;
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="firstRender"></param>
+    /// <returns></returns>
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await base.OnAfterRenderAsync(firstRender);
+
+        if (firstRender)
+        {
+            _lastValue = Value;
+            return;
+        }
+
+        if (_lastValue != Value)
+        {
+            _lastValue = Value;
+            await InvokeVoidAsync("update", Id, Value);
+        }
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, new
+    {
+        Options,
+        Value,
+        TriggerUpdateValueAsync = nameof(TriggerUpdateValueAsync)
+    });
+
+    /// <summary>
+    /// 触发 Value 值改变回调方法由 JavaScript 调用
+    /// </summary>
+    /// <param name="value"></param>
+    /// <returns></returns>
+    [JSInvokable]
+    public Task TriggerUpdateValueAsync(string value)
+    {
+        CurrentValue = value;
+        return Task.CompletedTask;
+    }
+}
+

src/components/BootstrapBlazor.Vditor/Vditor.razor.js

@@ -0,0 +1,34 @@
+import { addLink, addScript } from '../BootstrapBlazor/modules/utility.js';
+import Data from '../BootstrapBlazor/modules/data.js';
+
+export async function init(id, invoke, options) {
+    const el = document.getElementById(id);
+    if (el === null) {
+        return;
+    }
+
+    await addLink('./_content/BootstrapBlazor.Vditor/css/index.css');
+    await addScript('./_content/BootstrapBlazor.Vditor/js/vditor.js');
+
+    const { options: op, value } = options;
+    const vditor = new Vditor(id, getOptions({ ...op, value }));
+
+    Data.set(id, { el, invoke, vditor });
+}
+
+const getOptions = options => {
+    return {
+        cache: {
+            enable: false,
+        },
+        ...options
+    };
+}
+
+export async function update(id, value) {
+
+}
+
+export function dispose(id) {
+
+}

src/components/BootstrapBlazor.Vditor/VditorIconStyle.cs

@@ -0,0 +1,21 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// 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/
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// 图标风格
+/// </summary>
+public enum VditorIconStyle
+{
+    /// <summary>
+    /// ant
+    /// </summary>
+    Ant,
+
+    /// <summary>
+    /// material
+    /// </summary>
+    Material
+}

src/components/BootstrapBlazor.Vditor/VditorMode.cs

@@ -0,0 +1,26 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// 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/
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// 编辑器渲染模式
+/// </summary>
+public enum VditorMode
+{
+    /// <summary>
+    /// 所见即所得
+    /// </summary>
+    WYSIWYG,
+
+    /// <summary>
+    /// 即使渲染
+    /// </summary>
+    IR,
+
+    /// <summary>
+    /// 左右分屏
+    /// </summary>
+    SV
+}

src/components/BootstrapBlazor.Vditor/VditorOptions.cs

@@ -0,0 +1,83 @@
+using System.Text.Json.Serialization;
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// Vditor 配置类
+/// </summary>
+public class VditorOptions
+{
+    /// <summary>
+    /// 获得/设置 编辑器模式。默认 <see cref="VditorMode.IR"/>
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingDefault)]
+    [JsonEnumConverter(camelCase: true)]
+    public VditorMode Mode { get; set; } = VditorMode.IR;
+
+    /// <summary>
+    /// 获得/设置 显示的语言。默认取当前 UI 文化信息
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public string? Language { get; set; }
+
+    /// <summary>
+    /// 获得/设置 图标风格
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingDefault)]
+    [JsonEnumConverter(camelCase: true)]
+    public VditorIconStyle IconStyle { get; set; }
+
+    /// <summary>
+    /// 获得/设置 是否输出日志。
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingDefault)]
+    public bool Debug { get; set; }
+
+    /// <summary>
+    /// 获得/设置 输入区域为空时的提示。
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public string? Placeholder { get; set; }
+
+    /// <summary>
+    /// 获得/设置 编辑器总宽度。
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public string? Width { get; set; }
+
+    /// <summary>
+    /// 获得/设置 编辑器总高度。
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public string? Height { get; set; }
+
+    /// <summary>
+    /// 获得/设置 编辑区域最小高度。
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public string? MinHeight { get; set; }
+
+    /// <summary>
+    /// 获得/设置 配置自建 CDN 地址。
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public string? CDN { get; set; }
+
+    /// <summary>
+    /// 获得/设置 按下 <c>tab</c> 键操作的字符串。
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public string? Tab { get; set; }
+
+    /// <summary>
+    /// 获得/设置 回撤的延迟时间。
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingDefault)]
+    public int UndoDelay { get; set; }
+
+    /// <summary>
+    /// 获得/设置 是否启用打字机模式。
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingDefault)]
+    public bool TypeWriterMode { get; set; }
+}

src/components/BootstrapBlazor.Vditor/_Imports.razor

@@ -0,0 +1,2 @@
+@using BootstrapBlazor.Components;
+@using Microsoft.AspNetCore.Components.Web