RTE format actions (work in progress)

Megabit · Mar 29, 2023 · 0fa13d8 · 0fa13d8
1 parent 6562c9f
commit 0fa13d8
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 9 deletions.
diff --git a/Demos/Blazorise.Demo/Pages/Tests/RoosterPage.razor b/Demos/Blazorise.Demo/Pages/Tests/RoosterPage.razor
@@ -1,4 +1,5 @@
 @page "/tests/rooster"
+@using RichTextEditAction = Blazorise.RichTextEdit.Rooster.RichTextEditAction
 
 <Row>
     <Column>
@@ -7,12 +8,23 @@
                 <CardTitle>RichTextEdit based on rooster.js</CardTitle>
             </CardHeader>
             <CardBody>
-                <Blazorise.RichTextEdit.Rooster.RichTextEdit />
+                <Buttons Role="ButtonsRole.Toolbar">
+                    <Buttons Margin="Margin.Is2.FromEnd">
+                        <Button Clicked="() => editor.Format(RichTextEditAction.Bold)" Style="font-weight: bold">B</Button>
+                        <Button Clicked="() => editor.Format(RichTextEditAction.Italic)" Style="font-style: initial">I</Button>
+                        <Button Clicked="() => editor.Format(RichTextEditAction.Underline)" Style="text-decoration: underline">U</Button>
+                    </Buttons>
+                    <Buttons Margin="Margin.Is2.FromEnd">
+                        <Button Clicked="() => editor.Format(RichTextEditAction.Header, 1)">H1</Button>
+                        <Button Clicked="() => editor.Format(RichTextEditAction.Header, 2)">H2</Button>
+                    </Buttons>
+                </Buttons>
+                <Blazorise.RichTextEdit.Rooster.RichTextEdit @ref="editor"/>
             </CardBody>
         </Card>
     </Column>
 </Row>
 
 @code {
-
+    private Blazorise.RichTextEdit.Rooster.RichTextEdit editor;
 }
diff --git a/Source/Extensions/Blazorise.RichTextEdit.Rooster/Enums.cs b/Source/Extensions/Blazorise.RichTextEdit.Rooster/Enums.cs
@@ -0,0 +1,24 @@
+namespace Blazorise.RichTextEdit.Rooster;
+
+public enum RichTextEditAction
+{
+    Bold,
+    Italic,
+    Underline,
+    Strike,
+    Blockquote,
+    CodeBlock,
+    Header,
+    List,
+    Script,
+    Indent,
+    Direction,
+    Size,
+    Color,
+    Background,
+    Font,
+    Align,
+    Clean,
+    Link,
+    Image
+}
diff --git a/Source/Extensions/Blazorise.RichTextEdit.Rooster/JSRoosterModule.cs b/Source/Extensions/Blazorise.RichTextEdit.Rooster/JSRoosterModule.cs
@@ -18,6 +18,9 @@ public JSRoosterModule( IJSRuntime jsRuntime, IVersionProvider versionProvider )
     public ValueTask Initialize( DotNetObjectReference<RoosterAdapter> adapterReference, ElementReference elementRef, string elementId, object options )
         => InvokeSafeVoidAsync( "initialize", adapterReference, elementRef, elementId, options );
 
+    public ValueTask Format( ElementReference elementRef, string elementId, string action, object options = null )
+        => InvokeSafeVoidAsync( "format", elementRef, elementId, action, options );
+
     public ValueTask Destroy( ElementReference elementRef, string elementId )
         => InvokeSafeVoidAsync( "destroy", elementRef, elementId );
 }
diff --git a/Source/Extensions/Blazorise.RichTextEdit.Rooster/RichTextEdit.razor.cs b/Source/Extensions/Blazorise.RichTextEdit.Rooster/RichTextEdit.razor.cs
@@ -1,4 +1,5 @@
-using System.Threading.Tasks;
+using System;
+using System.Threading.Tasks;
 using Blazorise.Extensions;
 using Blazorise.Utilities;
 using Microsoft.AspNetCore.Components;
@@ -13,6 +14,36 @@ public partial class RichTextEdit : BaseComponent
 {
     private DotNetObjectReference<RoosterAdapter> adapter;
 
+    /// <summary>
+    /// Perform format action
+    /// </summary>
+    /// <param name="action">the action to perform <see cref="RichTextEditAction"/></param>
+    /// <param name="args">action arguments</param>
+    public ValueTask Format( object action, params object[] args ) => action switch
+    {
+        string actionString => JSModule.Format( ElementRef, ElementId, actionString, args ),
+        RichTextEditAction.Bold => JSModule.Format( ElementRef, ElementId, "toggleBold", args ),
+        RichTextEditAction.Italic => JSModule.Format( ElementRef, ElementId, "toggleItalic", args ),
+        RichTextEditAction.Underline => JSModule.Format( ElementRef, ElementId, "toggleUnderline", args ),
+        RichTextEditAction.Strike => JSModule.Format( ElementRef, ElementId, "toggleStrikethrough", args ),
+        RichTextEditAction.Blockquote => JSModule.Format( ElementRef, ElementId, "toggleBlockQuote", args ),
+        RichTextEditAction.CodeBlock => JSModule.Format( ElementRef, ElementId, "toggleCodeBlock", args ),
+        RichTextEditAction.Header => JSModule.Format( ElementRef, ElementId, "toggleHeader", args ),
+        RichTextEditAction.List => JSModule.Format( ElementRef, ElementId, "toggleBullet", args ),
+        RichTextEditAction.Script => JSModule.Format( ElementRef, ElementId, "toggleBold", args ),
+        RichTextEditAction.Indent => JSModule.Format( ElementRef, ElementId, "toggleBold", args ),
+        RichTextEditAction.Direction => JSModule.Format( ElementRef, ElementId, "toggleBold", args ),
+        RichTextEditAction.Size => JSModule.Format( ElementRef, ElementId, "toggleBold", args ),
+        RichTextEditAction.Color => JSModule.Format( ElementRef, ElementId, "toggleBold", args ),
+        RichTextEditAction.Background => JSModule.Format( ElementRef, ElementId, "toggleBold", args ),
+        RichTextEditAction.Font => JSModule.Format( ElementRef, ElementId, "toggleBold", args ),
+        RichTextEditAction.Align => JSModule.Format( ElementRef, ElementId, "toggleBold", args ),
+        RichTextEditAction.Clean => JSModule.Format( ElementRef, ElementId, "toggleBold", args ),
+        RichTextEditAction.Link => JSModule.Format( ElementRef, ElementId, "toggleBold", args ),
+        RichTextEditAction.Image => JSModule.Format( ElementRef, ElementId, "toggleBold", args ),
+        _ => throw new ArgumentOutOfRangeException( nameof( action ), action, null )
+    };
+
     /// <inheritdoc/>
     protected override async Task OnAfterRenderAsync( bool firstRender )
     {

diff --git a/Source/Extensions/Blazorise.RichTextEdit.Rooster/wwwroot/blazorise.rooster.css b/Source/Extensions/Blazorise.RichTextEdit.Rooster/wwwroot/blazorise.rooster.css
@@ -1,6 +1,7 @@
 .b-rte-rooster {
-    width: 500px;
-    height: 300px;
+    width: 100%;
+    height: 5rem;
     overflow: auto;
+    padding: 4px;
     border: solid 1px black;
 }
diff --git a/Source/Extensions/Blazorise.RichTextEdit.Rooster/wwwroot/blazorise.rooster.js b/Source/Extensions/Blazorise.RichTextEdit.Rooster/wwwroot/blazorise.rooster.js
@@ -17,12 +17,12 @@ export async function initialize(dotNetAdapter, element, elementId, options) {
     const instance = {
         options: options,
         adapter: dotNetAdapter,
-        rooster: null,
+        editor: null,
     };
 
-    instance.rooster = roosterjs.createEditor(element);
+    instance.editor = roosterjs.createEditor(element);
 
-    instance.rooster.setContent('Welcome to <b>RoosterJs</b>!');
+    instance.editor.setContent('Welcome to <b>RoosterJs</b>!');
 
     _instances[elementId] = instance;
 }
@@ -34,7 +34,17 @@ export function destroy(element, elementId) {
     if (!instance)
         return;
 
-    instance.rooster.dispose();
+    instance.editor.dispose();
     delete instances[elementId];
 }
 
+export function format(element, elementId, action, args) {
+    const instances = _instances || {};
+    const instance = instances[elementId];
+
+    if (!instance)
+        return;
+
+    roosterjs[action](instance.editor, args);
+}
+