@page "/html-editor"
@page "/docs/guides/components/htmleditor.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    HtmlEditor
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>HtmlEditor</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase a rich text WYSIWYG editor with two-way data binding, comprehensive text formatting tools (bold/italic/underline/strikethrough/colors/fonts/alignment/lists), link and image insertion, custom tool sets, image upload functionality with <code>UploadUrl</code> property, source code editing, and focus management.
</RadzenText>

<RadzenText Anchor="html-editor#get-set-value" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and set the value
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    As all Radzen Blazor input components the HtmlEditor has a <code>Value</code> property which gets and sets the value of the component. Use <code>@@bind-Value</code> to get the user input.
</RadzenText>
<RadzenExample ComponentName="HtmlEditor" Example="HtmlEditorGetSetValue">
    <HtmlEditorGetSetValue />
</RadzenExample>

<RadzenText Anchor="html-editor#all-tools" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    All tools
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
The Radzen HtmlEditor supports the following tools:
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1">
    <ul style="line-height: 2rem">
        <li>RadzenHtmlEditorUndo - allows the user to undo the last action (result of other tool, typing or pasting).</li>
        <li>RadzenHtmlEditorRedo - allows the use to redo the last undone action.</li>
        <li>RadzenHtmlEditorSeparator - displays a vertical separator used to delimit group of similar tools.</li>
        <li>RadzenHtmlEditorBold - toggles the bold style of the selected text.</li>
        <li>RadzenHtmlEditorItalic - toggles the italic style of the selected text.</li>
        <li>RadzenHtmlEditorUnderline - toggles the underline style of the selected text.</li>
        <li>RadzenHtmlEditorStrikeThrough - toggles the strikethrough style of the selected text.</li>
        <li>RadzenHtmlEditorAlignLeft - toggles left text alignment.</li>
        <li>RadzenHtmlEditorAlignCenter - toggles center text alignment.</li>
        <li>RadzenHtmlEditorAlignRight - toggles right text alignment.</li>
        <li>RadzenHtmlEditorJustify - toggles justified text alignment.</li>
        <li>RadzenHtmlEditorIndent - indents the selected text.</li>
        <li>RadzenHtmlEditorOutdent - outdents the selected text.</li>
        <li>RadzenHtmlEditorUnorderedList - inserts unordered (bullet) list.</li>
        <li>RadzenHtmlEditorOrderedList - inserts ordered (numbered) list.</li>
        <li>RadzenHtmlEditorColor - sets the foreground color of the selected text.</li>
        <li>RadzenHtmlEditorBackground - sets the background color of the selected text.</li>
        <li>RadzenHtmlEditorRemoveFormat - removes the visual styling of the selected text.</li>
        <li>RadzenHtmlEditorSubscript - converts the selected text to subscript.</li>
        <li>RadzenHtmlEditorSource - edit the HTML source as text.</li>
        <li>RadzenHtmlEditorSuperscript - converts the selected text to superscript</li>
        <li>RadzenHtmlEditorLink - inserts a hyperlink.</li>
        <li>RadzenHtmlEditorUnlink - removes a hyperlink.</li>
        <li>RadzenHtmlEditorImage - allows the user to insert an image by either uploading a file or selecting a URL. Requires File upload to be implemented and the UploadUrl property of the HtmlEditor to be set.</li>
        <li>RadzenHtmlEditorFontName - set the font of the selected text.</li>
        <li>RadzenHtmlEditorFontSize - set the font size of the selected text.</li>
        <li>RadzenHtmlEditorFormatBlock - allows the user to format the selected text as heading or paragraph.</li>
        <li>RadzenHtmlEditorCustomTool - allows the developer to implement a custom tool.</li>
    </ul>
</RadzenText>

<RadzenText Anchor="html-editor#custom-set-of-tools" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Custom set of tools (text-editing only)
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Here is how to specify a custom set of tools.
</RadzenText>
<RadzenExample ComponentName="HtmlEditor" Example="HtmlEditorCustomToolsSet">
    <HtmlEditorCustomToolsSet />
</RadzenExample>

<RadzenText Anchor="html-editor#upload" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
    Upload images
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    You can insert images by pasting them or using the <strong>RadzenHtmlEditorImage</strong> tool. By default images are inserted as base64 encoded strings.
    To upload images to the server you need to implement a file upload endpoint and set the <code>UploadUrl</code> property of the RadzenHtmlEditor component:
    <code>&lt;RadzenHtmlEditor @@bind-Value=@@htmlValue UploadUrl="upload/image" /&gt;</code>.
    For a sample implementation check the <code>UploadController.cs</code> tab.
</RadzenText>
<RadzenExample ComponentName="HtmlEditor" Example="HtmlEditorUploadUrl" AdditionalSourceCodePages="@(new [] { "/demos/Controllers/UploadController.cs"})" >
    <HtmlEditorUploadUrl />
</RadzenExample>
<RadzenText Anchor="html-editor#focus" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Focus
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Programmatically set focus to the HTML editor using the <code>FocusAsync()</code> method.
</RadzenText>
<RadzenExample ComponentName="HtmlEditor" Example="HtmlEditorFocus">
    <HtmlEditorFocus />
</RadzenExample>

<RadzenText Anchor="html-editor#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Keyboard Navigation
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor HTMLEditor component.
</RadzenText>

<RadzenTable>
    <RadzenTableHeader>
        <RadzenTableHeaderRow>
            <RadzenTableHeaderCell colspan="2">Press this key</RadzenTableHeaderCell>
            <RadzenTableHeaderCell rowspan="2">To do this</RadzenTableHeaderCell>
        </RadzenTableHeaderRow>
        <RadzenTableHeaderRow>
            <RadzenTableHeaderCell>Windows, Chrome OS</RadzenTableHeaderCell>
            <RadzenTableHeaderCell>Mac</RadzenTableHeaderCell>
        </RadzenTableHeaderRow>
    </RadzenTableHeader>
    <RadzenTableBody>
        <RadzenTableRow>
            <RadzenTableCell><RadzenBadge Text="Tab" /></RadzenTableCell>
            <RadzenTableCell><RadzenBadge Text="Tab" /></RadzenTableCell>
            <RadzenTableCell>Navigate to a HTMLEditor component.</RadzenTableCell>
        </RadzenTableRow>
        <RadzenTableRow>
            <RadzenTableCell><RadzenBadge Text="Ctrl" /> + <RadzenBadge Text="A" /></RadzenTableCell>
            <RadzenTableCell><RadzenBadge Text="⌘" /> + <RadzenBadge Text="A" /></RadzenTableCell>
            <RadzenTableCell>Select all text.</RadzenTableCell>
        </RadzenTableRow>
        <RadzenTableRow>
            <RadzenTableCell><RadzenBadge Text="Ctrl" /> + <RadzenBadge Text="C" /></RadzenTableCell>
            <RadzenTableCell><RadzenBadge Text="⌘" /> + <RadzenBadge Text="C" /></RadzenTableCell>
            <RadzenTableCell>Copy.</RadzenTableCell>
        </RadzenTableRow>
        <RadzenTableRow>
            <RadzenTableCell><RadzenBadge Text="Ctrl" /> + <RadzenBadge Text="V" /></RadzenTableCell>
            <RadzenTableCell><RadzenBadge Text="⌘" /> + <RadzenBadge Text="V" /></RadzenTableCell>
            <RadzenTableCell>Paste.</RadzenTableCell>
        </RadzenTableRow>
        <RadzenTableRow>
            <RadzenTableCell><RadzenBadge Text="Ctrl" /> + <RadzenBadge Text="B" /></RadzenTableCell>
            <RadzenTableCell><RadzenBadge Text="⌘" /> + <RadzenBadge Text="B" /></RadzenTableCell>
            <RadzenTableCell>Bold.</RadzenTableCell>
        </RadzenTableRow>
        <RadzenTableRow>
            <RadzenTableCell><RadzenBadge Text="Ctrl" /> + <RadzenBadge Text="I" /></RadzenTableCell>
            <RadzenTableCell><RadzenBadge Text="⌘" /> + <RadzenBadge Text="I" /></RadzenTableCell>
            <RadzenTableCell>Italic.</RadzenTableCell>
        </RadzenTableRow>
        <RadzenTableRow>
            <RadzenTableCell><RadzenBadge Text="Ctrl" /> + <RadzenBadge Text="U" /></RadzenTableCell>
            <RadzenTableCell><RadzenBadge Text="⌘" /> + <RadzenBadge Text="U" /></RadzenTableCell>
            <RadzenTableCell>Underline.</RadzenTableCell>
        </RadzenTableRow>
        <RadzenTableRow>
            <RadzenTableCell><RadzenBadge Text="Ctrl" /> + <RadzenBadge Text="K" /></RadzenTableCell>
            <RadzenTableCell><RadzenBadge Text="⌘" /> + <RadzenBadge Text="K" /></RadzenTableCell>
            <RadzenTableCell>Insert or edit a link.</RadzenTableCell>
        </RadzenTableRow>
        <RadzenTableRow>
            <RadzenTableCell><RadzenBadge Text="Ctrl" /> + <RadzenBadge Text="Z" /></RadzenTableCell>
            <RadzenTableCell><RadzenBadge Text="⌘" /> + <RadzenBadge Text="Z" /></RadzenTableCell>
            <RadzenTableCell>Undo.</RadzenTableCell>
        </RadzenTableRow>
        <RadzenTableRow>
            <RadzenTableCell><RadzenBadge Text="Ctrl" /> + <RadzenBadge Text="Shift" /> + <RadzenBadge Text="Z" /></RadzenTableCell>
            <RadzenTableCell><RadzenBadge Text="⌘" /> + <RadzenBadge Text="Shift" /> + <RadzenBadge Text="Z" /></RadzenTableCell>
            <RadzenTableCell>Redo.</RadzenTableCell>
        </RadzenTableRow>
    </RadzenTableBody>
</RadzenTable>