CreateNewBlogPost.razor

@using LinkDotNet.Blog.Domain
@using LinkDotNet.Blog.Infrastructure
@using LinkDotNet.Blog.Infrastructure.Persistence
@using LinkDotNet.Blog.Web.Features.Services
@using NCronJob
@inject IJSRuntime JSRuntime
@inject ICacheInvalidator CacheInvalidator
@inject IInstantJobRegistry InstantJobRegistry
@inject IRepository<ShortCode> ShortCodeRepository

<PageTitle>Creating new Blog Post</PageTitle>

<div class="container">
    <h3 class="fw-bold">@Title</h3>
    <EditForm Model="@model" OnValidSubmit="OnValidBlogPostCreatedAsync">
        <DataAnnotationsValidator />
        <div class="form-floating mb-3">
            <input type="text" class="form-control" id="title" placeholder="Title"
                   @oninput="args => model.Title = args.Value!.ToString()!" value="@model.Title" />
            <label for="title">Title</label>
            <ValidationMessage For="() => model.Title"></ValidationMessage>
        </div>
        <div class="form-floating mb-3">
            <MarkdownTextArea Id="short" Class="form-control" Rows="4" Placeholder="Short Description"
                              @bind-Value="@model.ShortDescription"
                              PreviewFunction="ReplaceShortCodes"></MarkdownTextArea>
            <ValidationMessage For="() => model.ShortDescription"></ValidationMessage>
        </div>
        <div class="form-floating mb-3 relative">
            <MarkdownTextArea Id="content" Class="form-control" Rows="20" Placeholder="Content"
                              PreviewFunction="ReplaceShortCodes"
                              @bind-Value="@model.Content"></MarkdownTextArea>
            <ValidationMessage For="() => model.Content"></ValidationMessage>

            <div class="btn-group position-absolute bottom-0 end-0 m-5 admin-extra-buttons">
                <button class="btn btn-primary btn-outlined btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    More
                </button>
                <ul class="dropdown-menu">
                    @if (shortCodes.Count > 0)
                    {
                        <li>
                            <button type="button" @onclick="OpenShortCodeDialog" class="dropdown-item">
                                <span>Get shortcode</span>
                            </button>
                        </li>
                    }
                    <li><button type="button" class="dropdown-item" @onclick="FeatureDialog.Open">Experimental Features</button></li>
                    <li><button id="convert" type="button" class="dropdown-item" @onclick="ConvertContent">@ConvertLabel <i class="lab"></i></button></li>
                </ul>
            </div>
        </div>
        <div class="form-floating mb-3">
            <InputText type="url" class="form-control" id="preview" placeholder="Preview-Url" @bind-Value="model.PreviewImageUrl" />
            <label for="preview">Preview-Url</label>
            <small for="preview" class="form-text text-body-secondary">The primary image which will be used.</small>
            <ValidationMessage For="() => model.PreviewImageUrl"></ValidationMessage>
        </div>
        <div class="form-floating mb-3">
            <InputText type="url" class="form-control" id="fallback-preview" placeholder="Fallback Preview-Url" @bind-Value="model.PreviewImageUrlFallback" />
            <label for="fallback-preview">Fallback Preview-Url</label>
            <small for="fallback-preview" class="form-text text-body-secondary">
                Optional: Used as a fallback if the preview image can't be used by the browser.
                <br>For example using a jpg or png as fallback for avif which is not supported in Safari or Edge.
            </small>
            <ValidationMessage For="() => model.PreviewImageUrlFallback"></ValidationMessage>
        </div>
        <div class="form-floating mb-3">
            <InputDate Type="InputDateType.DateTimeLocal" class="form-control" id="scheduled"
                       placeholder="Scheduled Publish Date" @bind-Value="model.ScheduledPublishDate"
                       @bind-Value:after="@(() => model.IsPublished &= !IsScheduled)" />
            <label for="scheduled">Scheduled Publish Date</label>
            <small for="scheduled" class="form-text text-body-secondary">
                If set the blog post will be published at the given date.
                A blog post with a schedule date can't be set to published.
                All dates are stored in UTC internally.
            </small>
            <ValidationMessage For="() => model.ScheduledPublishDate"></ValidationMessage>
        </div>
        <div class="form-check form-switch mb-3">
            <InputCheckbox class="form-check-input" id="published" @bind-Value="model.IsPublished" />
            <label class="form-check-label" for="published">Publish</label><br />
            <small for="published" class="form-text text-body-secondary">If this blog post is only draft or it will be scheduled, uncheck the box.</small>
            <ValidationMessage For="() => model.IsPublished"></ValidationMessage>
        </div>
        <div class="form-floating mb-3">
            <InputText type="text" class="form-control" id="tags" placeholder="Tags" @bind-Value="model.Tags" />
            <label for="tags">Tags (Comma separated)</label>
        </div>
        @if (BlogPost is not null && !IsScheduled)
        {
            <div class="form-check form-switch mb-3">
                <InputCheckbox class="form-check-input" id="updatedate" @bind-Value="model.ShouldUpdateDate" />
                <label class="form-check-label" for="updatedate">Update Publish Date</label><br />
                <small for="updatedate" class="form-text text-body-secondary">
                    If set the publish date is set to now,
                    otherwise its original date.
                </small>
            </div>
        }
        <div class="mb-3">
            <button class="btn btn-primary position-relative" type="submit" disabled="@(!canSubmit)">Submit</button>
            <div class="alert alert-info text-muted form-text mt-3 mb-3">
                The first page of the blog is cached. Therefore, the blog post is not immediately visible.
                Head over to <a href="/settings">settings</a> to invalidate the cache or enable the checkmark.
                <br>
                The option should be enabled if you want to publish the blog post immediately and it should be visible on the first page.
            </div>
            <div class="form-check form-switch mb-3">
                <InputCheckbox class="form-check-input" id="invalidate-cache" @bind-Value="model.ShouldInvalidateCache" />
                <label class="form-check-label" for="invalidate-cache">Make it visible immediately</label><br />
            </div>
        </div>
    </EditForm>
</div>

<FeatureInfoDialog @ref="FeatureDialog"></FeatureInfoDialog>
<ShortCodeDialog @ref="ShortCodeDialog" ShortCodes="shortCodes"></ShortCodeDialog>

<NavigationLock ConfirmExternalNavigation="@model.IsDirty" OnBeforeInternalNavigation="PreventNavigationWhenDirty"></NavigationLock>
@code {
    [Parameter]
    public BlogPost? BlogPost { get; set; }

    [Parameter, EditorRequired]
    public required string Title { get; set; }

    [Parameter]
    public EventCallback<BlogPost> OnBlogPostCreated { get; set; }

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

    private FeatureInfoDialog FeatureDialog { get; set; } = default!;
    private ShortCodeDialog ShortCodeDialog { get; set; } = default!;

    private CreateNewModel model = new();

    private string? originalContent = null;
    private bool IsContentConverted => !string.IsNullOrWhiteSpace(originalContent);
    private string ConvertLabel => !IsContentConverted ? "Convert to markdown" : "Restore";

    private bool canSubmit = true;
    private IPagedList<ShortCode> shortCodes = PagedList<ShortCode>.Empty;

    private bool IsScheduled => model.ScheduledPublishDate.HasValue;

    protected override async Task OnInitializedAsync()
    {
        shortCodes = await ShortCodeRepository.GetAllAsync();
    }

    protected override void OnParametersSet()
    {
        if (BlogPost is null)
        {
            return;
        }

        model = CreateNewModel.FromBlogPost(BlogPost);
    }

    private async Task OnValidBlogPostCreatedAsync()
    {
        canSubmit = false;
        await OnBlogPostCreated.InvokeAsync(model.ToBlogPost());
        if (model.ShouldInvalidateCache)
        {
            CacheInvalidator.Cancel();
        }

        InstantJobRegistry.RunInstantJob<SimilarBlogPostJob>(parameter: true);
        ClearModel();
        canSubmit = true;
    }

    private void ClearModel()
    {
        if (ClearAfterCreated)
        {
            model = new CreateNewModel();
        }
    }

    private async Task PreventNavigationWhenDirty(LocationChangingContext context)
    {
        if (!model.IsDirty)
            return;

        var isConfirmed = await JSRuntime.InvokeAsync<bool>("confirm", "You have unsaved changes. Are you sure you want to continue?");

        if (!isConfirmed)
        {
            context.PreventNavigation();
        }
    }

    private Task<string> ReplaceShortCodes(string markdown)
    {
        foreach (var code in shortCodes)
        {
            markdown = markdown.Replace($"[[{code.Name}]]", code.MarkdownContent);
        }

        return Task.FromResult(MarkdownConverter.ToMarkupString(markdown).Value);
    }

    private void OpenShortCodeDialog()
    {
        ShortCodeDialog.Open();
        StateHasChanged();
    }

    /// <summary>
    /// Convert content from HTML to Markdown and viceversa
    /// </summary>
    private void ConvertContent()
    {
        if (IsContentConverted)
        {
            model.Content = originalContent!;
            originalContent = null;
        }
        else
        {
            originalContent = model.Content;
            var converter = new ReverseMarkdown.Converter();
            model.Content = converter.Convert(model.Content);
        }
    }
}