Editor toolbar layout

@using Telerik.Blazor.Components.Editor
@using EditorNS = Telerik.Blazor.Components.Editor;

<style>
    .k-toolbar-item:first-of-type {
        margin-left: auto;
    }
</style>

<TelerikEditor Tools="@Tools" @bind-Value="@TheEditorContent">
    <EditorCustomTools>
        <EditorCustomTool Name="AddFile">
            <TelerikButton OnClick="@AddFile" Icon="@SvgIcon.FileAdd" />
        </EditorCustomTool>
        <EditorCustomTool Name="Clear">
            <TelerikButton OnClick="@Clear">
                Clear
            </TelerikButton>
        </EditorCustomTool>
        <EditorCustomTool Name="Save">
            <TelerikButton OnClick="@SaveComment">
                Save Comment
            </TelerikButton>
        </EditorCustomTool>
    </EditorCustomTools>
</TelerikEditor>

@code {
    private string TheEditorContent { get; set; } = "<h1>Lorem ipsum</h1><p>Dolor sit amet.</p>";
    private List<IEditorTool> Tools { get; set; }

    protected override Task OnInitializedAsync()
    {
        Tools = new List<IEditorTool>();
        Tools.Add(new EditorNS.Bold());
        Tools.Add(new EditorNS.Italic());
        Tools.Add(new EditorNS.Underline());

        // register the custom tool for the toolbar - it uses the Name parameter from the markup
        Tools.Add(new CustomTool("AddFile"));
        Tools.Add(new CustomTool("Clear"));
        Tools.Add(new CustomTool("Save"));

        return base.OnInitializedAsync();
    }

    private async Task AddFile()
    {
        // call the necessary logic here, such as adding a file
    }

    private async Task Clear()
    {
        // call the necessary logic here, such as clearing the content
    }

    private async Task SaveComment()
    {
        // call the necessary logic here, such as saving the content
    }
}