Skip to content

Commit 013e063

Browse files
ArgoZhangArgoZhang
authored
feat(Vditor): redesign javascript interop (#931)
* doc: 更新注释 * chore: bump version 10.0.3 * refactor: 增加 Id 参数 * refactor: 更正 Invoke 参数顺序 * feat: 增加 getResult 方法 * refactor: 精简代码 * refactor: 精简代码
1 parent ae471b0 commit 013e063

6 files changed

Lines changed: 126 additions & 158 deletions

File tree

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<Project Sdk="Microsoft.NET.Sdk.Razor">
22

33
<PropertyGroup>
4-
<Version>10.0.2</Version>
4+
<Version>10.0.3</Version>
55
</PropertyGroup>
66

77
<PropertyGroup>

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

Lines changed: 66 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -7,54 +7,63 @@
77
namespace BootstrapBlazor.Components;
88

99
/// <summary>
10-
/// Vditor markdown component
10+
/// <para lang="zh">Vditor Markdown 组件</para>
11+
/// <para lang="en">Vditor markdown component</para>
1112
/// </summary>
1213
public partial class Vditor
1314
{
1415
/// <summary>
15-
/// 获得/设置 组件 <see cref="VditorOptions"/> 实例 默认 null
16+
/// <para lang="zh">获得/设置 组件 <see cref="VditorOptions"/> 实例 默认 null</para>
17+
/// <para lang="en">Gets or sets the <see cref="VditorOptions"/> instance. Default is null.</para>
1618
/// </summary>
1719
[Parameter]
1820
public VditorOptions? Options { get; set; }
1921

2022
/// <summary>
21-
/// 获得/设置 组件渲染完毕回调方法 默认 null
23+
/// <para lang="zh">获得/设置 组件渲染完毕回调方法 默认 null</para>
24+
/// <para lang="en">Gets or sets the callback method when component rendering is complete. Default is null.</para>
2225
/// </summary>
2326
[Parameter]
2427
public Func<Task>? OnRenderedAsync { get; set; }
2528

2629
/// <summary>
27-
/// 获得/设置 组件输入时回调方法 高频触发 默认 null
30+
/// <para lang="zh">获得/设置 组件输入时回调方法 高频触发 默认 null</para>
31+
/// <para lang="en">Gets or sets the callback method on input. High frequency trigger. Default is null.</para>
2832
/// </summary>
2933
[Parameter]
3034
public Func<string, Task>? OnInputAsync { get; set; }
3135

3236
/// <summary>
33-
/// 获得/设置 组件获得焦点时回调方法 默认 null
37+
/// <para lang="zh">获得/设置 组件获得焦点时回调方法 默认 null</para>
38+
/// <para lang="en">Gets or sets the callback method when the component gains focus. Default is null.</para>
3439
/// </summary>
3540
[Parameter]
3641
public Func<string, Task>? OnFocusAsync { get; set; }
3742

3843
/// <summary>
39-
/// 获得/设置 组件失去焦点时回调方法 默认 null
44+
/// <para lang="zh">获得/设置 组件失去焦点时回调方法 默认 null</para>
45+
/// <para lang="en">Gets or sets the callback method when the component loses focus. Default is null.</para>
4046
/// </summary>
4147
[Parameter]
4248
public Func<string, Task>? OnBlurAsync { get; set; }
4349

4450
/// <summary>
45-
/// 获得/设置 组件选择内容时回调方法 默认 null
51+
/// <para lang="zh">获得/设置 组件选择内容时回调方法 默认 null</para>
52+
/// <para lang="en">Gets or sets the callback method when content is selected. Default is null.</para>
4653
/// </summary>
4754
[Parameter]
4855
public Func<string, Task>? OnSelectAsync { get; set; }
4956

5057
/// <summary>
51-
/// 获得/设置 组件按 ESC 案件时回调方法 默认 null
58+
/// <para lang="zh">获得/设置 组件按 ESC 按键时回调方法 默认 null</para>
59+
/// <para lang="en">Gets or sets the callback method when ESC key is pressed. Default is null.</para>
5260
/// </summary>
5361
[Parameter]
5462
public Func<string, Task>? OnEscapeAsync { get; set; }
5563

5664
/// <summary>
57-
/// 获得/设置 组件按 Ctrl + Enter 组合案件时回调方法 默认 null
65+
/// <para lang="zh">获得/设置 组件按 Ctrl + Enter 组合按键时回调方法 默认 null</para>
66+
/// <para lang="en">Gets or sets the callback method when Ctrl + Enter is pressed. Default is null.</para>
5867
/// </summary>
5968
[Parameter]
6069
public Func<string, Task>? OnCtrlEnterAsync { get; set; }
@@ -66,13 +75,11 @@ public partial class Vditor
6675
.Build();
6776

6877
private string? _lastValue;
69-
private IJSObjectReference? _vditor;
7078

7179
/// <summary>
7280
/// <inheritdoc/>
7381
/// </summary>
7482
/// <param name="firstRender"></param>
75-
/// <returns></returns>
7683
protected override async Task OnAfterRenderAsync(bool firstRender)
7784
{
7885
await base.OnAfterRenderAsync(firstRender);
@@ -85,141 +92,88 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
8592
if (_lastValue != Value)
8693
{
8794
_lastValue = Value;
88-
if (_vditor != null)
89-
{
90-
await _vditor.InvokeVoidAsync("setValue", Value, true);
91-
}
95+
await InvokeVoidAsync("execute", Id, "setValue", new object?[] { Value, true });
9296
}
9397
}
9498

9599
/// <summary>
96100
/// <inheritdoc/>
97101
/// </summary>
98-
/// <returns></returns>
99-
protected override async Task InvokeInitAsync()
102+
protected override Task InvokeInitAsync() => InvokeAsync<IJSObjectReference>("init", Id, Interop, new
100103
{
101-
_vditor = await InvokeAsync<IJSObjectReference>("init", Id, Interop, new
102-
{
103-
Options,
104-
Value
105-
});
106-
}
104+
Options,
105+
Value
106+
});
107107

108108
/// <summary>
109-
/// 重新设置编辑器方法
109+
/// <para lang="zh">重新设置编辑器方法</para>
110+
/// <para lang="en">Resets the editor.</para>
110111
/// </summary>
111112
/// <param name="value"></param>
112113
/// <param name="options"></param>
113-
/// <returns></returns>
114114
public async Task Reset(string value, VditorOptions options)
115115
{
116116
if (!string.IsNullOrEmpty(value))
117117
{
118118
Value = value;
119119
}
120-
_vditor = await InvokeAsync<IJSObjectReference>("reset", Id, Value, Options);
120+
await InvokeVoidAsync("reset", Id, Value, Options);
121121
}
122122

123123
/// <summary>
124-
/// 在焦点处插入内容，并默认进行 Markdown 渲染
124+
/// <para lang="zh">在焦点处插入内容 并默认进行 Markdown 渲染</para>
125+
/// <para lang="en">Inserts content at the cursor position and renders Markdown by default.</para>
125126
/// </summary>
126-
/// <param name="value">要插入的 markdown 值</param>
127-
/// <param name="render">是否渲染</param>
128-
public async ValueTask InsertValueAsync(string? value, bool render = true)
129-
{
130-
if (_vditor != null)
131-
{
132-
await _vditor.InvokeVoidAsync("insertValue", value, render);
133-
}
134-
}
127+
/// <param name="value"></param>
128+
/// <param name="render"></param>
129+
public Task InsertValueAsync(string? value, bool render = true) => InvokeVoidAsync("execute", Id, "insertValue", new object?[] { value, render });
135130

136131
/// <summary>
137-
/// 获取编辑器的 markdown 内容
132+
/// <para lang="zh">获取编辑器的 Markdown 内容</para>
133+
/// <para lang="en">Gets the markdown content of the editor.</para>
138134
/// </summary>
139-
public async ValueTask<string?> GetValueAsync()
140-
{
141-
string? ret = null;
142-
if (_vditor != null)
143-
{
144-
ret = await _vditor.InvokeAsync<string?>("getValue");
145-
}
146-
return ret;
147-
}
135+
public Task<string?> GetValueAsync() => InvokeAsync<string?>("execute", Id, "getValue");
148136

149137
/// <summary>
150-
/// 获取 markdown 渲染后的 HTML
138+
/// <para lang="zh">获取 Markdown 渲染后的 HTML</para>
139+
/// <para lang="en">Gets the HTML rendered from markdown.</para>
151140
/// </summary>
152-
public async ValueTask<string?> GetHtmlAsync()
153-
{
154-
string? ret = null;
155-
if (_vditor != null)
156-
{
157-
ret = await _vditor.InvokeAsync<string?>("getHTML");
158-
}
159-
return ret;
160-
}
141+
public Task<string?> GetHtmlAsync() => InvokeAsync<string?>("execute", Id, "getHTML");
161142

162143
/// <summary>
163-
/// 返回选中的字符串
144+
/// <para lang="zh">获取 返回选中的字符串</para>
145+
/// <para lang="en">Returns the selected string.</para>
164146
/// </summary>
165-
public async ValueTask<string?> GetSelectionAsync()
166-
{
167-
string? ret = null;
168-
if (_vditor != null)
169-
{
170-
ret = await _vditor.InvokeAsync<string?>("getSelection");
171-
}
172-
return ret;
173-
}
147+
public Task<string?> GetSelectionAsync() => InvokeAsync<string?>("execute", Id, "getSelection");
174148

175149
/// <summary>
176-
/// 解除编辑器禁用
150+
/// <para lang="zh">解除编辑器禁用</para>
151+
/// <para lang="en">Enables the editor.</para>
177152
/// </summary>
178-
public async ValueTask EnableAsync()
179-
{
180-
if (_vditor != null)
181-
{
182-
await _vditor.InvokeVoidAsync("enable");
183-
}
184-
}
153+
public Task EnableAsync() => InvokeVoidAsync("execute", Id, "enable");
185154

186155
/// <summary>
187-
/// 禁用编辑器
156+
/// <para lang="zh">禁用编辑器</para>
157+
/// <para lang="en">Disables the editor.</para>
188158
/// </summary>
189-
public async ValueTask DisableAsync()
190-
{
191-
if (_vditor != null)
192-
{
193-
await _vditor.InvokeVoidAsync("disabled");
194-
}
195-
}
159+
public Task DisableAsync() => InvokeVoidAsync("execute", Id, "disabled");
196160

197161
/// <summary>
198-
/// 聚焦编辑器
162+
/// <para lang="zh">聚焦编辑器</para>
163+
/// <para lang="en">Focuses the editor.</para>
199164
/// </summary>
200-
public async ValueTask FocusAsync()
201-
{
202-
if (_vditor != null)
203-
{
204-
await _vditor.InvokeVoidAsync("focus");
205-
}
206-
}
165+
public Task FocusAsync() => InvokeVoidAsync("execute", Id, "focus");
207166

208167
/// <summary>
209-
/// 让编辑器失去焦点
168+
/// <para lang="zh">让编辑器失去焦点</para>
169+
/// <para lang="en">Blurs the editor.</para>
210170
/// </summary>
211-
public async ValueTask BlurAsync()
212-
{
213-
if (_vditor != null)
214-
{
215-
await _vditor.InvokeAsync<string?>("blur");
216-
}
217-
}
171+
public Task BlurAsync() => InvokeVoidAsync("execute", Id, "blur");
218172

219173
/// <summary>
220-
/// 客户端渲染完毕回调方法由 JavaScript 调用
174+
/// <para lang="zh">客户端渲染完毕回调方法 由 JavaScript 调用</para>
175+
/// <para lang="en">Callback when client rendering is complete. Called by JavaScript.</para>
221176
/// </summary>
222-
/// <returns></returns>
223177
[JSInvokable]
224178
public async Task TriggerRenderedAsync()
225179
{
@@ -230,10 +184,10 @@ public async Task TriggerRenderedAsync()
230184
}
231185

232186
/// <summary>
233-
/// 组件录入时回调方法由 JavaScript 调用
187+
/// <para lang="zh">组件录入时回调方法 由 JavaScript 调用</para>
188+
/// <para lang="en">Callback when input occurs. Called by JavaScript.</para>
234189
/// </summary>
235190
/// <param name="value"></param>
236-
/// <returns></returns>
237191
[JSInvokable]
238192
public async Task TriggerInputAsync(string value)
239193
{
@@ -247,10 +201,10 @@ public async Task TriggerInputAsync(string value)
247201
}
248202

249203
/// <summary>
250-
/// 触发 Value 值改变回调方法由 JavaScript 调用
204+
/// <para lang="zh">触发焦点回调方法 由 JavaScript 调用</para>
205+
/// <para lang="en">Callback when focus is triggered. Called by JavaScript.</para>
251206
/// </summary>
252207
/// <param name="value"></param>
253-
/// <returns></returns>
254208
[JSInvokable]
255209
public async Task TriggerFocusAsync(string value)
256210
{
@@ -261,10 +215,10 @@ public async Task TriggerFocusAsync(string value)
261215
}
262216

263217
/// <summary>
264-
/// 触发 Value 值改变回调方法由 JavaScript 调用
218+
/// <para lang="zh">触发失焦回调方法 由 JavaScript 调用</para>
219+
/// <para lang="en">Callback when blur is triggered. Called by JavaScript.</para>
265220
/// </summary>
266221
/// <param name="value"></param>
267-
/// <returns></returns>
268222
[JSInvokable]
269223
public async Task TriggerBlurAsync(string value)
270224
{
@@ -277,10 +231,10 @@ public async Task TriggerBlurAsync(string value)
277231
}
278232

279233
/// <summary>
280-
/// 触发 Value 值改变回调方法由 JavaScript 调用
234+
/// <para lang="zh">触发选择回调方法 由 JavaScript 调用</para>
235+
/// <para lang="en">Callback when selection is triggered. Called by JavaScript.</para>
281236
/// </summary>
282237
/// <param name="value"></param>
283-
/// <returns></returns>
284238
[JSInvokable]
285239
public async Task TriggerSelectAsync(string value)
286240
{
@@ -291,10 +245,10 @@ public async Task TriggerSelectAsync(string value)
291245
}
292246

293247
/// <summary>
294-
/// 触发 Value 值改变回调方法由 JavaScript 调用
248+
/// <para lang="zh">触发 ESC 按键回调方法 由 JavaScript 调用</para>
249+
/// <para lang="en">Callback when ESC key is pressed. Called by JavaScript.</para>
295250
/// </summary>
296251
/// <param name="value"></param>
297-
/// <returns></returns>
298252
[JSInvokable]
299253
public async Task TriggerEscapeAsync(string value)
300254
{
@@ -307,10 +261,10 @@ public async Task TriggerEscapeAsync(string value)
307261
}
308262

309263
/// <summary>
310-
/// 触发 Value 值改变回调方法由 JavaScript 调用
264+
/// <para lang="zh">触发 Ctrl+Enter 组合按键回调方法 由 JavaScript 调用</para>
265+
/// <para lang="en">Callback when Ctrl+Enter is pressed. Called by JavaScript.</para>
311266
/// </summary>
312267
/// <param name="value"></param>
313-
/// <returns></returns>
314268
[JSInvokable]
315269
public async Task TriggerCtrlEnterAsync(string value)
316270
{
@@ -321,23 +275,4 @@ public async Task TriggerCtrlEnterAsync(string value)
321275
await OnCtrlEnterAsync(value);
322276
}
323277
}
324-
325-
/// <summary>
326-
/// <inheritdoc/>
327-
/// </summary>
328-
/// <param name="disposing"></param>
329-
/// <returns></returns>
330-
protected override async ValueTask DisposeAsync(bool disposing)
331-
{
332-
if (disposing)
333-
{
334-
if (_vditor != null)
335-
{
336-
await _vditor.DisposeAsync();
337-
_vditor = null;
338-
}
339-
340-
await base.DisposeAsync(disposing);
341-
}
342-
}
343278
}

0 commit comments

Comments
 (0)