RichTextEditor vs HtmlEditorComponent components #19

thabaum · 2024-06-11T15:26:54Z

thabaum
Jun 11, 2024

HTML Editor V1 "RichTextEditor" Components

RichTextEditor.razor

@using System.Text.RegularExpressions
@using Microsoft.AspNetCore.Components.Rendering
@using Microsoft.Extensions.DependencyInjection
@namespace Oqtane.Modules.Controls
@inherits ModuleControlBase
@inject IServiceProvider ServiceProvider
@inject ISettingService SettingService
@inject IStringLocalizer<RichTextEditor> Localizer 

<div class="row" style="margin-bottom: 50px;">
    <div class="col">
        @_textEditorComponent
    </div>
</div>

@code {
    private ITextEditorProvider _textEditorProvider;
    private RenderFragment _textEditorComponent;
    private ITextEditor _textEditor;

    [Parameter]
    public string Content { get; set; }

    [Parameter]
    public bool ReadOnly { get; set; } = false;

    [Parameter]
    public string Placeholder { get; set; }

    [Parameter]
    public bool AllowFileManagement { get; set; } = true;

    [Parameter]
    public bool AllowRichText { get; set; } = true;  

    [Parameter]
    public bool AllowRawHtml { get; set; } = true;  

    // parameters only applicable to rich text editor
    [Parameter]
    public RenderFragment ToolbarContent { get; set; }

    [Parameter]
    public string Theme { get; set; }

    [Parameter]
    public string DebugLevel { get; set; }

    public override List<Resource> Resources { get; set; } = new List<Resource>();

    protected override async Task OnInitializedAsync()
    {
        _textEditorProvider = await GetTextEditorProvider();
    }

    protected override void OnParametersSet()
    {
        _textEditorComponent = (builder) =>
        {
            CreateTextEditor(builder);
        };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(_textEditor != null)
        {
            _textEditor.Initialize(Content);
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    public async Task<string> GetHtml()
    {
        return await _textEditor.GetContent();
    }

    private void CreateTextEditor(RenderTreeBuilder builder)
    {
        if(_textEditorProvider != null)
        {
            var editorType = Type.GetType(_textEditorProvider.EditorType);
            if (editorType != null)
            {
                builder.OpenComponent(0, editorType);

                //set editor parameters if available.
                var attributes = new Dictionary<string, object>
                {
                    { "AllowFileManagement", AllowFileManagement },
                    { "AllowRichText", AllowRichText },
                    { "AllowRawHtml", AllowRawHtml },
                    { "ReadOnly", ReadOnly }
                };

                if(!string.IsNullOrEmpty(Theme))
                {
                    attributes.Add("Theme", Theme);
                }
                if (!string.IsNullOrEmpty(DebugLevel))
                {
                    attributes.Add("DebugLevel", DebugLevel);
                }
                if (!string.IsNullOrEmpty(Placeholder))
                {
                    attributes.Add("Placeholder", Placeholder);
                }
                if(ToolbarContent != null)
                {
                    attributes.Add("ToolbarContent", ToolbarContent);
                }

                var index = 1;
                foreach(var name in attributes.Keys)
                {
                    if (editorType.GetProperty(name) != null)
                    {
                        builder.AddAttribute(index++, name, attributes[name]);
                    }
                }

                builder.AddComponentReferenceCapture(index, (c) =>
                {
                    _textEditor = (ITextEditor)c;
                });
                builder.CloseComponent();
            }
        }
    }

    private async Task<ITextEditorProvider> GetTextEditorProvider()
    {
        const string DefaultEditorName = "Quill";

        var editorName = await GetTextEditorName(DefaultEditorName);
        var editorProviders = ServiceProvider.GetServices<ITextEditorProvider>();
        var editorProvider = editorProviders.FirstOrDefault(i => i.Name == editorName);
        if(editorProvider == null)
        {
            editorProvider = editorProviders.FirstOrDefault(i => i.Name == DefaultEditorName);
        }

        return editorProvider;
    }

    private async Task<string> GetTextEditorName(string defaultName)
    {
        const string EditorSettingName = "TextEditor";

        var settings = await SettingService.GetSiteSettingsAsync(PageState.Site.SiteId);
        return SettingService.GetSetting(settings, EditorSettingName, defaultName);
    }
}

Edit.razor

@using Oqtane.Modules.HtmlText.Services
@using Oqtane.Modules.HtmlText.Models
@using Oqtane.Modules.Controls
@namespace Oqtane.Modules.HtmlText
@inherits ModuleBase
@inject IHtmlTextService HtmlTextService
@inject ISettingService SettingService
@inject NavigationManager NavigationManager
@inject IStringLocalizer<Edit> Localizer
@inject IStringLocalizer<SharedResources> SharedLocalizer

<TabStrip>
    <TabPanel Name="Edit" Heading="Edit" ResourceKey="Edit">
		@if (_content != null)
		{
			<RichTextEditor Content="@_content" AllowFileManagement="@_allowfilemanagement" AllowRawHtml="@_allowrawhtml" @ref="@RichTextEditorHtml"></RichTextEditor>
			<br />
			<button type="button" class="btn btn-success" @onclick="SaveContent">@SharedLocalizer["Save"]</button>
			<NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
			@if (!string.IsNullOrEmpty(_content))
			{
				<br />
				<br />
				<AuditInfo CreatedBy="@_createdby" CreatedOn="@_createdon" ModifiedBy="@_modifiedby" ModifiedOn="@_modifiedon"></AuditInfo>
			}
		}
	</TabPanel>
    <TabPanel Name="Versions" Heading="Versions" ResourceKey="Versions">
		<Pager Items="@_htmltexts">
			<Header>
				<th style="width: 1px;">&nbsp;</th>
				<th style="width: 1px;">&nbsp;</th>
				<th style="width: 1px;">&nbsp;</th>
				<th>@SharedLocalizer["CreatedOn"]</th>
				<th>@SharedLocalizer["CreatedBy"]</th>
			</Header>
			<Row>
				<td><ActionLink Action="View" Security="SecurityAccessLevel.Edit" OnClick="@(async () => await View(context))" ResourceKey="View" /></td>
				<td><ActionDialog Header="Restore Version" Message="@string.Format(Localizer["Confirm.Restore"], context.CreatedOn)" Action="Restore" Security="SecurityAccessLevel.Edit" Class="btn btn-success" OnClick="@(async () => await Restore(context))" ResourceKey="Restore" /></td>
				<td><ActionDialog Header="Delete Version" Message="@string.Format(Localizer["Confirm.Delete"], context.CreatedOn)" Action="Delete" Security="SecurityAccessLevel.Edit" Class="btn btn-danger" OnClick="@(async () => await Delete(context))" ResourceKey="Delete" /></td>
				<td>@context.CreatedOn</td>
				<td>@context.CreatedBy</td>
			</Row>
		</Pager>
		@((MarkupString)_view)
	</TabPanel>
</TabStrip>

@code {
	public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Edit;

	public override string Title => "Edit Html/Text";

	public override List<Resource> Resources => new List<Resource>()
	{
        new Resource { ResourceType = ResourceType.Stylesheet, Url = "css/quill/quill.bubble.css" },
        new Resource { ResourceType = ResourceType.Stylesheet, Url = "css/quill/quill.snow.css" }
    };

	private RichTextEditor RichTextEditorHtml;
	private bool _allowfilemanagement;
	private bool _allowrawhtml;
	private string _content = null;
	private string _createdby;
	private DateTime _createdon;
	private string _modifiedby;
	private DateTime _modifiedon;
	private List<Models.HtmlText> _htmltexts;
	private string _view = "";

	protected override async Task OnInitializedAsync()
	{
		try
		{
			_allowfilemanagement = bool.Parse(SettingService.GetSetting(ModuleState.Settings, "AllowFileManagement", "true"));
			_allowrawhtml = bool.Parse(SettingService.GetSetting(ModuleState.Settings, "AllowRawHtml", "true"));
			await LoadContent();
		}
		catch (Exception ex)
		{
			await logger.LogError(ex, "Error Loading Content {Error}", ex.Message);
			AddModuleMessage(Localizer["Error.Content.Load"], MessageType.Error);
		}
	}

	private async Task LoadContent()
	{
		var htmltext = await HtmlTextService.GetHtmlTextAsync(ModuleState.ModuleId);
		if (htmltext != null)
		{
			_content = htmltext.Content;
			_content = Utilities.FormatContent(_content, PageState.Alias, "render");
			_createdby = htmltext.CreatedBy;
			_createdon = htmltext.CreatedOn;
			_modifiedby = htmltext.ModifiedBy;
			_modifiedon = htmltext.ModifiedOn;
		}
		else
		{
			_content = string.Empty;
		}

		_htmltexts = await HtmlTextService.GetHtmlTextsAsync(ModuleState.ModuleId);
		_htmltexts = _htmltexts.OrderByDescending(item => item.CreatedOn).ToList();

		_view = "";
	}

	private async Task SaveContent()
	{
		string content = await RichTextEditorHtml.GetHtml();
		content = Utilities.FormatContent(content, PageState.Alias, "save");

		try
		{
			var htmltext = new HtmlText();
			htmltext.ModuleId = ModuleState.ModuleId;
			htmltext.Content = content;
			await HtmlTextService.AddHtmlTextAsync(htmltext);

			await logger.LogInformation("Content Saved {HtmlText}", htmltext);
			NavigationManager.NavigateTo(NavigateUrl());
		}
		catch (Exception ex)
		{
			await logger.LogError(ex, "Error Saving Content {Error}", ex.Message);
			AddModuleMessage(Localizer["Error.Content.Save"], MessageType.Error);
		}
	}

	private async Task View(Models.HtmlText htmltext)
	{
		try
		{
			htmltext = await HtmlTextService.GetHtmlTextAsync(htmltext.HtmlTextId, htmltext.ModuleId);
			if (htmltext != null)
			{
				_view = htmltext.Content;
				_view = Utilities.FormatContent(_view, PageState.Alias, "render");
				StateHasChanged();
			}		
		}
		catch (Exception ex)
		{
			await logger.LogError(ex, "Error Viewing Content {Error}", ex.Message);
			AddModuleMessage(Localizer["Error.Content.View"], MessageType.Error);
		}
	}

	private async Task Restore(Models.HtmlText htmltext)
	{
		try
		{
			htmltext = await HtmlTextService.GetHtmlTextAsync(htmltext.HtmlTextId, ModuleState.ModuleId);
			if (htmltext != null)
			{
				var content = htmltext.Content;
				htmltext = new HtmlText();
				htmltext.ModuleId = ModuleState.ModuleId;
				htmltext.Content = content;
				await HtmlTextService.AddHtmlTextAsync(htmltext);
				await logger.LogInformation("Content Restored {HtmlText}", htmltext);
				AddModuleMessage(Localizer["Message.Content.Restored"], MessageType.Success);
				await LoadContent();
				StateHasChanged();
			}				
		}
		catch (Exception ex)
		{
			await logger.LogError(ex, "Error Restoring Content {Error}", ex.Message);
			AddModuleMessage(Localizer["Error.Content.Restore"], MessageType.Error);
		}
	}

	private async Task Delete(Models.HtmlText htmltext)
	{
		try
		{
			htmltext = await HtmlTextService.GetHtmlTextAsync(htmltext.HtmlTextId, ModuleState.ModuleId);
			if (htmltext != null)
			{
				await HtmlTextService.DeleteHtmlTextAsync(htmltext.HtmlTextId, htmltext.ModuleId);
				await logger.LogInformation("Content Deleted {HtmlText}", htmltext);
				AddModuleMessage(Localizer["Message.Content.Deleted"], MessageType.Success);
				await LoadContent();
				StateHasChanged();
			}		
		}
		catch (Exception ex)
		{
			await logger.LogError(ex, "Error Deleting Content {Error}", ex.Message);
			AddModuleMessage(Localizer["Error.Content.Delete"], MessageType.Error);
		}
	}
}

We need to refactor things and adjust code to work with the following HTML Editor v2 module component:

HTML Editor V2 "HtmlEditorComponent" Components

HtmlEditorComponent.razor

@using Oqtane.Modules.HtmlText.Services
@using Oqtane.Modules.HtmlText.Models
@using Oqtane.Modules.Controls
@namespace Oqtane.Modules.HtmlText
@inherits ModuleBase
@inject IHtmlTextService HtmlTextService
@inject ISettingService SettingService
@inject NavigationManager NavigationManager
@inject IStringLocalizer<Edit> Localizer
@inject IStringLocalizer<SharedResources> SharedLocalizer

<TabStrip>
    <TabPanel Name="Edit" Heading="Edit" ResourceKey="Edit">
		@if (_content != null)
		{
			<RichTextEditor Content="@_content" AllowFileManagement="@_allowfilemanagement" AllowRawHtml="@_allowrawhtml" @ref="@RichTextEditorHtml"></RichTextEditor>
			<br />
			<button type="button" class="btn btn-success" @onclick="SaveContent">@SharedLocalizer["Save"]</button>
			<NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
			@if (!string.IsNullOrEmpty(_content))
			{
				<br />
				<br />
				<AuditInfo CreatedBy="@_createdby" CreatedOn="@_createdon" ModifiedBy="@_modifiedby" ModifiedOn="@_modifiedon"></AuditInfo>
			}
		}
	</TabPanel>
    <TabPanel Name="Versions" Heading="Versions" ResourceKey="Versions">
		<Pager Items="@_htmltexts">
			<Header>
				<th style="width: 1px;">&nbsp;</th>
				<th style="width: 1px;">&nbsp;</th>
				<th style="width: 1px;">&nbsp;</th>
				<th>@SharedLocalizer["CreatedOn"]</th>
				<th>@SharedLocalizer["CreatedBy"]</th>
			</Header>
			<Row>
				<td><ActionLink Action="View" Security="SecurityAccessLevel.Edit" OnClick="@(async () => await View(context))" ResourceKey="View" /></td>
				<td><ActionDialog Header="Restore Version" Message="@string.Format(Localizer["Confirm.Restore"], context.CreatedOn)" Action="Restore" Security="SecurityAccessLevel.Edit" Class="btn btn-success" OnClick="@(async () => await Restore(context))" ResourceKey="Restore" /></td>
				<td><ActionDialog Header="Delete Version" Message="@string.Format(Localizer["Confirm.Delete"], context.CreatedOn)" Action="Delete" Security="SecurityAccessLevel.Edit" Class="btn btn-danger" OnClick="@(async () => await Delete(context))" ResourceKey="Delete" /></td>
				<td>@context.CreatedOn</td>
				<td>@context.CreatedBy</td>
			</Row>
		</Pager>
		@((MarkupString)_view)
	</TabPanel>
</TabStrip>

@code {
	public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Edit;

	public override string Title => "Edit Html/Text";

	public override List<Resource> Resources => new List<Resource>()
	{
        new Resource { ResourceType = ResourceType.Stylesheet, Url = "css/quill/quill.bubble.css" },
        new Resource { ResourceType = ResourceType.Stylesheet, Url = "css/quill/quill.snow.css" }
    };

	private RichTextEditor RichTextEditorHtml;
	private bool _allowfilemanagement;
	private bool _allowrawhtml;
	private string _content = null;
	private string _createdby;
	private DateTime _createdon;
	private string _modifiedby;
	private DateTime _modifiedon;
	private List<Models.HtmlText> _htmltexts;
	private string _view = "";

	protected override async Task OnInitializedAsync()
	{
		try
		{
			_allowfilemanagement = bool.Parse(SettingService.GetSetting(ModuleState.Settings, "AllowFileManagement", "true"));
			_allowrawhtml = bool.Parse(SettingService.GetSetting(ModuleState.Settings, "AllowRawHtml", "true"));
			await LoadContent();
		}
		catch (Exception ex)
		{
			await logger.LogError(ex, "Error Loading Content {Error}", ex.Message);
			AddModuleMessage(Localizer["Error.Content.Load"], MessageType.Error);
		}
	}

	private async Task LoadContent()
	{
		var htmltext = await HtmlTextService.GetHtmlTextAsync(ModuleState.ModuleId);
		if (htmltext != null)
		{
			_content = htmltext.Content;
			_content = Utilities.FormatContent(_content, PageState.Alias, "render");
			_createdby = htmltext.CreatedBy;
			_createdon = htmltext.CreatedOn;
			_modifiedby = htmltext.ModifiedBy;
			_modifiedon = htmltext.ModifiedOn;
		}
		else
		{
			_content = string.Empty;
		}

		_htmltexts = await HtmlTextService.GetHtmlTextsAsync(ModuleState.ModuleId);
		_htmltexts = _htmltexts.OrderByDescending(item => item.CreatedOn).ToList();

		_view = "";
	}

	private async Task SaveContent()
	{
		string content = await RichTextEditorHtml.GetHtml();
		content = Utilities.FormatContent(content, PageState.Alias, "save");

		try
		{
			var htmltext = new HtmlText();
			htmltext.ModuleId = ModuleState.ModuleId;
			htmltext.Content = content;
			await HtmlTextService.AddHtmlTextAsync(htmltext);

			await logger.LogInformation("Content Saved {HtmlText}", htmltext);
			NavigationManager.NavigateTo(NavigateUrl());
		}
		catch (Exception ex)
		{
			await logger.LogError(ex, "Error Saving Content {Error}", ex.Message);
			AddModuleMessage(Localizer["Error.Content.Save"], MessageType.Error);
		}
	}

	private async Task View(Models.HtmlText htmltext)
	{
		try
		{
			htmltext = await HtmlTextService.GetHtmlTextAsync(htmltext.HtmlTextId, htmltext.ModuleId);
			if (htmltext != null)
			{
				_view = htmltext.Content;
				_view = Utilities.FormatContent(_view, PageState.Alias, "render");
				StateHasChanged();
			}		
		}
		catch (Exception ex)
		{
			await logger.LogError(ex, "Error Viewing Content {Error}", ex.Message);
			AddModuleMessage(Localizer["Error.Content.View"], MessageType.Error);
		}
	}

	private async Task Restore(Models.HtmlText htmltext)
	{
		try
		{
			htmltext = await HtmlTextService.GetHtmlTextAsync(htmltext.HtmlTextId, ModuleState.ModuleId);
			if (htmltext != null)
			{
				var content = htmltext.Content;
				htmltext = new HtmlText();
				htmltext.ModuleId = ModuleState.ModuleId;
				htmltext.Content = content;
				await HtmlTextService.AddHtmlTextAsync(htmltext);
				await logger.LogInformation("Content Restored {HtmlText}", htmltext);
				AddModuleMessage(Localizer["Message.Content.Restored"], MessageType.Success);
				await LoadContent();
				StateHasChanged();
			}				
		}
		catch (Exception ex)
		{
			await logger.LogError(ex, "Error Restoring Content {Error}", ex.Message);
			AddModuleMessage(Localizer["Error.Content.Restore"], MessageType.Error);
		}
	}

	private async Task Delete(Models.HtmlText htmltext)
	{
		try
		{
			htmltext = await HtmlTextService.GetHtmlTextAsync(htmltext.HtmlTextId, ModuleState.ModuleId);
			if (htmltext != null)
			{
				await HtmlTextService.DeleteHtmlTextAsync(htmltext.HtmlTextId, htmltext.ModuleId);
				await logger.LogInformation("Content Deleted {HtmlText}", htmltext);
				AddModuleMessage(Localizer["Message.Content.Deleted"], MessageType.Success);
				await LoadContent();
				StateHasChanged();
			}		
		}
		catch (Exception ex)
		{
			await logger.LogError(ex, "Error Deleting Content {Error}", ex.Message);
			AddModuleMessage(Localizer["Error.Content.Delete"], MessageType.Error);
		}
	}
}

HtmlEditorComponent.razor.cs

using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

namespace HtmlEditor.Blazor
{
    /// <summary>
    /// A component which edits HTML content. Provides built-in upload capabilities.
    /// </summary>
    /// <example>
    /// <code>
    /// &lt;HtmlEditorComponent @bind-Value=@html /&gt;
    /// @code {
    ///   string html = "@lt;strong&gt;Hello&lt;/strong&gt; world!"; 
    /// }
    /// </code>
    /// </example>
    public partial class HtmlEditorComponent : FormComponent<string>
    {
        /// <summary>
        /// Specifies whether to show the toolbar. Set it to false to hide the toolbar. Default value is true.
        /// </summary>
        [Parameter]
        public bool ShowToolbar { get; set; } = true;

        /// <summary>
        /// Gets or sets the mode of the editor.
        /// </summary>
        [Parameter]
        public HtmlEditorMode Mode { get; set; } = HtmlEditorMode.Design;

        private HtmlEditorMode mode;

        /// <summary>
        /// Gets or sets the child content.
        /// </summary>
        /// <value>The child content.</value>
        [Parameter]
        public RenderFragment ChildContent { get; set; }

        /// <summary>
        /// Specifies custom headers that will be submit during uploads.
        /// </summary>
        [Parameter]
        public IDictionary<string, string> UploadHeaders { get; set; }

        /// <summary>
        /// Gets or sets the input.
        /// </summary>
        /// <value>The input.</value>
        [Parameter]
        public EventCallback<string> Input { get; set; }

        /// <summary>
        /// A callback that will be invoked when the user pastes content in the editor. Commonly used to filter unwanted HTML.
        /// </summary>
        /// <example>
        /// <code>
        /// &lt;HtmlEditor @bind-Value=@html Paste=@OnPaste /&gt;
        /// @code {
        ///   string html = "@lt;strong&gt;Hello&lt;/strong&gt; world!"; 
        ///   void OnPaste(HtmlEditorPasteEventArgs args)
        ///   {
        ///     // Set args.Html to filter unwanted tags.
        ///     args.Html = args.Html.Replace("&lt;br>&gt;", "");
        ///   }
        /// </code>
        /// </example>
        [Parameter]
        public EventCallback<HtmlEditorPasteEventArgs> Paste { get; set; }

        /// <summary>
        /// A callback that will be invoked when there is an error during upload.
        /// </summary>
        [Parameter]
        public EventCallback<UploadErrorEventArgs> UploadError { get; set; }

        /// <summary>
        /// Called on upload error.
        /// </summary>
        /// <param name="error">The error.</param>
        [JSInvokable("OnError")]
        public async Task OnError(string error)
        {
            await UploadError.InvokeAsync(new UploadErrorEventArgs { Message = error });
        }


        /// <summary>
        /// A callback that will be invoked when the user executes a command of the editor (e.g. by clicking one of the tools).
        /// </summary>
        /// <example>
        /// <code>
        /// &lt;HtmlEditor Execute=@OnExecute&gt;
        ///   &lt;HtmlEditorCustomTool CommandName="InsertToday" Icon="today" Title="Insert today" /&gt;
        /// &lt;/HtmlEditor&gt;
        /// @code {
        ///   string html = "@lt;strong&gt;Hello&lt;/strong&gt; world!"; 
        ///   async Task OnExecute(HtmlEditorExecuteEventArgs args)
        ///   {
        ///     if (args.CommandName == "InsertToday")
        ///     {
        ///       await args.Editor.ExecuteCommandAsync(HtmlEditorCommands.InsertHtml, DateTime.Today.ToLongDateString());
        ///     }
        ///  }
        /// </code>
        /// </example>
        [Parameter]
        public EventCallback<HtmlEditorExecuteEventArgs> Execute { get; set; }

        /// <summary>
        /// Specifies the URL to which HtmlEditor will submit files.
        /// </summary>
        [Parameter]
        public string UploadUrl { get; set; }

        ElementReference ContentEditable { get; set; }
        HtmlEditorTextArea TextArea { get; set; }

#if NET5_0_OR_GREATER
        /// <summary>
        /// Focuses the editor.
        /// </summary>
        public override ValueTask FocusAsync()
        {

            if (mode == HtmlEditorMode.Design)
            {
                return ContentEditable.FocusAsync();
            }
            else
            {
                return TextArea.Element.FocusAsync();
            }
        }
#endif

        private readonly IDictionary<string, Func<Task>> shortcuts = new Dictionary<string, Func<Task>>();

        internal HtmlEditorCommandState State { get; set; } = new HtmlEditorCommandState();

        async Task OnFocus()
        {
            await UpdateCommandState();
        }

        /// <summary>
        /// Invoked by interop when the HtmlEditor selection changes.
        /// </summary>
        [JSInvokable]
        public async Task OnSelectionChange()
        {
            await UpdateCommandState();
        }

        /// <summary>
        /// Invoked by interop during uploads. Provides the custom headers.
        /// </summary>
        [JSInvokable("GetHeaders")]
        public IDictionary<string, string> GetHeaders()
        {
            return UploadHeaders ?? new Dictionary<string, string>();
        }

        /// <summary>
        /// Executes the requested command with the provided value. Check <see cref="HtmlEditorCommands" /> for the list of supported commands.
        /// </summary>
        /// <param name="name">The name.</param>
        /// <param name="value">The value.</param>
        public async Task ExecuteCommandAsync(string name, string value = null)
        {
            State = await JSRuntime.InvokeAsync<HtmlEditorCommandState>("HtmlEditor.execCommand", ContentEditable, name, value);
            await OnExecuteAsync(name);

            if (Html != State.Html)
            {
                Html = State.Html;

                htmlChanged = true;

                await OnChange();
            }
        }

        /// <summary>
        /// Executes the action associated with the specified shortcut. Used internally by HtmlEditor.
        /// </summary>
        /// <param name="shortcut"></param>
        /// <returns></returns>
        [JSInvokable("ExecuteShortcutAsync")]
        public async Task ExecuteShortcutAsync(string shortcut)
        {
            if (shortcuts.TryGetValue(shortcut, out var action))
            {
                await action();
            }
        }

        private async Task SourceChanged(string html)
        {
            if (Html != html)
            {
                Html = html;
                htmlChanged = true;
            }
            await JSRuntime.InvokeVoidAsync("Radzen.innerHTML", ContentEditable, Html);
            await OnChange();
            StateHasChanged();
        }

        async Task OnChange()
        {
            if (htmlChanged)
            {
                htmlChanged = false;

                await ValueChanged.InvokeAsync(Html);

                if (FieldIdentifier.FieldName != null)
                {
                    EditContext?.NotifyFieldChanged(FieldIdentifier);
                }

                await Change.InvokeAsync(Html);
            }
        }

        internal async Task OnExecuteAsync(string name)
        {
            await Execute.InvokeAsync(new HtmlEditorExecuteEventArgs(this) { CommandName = name });

            StateHasChanged();
        }

        /// <summary>
        /// Saves the current selection. HtmlEditor will lose its selection when it loses focus. Use this method to persist the current selection.
        /// </summary>
        public async Task SaveSelectionAsync()
        {
            await JSRuntime.InvokeVoidAsync("HtmlEditor.saveSelection", ContentEditable);
        }

        /// <summary>
        /// Restores the last saved selection.
        /// </summary>
        public async Task RestoreSelectionAsync()
        {
            await JSRuntime.InvokeVoidAsync("HtmlEditor.restoreSelection", ContentEditable);
        }

        async Task UpdateCommandState()
        {
            State = await JSRuntime.InvokeAsync<HtmlEditorCommandState>("HtmlEditor.queryCommands", ContentEditable);

            StateHasChanged();
        }

        async Task OnBlur()
        {
            await OnChange();
        }

        bool htmlChanged = false;

        bool visibleChanged = false;
        bool firstRender = true;

        /// <inheritdoc />
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            await base.OnAfterRenderAsync(firstRender);

            this.firstRender = firstRender;

            if (firstRender || visibleChanged)
            {
                visibleChanged = false;

                if (Visible)
                {
                    await JSRuntime.InvokeVoidAsync("HtmlEditor.createEditor", ContentEditable, UploadUrl, Paste.HasDelegate, Reference, shortcuts.Keys);
                }
            }

            if (valueChanged || visibleChanged)
            {
                valueChanged = false;
                visibleChanged = false;

                Html = Value;

                if (Visible)
                {
                    await JSRuntime.InvokeVoidAsync("HtmlEditor.innerHTML", ContentEditable, Value);
                }
            }
        }

        internal void SetMode(HtmlEditorMode value)
        {
            mode = value;

            StateHasChanged();
        }

        /// <summary>
        /// Returns the current mode of the editor.
        /// </summary>
        public HtmlEditorMode GetMode()
        {
            return mode;
        }

        string Html { get; set; }

        /// <inheritdoc />
        protected override void OnInitialized()
        {
            Html = Value;
            mode = Mode;

            base.OnInitialized();
        }
        /// <summary>
        /// Invoked via interop when the value of HtmlEditor changes.
        /// </summary>
        /// <param name="html">The HTML.</param>
        [JSInvokable]
        public void OnChange(string html)
        {
            if (Html != html)
            {
                Html = html;
                htmlChanged = true;
            }
            Input.InvokeAsync(html);
        }

        /// <summary>
        /// Invoked via interop when the user pastes content in HtmlEditor. Invokes <see cref="Paste" />.
        /// </summary>
        /// <param name="html">The HTML.</param>
        [JSInvokable]
        public async Task<string> OnPaste(string html)
        {
            var args = new HtmlEditorPasteEventArgs { Html = html };

            await Paste.InvokeAsync(args);

            return args.Html;
        }

        bool valueChanged = false;

        /// <inheritdoc />
        public override async Task SetParametersAsync(ParameterView parameters)
        {
            if (parameters.DidParameterChange(nameof(Value), Value))
            {
                valueChanged = Html != parameters.GetValueOrDefault<string>(nameof(Value));
            }

            visibleChanged = parameters.DidParameterChange(nameof(Visible), Visible);

            await base.SetParametersAsync(parameters);

            if (visibleChanged && !firstRender && !Visible)
            {
                await JSRuntime.InvokeVoidAsync("HtmlEditor.destroyEditor", ContentEditable);
            }
        }

        /// <inheritdoc />
        protected override string GetComponentCssClass()
        {
            return "html-editor";
        }

        /// <inheritdoc />
        public override void Dispose()
        {
            base.Dispose();

            if (Visible && IsJSRuntimeAvailable)
            {
                JSRuntime.InvokeVoidAsync("HtmlEditor.destroyEditor", ContentEditable);
            }
        }
    }
}

Settings.razor

@namespace ADefWebserver.Module.HtmlTextV2
@inherits ModuleBase
@inject ISettingService SettingService
@implements Oqtane.Interfaces.ISettingsControl
@inject IStringLocalizer<Settings> Localizer

<div class="container">
    <div class="row mb-1 align-items-center">
        <Label Class="col-sm-3" For="files" ResourceKey="AllowFileManagement" ResourceType="@resourceType" HelpText="Specify If Editors Can Upload and Select Files">Allow File Management: </Label>
        <div class="col-sm-9">
            <select id="files" class="form-select" @bind="@_allowfilemanagement">
                <option value="true">@Localizer["Yes"]</option>
                <option value="false">@Localizer["No"]</option>
            </select>
        </div>
    </div>
    <div class="row mb-1 align-items-center">
        <Label Class="col-sm-3" For="files" ResourceKey="AllowRawHtml" ResourceType="@resourceType" HelpText="Specify If Editors Can Enter Raw HTML">Allow Raw HTML: </Label>
        <div class="col-sm-9">
            <select id="files" class="form-select" @bind="@_allowrawhtml">
                <option value="true">@Localizer["Yes"]</option>
                <option value="false">@Localizer["No"]</option>
            </select>
        </div>
    </div>
</div>

@code {
    private string resourceType = "ADefWebserver.Module.HtmlTextV2.Settings, Oqtane.Client"; // for localization
    private string _allowfilemanagement;
    private string _allowrawhtml;

    protected override void OnInitialized()
    {
        try
        {
            _allowfilemanagement = SettingService.GetSetting(ModuleState.Settings, "AllowFileManagement", "true");
            _allowrawhtml = SettingService.GetSetting(ModuleState.Settings, "AllowRawHtml", "true");
        }
        catch (Exception ex)
        {
            AddModuleMessage(ex.Message, MessageType.Error);
        }
    }

    public async Task UpdateSettings()
    {
        try
        {
            var settings = await SettingService.GetModuleSettingsAsync(ModuleState.ModuleId);
            settings = SettingService.SetSetting(settings, "AllowFileManagement", _allowfilemanagement);
            settings = SettingService.SetSetting(settings, "AllowRawHtml", _allowrawhtml);
            await SettingService.UpdateModuleSettingsAsync(settings, ModuleState.ModuleId);
        }
        catch (Exception ex)
        {
            AddModuleMessage(ex.Message, MessageType.Error);
        }
    }
}

One thing missing is the GetHtml() class in the HtmlEditorComponent.razor.cs.

Taking what was in the first repo this was taken and copied to the Edit.razor but has a few issues, one with recognizing context and the other with the GetHtml() component class.

We have some parameters that can get set in settings as well for allowing source and file management. For file management may need to also have a setting for allowing uploads or just allowing selecting files available type of options to review as we move forward.

These seem to the files with logic we need to focus on merging what we need and removing what is no longer needed.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

RichTextEditor vs HtmlEditorComponent components #19

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

RichTextEditor vs HtmlEditorComponent components #19

Uh oh!

Uh oh!

thabaum Jun 11, 2024

HTML Editor V1 "RichTextEditor" Components

HTML Editor V2 "HtmlEditorComponent" Components

Replies: 0 comments

thabaum
Jun 11, 2024