MarkdownEditor
MdEditor
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.
Notes
To use this component, you need to install the
Bit.BlazorUI.Extras
nuget package, as described in the Optional steps of the
Getting started page.
Introduction
The BitMarkdownEditor is a full-featured, dependency-free markdown editor.
All markdown transformations run in C#, the preview is rendered natively by the BitMarkdownViewer,
and a small JS-interop script handles the textarea selection control, key interception
and the undo/redo history (with typing coalescing).
Start typing below and see the result in real-time, or explore the toolbar, the keyboard shortcuts (check the ? button)
and the smart list continuation (start a line with - or
1. and hit Enter):
BitMarkdownEditor in action
A native Blazor markdown editor with:
- Data-driven toolbar
- Keyboard shortcuts (Ctrl+B, Ctrl+I, Ctrl+K, ...)
- Smart list continuation & Tab indentation
- Undo/Redo history (Ctrl+Z / Ctrl+Y)
- Live GitHub flavored preview via
BitMarkdownViewer
| Mode | Description |
|---|---|
| Edit | Only the text area |
| Split | Side-by-side |
| Preview | Only the preview |
Start typing here...
Split
78 words
460 chars
Usage
Basic
The simplest usage of the BitMarkdownEditor without any specific configuration renders
the full toolbar, a split edit/preview view and the status bar.
Nothing to preview yet.
Split
0 words
0 chars
Binding
You can use the two-way bound parameter named Value (like any normal input component)
to have access to the editor content or to set its value from the outside.
Two-way binding
Edit
3 words
17 chars
OnChange
By utilizing the OnChange event and the DefaultValue parameter you can have
another way to initialize and access the content of the editor.
This is the default value
Edit
6 words
27 chars
Current value:
Mode
The Mode parameter (two-way bindable) controls which panes are visible:
Edit only, Split (side-by-side) or Preview only. The eye button of the toolbar cycles through these modes too.
Mode
Switch between Edit, Split and Preview using the choice group above,
the eye button of the toolbar, or the @bind-Mode parameter.
Split
23 words
149 chars
Toolbar
The toolbar is fully data-driven. Supply your own list of toolbar items to reorder, remove or add buttons,
including fully custom items with their own callback, or hide the toolbar altogether.
Custom toolbar (with a custom "clear" button at the end):
The toolbar of this editor only offers basic formatting and a custom clear button.
Split
14 words
88 chars
Without the toolbar and the status bar:
Nothing to preview yet.
Commands
Using the public API of the BitMarkdownEditor (Run, Undo, Redo, GetValue, Focus) you can drive
the editor from the outside, for example to build a completely custom toolbar.
Nothing to preview yet.
Split
0 words
0 chars
GetValue result:
Preview
The preview pane is rendered natively in C# by the BitMarkdownViewer using the GitHub flavored pipeline by default.
You can customize it with the PreviewPipeline parameter or replace it entirely using the PreviewTemplate.
Basic pipeline (no tables, task-lists, strikethrough, or autolinks):
GitHub flavored extras like ~~strikethrough~~, https://bitplatform.dev autolinks,
- [ ] task
- [x] lists
| and | tables | | --- | ------ | | are | here |
Split
29 words
157 chars
Custom PreviewTemplate (renders the raw markdown source):
GitHub flavored extras like ~~strikethrough~~, https://bitplatform.dev autolinks, - [ ] task - [x] lists | and | tables | | --- | ------ | | are | here |
Split
29 words
157 chars
FullScreen & Height
The Height parameter accepts any CSS length and the FullScreen parameter (two-way bindable,
also available as a toolbar button) expands the editor to fill the entire screen.
Nothing to preview yet.
Split
0 words
0 chars
Advanced
Fine-tune the editing experience: a custom Placeholder, disabled SpellCheck, a custom preview render DebounceTime,
a custom IndentUnit (used by Tab / Shift+Tab and the Indent/Outdent commands) or the ReadOnly mode.
Nothing to preview yet.
Split
0 words
0 chars
ReadOnly:
Read-only
The content of this editor cannot be edited, but can still be selected and the preview stays live.
Split
20 words
116 chars
Style & Class
Use Style and Class parameters to customize the root element, or the Styles and Classes parameters
to customize every part of the editor.
Component's Style & Class:
Nothing to preview yet.
Split
0 words
0 chars
Styles & Classes:
Nothing to preview yet.
Split
0 words
0 chars
RTL
Use BitMarkdownEditor in right-to-left (RTL).
ویرایشگر مارکداون
این یک متن راست به چپ برای نمایش قابلیت RTL است.
- پشتیبانی کامل از لیستها
- میانبرهای صفحهکلید
Split
22 words
120 chars
API
BitMarkdownEditor 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. |
BitMarkdownEditor 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. |
BitComponentBase parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| 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. |
| 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. |
BitComponentBase public members
| Name | Type | Default value | Description |
|---|---|---|---|
| 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. |
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. |
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. |
Feedback
You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.
Or you can review / edit this page on GitHub.
- On this page