oqtane.framework/Oqtane.Client/Modules/Controls/RadzenTextEditor.razor

@using Microsoft.Extensions.Configuration
@using Oqtane.Interfaces
@using System.Text.RegularExpressions
@using Radzen
@using Radzen.Blazor

@namespace Oqtane.Modules.Controls
@inherits ModuleControlBase
@implements ITextEditor
@implements IDisposable
@inject Radzen.ThemeService ThemeService
@inject IRadzenEditorSettingService EditorSettingService
@inject DialogService DialogService
@inject NavigationManager NavigationManager
@inject IStringLocalizer<Oqtane.Modules.Controls.RadzenTextEditor> Localizer

<RadzenTheme Theme="@RadzenEditorDefinitions.DefaultTheme" />
<RadzenComponents />
<RadzenHtmlEditor @ref="_editor" Visible="_visible" Placeholder="@Placeholder" style="@($"height: {Height}px;")"
                  @bind-Value="_value" Execute="OnExecute" class="rz-text-editor">
    <ChildContent>
        @_toolbar
        @if (UserSecurity.IsAuthorized(PageState.User, RoleNames.Admin))
        {
            <RadzenHtmlEditorCustomTool CommandName="Settings" Icon="settings" Title="@Localizer["Settings"]" />
        }
    </ChildContent>

</RadzenHtmlEditor>

@code {
    private Oqtane.Modules.Controls.RadzenEditorInterop _interop;
    private RadzenHtmlEditor _editor;
    private string _value;
    private bool _visible = false;
    private string _theme;
    private string _background;
    private IList<string> _toolbarItems;
    private RenderFragment _toolbar;

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

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

    [Parameter]
    public int Height { get; set; } = 450;

    public string Name => "RadzenTextEditor";

    public override List<Resource> Resources { get; set; } = new List<Resource>()
    {
        new Resource { ResourceType = ResourceType.Script, Url = "/_content/Radzen.Blazor/Radzen.Blazor.js", Location = ResourceLocation.Head },
        new Resource { ResourceType = ResourceType.Script, Url = "/Modules/Oqtane.RadzenTextEditor/Resources/js/Interops/RadzenTextEditorInterop.js", Location = ResourceLocation.Head },
    };

    protected override void OnInitialized()
    {
        _interop = new Oqtane.Modules.Controls.RadzenEditorInterop(JSRuntime);
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        if (firstRender)
        {
            var interop = new Interop(JSRuntime);
            await interop.IncludeLink("", "stylesheet", $"/Modules/Oqtane.RadzenTextEditor/Resources/css/radzentexteditor.override.css", "text/css", "", "", "");
            await LoadSettings();
            _visible = true;
            StateHasChanged();

            await _interop.Initialize(_editor.Element);

            if (!string.IsNullOrEmpty(_theme))
            {
                ThemeService.SetTheme(_theme);
            }

            if (!string.IsNullOrEmpty(_background))
            {
                var backgroundColor = RadzenEditorDefinitions.TransparentBackgroundColor;
                switch (_background)
                {
                    case "Light":
                        backgroundColor = RadzenEditorDefinitions.LightBackgroundColor;
                        break;
                    case "Dark":
                        backgroundColor = RadzenEditorDefinitions.DarkBackgroundColor;
                        break;
                }
                await _interop.SetBackgroundColor(_editor.Element, backgroundColor);
            }
        }
    }

    public void Initialize(string content)
    {
        _value = !string.IsNullOrEmpty(content) ? content : string.Empty;
        DialogService.OnOpen += OnDialogOpened;
    }

    public void Dispose()
    {
        if (DialogService != null)
        {
            DialogService.OnOpen -= OnDialogOpened;
        }
    }

    public async Task<string> GetContent()
    {
        await Task.CompletedTask;

        return _value;
    }

    private async Task LoadSettings()
    {
        var scope = await EditorSettingService.GetSettingScopeAsync(ModuleState.ModuleId);
        var editorSetting = scope == 1
            ? await EditorSettingService.LoadSettingsFromModuleAsync(ModuleState.ModuleId)
            : await EditorSettingService.LoadSettingsFromSiteAsync(PageState.Site.SiteId);

        _theme = editorSetting.Theme;
        _background = editorSetting.Background;
        _toolbarItems = editorSetting.ToolbarItems.Split(',', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries).ToList();
        _toolbar = SetupToolbarItems();
    }

    private RenderFragment SetupToolbarItems()
    {
        return builder =>
        {
            var sequence = 0;
            foreach (var item in _toolbarItems)
            {
                if (RadzenEditorDefinitions.ToolbarItems.ContainsKey(item))
                {
                    sequence = RadzenEditorDefinitions.ToolbarItems[item](builder, sequence);
                }
            }
        };
    }

    private async Task OnExecute(HtmlEditorExecuteEventArgs args)
    {
        if (args.CommandName == "InsertImage")
        {
            await InsertImage(args.Editor);
        }
        else if (args.CommandName == "Settings")
        {
            await UpdateSettings(args.Editor);
        }
    }

    private async Task InsertImage(RadzenHtmlEditor editor)
    {
        await editor.SaveSelectionAsync();

        var result = await DialogService.OpenAsync<FileManagerDialog>(Localizer["DialogTitle.SelectImage"], new Dictionary<string, object>
        {
            { "Filters", PageState.Site.ImageFiles }
        });

        await editor.RestoreSelectionAsync();

        if (result != null)
        {
            await editor.ExecuteCommandAsync(HtmlEditorCommands.InsertHtml, result);
        }
    }

    private async Task UpdateSettings(RadzenHtmlEditor editor)
    {
        await editor.SaveSelectionAsync();

        var result = await DialogService.OpenAsync<SettingsDialog>(Localizer["Settings"], null, new DialogOptions { Width = "650px" });
        if (result == true)
        {
            NavigationManager.NavigateTo(NavigationManager.Uri);
        }

        await editor.RestoreSelectionAsync();
    }

    private async void OnDialogOpened(string title, Type componentType, Dictionary<string, object> parameters, DialogOptions options)
    {
        await _interop.UpdateDialogLayout(_editor.Element);
    }
}