diff --git a/samples/BlazorServer/Pages/EditorView.razor b/samples/BlazorServer/Pages/EditorView.razor index 632962b..210036c 100644 --- a/samples/BlazorServer/Pages/EditorView.razor +++ b/samples/BlazorServer/Pages/EditorView.razor @@ -2,15 +2,22 @@ Add Paragraph Cancel Reset + Focus + Blur + + Save Changes - + @code { private MudHtmlEditor _editor = default!; private string _html = ""; + bool isReadOnly = false; + bool disabled = false; + [Parameter] public string InitialHtml { get; set; } = ""; @@ -29,6 +36,14 @@ { await _editor.Reset(); } + private async Task Blur() + { + await _editor.Blur(); + } + private async Task Focus() + { + await _editor.Focus(); + } private async Task SaveChanges() { diff --git a/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.razor b/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.razor index 29d76c7..bd8bcab 100644 --- a/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.razor +++ b/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.razor @@ -1,4 +1,4 @@ -
+
@if (ChildContent is null) { @@ -10,4 +10,4 @@ }
-
+
\ No newline at end of file diff --git a/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.razor.cs b/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.razor.cs index 58aadcc..44b72c8 100644 --- a/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.razor.cs +++ b/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.razor.cs @@ -1,5 +1,6 @@ using Microsoft.AspNetCore.Components; using Microsoft.JSInterop; +using System.Runtime.InteropServices; namespace Tizzani.MudBlazor.HtmlEditor; @@ -9,6 +10,8 @@ public sealed partial class MudHtmlEditor : IAsyncDisposable private IJSObjectReference? _quill; private ElementReference _toolbar; private ElementReference _editor; + private bool isReadOnly; + private bool disabled; [Inject] private IJSRuntime JS { get; set; } = default!; @@ -16,6 +19,9 @@ public sealed partial class MudHtmlEditor : IAsyncDisposable [Parameter] public RenderFragment? ChildContent { get; set; } + [Parameter] + public string Class { get; set; } + /// /// Whether or not to ourline the editor. Default value is . /// @@ -34,6 +40,36 @@ public sealed partial class MudHtmlEditor : IAsyncDisposable [Parameter] public string Html { get; set; } = ""; + [Parameter] + public bool ReadOnly + { + get => isReadOnly; + set + { + if (isReadOnly != value) + { + isReadOnly = value; + if (_quill is not null) + { + _ = InvokeAsync(async () => await SetReadOnly(value)); + } + } + } + } + + [Parameter] + public bool Disabled + { + get => this.disabled; + set + { + if (value != disabled) + { + this.disabled = value; + } + } + } + /// /// Raised when the property changes. /// @@ -64,7 +100,6 @@ public sealed partial class MudHtmlEditor : IAsyncDisposable [Parameter(CaptureUnmatchedValues = true)] public IDictionary? UserAttributes { get; set; } - /// /// Clears the content of the editor. /// @@ -107,6 +142,38 @@ public async Task GetText() return ""; } + private async Task SetReadOnly(bool isReadOnly) + { + if (_quill is not null) + { + await _quill.InvokeVoidAsync("enable", !isReadOnly); + } + this.isReadOnly = isReadOnly; + } + + public async Task Focus() + { + if (_quill is not null) + await _quill.InvokeVoidAsync("focus"); + } + + public async Task GetHasFocus() + { + if (_quill is not null) + return await _quill.InvokeAsync("hasFocus"); + throw new Exception("Quill instance is not initialized."); + } + + /// + /// Removes focus from the editor. + /// + /// + public async Task Blur() + { + if (_quill is not null) + await _quill.InvokeVoidAsync("blur"); + } + protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) @@ -117,12 +184,12 @@ protected override async Task OnAfterRenderAsync(bool firstRender) _quill = await module.InvokeAsync("createQuillInterop", _dotNetRef, _editor, _toolbar, Placeholder); await SetHtml(Html); + await SetReadOnly(ReadOnly); StateHasChanged(); } } - [JSInvokable] public async void HandleHtmlContentChanged(string html) { diff --git a/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.razor.js b/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.razor.js index 974d5b6..f04e52a 100644 --- a/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.razor.js +++ b/src/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.razor.js @@ -14,7 +14,7 @@ Quill.register(Divider, true); try { Quill.register('modules/blotFormatter', QuillBlotFormatter.default); -} catch { } +} catch { } export function createQuillInterop(dotNetRef, editorRef, toolbarRef, placeholder) { var quill = new Quill(editorRef, { @@ -65,8 +65,27 @@ export class MudQuillInterop { } }; + focus = () => { + this.quill.focus(); + } + + hasFocus = () => { + return this.quill.hasFocus(); + } + + enable = (isEnabled) => { + this.quill.enable(isEnabled); + } + + /** + * Removes focus from the editor. + */ + blur = () => { + this.quill.blur(); + } + /** - * + * * @param {Delta} delta * @param {Delta} oldDelta * @param {any} source diff --git a/src/Tizzani.MudBlazor.HtmlEditor/wwwroot/MudHtmlEditor.css b/src/Tizzani.MudBlazor.HtmlEditor/wwwroot/MudHtmlEditor.css index 60693c4..d328a56 100644 --- a/src/Tizzani.MudBlazor.HtmlEditor/wwwroot/MudHtmlEditor.css +++ b/src/Tizzani.MudBlazor.HtmlEditor/wwwroot/MudHtmlEditor.css @@ -1,2 +1,12 @@ @import url('quill.snow.min.css'); @import url('MudHtmlEditor.Core.css'); + + +.mudhtmleditor-disabled { + pointer-events: none; + cursor: not-allowed; +} + +.mudhtmleditor-disabled .ql-toolbar.ql-snow * { + opacity: 0.85; +}