feat: 完善组件功能

Author: ArgoZhang

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

@@ -7,7 +7,7 @@
 namespace BootstrapBlazor.Components;
 
 /// <summary>
-/// Vditor component
+/// Vditor markdown component
 /// </summary>
 public partial class Vditor
 {
@@ -17,11 +17,54 @@ public partial class Vditor
     [Parameter]
     public VditorOptions? Options { get; set; }
 
+    /// <summary>
+    /// 获得/设置 组件渲染完毕回调方法 默认 null
+    /// </summary>
+    [Parameter]
+    public Func<Task>? OnRenderedAsync { get; set; }
+
+    /// <summary>
+    /// 获得/设置 组件输入时回调方法 高频触发 默认 null
+    /// </summary>
+    [Parameter]
+    public Func<string, Task>? OnInputAsync { get; set; }
+
+    /// <summary>
+    /// 获得/设置 组件获得焦点时回调方法 默认 null
+    /// </summary>
+    [Parameter]
+    public Func<string, Task>? OnFocusAsync { get; set; }
+
+    /// <summary>
+    /// 获得/设置 组件失去焦点时回调方法 默认 null
+    /// </summary>
+    [Parameter]
+    public Func<string, Task>? OnBlurAsync { get; set; }
+
+    /// <summary>
+    /// 获得/设置 组件选择内容时回调方法 默认 null
+    /// </summary>
+    [Parameter]
+    public Func<string, Task>? OnSelectAsync { get; set; }
+
+    /// <summary>
+    /// 获得/设置 组件按 ESC 案件时回调方法 默认 null
+    /// </summary>
+    [Parameter]
+    public Func<string, Task>? OnEscapeAsync { get; set; }
+
+    /// <summary>
+    /// 获得/设置 组件按 Ctrl + Enter 组合案件时回调方法 默认 null
+    /// </summary>
+    [Parameter]
+    public Func<string, Task>? OnCtrlEnterAsync { get; set; }
+
     private string? ClassString => CssBuilder.Default("bb-vditor")
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
     private string? _lastValue;
+    private IJSObjectReference? _vditor;
 
     /// <summary>
     /// <inheritdoc/>
@@ -41,31 +84,258 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         if (_lastValue != Value)
         {
             _lastValue = Value;
-            await InvokeVoidAsync("update", Id, Value);
+            if (_vditor != null)
+            {
+                await _vditor.InvokeVoidAsync("setValue", Value, true);
+            }
         }
     }
 
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
     /// <returns></returns>
-    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, new
+    protected override async Task InvokeInitAsync()
+    {
+        _vditor = await InvokeAsync<IJSObjectReference>("init", Id, Interop, new
+        {
+            Options,
+            Value
+        });
+    }
+
+    /// <summary>
+    /// 重新设置编辑器方法
+    /// </summary>
+    /// <param name="value"></param>
+    /// <param name="options"></param>
+    /// <returns></returns>
+    public async Task Reset(string value, VditorOptions options)
+    {
+        if (!string.IsNullOrEmpty(value))
+        {
+            Value = value;
+        }
+        _vditor = await InvokeAsync<IJSObjectReference>("reset", Id, Value, Options);
+    }
+
+    /// <summary>
+    /// 在焦点处插入内容，并默认进行 Markdown 渲染
+    /// </summary>
+    /// <param name="value">要插入的 markdown 值</param>
+    /// <param name="render">是否渲染</param>
+    public async ValueTask InsertValueAsync(string? value, bool render = true)
     {
-        Options,
-        Value,
-        TriggerUpdateValueAsync = nameof(TriggerUpdateValueAsync)
-    });
+        if (_vditor != null)
+        {
+            await _vditor.InvokeVoidAsync("insertValue", Id, value, render);
+        }
+    }
+
+    /// <summary>
+    /// 获取编辑器的 markdown 内容
+    /// </summary>
+    public async ValueTask<string?> GetValueAsync()
+    {
+        string? ret = null;
+        if (_vditor != null)
+        {
+            ret = await _vditor.InvokeAsync<string?>("getValue");
+        }
+        return ret;
+    }
+
+    /// <summary>
+    /// 获取 markdown 渲染后的 HTML
+    /// </summary>
+    public async ValueTask<string?> GetHtmlAsync()
+    {
+        string? ret = null;
+        if (_vditor != null)
+        {
+            ret = await _vditor.InvokeAsync<string?>("getHTML");
+        }
+        return ret;
+    }
+
+    /// <summary>
+    /// 返回选中的字符串
+    /// </summary>
+    public async ValueTask<string?> GetSelectAsync()
+    {
+        string? ret = null;
+        if (_vditor != null)
+        {
+            ret = await _vditor.InvokeAsync<string?>("getSelection");
+        }
+        return ret;
+    }
+
+    /// <summary>
+    /// 解除编辑器禁用
+    /// </summary>
+    public async ValueTask EnableAsync()
+    {
+        if (_vditor != null)
+        {
+            await _vditor.InvokeVoidAsync("enable");
+        }
+    }
+
+    /// <summary>
+    /// 禁用编辑器
+    /// </summary>
+    public async ValueTask DisableAsync()
+    {
+        if (_vditor != null)
+        {
+            await _vditor.InvokeVoidAsync("disable");
+        }
+    }
+
+    /// <summary>
+    /// 聚焦编辑器
+    /// </summary>
+    public async ValueTask FocusAsync()
+    {
+        if (_vditor != null)
+        {
+            await _vditor.InvokeVoidAsync("focus");
+        }
+    }
+
+    /// <summary>
+    /// 让编辑器失去焦点
+    /// </summary>
+    public async ValueTask BlurAsync()
+    {
+        if (_vditor != null)
+        {
+            await _vditor.InvokeAsync<string?>("blur");
+        }
+    }
+
+    /// <summary>
+    /// 客户端渲染完毕回调方法由 JavaScript 调用
+    /// </summary>
+    /// <returns></returns>
+    [JSInvokable]
+    public async Task TriggerRenderedAsync()
+    {
+        if (OnRenderedAsync != null)
+        {
+            await OnRenderedAsync();
+        }
+    }
+
+    /// <summary>
+    /// 组件录入时回调方法由 JavaScript 调用
+    /// </summary>
+    /// <param name="value"></param>
+    /// <returns></returns>
+    [JSInvokable]
+    public async Task TriggerInputAsync(string value)
+    {
+        if (OnInputAsync != null)
+        {
+            _lastValue = value;
+            CurrentValue = value;
+            await OnInputAsync(value);
+        }
+    }
 
     /// <summary>
     /// 触发 Value 值改变回调方法由 JavaScript 调用
     /// </summary>
     /// <param name="value"></param>
     /// <returns></returns>
     [JSInvokable]
-    public Task TriggerUpdateValueAsync(string value)
+    public async Task TriggerFocusAsync(string value)
     {
-        CurrentValue = value;
-        return Task.CompletedTask;
+        if (OnFocusAsync != null)
+        {
+            await OnFocusAsync(value);
+        }
     }
-}
 
+    /// <summary>
+    /// 触发 Value 值改变回调方法由 JavaScript 调用
+    /// </summary>
+    /// <param name="value"></param>
+    /// <returns></returns>
+    [JSInvokable]
+    public async Task TriggerBlurAsync(string value)
+    {
+        if (OnBlurAsync != null)
+        {
+            _lastValue = value;
+            CurrentValue = value;
+            await OnBlurAsync(value);
+        }
+    }
+
+    /// <summary>
+    /// 触发 Value 值改变回调方法由 JavaScript 调用
+    /// </summary>
+    /// <param name="value"></param>
+    /// <returns></returns>
+    [JSInvokable]
+    public async Task TriggerSelectAsync(string value)
+    {
+        if (OnSelectAsync != null)
+        {
+            await OnSelectAsync(value);
+        }
+    }
+
+    /// <summary>
+    /// 触发 Value 值改变回调方法由 JavaScript 调用
+    /// </summary>
+    /// <param name="value"></param>
+    /// <returns></returns>
+    [JSInvokable]
+    public async Task TriggerEscapeAsync(string value)
+    {
+        if (OnEscapeAsync != null)
+        {
+            _lastValue = value;
+            CurrentValue = value;
+            await OnEscapeAsync(value);
+        }
+    }
+
+    /// <summary>
+    /// 触发 Value 值改变回调方法由 JavaScript 调用
+    /// </summary>
+    /// <param name="value"></param>
+    /// <returns></returns>
+    [JSInvokable]
+    public async Task TriggerCtrlEnterAsync(string value)
+    {
+        if (OnCtrlEnterAsync != null)
+        {
+            _lastValue = value;
+            CurrentValue = value;
+            await OnCtrlEnterAsync(value);
+        }
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="disposing"></param>
+    /// <returns></returns>
+    protected override async ValueTask DisposeAsync(bool disposing)
+    {
+        if (disposing)
+        {
+            if (_vditor != null)
+            {
+                await _vditor.DisposeAsync();
+                _vditor = null;
+            }
+
+            await base.DisposeAsync(disposing);
+        }
+    }
+}

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

@@ -11,24 +11,43 @@ export async function init(id, invoke, options) {
     await addScript('./_content/BootstrapBlazor.Vditor/js/vditor.js');
 
     const { options: op, value } = options;
-    const vditor = new Vditor(id, getOptions({ ...op, value }));
+    const vditor = new Vditor(id, getOptions(invoke, { ...op, value }));
 
     Data.set(id, { el, invoke, vditor });
+    return vditor;
 }
 
-const getOptions = options => {
+const getOptions = (invoke, options) => {
     return {
         cache: {
             enable: false,
         },
-        ...options
+        ...options,
+        after: () => invoke.invokeMethodAsync('TriggerRenderedAsync'),
+        input: value => invoke.invokeMethodAsync('TriggerInputAsync', value),
+        focus: value => invoke.invokeMethodAsync('TriggerFocusAsync', value),
+        blur: value => invoke.invokeMethodAsync('TriggerBlurAsync', value),
+        esc: value => invoke.invokeMethodAsync('TriggerEscapeAsync', value),
+        select: value => invoke.invokeMethodAsync('TriggerSelectAsync', value),
+        ctrlEnter: value => invoke.invokeMethodAsync('TriggerCtrlEnterAsync', value)
     };
 }
 
-export async function update(id, value) {
+export async function reset(id, value, options) {
+    const md = Data.get(id);
+    const { invoke, vditor } = md;
+    if (vditor) {
+        vditor.destroy();
 
+        md.vditor = new Vditor(id, getOptions(invoke, { ...options, value }));
+    }
+    return md.vditor;
 }
 
 export function dispose(id) {
-
+    const md = Data.get(id);
+    const { vditor } = md;
+    if (vditor) {
+        vditor.destroy();
+    }
 }

src/components/BootstrapBlazor.Vditor/VditorOptions.cs

@@ -5,8 +5,13 @@ namespace BootstrapBlazor.Components;
 /// <summary>
 /// Vditor 配置类
 /// </summary>
-public class VditorOptions
+public struct VditorOptions
 {
+    /// <summary>
+    /// 构造函数
+    /// </summary>
+    public VditorOptions() { }
+
     /// <summary>
     /// 获得/设置 编辑器模式。默认 <see cref="VditorMode.IR"/>
     /// </summary>