@using Telerik.Blazor.Components.Editor

<TelerikEditor @bind-Value="@EditorValue"
               Tools="@EditorTools">
    <EditorCustomTools>
        <EditorCustomTool Name="Preview">
            <TelerikButton Icon="search" Title="Preview" OnClick="@ShowPreview">Preview</TelerikButton>
        </EditorCustomTool>
    </EditorCustomTools>
</TelerikEditor>

<TelerikWindow @bind-Visible="@WindowVisible"
               Modal="true"
               Width="70vw"
               Height="70vh">
    <WindowTitle>
        Editor Value Preview
    </WindowTitle>
    <WindowActions>
        <WindowAction Name="Close" />
    </WindowActions>
    <WindowContent>
        @( new MarkupString(EditorValue) )
    </WindowContent>
</TelerikWindow>

@code {
    private string EditorValue { get; set; } = @"<p>Foo <strong>Bar</strong> Baz</p>";

    private bool WindowVisible { get; set; }

    private List<IEditorTool> EditorTools { get; set; } = new List<IEditorTool>() {
        new EditorButtonGroup(
            new Bold(),
            new Italic(),
            new Underline()
        ),
        new EditorButtonGroup(
            new UnorderedList(),
            new OrderedList()
        ),
        new CustomTool("Preview")
    };

    private void ShowPreview()
    {
        WindowVisible = true;
    }
}