Blazorise Markdown component

The Markdown component allows you to edit Markdown strings.

The Blazorise Markdown component is based on the EasyMDE JavaScript library.

To use the Markdown component, install the Blazorise.Markdown package first.

Installation

NuGet

Install extension from NuGet. 
dotnet add package Blazorise.Markdown

Imports

In your main _Imports.razor add: 
@using Blazorise.Markdown

Example

<Markdown Value="@markdownValue" ValueChanged="@OnMarkdownValueChanged" />

@code{
    string markdownValue = "# EasyMDE \n Go ahead, play around with the editor! Be sure to check out **bold**, *italic*, [links](https://google.com) and all the other features. You can type the Markdown syntax, use the toolbar, or use shortcuts like `ctrl-b` or `cmd-b`.";

    string markdownHtml;

    protected override void OnInitialized()
    {
        markdownHtml = Markdig.Markdown.ToHtml( markdownValue ?? string.Empty );

        base.OnInitialized();
    }

    Task OnMarkdownValueChanged( string value )
    {
        markdownValue = value;

        markdownHtml = Markdig.Markdown.ToHtml( markdownValue ?? string.Empty );

        return Task.CompletedTask;
    }
}

Validation

Use Markdown inside a Validation or Validations container just like any other form input. Validation messages and styling update automatically when you validate or submit the form. 
<Validations @ref="validations" Mode="ValidationMode.Manual">
    <Validation Validator="@ValidationRule.IsNotEmpty">
        <Field>
            <FieldLabel>Message</FieldLabel>
            <FieldBody>
                <Markdown @bind-Value="@message" MinHeight="160px">
                    <Feedback>
                        <ValidationError>Please enter a message.</ValidationError>
                    </Feedback>
                </Markdown>
            </FieldBody>
        </Field>
    </Validation>
    <Button Color="Color.Primary" Clicked="@Submit">Submit</Button>
</Validations>

@code {
    Validations validations;

    string message;

    async Task Submit()
    {
        await validations.ValidateAll();
    }
}

Toolbar customization

The editor's toolbar can be edited to show more icons and even add custom icons! 
<Markdown @bind-Value="@markdownValue" CustomButtonClicked="@OnCustomButtonClicked">
    <Toolbar>
        <MarkdownToolbarButton Action="MarkdownAction.Bold" Icon="fa fa-bolt" Title="Bold" />
        <MarkdownToolbarButton Separator Name="Custom button" Value="@("hello")" Icon="fa fa-star" Title="A Custom Button" Text="My Custom Button" />
        <MarkdownToolbarButton Separator Name="https://github.com/Ionaru/easy-markdown-editor" Icon="fa fab fa-github" Title="A Custom Link" />
    </Toolbar>
</Markdown>

@code {
    [Inject] private INotificationService NotificationService { get; set; }

    string markdownValue = "## Custom Toolbar\nCustom functions, icons and buttons can be defined for the toolbar.";

    Task OnCustomButtonClicked( MarkdownButtonEventArgs eventArgs )
    {
        NotificationService.Info( $"Name: {eventArgs.Name} Value: {eventArgs.Value}" );

        return Task.CompletedTask;
    }
}

Upload image

Uploading an image has a similar API to our FileInput component and is fairly simple to use. 
<Markdown ImageUploadChanged="@OnImageUploadChanged"
          ImageUploadStarted="@OnImageUploadStarted"
          ImageUploadProgressed="@OnImageUploadProgressed"
          ImageUploadEnded="@OnImageUploadEnded" />

@code {
    async Task OnImageUploadChanged( FileChangedEventArgs e )
    {
        try
        {
            foreach ( var file in e.Files )
            {
                using ( var stream = new System.IO.MemoryStream() )
                {
                    await file.WriteToStreamAsync( stream );

                    // do something with the stream
                }
            }
        }
        catch ( Exception exc )
        {
            Console.WriteLine( exc.Message );
        }
        finally
        {
            this.StateHasChanged();
        }
    }

    Task OnImageUploadStarted( FileStartedEventArgs e )
    {
        Console.WriteLine( $"Started Image: {e.File.Name}" );

        return Task.CompletedTask;
    }

    Task OnImageUploadProgressed( FileProgressedEventArgs e )
    {
        Console.WriteLine( $"Image: {e.File.Name} Progress: {(int)e.Percentage}" );

        return Task.CompletedTask;
    }

    Task OnImageUploadEnded( FileEndedEventArgs e )
    {
        // We need to report back to Markdown that upload is done. We do this by setting the UploadUrl.
        // NOTE: Since we're faking the upload in this demo we will just set some dummy UploadUrl.
        e.File.UploadUrl = "https://images.pexels.com/photos/4966601/pexels-photo-4966601.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=200";

        Console.WriteLine( $"Finished Image: {e.File.Name}, Success: {e.Success}" );

        return Task.CompletedTask;
    }
}

Change Shortcuts

EasyMDE comes with an array of predefined keyboard shortcuts, but they can be altered with a configuration option. 
<Markdown Shortcuts="@(new MarkdownShortcuts{ CleanBlock = null, ToggleCodeBlock = "Cmd-E" })" />

Custom Preview Render

Sometimes you don't want to render preview with the built-in parser. In those situations you can make use of PreviewRender callback to override the preview HTML. 
<Markdown Value="@markdownValue" ValueChanged="@OnMarkdownValueChanged" PreviewRender="@PreviewRender" />

@code {
    string markdownValue = "# EasyMDE \n Go ahead, play around with the editor! Be sure to check out **bold**, *italic*, [links](https://google.com) and all the other features. You can type the Markdown syntax, use the toolbar, or use shortcuts like `ctrl-b` or `cmd-b`.";

    Task OnMarkdownValueChanged( string value )
    {
        markdownValue = value;

        return Task.CompletedTask;
    }

    protected Task<string> PreviewRender( string plainText )
    {
        return Task.FromResult( Markdig.Markdown.ToHtml( markdownValue ?? string.Empty ) );
    }
}

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page