feat: add basal options and methods

ant-design-blazor · Sep 4, 2020 · f2ad45f · f2ad45f
1 parent 8a62890
commit f2ad45f
Show file tree

Hide file tree

Showing 14 changed files with 278 additions and 98 deletions.
diff --git a/src/Vditor.Docs.Server/Pages/_Host.cshtml b/src/Vditor.Docs.Server/Pages/_Host.cshtml
@@ -31,10 +31,12 @@
         <a class="dismiss">🗙</a>
     </div>
 
-    <script src="_framework/blazor.server.js"></script>
     <!-- ⚠️Please specify the version number in the production environment, such as https://cdn.jsdelivr.net/npm/vditor@x.x.x/dist... -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor/dist/index.css" />
-    <script src="https://cdn.jsdelivr.net/npm/vditor/dist/index.min.js" defer></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor@3.4.7/dist/index.css" />
+    <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor@3.4.7/dist/css/content-theme/ant-design.css" />-->
+    <script src="https://cdn.jsdelivr.net/npm/vditor@3.4.7/dist/index.min.js" defer></script>
     <script src="_content/Vditor/vditor-blazor.js"></script>
+
+    <script src="_framework/blazor.server.js"></script>
 </body>
 </html>
diff --git a/src/Vditor.Docs.Server/Startup.cs b/src/Vditor.Docs.Server/Startup.cs
@@ -21,7 +21,6 @@ public void ConfigureServices(IServiceCollection services)
         {
             services.AddRazorPages();
             services.AddServerSideBlazor();
-            services.AddVditor();
         }
 
         // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.

diff --git a/src/Vditor.Docs.WebAssembly/Program.cs b/src/Vditor.Docs.WebAssembly/Program.cs
@@ -14,7 +14,6 @@ public static async Task Main(string[] args)
             builder.RootComponents.Add<App>("app");
 
             builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-            builder.Services.AddVditor();
 
             await builder.Build().RunAsync();
         }

diff --git a/src/Vditor.Docs.WebAssembly/Vditor.Docs.WebAssembly.csproj b/src/Vditor.Docs.WebAssembly/Vditor.Docs.WebAssembly.csproj
@@ -15,7 +15,6 @@
 
   <ItemGroup>
     <ProjectReference Include="..\Vditor.Docs\Vditor.Docs.csproj" />
-    <ProjectReference Include="..\Vditor\Vditor.csproj" />
   </ItemGroup>
 
   <ItemGroup>

diff --git a/src/Vditor.Docs.WebAssembly/wwwroot/index.html b/src/Vditor.Docs.WebAssembly/wwwroot/index.html
@@ -14,12 +14,14 @@
 
 <body>
     <app>Loading...</app>
-    <script src="_framework/blazor.webassembly.js"></script>
-    <script>navigator.serviceWorker.register('service-worker.js');</script>
     <!-- ⚠️Please specify the version number in the production environment, such as https://cdn.jsdelivr.net/npm/vditor@x.x.x/dist... -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor/dist/index.css" />
-    <script src="https://cdn.jsdelivr.net/npm/vditor/dist/index.min.js" defer></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor@3.4.7/dist/index.css" />
+    <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor@3.4.7/dist/css/content-theme/ant-design.css" />-->
+    <script src="https://cdn.jsdelivr.net/npm/vditor@3.4.7/dist/index.min.js" defer></script>
     <script src="_content/Vditor/vditor-blazor.js"></script>
+
+    <script src="_framework/blazor.webassembly.js"></script>
+    <script>navigator.serviceWorker.register('service-worker.js');</script>
 </body>
 
 </html>
diff --git a/src/Vditor.Docs/Pages/Index.razor b/src/Vditor.Docs/Pages/Index.razor
@@ -4,13 +4,27 @@
 
 Vditor of blazor.
 
-<Vditor.Editor @bind-Value="value" />
+<Vditor.Editor @ref="editor" @bind-Value="value" @bind-Html="html" Mode="wysiwyg" Height="500" MinHeight="500" />
 
-<Vditor.Editor @bind-Value="value" />
+<br />
+Html: @((MarkupString)html)
+<br />
 
 Content:@value
 
-
+<br />
+<br />
 <button @onclick="()=>{ value = DateTime.Now.ToString(); }">Change Value</button>
-
-@code{ string value; }
+<button @onclick="Click">Get Value</button>
+@code{
+    string value = "Hello Blazor!";
+    string html;
+
+    Editor editor;
+
+    async Task Click()
+    {
+        var value = await editor.GetValueAsync();
+        Console.WriteLine(value);
+    }
+}
diff --git a/src/Vditor.Docs/Vditor.Docs.csproj b/src/Vditor.Docs/Vditor.Docs.csproj
@@ -3,6 +3,7 @@
   <PropertyGroup>
     <TargetFramework>netstandard2.0</TargetFramework>
     <RazorLangVersion>3.0</RazorLangVersion>
+    <LangVersion>8.0</LangVersion>
   </PropertyGroup>
 
   <ItemGroup>

diff --git a/src/Vditor/Components/Editor.razor.Callback.cs b/src/Vditor/Components/Editor.razor.Callback.cs
@@ -0,0 +1,93 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using System.Threading.Tasks;
+
+namespace Vditor
+{
+    public partial class Editor : ComponentBase
+    {
+        [Parameter] public EventCallback<string> OnFocus { get; set; }
+
+        [Parameter] public EventCallback<string> OnBlur { get; set; }
+
+        [Parameter] public EventCallback<string> OnEscPress { get; set; }
+
+        [Parameter] public EventCallback<string> OnCtrlEnterPress { get; set; }
+
+        [Parameter] public EventCallback<string> OnSelect { get; set; }
+
+        [JSInvokable]
+        public async Task HandleRendered()
+        {
+            _editorRendered = true;
+            if (!string.IsNullOrWhiteSpace(Value) && HtmlChanged.HasDelegate)
+            {
+                Html = await GetHTML();
+                await HtmlChanged.InvokeAsync(Html);
+            }
+        }
+
+        [JSInvokable]
+        public async Task HandleInput(string value)
+        {
+            _value = value;
+            _wattingUpdate = false;
+
+            if (ValueChanged.HasDelegate)
+            {
+                await ValueChanged.InvokeAsync(value);
+            }
+
+            if (HtmlChanged.HasDelegate)
+            {
+                Html = await GetHTML();
+                await HtmlChanged.InvokeAsync(Html);
+            }
+        }
+
+        [JSInvokable]
+        public void HandleFocus(string value)
+        {
+            if (OnFocus.HasDelegate)
+            {
+                OnFocus.InvokeAsync(value);
+            }
+        }
+
+        [JSInvokable]
+        public void HandleBlur(string value)
+        {
+            if (OnBlur.HasDelegate)
+            {
+                OnBlur.InvokeAsync(value);
+            }
+        }
+
+        [JSInvokable]
+        public void HandleEscPress(string value)
+        {
+            if (OnEscPress.HasDelegate)
+            {
+                OnEscPress.InvokeAsync(value);
+            }
+        }
+
+        [JSInvokable]
+        public void HandleCtrlEnterPress(string value)
+        {
+            if (OnCtrlEnterPress.HasDelegate)
+            {
+                OnCtrlEnterPress.InvokeAsync(value);
+            }
+        }
+
+        [JSInvokable]
+        public void HandleSelect(string value)
+        {
+            if (OnSelect.HasDelegate)
+            {
+                OnSelect.InvokeAsync(value);
+            }
+        }
+    }
+}
diff --git a/src/Vditor/Components/Editor.razor.Method.cs b/src/Vditor/Components/Editor.razor.Method.cs
@@ -0,0 +1,41 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using System.Threading.Tasks;
+
+namespace Vditor
+{
+    public partial class Editor : ComponentBase
+    {
+        [Inject] private IJSRuntime Js { get; set; }
+
+        public async Task CreateVditor()
+        {
+            await Js.InvokeVoidAsync("vditorBlazor.createVditor", _ref, DotNetObjectReference.Create(this), this.Value, this.Options);
+        }
+
+        public ValueTask<string> GetValue()
+        {
+            return Js.InvokeAsync<string>("vditorBlazor.getValue", _ref);
+        }
+
+        public ValueTask<string> GetHTML()
+        {
+            return Js.InvokeAsync<string>("vditorBlazor.getHTML", _ref);
+        }
+
+        public async Task SetValue(string value, bool clearStack = false)
+        {
+            await Js.InvokeVoidAsync("vditorBlazor.setValue", _ref, value, clearStack);
+        }
+
+        public async Task InsertValue(string value, bool render = true)
+        {
+            await Js.InvokeVoidAsync("vditorBlazor.setValue", _ref, value, render);
+        }
+
+        public async Task Destroy()
+        {
+            await Js.InvokeVoidAsync("vditorBlazor.destroy", _ref);
+        }
+    }
+}
diff --git a/src/Vditor/Components/Editor.razor.cs b/src/Vditor/Components/Editor.razor.cs
@@ -1,10 +1,11 @@
 using Microsoft.AspNetCore.Components;
 using System.Threading.Tasks;
-using Microsoft.JSInterop;
+using System.Collections.Generic;
+using System;
 
 namespace Vditor
 {
-    public partial class Editor : ComponentBase
+    public partial class Editor : ComponentBase, IDisposable
     {
         /// <summary>
         /// Markdown Content
@@ -33,53 +34,83 @@ public string Value
 
         [Parameter] public EventCallback<string> HtmlChanged { get; set; }
 
-        [Inject] private EditorService EditorService { get; set; }
+        [Parameter(CaptureUnmatchedValues = true)]
+        public Dictionary<string, object> Options { get; set; }
+
+        [Parameter]
+        public string Mode { get; set; }
+
+        [Parameter]
+        public string Placeholder { get; set; }
+
+        [Parameter]
+        public string Height { get; set; }
+
+        [Parameter]
+        public string Width { get; set; }
+
+        [Parameter]
+        public string MinHeight { get; set; }
+
+        [Parameter]
+        public bool Outline { get; set; }
 
         private ElementReference _ref;
 
+        private bool _editorRendered = false;
         private bool _wattingUpdate = false;
         private string _value;
 
+        private bool _afterFirstRender = false;
+
         protected override async Task OnAfterRenderAsync(bool firstRender)
         {
             await base.OnAfterRenderAsync(firstRender);
 
             if (firstRender)
             {
-                await EditorService.CreateVditor(_ref, this);
-            }
-        }
-
-        [JSInvokable]
-        public void OnInput(string value)
-        {
-            _value = value;
-            _wattingUpdate = false;
-
-            if (ValueChanged.HasDelegate)
-            {
-                ValueChanged.InvokeAsync(value);
+                _afterFirstRender = true;
+                await CreateVditor();
             }
         }
 
         protected override async Task OnInitializedAsync()
         {
             await base.OnInitializedAsync();
 
-            if (Value != null)
-            {
-                await EditorService.SetValue(_ref, Value);
-            }
+            Options ??= new Dictionary<string, object>();
+
+            Options["Mode"] = Mode ?? "ir";
+            Options["Placeholder"] = Placeholder ?? "";
+            Options["Height"] = int.TryParse(Height, out var h) ? h : (object)Height;
+            Options["Width"] = int.TryParse(Width, out var w) ? w : (object)Width;
+            Options["MinHeight"] = int.TryParse(MinHeight, out var m) ? m : (object)MinHeight;
+            Options["Options"] = Outline;
         }
 
         protected override async Task OnParametersSetAsync()
         {
             await base.OnParametersSetAsync();
-            if (_wattingUpdate)
+            if (_wattingUpdate && _editorRendered)
             {
-                await EditorService.SetValue(_ref, _value);
                 _wattingUpdate = false;
+                await SetValue(_value, true);
             }
         }
+
+        public async ValueTask<string> GetValueAsync()
+        {
+            if (_editorRendered)
+            {
+                return await GetValue();
+            }
+
+            return string.Empty;
+        }
+
+        public void Dispose()
+        {
+            Destroy();
+        }
     }
 }
diff --git a/src/Vditor/EditorService.cs b/src/Vditor/EditorService.cs