diff --git a/src/components/BootstrapBlazor.Vditor/BootstrapBlazor.Vditor.csproj b/src/components/BootstrapBlazor.Vditor/BootstrapBlazor.Vditor.csproj index 6735bf75..99cef9ec 100644 --- a/src/components/BootstrapBlazor.Vditor/BootstrapBlazor.Vditor.csproj +++ b/src/components/BootstrapBlazor.Vditor/BootstrapBlazor.Vditor.csproj @@ -1,7 +1,7 @@ - 10.0.2 + 10.0.3 diff --git a/src/components/BootstrapBlazor.Vditor/Vditor.razor.cs b/src/components/BootstrapBlazor.Vditor/Vditor.razor.cs index 3af80615..fed553f8 100644 --- a/src/components/BootstrapBlazor.Vditor/Vditor.razor.cs +++ b/src/components/BootstrapBlazor.Vditor/Vditor.razor.cs @@ -7,54 +7,63 @@ namespace BootstrapBlazor.Components; /// -/// Vditor markdown component +/// Vditor Markdown 组件 +/// Vditor markdown component /// public partial class Vditor { /// - /// 获得/设置 组件 实例 默认 null + /// 获得/设置 组件 实例 默认 null + /// Gets or sets the instance. Default is null. /// [Parameter] public VditorOptions? Options { get; set; } /// - /// 获得/设置 组件渲染完毕回调方法 默认 null + /// 获得/设置 组件渲染完毕回调方法 默认 null + /// Gets or sets the callback method when component rendering is complete. Default is null. /// [Parameter] public Func? OnRenderedAsync { get; set; } /// - /// 获得/设置 组件输入时回调方法 高频触发 默认 null + /// 获得/设置 组件输入时回调方法 高频触发 默认 null + /// Gets or sets the callback method on input. High frequency trigger. Default is null. /// [Parameter] public Func? OnInputAsync { get; set; } /// - /// 获得/设置 组件获得焦点时回调方法 默认 null + /// 获得/设置 组件获得焦点时回调方法 默认 null + /// Gets or sets the callback method when the component gains focus. Default is null. /// [Parameter] public Func? OnFocusAsync { get; set; } /// - /// 获得/设置 组件失去焦点时回调方法 默认 null + /// 获得/设置 组件失去焦点时回调方法 默认 null + /// Gets or sets the callback method when the component loses focus. Default is null. /// [Parameter] public Func? OnBlurAsync { get; set; } /// - /// 获得/设置 组件选择内容时回调方法 默认 null + /// 获得/设置 组件选择内容时回调方法 默认 null + /// Gets or sets the callback method when content is selected. Default is null. /// [Parameter] public Func? OnSelectAsync { get; set; } /// - /// 获得/设置 组件按 ESC 案件时回调方法 默认 null + /// 获得/设置 组件按 ESC 按键时回调方法 默认 null + /// Gets or sets the callback method when ESC key is pressed. Default is null. /// [Parameter] public Func? OnEscapeAsync { get; set; } /// - /// 获得/设置 组件按 Ctrl + Enter 组合案件时回调方法 默认 null + /// 获得/设置 组件按 Ctrl + Enter 组合按键时回调方法 默认 null + /// Gets or sets the callback method when Ctrl + Enter is pressed. Default is null. /// [Parameter] public Func? OnCtrlEnterAsync { get; set; } @@ -66,13 +75,11 @@ public partial class Vditor .Build(); private string? _lastValue; - private IJSObjectReference? _vditor; /// /// /// /// - /// protected override async Task OnAfterRenderAsync(bool firstRender) { await base.OnAfterRenderAsync(firstRender); @@ -85,141 +92,88 @@ protected override async Task OnAfterRenderAsync(bool firstRender) if (_lastValue != Value) { _lastValue = Value; - if (_vditor != null) - { - await _vditor.InvokeVoidAsync("setValue", Value, true); - } + await InvokeVoidAsync("execute", Id, "setValue", new object?[] { Value, true }); } } /// /// /// - /// - protected override async Task InvokeInitAsync() + protected override Task InvokeInitAsync() => InvokeAsync("init", Id, Interop, new { - _vditor = await InvokeAsync("init", Id, Interop, new - { - Options, - Value - }); - } + Options, + Value + }); /// - /// 重新设置编辑器方法 + /// 重新设置编辑器方法 + /// Resets the editor. /// /// /// - /// public async Task Reset(string value, VditorOptions options) { if (!string.IsNullOrEmpty(value)) { Value = value; } - _vditor = await InvokeAsync("reset", Id, Value, Options); + await InvokeVoidAsync("reset", Id, Value, Options); } /// - /// 在焦点处插入内容,并默认进行 Markdown 渲染 + /// 在焦点处插入内容 并默认进行 Markdown 渲染 + /// Inserts content at the cursor position and renders Markdown by default. /// - /// 要插入的 markdown 值 - /// 是否渲染 - public async ValueTask InsertValueAsync(string? value, bool render = true) - { - if (_vditor != null) - { - await _vditor.InvokeVoidAsync("insertValue", value, render); - } - } + /// + /// + public Task InsertValueAsync(string? value, bool render = true) => InvokeVoidAsync("execute", Id, "insertValue", new object?[] { value, render }); /// - /// 获取编辑器的 markdown 内容 + /// 获取编辑器的 Markdown 内容 + /// Gets the markdown content of the editor. /// - public async ValueTask GetValueAsync() - { - string? ret = null; - if (_vditor != null) - { - ret = await _vditor.InvokeAsync("getValue"); - } - return ret; - } + public Task GetValueAsync() => InvokeAsync("execute", Id, "getValue"); /// - /// 获取 markdown 渲染后的 HTML + /// 获取 Markdown 渲染后的 HTML + /// Gets the HTML rendered from markdown. /// - public async ValueTask GetHtmlAsync() - { - string? ret = null; - if (_vditor != null) - { - ret = await _vditor.InvokeAsync("getHTML"); - } - return ret; - } + public Task GetHtmlAsync() => InvokeAsync("execute", Id, "getHTML"); /// - /// 返回选中的字符串 + /// 获取 返回选中的字符串 + /// Returns the selected string. /// - public async ValueTask GetSelectionAsync() - { - string? ret = null; - if (_vditor != null) - { - ret = await _vditor.InvokeAsync("getSelection"); - } - return ret; - } + public Task GetSelectionAsync() => InvokeAsync("execute", Id, "getSelection"); /// - /// 解除编辑器禁用 + /// 解除编辑器禁用 + /// Enables the editor. /// - public async ValueTask EnableAsync() - { - if (_vditor != null) - { - await _vditor.InvokeVoidAsync("enable"); - } - } + public Task EnableAsync() => InvokeVoidAsync("execute", Id, "enable"); /// - /// 禁用编辑器 + /// 禁用编辑器 + /// Disables the editor. /// - public async ValueTask DisableAsync() - { - if (_vditor != null) - { - await _vditor.InvokeVoidAsync("disabled"); - } - } + public Task DisableAsync() => InvokeVoidAsync("execute", Id, "disabled"); /// - /// 聚焦编辑器 + /// 聚焦编辑器 + /// Focuses the editor. /// - public async ValueTask FocusAsync() - { - if (_vditor != null) - { - await _vditor.InvokeVoidAsync("focus"); - } - } + public Task FocusAsync() => InvokeVoidAsync("execute", Id, "focus"); /// - /// 让编辑器失去焦点 + /// 让编辑器失去焦点 + /// Blurs the editor. /// - public async ValueTask BlurAsync() - { - if (_vditor != null) - { - await _vditor.InvokeAsync("blur"); - } - } + public Task BlurAsync() => InvokeVoidAsync("execute", Id, "blur"); /// - /// 客户端渲染完毕回调方法由 JavaScript 调用 + /// 客户端渲染完毕回调方法 由 JavaScript 调用 + /// Callback when client rendering is complete. Called by JavaScript. /// - /// [JSInvokable] public async Task TriggerRenderedAsync() { @@ -230,10 +184,10 @@ public async Task TriggerRenderedAsync() } /// - /// 组件录入时回调方法由 JavaScript 调用 + /// 组件录入时回调方法 由 JavaScript 调用 + /// Callback when input occurs. Called by JavaScript. /// /// - /// [JSInvokable] public async Task TriggerInputAsync(string value) { @@ -247,10 +201,10 @@ public async Task TriggerInputAsync(string value) } /// - /// 触发 Value 值改变回调方法由 JavaScript 调用 + /// 触发焦点回调方法 由 JavaScript 调用 + /// Callback when focus is triggered. Called by JavaScript. /// /// - /// [JSInvokable] public async Task TriggerFocusAsync(string value) { @@ -261,10 +215,10 @@ public async Task TriggerFocusAsync(string value) } /// - /// 触发 Value 值改变回调方法由 JavaScript 调用 + /// 触发失焦回调方法 由 JavaScript 调用 + /// Callback when blur is triggered. Called by JavaScript. /// /// - /// [JSInvokable] public async Task TriggerBlurAsync(string value) { @@ -277,10 +231,10 @@ public async Task TriggerBlurAsync(string value) } /// - /// 触发 Value 值改变回调方法由 JavaScript 调用 + /// 触发选择回调方法 由 JavaScript 调用 + /// Callback when selection is triggered. Called by JavaScript. /// /// - /// [JSInvokable] public async Task TriggerSelectAsync(string value) { @@ -291,10 +245,10 @@ public async Task TriggerSelectAsync(string value) } /// - /// 触发 Value 值改变回调方法由 JavaScript 调用 + /// 触发 ESC 按键回调方法 由 JavaScript 调用 + /// Callback when ESC key is pressed. Called by JavaScript. /// /// - /// [JSInvokable] public async Task TriggerEscapeAsync(string value) { @@ -307,10 +261,10 @@ public async Task TriggerEscapeAsync(string value) } /// - /// 触发 Value 值改变回调方法由 JavaScript 调用 + /// 触发 Ctrl+Enter 组合按键回调方法 由 JavaScript 调用 + /// Callback when Ctrl+Enter is pressed. Called by JavaScript. /// /// - /// [JSInvokable] public async Task TriggerCtrlEnterAsync(string value) { @@ -321,23 +275,4 @@ public async Task TriggerCtrlEnterAsync(string value) await OnCtrlEnterAsync(value); } } - - /// - /// - /// - /// - /// - protected override async ValueTask DisposeAsync(bool disposing) - { - if (disposing) - { - if (_vditor != null) - { - await _vditor.DisposeAsync(); - _vditor = null; - } - - await base.DisposeAsync(disposing); - } - } } diff --git a/src/components/BootstrapBlazor.Vditor/Vditor.razor.js b/src/components/BootstrapBlazor.Vditor/Vditor.razor.js index c9563b09..33b1a068 100644 --- a/src/components/BootstrapBlazor.Vditor/Vditor.razor.js +++ b/src/components/BootstrapBlazor.Vditor/Vditor.razor.js @@ -15,7 +15,6 @@ export async function init(id, invoke, options) { const vditor = new Vditor(root, getOptions(invoke, { ...op, value })); Data.set(id, { el, invoke, vditor }); - return vditor; } const getOptions = (invoke, options) => { @@ -43,7 +42,20 @@ export async function reset(id, value, options) { const root = el.querySelector('.bb-vditor-container'); md.vditor = new Vditor(root, getOptions(invoke, { ...options, value })); } - return md.vditor; +} + +export function execute(id, method, args) { + console.log(method, args); + const md = Data.get(id); + const { vditor } = md; + let ret = ''; + if (vditor) { + var cb = vditor[method]; + if (cb) { + ret = cb.call(vditor, ...(args || [])); + } + } + return ret; } export function dispose(id) { diff --git a/src/components/BootstrapBlazor.Vditor/VditorIconStyle.cs b/src/components/BootstrapBlazor.Vditor/VditorIconStyle.cs index bcdc0389..6983c4dd 100644 --- a/src/components/BootstrapBlazor.Vditor/VditorIconStyle.cs +++ b/src/components/BootstrapBlazor.Vditor/VditorIconStyle.cs @@ -1,21 +1,24 @@ -// Copyright (c) Argo Zhang (argo@163.com). All rights reserved. +// 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; /// -/// 图标风格 +/// 图标风格 +/// Icon style /// public enum VditorIconStyle { /// - /// ant + /// Ant 风格 + /// Ant style /// Ant, /// - /// material + /// Material 风格 + /// Material style /// Material } diff --git a/src/components/BootstrapBlazor.Vditor/VditorMode.cs b/src/components/BootstrapBlazor.Vditor/VditorMode.cs index 3b0debee..efb3fdac 100644 --- a/src/components/BootstrapBlazor.Vditor/VditorMode.cs +++ b/src/components/BootstrapBlazor.Vditor/VditorMode.cs @@ -1,26 +1,30 @@ -// Copyright (c) Argo Zhang (argo@163.com). All rights reserved. +// 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; /// -/// 编辑器渲染模式 +/// 编辑器渲染模式 +/// Editor rendering mode /// public enum VditorMode { /// - /// 所见即所得 + /// 所见即所得 + /// What You See Is What You Get /// WYSIWYG, /// - /// 即使渲染 + /// 即时渲染 + /// Instant Rendering /// IR, /// - /// 左右分屏 + /// 左右分屏 + /// Split View /// SV } diff --git a/src/components/BootstrapBlazor.Vditor/VditorOptions.cs b/src/components/BootstrapBlazor.Vditor/VditorOptions.cs index 1f9e8780..b9ba4f2c 100644 --- a/src/components/BootstrapBlazor.Vditor/VditorOptions.cs +++ b/src/components/BootstrapBlazor.Vditor/VditorOptions.cs @@ -1,87 +1,101 @@ -using System.Text.Json.Serialization; +using System.Text.Json.Serialization; namespace BootstrapBlazor.Components; /// -/// Vditor 配置类 +/// Vditor 配置类 +/// Vditor configuration class /// public struct VditorOptions { /// - /// 构造函数 + /// 构造函数 + /// Constructor /// public VditorOptions() { } /// - /// 获得/设置 编辑器模式。默认 + /// 获得/设置 编辑器模式 默认 + /// Gets or sets the editor mode. Default is . /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingDefault)] [JsonEnumConverter(camelCase: true)] public VditorMode Mode { get; set; } = VditorMode.IR; /// - /// 获得/设置 显示的语言。默认取当前 UI 文化信息 + /// 获得/设置 显示的语言 默认取当前 UI 文化信息 + /// Gets or sets the display language. Default is current UI culture. /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public string? Language { get; set; } /// - /// 获得/设置 图标风格 + /// 获得/设置 图标风格 + /// Gets or sets the icon style. /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingDefault)] [JsonEnumConverter(camelCase: true)] public VditorIconStyle IconStyle { get; set; } /// - /// 获得/设置 是否输出日志。 + /// 获得/设置 是否输出日志 + /// Gets or sets whether to output logs. /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingDefault)] public bool Debug { get; set; } /// - /// 获得/设置 输入区域为空时的提示。 + /// 获得/设置 输入区域为空时的提示 + /// Gets or sets the placeholder when the input area is empty. /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public string? Placeholder { get; set; } /// - /// 获得/设置 编辑器总宽度。 + /// 获得/设置 编辑器总宽度 + /// Gets or sets the total width of the editor. /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public string? Width { get; set; } /// - /// 获得/设置 编辑器总高度。 + /// 获得/设置 编辑器总高度 + /// Gets or sets the total height of the editor. /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public string? Height { get; set; } /// - /// 获得/设置 编辑区域最小高度。 + /// 获得/设置 编辑区域最小高度 + /// Gets or sets the minimum height of the editing area. /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public string? MinHeight { get; set; } /// - /// 获得/设置 配置自建 CDN 地址。 + /// 获得/设置 自建 CDN 地址 + /// Gets or sets the custom CDN address. /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public string? CDN { get; set; } /// - /// 获得/设置 按下 tab 键操作的字符串。 + /// 获得/设置 按下 tab 键操作的字符串 + /// Gets or sets the string for the tab key operation. /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public string? Tab { get; set; } /// - /// 获得/设置 回撤的延迟时间。 + /// 获得/设置 回撤的延迟时间 + /// Gets or sets the undo delay time. /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingDefault)] public int UndoDelay { get; set; } /// - /// 获得/设置 是否启用打字机模式。 + /// 获得/设置 是否启用打字机模式 + /// Gets or sets whether to enable typewriter mode. /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingDefault)] public bool TypeWriterMode { get; set; }