Extras

MarkdownEditor

Bit.BlazorUI.ExtrasMdEditor

BitMarkdownEditor is a dependency-free Blazor markdown editor. Its data-driven toolbar, keyboard shortcuts, smart list continuation, undo/redo history, find & replace panel, autosaved drafts and image upload sit on top of a plain textarea, and the live GitHub-flavored preview is rendered by the BitMarkdownViewer. Every command is a pure C# text transformation, and the toolbar, the panels and the full-screen mode follow the keyboard and ARIA patterns their roles ask for.

ForceAnimation (whole page)

Notes

To use this component, you need to install the Bit.BlazorUI.Extras(opens in a new tab) nuget package, as described in the Optional steps of the Getting started page.

Introduction

The BitMarkdownEditor is a full-featured, dependency-free markdown editor. Every markdown transformation runs in C# (so it is unit-testable and shared by the toolbar, the shortcuts and the public API), the preview is rendered natively by the BitMarkdownViewer, and a small JS-interop script owns the textarea selection, the 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), the find & replace panel (Ctrl+F) 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)
Find & replace (Ctrl+F)
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 84 words 490 chars

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

The simplest usage of the BitMarkdownEditor without any specific configuration renders the full toolbar, a split edit/preview view and the status bar. Everything else on this page is a refinement of this default.

Nothing to preview yet.

Split 0 words 0 chars

Binding

The two-way bound Value parameter exposes the markdown source, like any other input component. Writing to it from the outside pushes the new text into the editor without losing the caret, so a value edited elsewhere and the editor stay in sync in both directions.

Edit 3 words 17 chars

Bound value (editable)

OnChange

DefaultValue seeds the editor once at initialization and then leaves it alone, and the OnChange callback reports every subsequent edit. Together they are the uncontrolled alternative to binding Value, useful when the content only has to travel one way.

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 and the F9 key cycle through the three modes, and in Split mode the two panes scroll in sync.

Edit

Split

Preview

Mode

Switch between Edit, Split and Preview using the choice group above, the eye button of the toolbar, the F9 key, or the @bind-Mode parameter.

Split 26 words 161 chars

Toolbar

The toolbar is fully data-driven: supply your own list of items to reorder, remove or add buttons, group them under a dropdown (the default toolbar does it for the heading levels and the table tools), or hide the toolbar altogether. A Custom item runs its own callback and receives the editor instance, so it can read or rewrite the content; set AlwaysEnabled on it to keep a non-editing action (export, copy, save) clickable while the editor is read-only. It follows the WAI-ARIA toolbar pattern - one tab stop, arrow keys between buttons, and Enter/Space/Arrow Down to open a dropdown.

Custom toolbar (with a heading dropdown and 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

The public API drives the editor from the outside, which is all a completely custom toolbar needs: Run applies any BitMarkdownEditorCommand to the current selection, Insert drops raw markdown in (replacing the selection) as one undo step, GetSelection / SetSelection read and move the caret, Undo / Redo walk the history that CanUndo / CanRedo describe, and GetValue reads the live text straight out of the textarea.

Nothing to preview yet.

Split 0 words 0 chars

Result:

Preview

The preview pane is rendered natively in C# by the BitMarkdownViewer, using the GitHub flavored pipeline by default. PreviewPipeline swaps in another Markdig pipeline, PreviewTemplate replaces the pane entirely with your own markup, and DebounceTime decides how long typing has to settle before the preview re-renders.

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

Height accepts any CSS length and MinHeight / MaxHeight bound it, which is also what bounds the Resizable drag handle on the bottom edge so the reader can make room for themselves without collapsing the editor or letting it run off the page. FullScreen (two-way bindable, also a toolbar button and the F11 key) expands the editor over the whole viewport - holding the page still underneath it for as long as it is open, so nothing has moved once it closes. Escape leaves full-screen again.

Nothing to preview yet.

Split 0 words 0 chars

Advanced

Fine-tune the editing experience: a custom Placeholder, disabled SpellCheck, a custom IndentUnit (used by Tab / Shift+Tab and the Indent/Outdent commands), AutoPair to wrap the selection when a pairing character is typed over it, SyncScroll for the split panes, ChangeDebounceTime to throttle how often the typed value reaches .NET (worth raising on Blazor Server), and TabIndents to let Tab move the focus on instead of indenting. Whatever TabIndents is set to, pressing Escape and then Tab always moves the focus out, so the editor is never a keyboard trap. Tab with the caret inside a list item or a quote nests the whole line rather than pushing spaces into the middle of it, and AutoFocus (left off here, so the page does not jump) puts the caret in the editor on load.

Nothing to preview yet.

Split 0 words 0 chars

AutoClosePairs closes a bracket or a quote as it is typed with nothing selected - typing the closing character then steps over it instead of doubling it, and Backspace between the two halves removes both. Only (, [, {, ` and " take part: a * or a - opens a list far more often than a span.

Edit 0 words 0 chars

BoldStyle, ItalicStyle and BulletStyle pick the spelling the commands write - the two emphasis markers mean the same thing to a parser, and every bullet character is a valid bullet, so this is a house style. Toggling off still recognizes whatever is already in the text, and Clear formatting strips both spellings, because the document was not necessarily written here.

Edit 13 words 67 chars

A wider table template (TableColumns / TableRows drive the toolbar's table button):

Edit 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

Find & replace

The magnifier button and Ctrl+F open the find & replace panel, seeded with whatever is selected: Enter in the find box walks to the next match and Shift+Enter to the previous one, Enter in the replace box replaces (Ctrl+Enter replaces every match), the Aa button toggles case sensitivity, and the counter reports which match of how many is selected. A match found off screen is scrolled to. The same behaviour is available programmatically through FindNext, FindPrevious and Replace, so a custom search box can drive it - Replace returns how many occurrences it changed and, with all off, walks one match at a time from the caret.

Find

Replace with

Edit 27 words 159 chars

Image upload

Setting OnImageUpload turns on clipboard-paste and drag-and-drop of images anywhere on the editor: a placeholder is inserted at once, the handler receives the file name, the MIME type and the raw bytes, and the URL it returns replaces the placeholder (returning null cancels the insertion instead). The handler below just inlines the bytes as a data URL; a real one would post them to your storage and hand back the resulting address. AcceptedImageTypes and MaxImageSize turn a file away before a single byte is read - so an oversized image never becomes an interop payload - and report it through OnImageRejected. Pasting an HTML table or tab-separated spreadsheet cells converts them into a markdown table, and pasting a URL over a selection turns the selection into a link.

Image upload

Paste an image from the clipboard, or drop an image file anywhere on this editor.

Split 18 words 96 chars

Auto save

AutoSaveId names a localStorage key the editor writes the content to as the user types, and reads back the next time it initializes when no Value or DefaultValue is supplied - so a reloaded page, or a form abandoned by accident, does not lose the draft. OnDraftRestored fires only when a draft was actually used, which is what lets the app say so instead of guessing where the text came from. Type something below, reload the page and it comes back. Call ClearDraft once the content is stored for real, otherwise the stale draft would keep resurrecting.

Nothing to preview yet.

Split 0 words 0 chars

Status bar

The status bar reports the current mode, the word count (every CJK ideograph and kana counts on its own, since those scripts carry no spaces) and the character count in grapheme clusters, so an emoji counts as one. ShowReadingTime adds an estimate based on WordsPerMinute, ShowCursorPosition adds the caret's line and column plus how much text is selected, and MaxLength both caps the content and turns the counter into a "used / allowed" readout that highlights once the limit is reached - counted in the UTF-16 units the cap itself is enforced in.

EditLn 1, Col 1 13 words 77 / 280 chars1 min read

Localization

Every string the editor renders itself - the toolbar tooltips and aria-labels, the status bar formats, the find panel, the shortcut help and the empty-preview text - comes from the Texts parameter. Override only the properties you care about; the rest keep their English defaults. The counts are passed as format templates ({0}, {1}) so the translation controls the word order.

Un éditeur localisé

Chaque libellé de l'éditeur vient du paramètre Texts : survolez la barre d'outils, ouvrez la recherche ou lisez la barre d'état.

Partagé 25 mots 157 caractères1 min de lecture

Label & submit

Label (or LabelTemplate for your own markup) names the editor the way any other form field is named: it renders above the toolbar and is tied to the textarea, so clicking it moves the focus in and assistive tech announces it - which is why an explicit AriaLabel is only needed when there is no visible label. OnSubmit turns Ctrl/Cmd+Enter into a submit carrying the current value; the shortcut is only captured while that callback is set, so a form that binds it elsewhere keeps it. OnFocus and OnBlur complete the set, and the Focus, Blur and AutoFocus members move the keyboard in and out of the editor from code.

Release notes

Nothing to preview yet.

Split 0 words 0 chars

Submitted value:

Table tools

The toolbar's table menu edits the table the caret is already in: a row above or below, a column before or after, deleting either, and the alignment of the caret's column. Each one rewrites the whole table and lays it back out with every column padded to its widest cell, so the source stays readable instead of decaying into ragged pipes - which also means a table pasted in from a spreadsheet is tidied up the first time it is touched. Outside a table they do nothing at all, and the header row and the last column are always kept, since a GFM table is defined by them. Tab and Shift+Tab walk the cells while the caret is inside a table, selecting what is in each one and adding a row once the last cell is passed, so a grid can be filled in without reaching for the mouse. Every one of these is a BitMarkdownEditorCommand, so Run reaches them from a toolbar of your own.

Package	Downloads	Notes
Core	1.2M	ships the components
Extras	480K	ships this editor

Split 32 words 154 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

Every parameter, public member, sub-class and enum this component exposes.

BitMarkdownEditor parameters

Name	Type	Default value	Description
AcceptedImageTypes	string?	null	The image types the paste/drop upload accepts, as a comma separated list of MIME types or extensions (image/png,image/jpeg or .png,.jpg). Null accepts every image type.
AutoClosePairs	bool	false	Closes a bracket or a quote as it is typed with nothing selected: the closing half is inserted after the caret, typing that closing character steps over it instead of doubling it, and Backspace between the two halves removes both. Only ( [ { ` and " take part.
AutoFocus	bool	false	Moves the keyboard focus into the editor as soon as it is initialized.
AutoPair	bool	true	Enables wrapping the current selection when a pairing character (for example *, `, [) is typed.
AutoSaveId	string?	null	A stable key under which the editor content is autosaved to the browser's localStorage. When set, a draft is written as the user types and restored on initialization if no Value/DefaultValue is supplied.
BoldStyle	BitMarkdownEditorEmphasisStyle	BitMarkdownEditorEmphasisStyle.Asterisk	The characters the Bold command wraps a selection in: ** (the default) or __.
BulletStyle	BitMarkdownEditorBulletStyle	BitMarkdownEditorBulletStyle.Dash	The character an unordered or task list item starts with: - (the default), * or +.
ChangeDebounceTime	int	0	The debounce window (in milliseconds) before the typed value is pushed to .NET. Increase it to reduce interop traffic on Blazor Server.
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).
ItalicStyle	BitMarkdownEditorEmphasisStyle	BitMarkdownEditorEmphasisStyle.Asterisk	The character the Italic command wraps a selection in: * (the default) or _.
Label	string?	null	A visible label rendered above the toolbar and tied to the textarea, so clicking it moves the focus into the editor and assistive tech announces it as the field's name.
LabelTemplate	RenderFragment?	null	A custom template for the label of the editor, replacing Label.
MaxHeight	string?	null	The largest height the editor may grow to (any CSS length), which is also the ceiling of the Resizable drag handle. Ignored in full-screen mode.
MaxImageSize	long?	null	The largest pasted or dropped image (in bytes) the editor uploads. A bigger file is refused before its bytes are read and reported through OnImageRejected.
MaxLength	int?	null	The maximum number of characters the editor accepts. When set, the status bar counter shows the limit alongside the count. A command or an image upload that would overrun the limit is refused whole instead of cutting the end of the document off; pasted text is cut down to what still fits.
MinHeight	string?	null	The smallest height the editor may shrink to (any CSS length), which is also the floor of the Resizable drag handle. Ignored in full-screen mode.
Mode	BitMarkdownEditorMode	BitMarkdownEditorMode.Split	Determines which panes of the editor are visible (edit / split / preview). Two-way bindable.
OnBlur	EventCallback		Callback for when the editor loses the keyboard focus.
OnChange	EventCallback<string?>		Callback for when the editor value changes.
OnDraftRestored	EventCallback<string?>		Callback for an autosaved draft restored at initialization, carrying the restored text. It only fires when AutoSaveId is set and the draft was actually used.
OnFocus	EventCallback		Callback for when the editor receives the keyboard focus.
OnImageRejected	EventCallback<BitMarkdownEditorImageRejection>		Callback for a pasted or dropped image the editor refused to upload because of MaxImageSize or AcceptedImageTypes.
OnImageUpload	Func<BitMarkdownEditorImageUploadInfo, Task<string?>>?	null	A handler that uploads a pasted or dropped image and returns the URL to reference it by. When set, the editor enables clipboard-paste and drag-and-drop image upload; returning null cancels the insertion.
OnSubmit	EventCallback<string?>		Callback for Ctrl/Cmd+Enter pressed inside the editor, carrying the current value. The shortcut is only captured while this callback is set, so a form that binds it elsewhere keeps its own submit key otherwise.
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.
Resizable	bool	false	Lets the user drag the bottom edge of the editor to change its height.
ShowCursorPosition	bool	false	Whether the status bar reports the caret's line and column, and how much text is selected. Reporting it costs a (debounced) round trip per caret move, so it is off by default.
ShowReadingTime	bool	false	Whether the estimated reading time is shown in the status bar.
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.
SyncScroll	bool	true	Synchronizes scrolling between the editor and preview panes in split mode.
TabIndents	bool	true	Whether the Tab key indents the selection instead of moving the focus to the next control. Pressing Escape first always lets a single Tab out, either way.
TableColumns	int	2	How many columns the toolbar's table command inserts.
TableRows	int	1	How many body rows the toolbar's table command inserts, beside its header row.
Texts	BitMarkdownEditorTexts?	null	The localized strings of the editor UI (toolbar titles, status bar, find panel, 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.
WordsPerMinute	int	200	Words-per-minute used to estimate the reading time shown in the status bar.

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.
Insert	Func<string, ValueTask>		Inserts the given markdown text at the current selection (replacing it) as a single undo step.
Replace	Func<string, string, bool, bool, ValueTask<int>>		Replaces occurrences of a search term and returns the replacement count. With all off, the first occurrence at or after the caret is replaced (wrapping to the top).
FindNext	Func<string, bool, ValueTask<BitMarkdownEditorFindResult>>		Selects the next occurrence of the search term after the caret, wrapping around the end of the document.
FindPrevious	Func<string, bool, ValueTask<BitMarkdownEditorFindResult>>		Selects the occurrence of the search term before the caret, wrapping around the start of the document.
GetSelection	Func<ValueTask<BitMarkdownEditorSelection>>		Returns the current selection range of the editor along with the selected text.
SetSelection	Func<int, int, ValueTask>		Selects the given range in the editor and moves the focus into it. The range is clamped to the current content length.
ClearDraft	Func<ValueTask>		Clears the autosaved draft (if AutoSaveId is set), e.g. after the content has been persisted server-side.
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.
Blur	Func<ValueTask>		Moves the keyboard focus out of 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.
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.

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. The names of the default toolbar are also the keys the Texts parameter localizes by.
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". Shown in the tooltip and reported as aria-keyshortcuts.
OnClick	Func<BitMarkdownEditor, Task>?	null	Callback used when the Type is Custom. Receives the editor instance so the handler can read or rewrite the content.
Children	IReadOnlyList<BitMarkdownEditorToolbarItem>?	null	Child items shown in the menu when the Type is Dropdown.
Text	string?	null	Optional short text label rendered inside the button (used by dropdown menu items).
AlwaysEnabled	bool	false	Keeps the item enabled while the editor is read-only, for custom items that only read the content (export, copy, save).

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.
Label	string?	null	Custom CSS classes/styles for the label 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.

BitMarkdownEditorImageUploadInfo properties

Describes an image pasted into or dropped onto the editor, passed to the OnImageUpload handler.

Name	Type	Description
FileName	string	The original file name (may be a generic name for clipboard images).
ContentType	string	The MIME type of the image, for example image/png.
Data	byte[]	The raw image bytes.

BitMarkdownEditorImageRejection properties

Describes an image the editor refused to upload, passed to the OnImageRejected callback so the app can tell the user why nothing was inserted.

Name	Type	Default value	Description
FileName	string		The original file name (may be a generic name for clipboard images).
ContentType	string		The MIME type of the image, for example image/png.
Size	long	0	The size of the file in bytes.
Reason	BitMarkdownEditorImageRejectionReason	BitMarkdownEditorImageRejectionReason.Type	Why the file was refused.

BitMarkdownEditorFindResult properties

The outcome of a find (or find & replace) round trip.

Name	Type	Default value	Description
Count	int	0	How many occurrences of the search term the document contains.
Index	int	0	The 1-based position of the currently selected occurrence, or 0 when none is selected.
HasMatches	bool	false	True when at least one occurrence was found.

BitMarkdownEditorSelection properties

A selection range inside the editor textarea.

Name	Type	Default value	Description
Start	int	0	The selection start (char index).
End	int	0	The selection end (char index).
Text	string		The selected text, empty when the selection is a caret.
IsEmpty	bool	false	True when nothing is selected and the range is a plain caret position.

BitMarkdownEditorTexts properties

The texts of the editor UI. All strings default to English; override individual properties to localize the editor. The counting strings are format templates so the translation controls the word order.

Name	Type	Default value	Description
ToolbarAriaLabel, EditorAriaLabel, PreviewAriaLabel	string	"Markdown formatting", "Markdown editor", "Markdown preview"	The accessible names of the toolbar, the textarea and the preview pane.
ToolbarUndo … ToolbarHelp	string	"Undo" … "Keyboard shortcuts"	The tooltip and aria-label of every button of the default toolbar, keyed by the item Name so a custom toolbar reusing those names is localized automatically.
WordsFormat, CharsFormat, CharsWithMaxFormat, ReadingTimeFormat, CursorPositionFormat, SelectedFormat	string	"{0} words", "{0} chars", "{0} / {1} chars", "{0} min read", "Ln {0}, Col {1}", "{0} selected"	The status bar templates. CharsWithMaxFormat replaces CharsFormat while a MaxLength is set, and the last two are the ShowCursorPosition readouts.
ModeEdit, ModeSplit, ModePreview	string	"Edit", "Split", "Preview"	The mode label of the status bar.
FindReplaceTitle, FindPlaceholder, ReplacePlaceholder, ReplaceButton, ReplaceAllButton, ReplaceAllAriaLabel, FindNextAriaLabel, FindPreviousAriaLabel, MatchCaseAriaLabel, MatchesFormat, NoMatchesText	string	"Find and replace" …	The find & replace panel. MatchesFormat is a template of the current match and the total ({0} of {1}), and ReplaceAllAriaLabel is the accessible name of the short "All" button.
KeyboardShortcutsTitle, CloseAriaLabel, Shortcut*	string	"Keyboard shortcuts" …	The shortcut help dialog: its title, its close button and the label of every listed shortcut.
PreviewEmptyText	string	"Nothing to preview yet."	The text shown in the preview pane while the editor is empty.
UploadingText	string	"uploading"	The word shown inside the placeholder that stands in for an image while it uploads.

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, turns the current selection into a link's label, or uses a selected url as its target.
Image	13	Inserts an image, turns the current selection into an image's alt text, or uses a selected url as its source.
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), or walks to the next table cell when the caret is inside a table.
Outdent	20	Decreases the indentation of the selected lines (Shift+Tab), or walks to the previous table cell when the caret is inside a table.
NewLine	21	Smart newline that continues lists and quotes (Enter).
Superscript	22	Toggles superscript (^text^) on the current selection. None of the BitMarkdownPipelines renders that extension, so the built-in preview shows it verbatim.
Subscript	23	Toggles subscript (~text~) on the current selection. None of the BitMarkdownPipelines renders that extension, so the built-in preview shows it verbatim.
ClearFormatting	24	Removes inline and block markdown formatting (including links) from the selected lines.
MoveLineUp	25	Swaps the selected lines with the line above them (Alt+Up).
MoveLineDown	26	Swaps the selected lines with the line below them (Alt+Down).
DuplicateLine	27	Duplicates the selected lines right below themselves (Ctrl+D).
DeleteLine	28	Deletes the selected lines entirely (Ctrl+Shift+D).
TableInsertRowAbove	29	Inserts an empty row above the table row the caret is in (from the header row, the first body row). Does nothing outside a table.
TableInsertRowBelow	30	Inserts an empty row below the table row the caret is in. Does nothing outside a table.
TableDeleteRow	31	Deletes the table row the caret is in, keeping the header row. Does nothing outside a table.
TableInsertColumnBefore	32	Inserts an empty column before the caret's column and moves the caret into its header cell. Does nothing outside a table.
TableInsertColumnAfter	33	Inserts an empty column after the caret's column and moves the caret into its header cell. Does nothing outside a table.
TableDeleteColumn	34	Deletes the caret's table column, keeping the last remaining one. Does nothing outside a table.
TableAlignLeft	35	Left-aligns the caret's table column (:---). Does nothing outside a table.
TableAlignCenter	36	Centers the caret's table column (:---:). Does nothing outside a table.
TableAlignRight	37	Right-aligns the caret's table column (---:). Does nothing outside a table.
TableNextCell	38	Selects the next cell of the caret's table, adding a row past the last one. This is what Indent (Tab) does inside a table. Does nothing outside a table.
TablePreviousCell	39	Selects the previous cell of the caret's table. This is what Outdent (Shift+Tab) does inside a table. Does nothing at the first cell or outside a table.

BitMarkdownEditorEmphasisStyle enum

Name	Value	Description
Asterisk	0	bold and italic.
Underscore	1	__bold__ and _italic_. A CommonMark parser does not read underscores inside a word as emphasis, so snake_case_name stays intact.

BitMarkdownEditorBulletStyle enum

Name	Value	Description
Dash	0	- item
Asterisk	1	* item
Plus	2	+ item

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.

BitMarkdownEditorImageRejectionReason enum

Name	Value	Description
Type	0	The file's type is not one of the accepted image types.
Size	1	The file is larger than the allowed maximum size.
Length	2	MaxLength leaves no room for the image's markdown, so nothing was inserted.

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.
Find	7	Toggles the find & replace panel.
Custom	8	Invokes a user-supplied callback.
Dropdown	9	A button that reveals a menu of child items (e.g. a heading picker).

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

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.

Open an issue

Start a discussion

Edit this page

View the component source

Edit the component