Added link

Author: linkdotnet

src/LinkDotNet.Blog.Web/Shared/Admin/CreateNewBlogPost.razor

@@ -24,7 +24,7 @@
                 <label for="content">Content</label>
                 <TextAreaWithShortcuts Id="content" Class="form-control" Rows="10"
                                        @bind-Value="@model.Content"></TextAreaWithShortcuts>
-                <small for="content" class="form-text text-muted">You can use markdown to style your component. Additional features are listed <a @onclick="@(() => FeatureDialog.Open())">here</a></small>
+                <small for="content" class="form-text text-muted">You can use markdown to style your component. Additional features and keyboard shortcuts are listed <a @onclick="@(() => FeatureDialog.Open())">here</a></small>
                 <UploadFile OnFileUploaded="SetContentFromFile" id="content-upload"></UploadFile>
                 <small for="content-upload" class="form-text text-muted">Drag and drop markdown files to upload and
                 insert them</small>

src/LinkDotNet.Blog.Web/Shared/Admin/FeatureInfoDialog.razor

@@ -3,6 +3,30 @@
     <p>Features marked with <i class="fas fa-flask"></i> are experimental and can change heavily, get removed or the usage changes.</p>
     <p>Use with caution and check the changelog</p>
     <hr>
+    <h3 style="display:inline-block">Shortcuts</h3>
+    <table class="table">
+        <thead>
+        <tr>
+            <th>Keyboard shortcut</th>
+            <th>Description</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+            <td>control b</td>
+            <td>Inserts Markdown formatting for bolding text</td>
+        </tr>
+        <tr>
+            <td>control i</td>
+            <td>Inserts Markdown formatting for italicizing text</td>
+        </tr>
+        <tr>
+            <td>control m</td>
+            <td>Inserts Markdown formatting for creating a link</td>
+        </tr>
+        </tbody>
+    </table>
+    <hr/>
     <h3 style="display:inline-block">Slide-Show</h3><i class="fas fa-flask"></i>
     <p>Will create a slide-show with images specified by the tag.</p>
     <strong>Usage:</strong>

src/LinkDotNet.Blog.Web/Shared/TextAreaWithShortcuts.razor

@@ -1,7 +1,8 @@
 @inject IJSRuntime jsRuntime
 
-<textarea class="@Class" id="@Id" rows="@Rows" @onkeyup="MarkShortDescription"
-                       @oninput="args => Value = args.Value.ToString()">@Value</textarea>
+<textarea class="@Class" id="@Id" rows="@Rows"
+    @onkeyup="MarkShortDescription" @onkeyup:preventDefault="true" @onabort:stopPropagation="true"
+    @oninput="args => Value = args.Value.ToString()">@Value</textarea>
 
 @code {
     private string textContent = string.Empty;
@@ -44,6 +45,7 @@
         {
             "b" => await GetNewMarkdownForElementAsync(elementId, original, "**", "**"),
             "i" => await GetNewMarkdownForElementAsync(elementId, original, "*", "*"),
+            "m" => await GetNewMarkdownForElementAsync(elementId, original, "[","]()"),
             _ => original,
             } : original;
     }

tests/LinkDotNet.Blog.UnitTests/Web/Shared/TextAreaWithShortcutsTests.cs

@@ -11,6 +11,7 @@ public class TextAreaWithShortcutsTests : TestContext
     [Theory]
     [InlineData("b", 0, 4, true, "**Test**")]
     [InlineData("i", 0, 4, true, "*Test*")]
+    [InlineData("m", 0, 4, true, "[Test]()")]
     [InlineData("h", 0, 1, true, "Test")]
     [InlineData("b", 0, 1, false, "Test")]
     [InlineData("f", 0, 4, false, "Test")]