Accent color
# MarkdownEditor
**Also known as:** MdEditor
## Description
BitMarkdownEditor is a native Blazor markdown editor with a customizable toolbar, keyboard shortcuts, smart list handling, undo/redo history and a live GitHub-flavored preview powered by the BitMarkdownViewer.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Classes | `BitMarkdownEditorClassStyles?` | null | Custom CSS classes for different parts of the editor. |
| DebounceTime | `int` | 150 | The debounce window (in milliseconds) before the preview re-renders while typing. |
| DefaultValue | `string?` | null | The default text value of the editor to use at initialization. |
| FullScreen | `bool` | false | Whether the editor is rendered in full-screen mode (two-way bindable). |
| Height | `string?` | null | The height of the editor (any CSS length). Ignored in full-screen mode. |
| IndentUnit | `string` | " " | The string inserted per indent level (default: two spaces). |
| Mode | `BitMarkdownEditorMode` | BitMarkdownEditorMode.Split | Determines which panes of the editor are visible (edit / split / preview). Two-way bindable. |
| OnChange | `EventCallback<string?>` | | Callback for when the editor value changes. |
| Placeholder | `string?` | null | The placeholder text shown when the editor is empty. |
| PreviewPipeline | `BitMarkdownPipeline?` | null | The markdown processing pipeline used by the preview pane. Defaults to BitMarkdownPipelines.GitHub. |
| PreviewTemplate | `RenderFragment<string>?` | null | A custom template to render the preview pane. Receives the current markdown value and replaces the built-in BitMarkdownViewer based preview. |
| ReadOnly | `bool` | false | Makes the editor read-only. |
| ShowStatusBar | `bool` | true | Whether the word/character status bar is shown. |
| ShowToolbar | `bool` | true | Whether the formatting toolbar is shown. |
| SpellCheck | `bool` | true | Enables the native browser spell checking in the textarea. |
| Styles | `BitMarkdownEditorClassStyles?` | null | Custom CSS styles for different parts of the editor. |
| Texts | `BitMarkdownEditorTexts?` | null | The localized strings of the editor UI (status bar, help panel, aria labels). Defaults to English. |
| Toolbar | `IReadOnlyList<BitMarkdownEditorToolbarItem>?` | null | A custom toolbar layout. Defaults to BitMarkdownEditorToolbar.Default when null. |
| Value | `string?` | null | The two-way bound text value of the editor. |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | `bool` | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| CanUndo | `bool` | false | True when there is at least one change that can be undone. |
| CanRedo | `bool` | false | True when there is at least one undone change that can be redone. |
| GetValue | `Func<ValueTask<string>>` | | Returns the current value of the editor directly from the textarea. |
| Run | `Func<BitMarkdownEditorCommand, ValueTask>` | | Runs a specific command on the current selection of the editor. |
| Undo | `Func<ValueTask>` | | Reverts the editor to the previous state in the undo history. |
| Redo | `Func<ValueTask>` | | Re-applies the most recently undone change. |
| Focus | `Func<ValueTask>` | | Moves the keyboard focus into the editor textarea. |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitMarkdownEditorCommand Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Bold | 0 | Toggles bold formatting on the current selection. |
| Italic | 1 | Toggles italic formatting on the current selection. |
| Strikethrough | 2 | Toggles strikethrough formatting on the current selection. |
| InlineCode | 3 | Toggles inline code formatting on the current selection. |
| Heading1 | 4 | Toggles a level 1 heading on the selected lines. |
| Heading2 | 5 | Toggles a level 2 heading on the selected lines. |
| Heading3 | 6 | Toggles a level 3 heading on the selected lines. |
| Heading4 | 7 | Toggles a level 4 heading on the selected lines. |
| Heading5 | 8 | Toggles a level 5 heading on the selected lines. |
| Heading6 | 9 | Toggles a level 6 heading on the selected lines. |
| Quote | 10 | Toggles a blockquote on the selected lines. |
| CodeBlock | 11 | Wraps the current selection in a fenced code block. |
| Link | 12 | Inserts a link or turns the current selection into a link. |
| Image | 13 | Inserts an image or turns the current selection into an image. |
| UnorderedList | 14 | Toggles an unordered (bullet) list on the selected lines. |
| OrderedList | 15 | Toggles an ordered (numbered) list on the selected lines. |
| TaskList | 16 | Toggles a task (checkbox) list on the selected lines. |
| Table | 17 | Inserts a table template at the caret position. |
| HorizontalRule | 18 | Inserts a horizontal rule at the caret position. |
| Indent | 19 | Increases the indentation of the selected lines (Tab). |
| Outdent | 20 | Decreases the indentation of the selected lines (Shift+Tab). |
| NewLine | 21 | Smart newline that continues lists and quotes (Enter). |
| Superscript | 22 | Toggles superscript on the current selection. |
| Subscript | 23 | Toggles subscript on the current selection. |
| ClearFormatting | 24 | Removes inline and block markdown formatting from the selected lines. |
### BitMarkdownEditorMode Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Edit | 0 | Only the markdown text area is shown. |
| Split | 1 | Editor and rendered preview are shown side by side. |
| Preview | 2 | Only the rendered preview is shown. |
### BitMarkdownEditorToolbarItemType Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Command | 0 | Runs the associated BitMarkdownEditorCommand against the text. |
| Undo | 1 | Reverts the editor to the previous state in the undo history. |
| Redo | 2 | Re-applies the most recently undone change. |
| Separator | 3 | A non-interactive vertical divider in the toolbar. |
| TogglePreview | 4 | Cycles the editor display mode (edit / split / preview). |
| ToggleFullScreen | 5 | Toggles the full-screen mode of the editor. |
| Help | 6 | Toggles the keyboard-shortcut help panel. |
| Custom | 7 | Invokes a user-supplied callback. |
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
### BitDir Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
## Sub Classes
### BitMarkdownEditorToolbarItem Properties
Describes a single button (or separator) in the editor toolbar. The toolbar is fully data-driven, so consumers can reorder, remove, or add items by supplying their own list to the Toolbar parameter.
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Name | `string` | string.Empty | Stable identifier, handy for tests and custom styling. |
| Title | `string` | string.Empty | Tooltip / accessible label shown to the user. |
| Icon | `string` | string.Empty | Raw inline SVG markup rendered inside the button. |
| Type | `BitMarkdownEditorToolbarItemType` | BitMarkdownEditorToolbarItemType.Command | How the item behaves when activated. |
| Command | `BitMarkdownEditorCommand?` | null | The text command to run when the Type is Command. |
| Shortcut | `string?` | null | Optional human readable shortcut hint, e.g. "Ctrl+B". |
| OnClick | `Func<BitMarkdownEditor, Task>?` | null | Callback used when the Type is Custom. |
### BitMarkdownEditorClassStyles Properties
Custom CSS classes/styles for different parts of the BitMarkdownEditor.
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the BitMarkdownEditor. |
| Toolbar | `string?` | null | Custom CSS classes/styles for the toolbar of the BitMarkdownEditor. |
| ToolbarButton | `string?` | null | Custom CSS classes/styles for the toolbar buttons of the BitMarkdownEditor. |
| TextArea | `string?` | null | Custom CSS classes/styles for the text area of the BitMarkdownEditor. |
| Preview | `string?` | null | Custom CSS classes/styles for the preview pane of the BitMarkdownEditor. |
| StatusBar | `string?` | null | Custom CSS classes/styles for the status bar of the BitMarkdownEditor. |
## Examples
\n**Basic**:
```razor
customToolbar = [];
protected override void OnInitialized()
{
customToolbar =
[
new() { Name = "bold", Title = "Bold", Command = BitMarkdownEditorCommand.Bold, Icon = BitMarkdownEditorToolbar.Icons.Bold, Shortcut = "Ctrl+B" },
new() { Name = "italic", Title = "Italic", Command = BitMarkdownEditorCommand.Italic, Icon = BitMarkdownEditorToolbar.Icons.Italic, Shortcut = "Ctrl+I" },
BitMarkdownEditorToolbarItem.Separator,
new() { Name = "link", Title = "Link", Command = BitMarkdownEditorCommand.Link, Icon = BitMarkdownEditorToolbar.Icons.Link, Shortcut = "Ctrl+K" },
new() { Name = "image", Title = "Image", Command = BitMarkdownEditorCommand.Image, Icon = BitMarkdownEditorToolbar.Icons.Image },
BitMarkdownEditorToolbarItem.Separator,
new()
{
Name = "clear",
Title = "Clear content",
Icon = "🗑️",
Type = BitMarkdownEditorToolbarItemType.Custom,
OnClick = _ =>
{
customToolbarValue = string.Empty;
return Task.CompletedTask;
}
},
];
}
```
\n**Commands**:
```razor
```
```csharp
private string previewDefaultValue =
@"GitHub flavored extras like ~~strikethrough~~, https://bitplatform.dev autolinks,
- [ ] task
- [x] lists
| and | tables |
| --- | ------ |
| are | here |";
```
\n**FullScreen & Height**:
```razor
Current value:
@onChangeValue``` ```csharp private string? onChangeValue; ``` \n**Mode**: ```razor
GetValue result:
@getValueResult``` ```csharp private BitMarkdownEditor commandsRef = default!; private string? getValueResult; private async Task RunCommand(BitMarkdownEditorCommand command) { await commandsRef.Run(command); } private async Task Undo() { await commandsRef.Undo(); } private async Task Redo() { await commandsRef.Redo(); } private async Task GetValue() { getValueResult = await commandsRef.GetValue(); } ``` \n**Preview**: ```razor
@context