Merge pull request #2 from erinnmclaughlin/customize-options

fix placeholder text color & add outlined option
erinnmclaughlin · Nov 6, 2023 · e2a1566 · e2a1566
2 parents 2cd2b52 + 1fc8785
commit e2a1566
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 17 deletions.
diff --git a/samples/BlazorServer/Pages/Index.razor b/samples/BlazorServer/Pages/Index.razor
@@ -10,9 +10,7 @@
             <MudButton Color="Color.Primary" OnClick="SaveChanges" Size="Size.Small" StartIcon="@Icons.Material.Filled.Save" Variant="Variant.Filled">Save Changes</MudButton>
         </MudStack>
 
-        <MudPaper Outlined="true">
-            <MudHtmlEditor @bind-Html="@_editableHtml" />
-        </MudPaper>
+        <MudHtmlEditor @bind-Html="@_editableHtml" />
     }
     else
     {
@@ -22,14 +20,13 @@
 
         <MudHtmlViewer Html="@_lastSavedHtml" />
     }
-
 </MudStack>
 
 @code {
 
     private string _lastSavedHtml = "<h1 class=\"ql-align-center\">Hello, World!</h1><hr/><p class=\"ql-align-center\">Hi from Blazor + <a href=\"https://quilljs.com/\" target=\"_blank\">QuillJs</a></p>";
     private string _editableHtml = "";
-    private bool _isEditing;
+    private bool _isEditing = true;
 
     protected override void OnInitialized()
     {

diff --git a/samples/BlazorWasm/Pages/Index.razor b/samples/BlazorWasm/Pages/Index.razor
@@ -10,9 +10,7 @@
             <MudButton Color="Color.Primary" OnClick="SaveChanges" Size="Size.Small" StartIcon="@Icons.Material.Filled.Save" Variant="Variant.Filled">Save Changes</MudButton>
         </MudStack>
 
-        <MudPaper Outlined="true">
-            <MudHtmlEditor @bind-Html="@_editableHtml" />
-        </MudPaper>
+        <MudHtmlEditor @bind-Html="@_editableHtml" />
     }
     else
     {
@@ -22,14 +20,13 @@
 
         <MudHtmlViewer Html="@_lastSavedHtml" />
     }
-
 </MudStack>
 
 @code {
 
     private string _lastSavedHtml = "<h1 class=\"ql-align-center\">Hello, World!</h1><hr/><p class=\"ql-align-center\">Hi from Blazor + <a href=\"https://quilljs.com/\" target=\"_blank\">QuillJs</a></p>";
     private string _editableHtml = "";
-    private bool _isEditing;
+    private bool _isEditing = true;
 
     protected override void OnInitialized()
     {

diff --git a/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.razor b/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.razor
@@ -1,4 +1,4 @@
-<div class="html-editor html-content-wrapper">
+<div class="html-editor html-content-wrapper @(Outlined ? "is-outlined" : "")">
     <div @ref="QuillInstance.ToolbarReference">
         @if (ChildContent is null)
         {

diff --git a/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.razor.cs b/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.razor.cs
@@ -13,6 +13,9 @@ public partial class MudHtmlEditor : IDisposable
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
 
+    [Parameter]
+    public bool Outlined { get; set; } = true;
+
     [Parameter]
     public string Placeholder { get; set; } = "Tell your story...";
 

diff --git a/src/Tizzani.MudBlazor.HtmlEditor/Tizzani.MudBlazor.HtmlEditor.csproj b/src/Tizzani.MudBlazor.HtmlEditor/Tizzani.MudBlazor.HtmlEditor.csproj
@@ -12,6 +12,7 @@
     <FileVersion>0.1.0.0</FileVersion>
     <PackageLicenseFile>LICENSE</PackageLicenseFile>
     <PackageReadmeFile>README.md</PackageReadmeFile>
+    <Version>1.0.1</Version>
   </PropertyGroup>
 
   <ItemGroup>

diff --git a/src/Tizzani.MudBlazor.HtmlEditor/wwwroot/MudHtmlEditor.css b/src/Tizzani.MudBlazor.HtmlEditor/wwwroot/MudHtmlEditor.css
@@ -4,7 +4,22 @@
     outline: none;
 }
 
-.html-content-wrapper, .html-content-wrapper.ql-snow, .html-content-wrapper .ql-snow {
+.html-content-wrapper .ql-container {
+    border: 0;
+}
+
+.html-content-wrapper.is-outlined .ql-container {
+    border: 1px solid var(--mud-palette-lines-default);
+    border-top: 0;
+}
+
+.html-content-wrapper .ql-editor.ql-blank::before {
+    color: var(--mud-text-secondary);
+}
+
+.html-content-wrapper,
+.html-content-wrapper.ql-snow, 
+.html-content-wrapper .ql-snow {
     /* Defaults */
     --mud-html-default-family: var(--mud-typography-default-family);
     --mud-html-default-size: var(--mud-typography-default-size);
@@ -112,16 +127,16 @@
             color: var(--mud-html-link);
         }
 
-.html-editor .ql-container {
-    border: 0;
-}
-
 .html-editor .ql-toolbar {
-    border-width: 0 0 1px 0;
+    border-width: 0;
     border-color: var(--mud-palette-lines-default);
     display: flex;
 }
 
+    .html-editor.is-outlined .ql-toolbar {
+        border-width: 1px;
+    }
+
     .html-editor .ql-toolbar .ql-formats {
         display: flex;
         margin: 0;