SeemGen/Components/Partials/TemplateSnippetEditor.razor

@using BLAIzor.Models
@using BLAIzor.Services
@using Microsoft.AspNetCore.Components.Authorization
@inject ContentEditorService ContentEditorService
@inject AuthenticationStateProvider AuthenticationStateProvider
@inject CustomAuthenticationStateProvider CustomAuthProvider
@inject NavigationManager navigationManager
@inject IJSRuntime JSRuntime

<div class="menu-item-editor">
    <div class="row">
        <h4>Snippet info</h4>
        <p>The basic information about the code-block</p>
    </div>
    <div class="row">
        <div class="form-group col-md-2">
            <label>Snippet name</label>
            <InputText class="form-control" @bind-Value="Snippet.Name" />
        </div>


        <div class="form-group col-md-2">
            <label>Variant</label>
            <InputText class="form-control" @bind-Value="Snippet.Variant" />
        </div>

        <div class="form-group col-md-4">
            <label>Type (comma-separated)</label>
            <InputText class="form-control" @bind-Value="Snippet.Type" />
        </div>
        <div class="form-group col-md-4">
            <label>Tags (comma-separated)</label>
            <InputText class="form-control" @bind-Value="Snippet.Tags" />
        </div>
    </div>
    <div class="row">
        <div class="form-group col-md-12">
            <label>Description</label>
            <InputTextArea class="form-control" @bind-Value="Snippet.Description" />
        </div>
    </div>

    <div class="row">
        <h5>Snippet parametrized code</h5>
        <p>Your parametrized html template for a specific block, like article, card, hero or such</p>
        <div class="form-group">
            <label>Template</label>
            <RadzenHtmlEditor @bind-Value=@Snippet.Html style="height: 450px; color:#000; background-color: rgba(255,255,255,0) !important" Input=@OnInput Change=@OnChange Paste=@OnPaste UploadComplete=@OnUploadComplete Execute=@OnExecute UploadUrl="upload/image">
                <RadzenHtmlEditorUndo />
                <RadzenHtmlEditorRedo />
                <RadzenHtmlEditorSource />
            </RadzenHtmlEditor>
        </div>
    </div>
    <div class="row">
        <h5>Snippet sample code</h5>
        <p>Your sample html template for a specific block, like article, card, hero or such. Here you can use sample data in the snippet, to see if your css is working well</p>
        <div class="form-group">
            <label>Sample</label><RadzenButton Click="@(() => ShowSnippetPreview(Snippet))">Preview snippet</RadzenButton>
            @* <RadzenHtmlEditor @bind-Value=@Snippet.SampleHtml style="height: 450px; color:#000; background-color: rgba(255,255,255,0) !important" Input=@OnInput Change=@OnChange Paste=@OnPaste UploadComplete=@OnUploadComplete Execute=@OnExecute UploadUrl="upload/image">
                <RadzenHtmlEditorUndo />
                <RadzenHtmlEditorRedo />
                <RadzenHtmlEditorSource />
            </RadzenHtmlEditor> *@
        </div>
    </div>
    @* <EventConsole @ref=@console /> *@
    @if (IsLoading)
    {
        <p>Loading content...</p>
    }
</div>

@code {

    [Parameter] public HtmlSnippet Snippet { get; set; } = new HtmlSnippet();
    [Parameter] public EventCallback<HtmlSnippet> OnContentUpdated { get; set; }
    [Parameter] public int TemplateId { get; set; }

    private bool IsLoading = false;

    private string? userId;
    private string? userName;
    private AuthenticationState? authState;

    // EventConsole console;

    public async void ShowSnippetPreview(HtmlSnippet snippet)
    {
        //navigationManager.NavigateTo($"/preview-snippet/{TemplateId}/{snippet.Name}");
        // await JSRuntime.InvokeAsync<object>("open", $"/preview-snippet/{TemplateId}/{snippet.Name}", "_blank");
        await JSRuntime.InvokeVoidAsync("open", $"/preview-snippet/{TemplateId}/{snippet.Name}", "_blank");
    }

    protected override async Task OnParametersSetAsync()
    {
        authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
        if (authState.User.Identity?.IsAuthenticated == true)
        {
            userId = CustomAuthProvider.GetUserId();
            userName = CustomAuthProvider.GetUserName();
        }
        if(string.IsNullOrWhiteSpace(Snippet.Tags))
        {
            Snippet.Tags = Snippet.Name;
        }
        if (string.IsNullOrWhiteSpace(Snippet.SampleHtml))
        {
            Snippet.SampleHtml = Snippet.Html;
        }
        if (string.IsNullOrWhiteSpace(Snippet.Variant))
        {
            Snippet.Variant = "";
        }

    }

    async Task OnPaste(HtmlEditorPasteEventArgs args)
    {
        // console.Log($"Paste: {args.Html}");
        // await OnContentUpdated.InvokeAsync(MenuItem);
    }

    async Task OnChange(string html)
    {
        // console.Log($"Change: {html}");

    }

    async Task OnInput(string html)
    {
        // console.Log($"Input: {html}");

    }

    void OnExecute(HtmlEditorExecuteEventArgs args)
    {
        // console.Log($"Execute: {args.CommandName}");
    }

    void OnUploadComplete(UploadCompleteEventArgs args)
    {
        // console.Log($"Upload complete: {args.RawResponse}");
    }

}