Improve look & feel of disabled state (#43)

* Improve look & feel of disabled state * Cleanup node stuff
Spillgebees · Apr 11, 2024 · 4c2ee77 · 4c2ee77
1 parent 842a0db
commit 4c2ee77
Show file tree

Hide file tree

Showing 9 changed files with 112 additions and 4 deletions.
diff --git a/src/Spillgebees.Blazor.RichTextEditor.Assets/package-lock.json b/src/Spillgebees.Blazor.RichTextEditor.Assets/package-lock.json
diff --git a/src/Spillgebees.Blazor.RichTextEditor.Assets/package.json b/src/Spillgebees.Blazor.RichTextEditor.Assets/package.json
@@ -4,8 +4,8 @@
   "source": "src/index.ts",
   "main": "dist/Spillgebees.Blazor.RichTextEditor.lib.module.js",
   "scripts": {
-    "build:dev": "NODE_ENV=development tsx ./build.ts",
-    "build:prod": "NODE_ENV=production tsx ./build.ts",
+    "build:dev": "cross-env NODE_ENV=development tsx ./build.ts",
+    "build:prod": "cross-env NODE_ENV=production tsx ./build.ts",
     "clean": "rimraf ./dist"
   },
   "keywords": [],
@@ -16,6 +16,7 @@
     "@microsoft/dotnet-js-interop": "^8.0.0",
     "@types/node": "^20.10.5",
     "@types/quill": "^2.0.14",
+    "cross-env": "^7.0.3",
     "esbuild": "0.19.5",
     "eslint": "^8.53.0",
     "rimraf": "5.0.5",

diff --git a/src/Spillgebees.Blazor.RichTextEditor.Assets/src/styles.css b/src/Spillgebees.Blazor.RichTextEditor.Assets/src/styles.css
@@ -1,6 +1,28 @@
 @import '../node_modules/quill/dist/quill.bubble.css';
 @import '../node_modules/quill/dist/quill.snow.css';
 
+.rich-text-editor-container.rich-text-editor-container-disabled {
+    cursor: not-allowed;
+    opacity: 0.38;
+    pointer-events: all;
+}
+
+.rich-text-editor-editor-container.rich-text-editor-editor-container-disabled {
+    pointer-events: none;
+}
+
 .ql-toolbar.ql-snow.rich-text-editor-toolbar-container-bottom {
     border-top: none;
 }
+
+.ql-toolbar.ql-snow.rich-text-editor-toolbar-container-hidden + .ql-container.ql-snow.ql-disabled.rich-text-editor-editor-container {
+    border-top: 1px solid #ccc;
+}
+
+.ql-toolbar.ql-snow.rich-text-editor-toolbar-container-disabled {
+    pointer-events: none;
+}
+
+.ql-toolbar.ql-snow.rich-text-editor-toolbar-container-hidden {
+    display: none;
+}
diff --git a/...illgebees.Blazor.RichTextEditor.Samples.Shared/Examples/HiddenRichTextEditorExample.razor b/...illgebees.Blazor.RichTextEditor.Samples.Shared/Examples/HiddenRichTextEditorExample.razor
@@ -0,0 +1,25 @@
+<div>
+    <h3>Disabled editor with <code class="hljs">ToolbarDisabledBehavior.Hidden</code></h3>
+    <CodeSnippet Code="@Code">
+        <Component>
+            <CodeSnippet Code="@_content"
+                         CodeFormat="CodeFormat.Html"
+                         Summary="Show HTML">
+                <Component>
+                    <RichTextEditor @bind-Content="@_content"
+                                    IsEditorEnabled="@false"
+                                    ToolbarOptions="ToolbarOptions.BasicToolbarOptions with { ToolbarDisabledBehavior = ToolbarDisabledBehavior.Hidden }"/>
+                </Component>
+            </CodeSnippet>
+        </Component>
+    </CodeSnippet>
+</div>
+
+@code {
+    private const string Code =
+@"<RichTextEditor @bind-Content=""@_content""
+                IsEditorEnabled=""@false""
+                ToolbarOptions=""ToolbarOptions.BasicToolbarOptions with { ToolbarDisabledBehavior = ToolbarDisabledBehavior.Hidden }""/>";
+
+    private string _content = "<b>Hello! \ud83d\udc4b</b>";
+}
diff --git a/...gebees.Blazor.RichTextEditor.Samples.Shared/Pages/RichTextEditorExamplesPageContent.razor b/...gebees.Blazor.RichTextEditor.Samples.Shared/Pages/RichTextEditorExamplesPageContent.razor
@@ -15,6 +15,8 @@
 
                 <DisabledRichTextEditorExample />
 
+                <HiddenRichTextEditorExample />
+
                 <FullToolbarOptionsRichTextEditorExample />
 
                 <CustomToolbarContentAndCustomFontRichTextEditorExample />

diff --git a/src/Spillgebees.Blazor.RichTextEditor/Components/BaseRichTextEditor.razor b/src/Spillgebees.Blazor.RichTextEditor/Components/BaseRichTextEditor.razor
@@ -6,6 +6,7 @@
                     @Toolbar
                 }
                 <div id="@EditorContainerHtmlId"
+                     class="@InternalEditorContainerClass"
                      @ref="@QuillReference">
                     @EditorContent
                 </div>

diff --git a/src/Spillgebees.Blazor.RichTextEditor/Components/BaseRichTextEditor.razor.cs b/src/Spillgebees.Blazor.RichTextEditor/Components/BaseRichTextEditor.razor.cs
@@ -122,6 +122,16 @@ public string? Text
     [Parameter]
     public string ContainerClass { get; set; } = string.Empty;
 
+    [Parameter]
+    public string ContainerDisabledClass { get; set; } = "rich-text-editor-container-disabled";
+
+    [Parameter]
+    public string EditorContainerClass { get; set; } = string.Empty;
+
+    [Parameter]
+    public string EditorContainerDisabledClass { get; set; } = "rich-text-editor-editor-container-disabled";
+
+
     [Parameter]
     public QuillDebugLevel DebugLevel { get; set; } = QuillDebugLevel.Error;
 
@@ -130,15 +140,33 @@ public string? Text
     protected Range? InternalSelection;
     protected bool InternalIsEditorEnabled;
 
-    protected string InternalContainerClass => new CssBuilder("rich-text-editor-container")
+    protected string InternalContainerClass => new CssBuilder()
+        .AddClass("rich-text-editor-container")
         .AddClass(ContainerClass)
+        .AddClass(ContainerDisabledClass, IsEditorEnabled is false)
+        .Build();
+
+    protected string InternalEditorContainerClass => new CssBuilder()
+        .AddClass("ql-container")
+        .AddClass("ql-snow", Theme is QuillTheme.Snow)
+        .AddClass("ql-bubble", Theme is QuillTheme.Bubble)
+        .AddClass("ql-disabled", IsEditorEnabled is false)
+        .AddClass("rich-text-editor-editor-container")
+        .AddClass(EditorContainerClass, IsEditorEnabled is false)
+        .AddClass(EditorContainerDisabledClass, IsEditorEnabled is false)
         .Build();
 
     protected string InternalToolbarContainerClass => new CssBuilder()
+        .AddClass("ql-toolbar")
+        .AddClass("ql-snow", Theme is QuillTheme.Snow)
+        .AddClass("ql-bubble", Theme is QuillTheme.Bubble)
+        .AddClass("ql-disabled", IsEditorEnabled is false)
         .AddClass("rich-text-editor-toolbar-container")
         .AddClass("rich-text-editor-toolbar-container-top", ToolbarOptions.ToolbarPosition is ToolbarPosition.Top)
         .AddClass("rich-text-editor-toolbar-container-bottom", ToolbarOptions.ToolbarPosition is ToolbarPosition.Bottom)
         .AddClass(ToolbarOptions.ToolbarContainerClass)
+        .AddClass(ToolbarOptions.ToolbarContainerDisabledClass, IsEditorEnabled is false && ToolbarOptions.ToolbarDisabledBehavior is ToolbarDisabledBehavior.Disabled)
+        .AddClass(ToolbarOptions.ToolbarContainerHiddenClass, IsEditorEnabled is false && ToolbarOptions.ToolbarDisabledBehavior is ToolbarDisabledBehavior.Hidden)
         .Build();
 
     protected ElementReference QuillReference;

diff --git a/src/Spillgebees.Blazor.RichTextEditor/Components/Toolbar/ToolbarDisabledBehavior.cs b/src/Spillgebees.Blazor.RichTextEditor/Components/Toolbar/ToolbarDisabledBehavior.cs
@@ -0,0 +1,7 @@
+namespace Spillgebees.Blazor.RichTextEditor.Components.Toolbar;
+
+public enum ToolbarDisabledBehavior
+{
+    Disabled,
+    Hidden
+}
diff --git a/src/Spillgebees.Blazor.RichTextEditor/Components/Toolbar/ToolbarOptions.cs b/src/Spillgebees.Blazor.RichTextEditor/Components/Toolbar/ToolbarOptions.cs
@@ -20,7 +20,10 @@ public record ToolbarOptions(
     string? ToolbarContainerHtmlId = null,
     List<string>? Fonts = null,
     ToolbarPosition ToolbarPosition = ToolbarPosition.Top,
-    string ToolbarContainerClass = "")
+    string ToolbarContainerClass = "",
+    ToolbarDisabledBehavior ToolbarDisabledBehavior = ToolbarDisabledBehavior.Disabled,
+    string ToolbarContainerDisabledClass = "rich-text-editor-toolbar-container-disabled",
+    string ToolbarContainerHiddenClass = "rich-text-editor-toolbar-container-hidden")
 {
     private static readonly List<string> _defaultFonts = new()
     {