🆕 feat: edit diary autofocus

Yu-Core · Apr 28, 2024 · 02e7598 · 02e7598
1 parent 6f0d465
commit 02e7598
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 7 deletions.
diff --git a/src/SwashbucklerDiary.Rcl/Components/MyComponents/MarkdownEdit/MarkdownEdit.razor b/src/SwashbucklerDiary.Rcl/Components/MyComponents/MarkdownEdit/MarkdownEdit.razor
@@ -2,7 +2,7 @@
 @inherits MyComponentBase
 
 <div class="@WrapClass">
-    <MMarkdown @ref="MMarkdown"
+    <MMarkdown @ref="mMarkdown"
                Value="@Value"
                ValueChanged="ValueChanged"
                Class="@Class"

diff --git a/src/SwashbucklerDiary.Rcl/Components/MyComponents/MarkdownEdit/MarkdownEdit.razor.cs b/src/SwashbucklerDiary.Rcl/Components/MyComponents/MarkdownEdit/MarkdownEdit.razor.cs
@@ -9,7 +9,7 @@ public partial class MarkdownEdit : MyComponentBase
     {
         private Dictionary<string, object>? _options;
 
-        private MMarkdown MMarkdown = default!;
+        private MMarkdown mMarkdown = default!;
 
         [Inject]
         private IMediaResourceManager MediaResourceManager { get; set; } = default!;
@@ -32,6 +32,9 @@ public partial class MarkdownEdit : MyComponentBase
         [Parameter]
         public string? WrapClass { get; set; }
 
+        [Parameter]
+        public bool Autofocus { get; set; }
+
         protected override void OnInitialized()
         {
             base.OnInitialized();
@@ -109,6 +112,10 @@ private void SetOptions()
         private async Task AfterMarkdownRender()
         {
             await Module.After();
+            if (Autofocus)
+            {
+                await Module.Autofocus(mMarkdown.Ref);
+            }
         }
 
         private async void HandleToolbarButtonClick(string btnName)
@@ -165,8 +172,12 @@ private async Task AddVideoAsync()
 
         public async Task InsertValueAsync(string value)
         {
-            await Module.Focus(MMarkdown.Ref);
-            await MMarkdown.InsertValueAsync(value);
+            if (string.IsNullOrEmpty(Value))
+            {
+                await Module.Focus(mMarkdown.Ref);
+            }
+
+            await mMarkdown.InsertValueAsync(value);
         }
     }
 }
diff --git a/src/SwashbucklerDiary.Rcl/Components/MyComponents/MarkdownEdit/VditorJSModule.cs b/src/SwashbucklerDiary.Rcl/Components/MyComponents/MarkdownEdit/VditorJSModule.cs
@@ -19,5 +19,10 @@ public async Task Focus(ElementReference Ref)
         {
             await base.InvokeVoidAsync("focus", Ref);
         }
+
+        public async Task Autofocus(ElementReference Ref)
+        {
+            await base.InvokeVoidAsync("autofocus", Ref);
+        }
     }
 }
diff --git a/src/SwashbucklerDiary.Rcl/Components/MyComponents/TextareaEdit/TextareaEdit.razor b/src/SwashbucklerDiary.Rcl/Components/MyComponents/TextareaEdit/TextareaEdit.razor
@@ -9,6 +9,7 @@
            BackgroundColor="transparent"
            HideDetails="@("auto")"
            NoResize="true"
+           Autofocus="Autofocus"
            spellcheck="false"
            Placeholder="@(I18n.T("Write.ContentPlace"))">
 </MTextarea>
diff --git a/src/SwashbucklerDiary.Rcl/Components/MyComponents/TextareaEdit/TextareaEdit.razor.cs b/src/SwashbucklerDiary.Rcl/Components/MyComponents/TextareaEdit/TextareaEdit.razor.cs
@@ -26,6 +26,9 @@ public partial class TextareaEdit
         [Parameter]
         public string? Class { get; set; }
 
+        [Parameter]
+        public bool Autofocus { get; set; }
+
         public async Task InsertValueAsync(string value)
         {
             Value = await Module.InsertText(mTextarea.InputElement, value);

diff --git a/src/SwashbucklerDiary.Rcl/Pages/WritePage.razor b/src/SwashbucklerDiary.Rcl/Pages/WritePage.razor
@@ -77,7 +77,7 @@
                              Text="@WeatherText"
                              OnClick="()=>showWeather=true">
             </DiaryInfoButton>
-            
+
             <DiaryInfoButton Icon="@MoodIcon"
                              Text="@MoodText"
                              OnClick="()=>showMood=true">
@@ -112,14 +112,16 @@
             <MarkdownEdit @ref="markdownEdit"
                           @bind-Value="diary.Content"
                           WrapClass="write-markdown-wrap"
-                          Class="px-3 rounded-lg write-markdown">
+                          Class="px-3 rounded-lg write-markdown"
+                          Autofocus="autofocus">
             </MarkdownEdit>
         }
         else
         {
             <TextareaEdit @ref="textareaEdit"
                           @bind-Value="diary.Content"
-                          Class="rounded-lg">
+                          Class="rounded-lg"
+                          Autofocus="autofocus">
             </TextareaEdit>
         }
     </div>

diff --git a/src/SwashbucklerDiary.Rcl/Pages/WritePage.razor.cs b/src/SwashbucklerDiary.Rcl/Pages/WritePage.razor.cs
@@ -33,6 +33,8 @@ public partial class WritePage : ImportantComponentBase
 
         private bool overlay;
 
+        private bool autofocus = true;
+
         private int editAutoSave;
 
         private PeriodicTimer? timer;

diff --git a/src/SwashbucklerDiary.Rcl/wwwroot/js/vditor-helper.js b/src/SwashbucklerDiary.Rcl/wwwroot/js/vditor-helper.js
@@ -6,6 +6,17 @@ export function focus(domRef) {
     domRef.Vditor.focus();
 }
 
+export function autofocus(domRef) {
+    domRef.Vditor.focus();
+    const focusElement = document.activeElement;
+    let range = document.createRange();
+    range.selectNodeContents(focusElement);
+    range.collapse(false);
+    let sel = window.getSelection();
+    sel.removeAllRanges();
+    sel.addRange(range);
+}
+
 //点击Vditor工具栏，输入框不失去焦点
 function handleToolbar() {
     var toolbar = document.getElementsByClassName("vditor-toolbar")[0];