Add EasyMDE options (#3373)

* Add autofocus option

* Add autoRefresh options

* Add autosave option

* Add blockStyles option

* Add forceSync option

* Add indentWithTabs option

* Add inputStyle option

* Add insertTexts option

* Add nativeSpellcheck option

* Add parsingConfig option

* Add previewClass option

EasyMDE allows string and string-array.
Since both are used as className, a space separated string is sufficient here.

* Add previewImagesInEditor option

* Add promptTexts options

* Add promptURLs option

* Add renderingConfig option

There is a `sanitizerFunction`-option in the renderingConfig.
This function does not allow to return a Promise - thus, `dotNetObjectRef.invokeMethodAsync` cannot be used
here and the current dispatcher does not support synchronous calls from JS to .NET.

* Add scrollbarStyle option

* Add shortcuts option

Solves #3297

* Add sideBySideFullscreen option

In contrast to EasyMDE, this defaults to `false` here.

* Add spellChecker option

EasyMDE allows a custom spellChecker function.. This is not supported, yet.

* Add status option

EasyMDE allows custom status bar items. This is not supported, yet.

* Add styleSelectedText option

* Add syncSideBySidePreviewScroll option

* Add unorderedListStyle option

* Fix: Property UploadImage exists but is never used as an option

In contrast to EasyMDE, the default value is `true`.

* Shortcut example

Co-authored-by: Wolfgang Kluge <wolfgang.kluge@klugesoftware.de>
Co-authored-by: Mladen Macanović <mladen.macanovic@gmail.com>

Documentation/Blazorise.Docs/Models/Snippets.generated.cs

@@ -4295,6 +4295,8 @@ Task OnMarkdownValueChanged( string value )
 
         public const string MarkdownNugetInstallExample = @"Install-Package Blazorise.Markdown";
 
+        public const string MarkdownShortcutsExample = @"<Markdown Shortcuts=""@(new MarkdownShortcuts{ CleanBlock = null, ToggleCodeBlock = ""Cmd+E"" })"" />";
+
         public const string MarkdownUploadImageExample = @"<Markdown ImageUploadChanged=""@OnImageUploadChanged""
           ImageUploadStarted=""@OnImageUploadStarted""
           ImageUploadProgressed=""@OnImageUploadProgressed""

Documentation/Blazorise.Docs/Pages/Docs/Extensions/Markdown/Code/MarkdownShortcutsExampleCode.html

@@ -0,0 +1,5 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Markdown</span> <span class="htmlAttributeName">Shortcuts</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue"><span class="atSign">&#64;</span>(new MarkdownShortcuts{ CleanBlock = null, ToggleCodeBlock = &quot;Cmd+E&quot; })</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+</pre></div>
+</div>

Documentation/Blazorise.Docs/Pages/Docs/Extensions/Markdown/Examples/MarkdownShortcutsExample.razor

@@ -0,0 +1,3 @@
+@namespace Blazorise.Docs.Docs.Examples
+
+<Markdown Shortcuts="@(new MarkdownShortcuts{ CleanBlock = null, ToggleCodeBlock = "Cmd+E" })" />

Documentation/Blazorise.Docs/Pages/Docs/Extensions/Markdown/MarkdownPage.razor

@@ -69,6 +69,16 @@
     <DocsPageSectionSource Code="MarkdownUploadImageExample" />
 </DocsPageSection>
 
+<DocsPageSection>
+    <DocsPageSectionHeader Title="Change Shortcuts">
+        EasyMDE comes with an array of predefined keyboard shortcuts, but they can be altered with a configuration option.
+    </DocsPageSectionHeader>
+    <DocsPageSectionContent Outlined FullWidth>
+        <MarkdownShortcutsExample />
+    </DocsPageSectionContent>
+    <DocsPageSectionSource Code="MarkdownShortcutsExample" />
+</DocsPageSection>
+
 <DocsPageSubtitle>
     Attributes
 </DocsPageSubtitle>
@@ -127,10 +137,10 @@
     <DocsAttributesItem Name="CustomButtonClicked" Type="EventCallback<MarkdownButtonEventArgs>" Default="">
         Occurs after the custom toolbar button is clicked.
     </DocsAttributesItem>
-    <DocsAttributesItem Name="UploadImage" Type="bool" Default="false">
+    <DocsAttributesItem Name="UploadImage" Type="bool" Default="true">
         If set to true, enables the image upload functionality, which can be triggered by drag-drop,
         copy-paste and through the browse-file window (opened when the user click on the upload-image icon).
-        Defaults to false.
+        Defaults to true.
     </DocsAttributesItem>
     <DocsAttributesItem Name="MaxUploadImageChunkSize" Type="long" Default="20 * 1024">
         Gets or sets the max chunk size when uploading the file.
@@ -185,4 +195,90 @@
     <DocsAttributesItem Name="ErrorCallback" Type="Func<string, Task>">
         A callback function used to define how to display an error message. Defaults to (errorMessage) => alert(errorMessage).
     </DocsAttributesItem>
+    <DocsAttributesItem Name="Autofocus" Type="bool" Default="false">
+        If set to true, focuses the editor automatically. Defaults to false.
+    </DocsAttributesItem>
+    <DocsAttributesItem Name="AutoRefresh" Type="MarkdownAutoRefresh">
+        Useful, when initializing the editor in a hidden DOM node. If set to { delay: 300 },
+        it will check every 300 ms if the editor is visible and if positive, call CodeMirror's refresh().
+    </DocsAttributesItem>
+    <DocsAttributesItem Name="Autosave" Type="MarkdownAutosave">
+        Saves the text that's being written and will load it back in the future.
+        It will forget the text when the form it's contained in is submitted.
+    </DocsAttributesItem>
+    <DocsAttributesItem Name="BlockStyles" Type="MarkdownBlockStyles">
+        Customize how certain buttons that style blocks of text behave.
+    </DocsAttributesItem>
+    <DocsAttributesItem Name="ForceSync" Type="bool" Default="false">
+        If set to true, force text changes made in EasyMDE to be immediately stored in original text area.
+        Defaults to false.
+    </DocsAttributesItem>
+    <DocsAttributesItem Name="IndentWithTabs" Type="bool" Default="true">
+        If set to false, indent using spaces instead of tabs. Defaults to true.
+    </DocsAttributesItem>
+    <DocsAttributesItem Name="InputStyle" Type="string" Default="null">
+        textarea or contenteditable.
+        Defaults to textarea for desktop and contenteditable for mobile.
+        contenteditable option is necessary to enable nativeSpellcheck.
+    </DocsAttributesItem>
+    <DocsAttributesItem Name="InsertTexts" Type="MarkdownInsertTexts">
+        Customize how certain buttons that insert text behave. Takes an array with two elements.
+        The first element will be the text inserted before the cursor or highlight, and the second
+        element will be inserted after.
+        For example, this is the default link value: ["[", "](http://)"].
+    </DocsAttributesItem>
+    <DocsAttributesItem Name="NativeSpellcheck" Type="bool" Default="true">
+        If set to false, disable native spell checker. Defaults to true.
+    </DocsAttributesItem>
+    <DocsAttributesItem Name="ParsingConfig" Type="MarkdownParsingConfig">
+        Adjust settings for parsing the Markdown during editing (not previewing).
+    </DocsAttributesItem>
+    <DocsAttributesItem Name="PreviewClass" Type="string" Default="editor-preview">
+        A space-separated string that will be applied to the preview screen when activated.
+        Defaults to "editor-preview".
+    </DocsAttributesItem>
+    <DocsAttributesItem Name="PreviewImagesInEditor" Type="bool" Default="false">
+        EasyMDE will show preview of images, false by default,
+        preview for images will appear only for images on separate lines.
+    </DocsAttributesItem>
+    <DocsAttributesItem Name="PromptTexts" Type="MarkdownPromptTexts">
+        Customize the text used to prompt for URLs.
+    </DocsAttributesItem>
+    <DocsAttributesItem Name="PromptURLs" Type="bool" Default="false">
+        If set to true, a JS alert window appears asking for the link or image URL.
+        Defaults to false.
+    </DocsAttributesItem>
+    <DocsAttributesItem Name="RenderingConfig" Type="MarkdownRenderingConfig">
+        Adjust settings for parsing the Markdown during previewing (not editing).
+    </DocsAttributesItem>
+    <DocsAttributesItem Name="ScrollbarStyle" Type="string" Default="native">
+        Chooses a scrollbar implementation.
+        The default is "native", showing native scrollbars.
+
+        The core library also provides the "null" style, which completely hides the scrollbars.
+        Addons can implement additional scrollbar models.
+    </DocsAttributesItem>
+    <DocsAttributesItem Name="Shortcuts" Type="MarkdownShortcuts">
+        Keyboard shortcuts associated with this instance.
+        Defaults to the array of <see href="https://github.com/Ionaru/easy-markdown-editor#keyboard-shortcuts">shortcuts</see>.
+    </DocsAttributesItem>
+    <DocsAttributesItem Name="SideBySideFullscreen" Type="bool" Default="false">
+        If set to false, allows side-by-side editing without going into fullscreen. Defaults to false.
+    </DocsAttributesItem>
+    <DocsAttributesItem Name="SpellChecker" Type="bool" Default="true">
+        If set to false, disable the spell checker. Defaults to true
+    </DocsAttributesItem>
+    <DocsAttributesItem Name="Status" Type="string[]" Default="null">
+        If set to empty array, hide the status bar. Defaults to the array of built-in status bar items.
+        Optionally, you can set an array of status bar items to include, and in what order.
+    </DocsAttributesItem>
+    <DocsAttributesItem Name="StyleSelectedText" Type="bool" Default="true">
+        If set to false, remove the CodeMirror-selectedtext class from selected lines. Defaults to true.
+    </DocsAttributesItem>
+    <DocsAttributesItem Name="SyncSideBySidePreviewScroll" Type="bool" Default="true">
+        If set to false, disable syncing scroll in side by side mode. Defaults to true.
+    </DocsAttributesItem>
+    <DocsAttributesItem Name="UnorderedListStyle" Type="string" Default="*">
+        can be *, - or +. Defaults to *.
+    </DocsAttributesItem>
 </DocsAttributes>

Source/Extensions/Blazorise.Markdown/Markdown.razor.cs

@@ -7,7 +7,6 @@
 using Blazorise.Extensions;
 using Blazorise.Markdown.Providers;
 using Blazorise.Modules;
-using Blazorise.Utilities;
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
 #endregion
@@ -96,6 +95,29 @@ protected override async Task OnAfterRenderAsync( bool firstRender )
                         ImageTexts.SizeUnits,
                     },
                     ErrorMessages,
+                    Autofocus,
+                    AutoRefresh,
+                    Autosave,
+                    BlockStyles,
+                    ForceSync,
+                    IndentWithTabs,
+                    InputStyle,
+                    InsertTexts,
+                    NativeSpellcheck,
+                    ParsingConfig,
+                    PreviewClass,
+                    PreviewImagesInEditor,
+                    PromptTexts,
+                    PromptURLs,
+                    RenderingConfig,
+                    ScrollbarStyle,
+                    Shortcuts,
+                    SideBySideFullscreen,
+                    SpellChecker,
+                    Status,
+                    StyleSelectedText,
+                    SyncSideBySidePreviewScroll,
+                    UnorderedListStyle,
                 } );
 
                 Initialized = true;
@@ -407,9 +429,9 @@ public Task NotifyErrorMessage( string errorMessage )
         /// <summary>
         /// If set to true, enables the image upload functionality, which can be triggered by drag-drop,
         /// copy-paste and through the browse-file window (opened when the user click on the upload-image icon).
-        /// Defaults to false.
+        /// Defaults to true.
         /// </summary>
-        [Parameter] public bool UploadImage { get; set; }
+        [Parameter] public bool UploadImage { get; set; } = true;
 
         /// <summary>
         /// Gets or sets the max chunk size when uploading the file.
@@ -494,6 +516,138 @@ public Task NotifyErrorMessage( string errorMessage )
         /// </summary>
         [Parameter] public Func<string, Task> ErrorCallback { get; set; }
 
+        /// <summary>
+        /// If set to true, focuses the editor automatically. Defaults to false.
+        /// </summary>
+        [Parameter] public bool Autofocus { get; set; }
+
+        /// <summary>
+        /// Useful, when initializing the editor in a hidden DOM node. If set to { delay: 300 },
+        /// it will check every 300 ms if the editor is visible and if positive, call CodeMirror's refresh().
+        /// </summary>
+        [Parameter] public MarkdownAutoRefresh AutoRefresh { get; set; }
+
+        /// <summary>
+        /// Saves the text that's being written and will load it back in the future.
+        /// It will forget the text when the form it's contained in is submitted.
+        /// </summary>
+        [Parameter] public MarkdownAutosave Autosave { get; set; }
+
+        /// <summary>
+        /// Customize how certain buttons that style blocks of text behave.
+        /// </summary>
+        [Parameter] public MarkdownBlockStyles BlockStyles { get; set; }
+
+        /// <summary>
+        /// If set to true, force text changes made in EasyMDE to be immediately stored in original text area.
+        /// Defaults to false.
+        /// </summary>
+        [Parameter] public bool ForceSync { get; set; }
+
+        /// <summary>
+        /// If set to false, indent using spaces instead of tabs. Defaults to true.
+        /// </summary>
+        [Parameter] public bool IndentWithTabs { get; set; } = true;
+
+        /// <summary>
+        /// textarea or contenteditable.
+        /// Defaults to textarea for desktop and contenteditable for mobile.
+        /// contenteditable option is necessary to enable nativeSpellcheck.
+        /// </summary>
+        [Parameter] public string InputStyle { get; set; }
+
+        /// <summary>
+        /// Customize how certain buttons that insert text behave. Takes an array with two elements.
+        /// The first element will be the text inserted before the cursor or highlight, and the second
+        /// element will be inserted after.
+        /// For example, this is the default link value: ["[", "](http://)"].
+        /// </summary>
+        [Parameter] public MarkdownInsertTexts InsertTexts { get; set; }
+
+        /// <summary>
+        /// If set to false, disable native spell checker. Defaults to true.
+        /// </summary>
+        [Parameter] public bool NativeSpellcheck { get; set; } = true;
+
+        /// <summary>
+        /// Adjust settings for parsing the Markdown during editing (not previewing).
+        /// </summary>
+        [Parameter] public MarkdownParsingConfig ParsingConfig { get; set; }
+
+        /// <summary>
+        /// A space-separated strings that will be applied to the preview screen when activated.
+        /// Defaults to "editor-preview".
+        /// </summary>
+        [Parameter] public string PreviewClass { get; set; } = "editor-preview";
+
+        /// <summary>
+        /// EasyMDE will show preview of images, false by default,
+        /// preview for images will appear only for images on separate lines.
+        /// </summary>
+        [Parameter] public bool PreviewImagesInEditor { get; set; }
+
+        /// <summary>
+        /// Customize the text used to prompt for URLs.
+        /// </summary>
+        [Parameter] public MarkdownPromptTexts PromptTexts { get; set; }
+
+        /// <summary>
+        /// If set to true, a JS alert window appears asking for the link or image URL.
+        /// Defaults to false.
+        /// </summary>
+        [Parameter] public bool PromptURLs { get; set; }
+
+        /// <summary>
+        /// Adjust settings for parsing the Markdown during previewing (not editing).
+        /// </summary>
+        [Parameter] public MarkdownRenderingConfig RenderingConfig { get; set; }
+
+        /// <summary>
+        /// Chooses a scrollbar implementation.
+        /// The default is "native", showing native scrollbars.
+        /// 
+        /// The core library also provides the "null" style, which completely hides the scrollbars.
+        /// Addons can implement additional scrollbar models.
+        /// </summary>
+        [Parameter] public string ScrollbarStyle { get; set; } = "native";
+
+        /// <summary>
+        /// Keyboard shortcuts associated with this instance.
+        /// Defaults to the array of <see href="https://github.com/Ionaru/easy-markdown-editor#keyboard-shortcuts">shortcuts</see>.
+        /// </summary>
+        [Parameter] public MarkdownShortcuts Shortcuts { get; set; }
+
+        /// <summary>
+        /// If set to false, allows side-by-side editing without going into fullscreen. Defaults to false.
+        /// </summary>
+        [Parameter] public bool SideBySideFullscreen { get; set; }
+
+        /// <summary>
+        /// If set to false, disable the spell checker. Defaults to true
+        /// </summary>
+        [Parameter] public bool SpellChecker { get; set; } = true;
+
+        /// <summary>
+        /// If set to empty array, hide the status bar. Defaults to the array of built-in status bar items.
+        /// Optionally, you can set an array of status bar items to include, and in what order.
+        /// </summary>
+        [Parameter] public string[] Status { get; set; }
+
+        /// <summary>
+        /// If set to false, remove the CodeMirror-selectedtext class from selected lines. Defaults to true.
+        /// </summary>
+        [Parameter] public bool StyleSelectedText { get; set; } = true;
+
+        /// <summary>
+        /// If set to false, disable syncing scroll in side by side mode. Defaults to true.
+        /// </summary>
+        [Parameter] public bool SyncSideBySidePreviewScroll { get; set; } = true;
+
+        /// <summary>
+        /// can be *, - or +. Defaults to *.
+        /// </summary>
+        [Parameter] public string UnorderedListStyle { get; set; } = "*";
+
         #endregion
     }
 }

Source/Extensions/Blazorise.Markdown/MarkdownAutoRefresh.cs

@@ -0,0 +1,11 @@
+namespace Blazorise.Markdown
+{
+    /// <summary>
+    /// Useful, when initializing the editor in a hidden DOM node. If set to { delay: 300 },
+    /// it will check every 300 ms if the editor is visible and if positive, call CodeMirror's refresh().
+    /// </summary>
+    public class MarkdownAutoRefresh
+    {
+        public int Delay { get; set; } = 300;
+    }
+}

Source/Extensions/Blazorise.Markdown/MarkdownAutosave.cs

@@ -0,0 +1,49 @@
+#region Using directives
+using System.Text.Json.Serialization;
+#endregion
+
+namespace Blazorise.Markdown
+{
+    /// <summary>
+    /// Saves the text that's being written and will load it back in the future.
+    /// It will forget the text when the form it's contained in is submitted.
+    /// </summary>
+    public class MarkdownAutosave
+    {
+        /// <summary>
+        /// If set to true, saves the text automatically.
+        /// Defaults to false.
+        /// </summary>
+        public bool Enabled { get; set; }
+
+        /// <summary>
+        /// Delay between saves, in milliseconds.
+        /// Defaults to 10000 (10s).
+        /// </summary>
+        public int Delay { get; set; } = 10000;
+
+        /// <summary>
+        /// Delay before assuming that submit of the form failed and saving the text, in milliseconds.
+        /// Defaults to autosave.delay or 10000 (10s).
+        /// </summary>
+        [JsonPropertyName( "submit_delay" )]
+        public int? SubmitDelay { get; set; }
+
+        /// <summary>
+        /// You must set a unique string identifier so that EasyMDE can autosave.
+        /// Something that separates this from other instances of EasyMDE elsewhere on your website.
+        /// </summary>
+        public string UniqueId { get; set; }
+
+        /// <summary>
+        /// Set text for autosave.
+        /// </summary>
+        public string Text { get; set; }
+
+        /// <summary>
+        /// Set DateTimeFormat. More information see DateTimeFormat instances.
+        /// Default locale: en-US, format: hour:minute.
+        /// </summary>
+        public MarkdownAutosaveTimeFormat TimeFormat { get; set; }
+    }
+}