Extras

MarkdownEditor

Bit.BlazorUI.ExtrasMdEditor

BitMarkdownEditor is a dependency-free markdown editor built on a plain textarea: a data-driven toolbar, keyboard shortcuts, smart list continuation, undo/redo, find & replace, table tools, image paste/drop/pick upload, autosaved drafts and EditForm validation, with a live GitHub-flavored preview rendered by the BitMarkdownViewer. Every command is a pure C# text transformation, and the toolbar, menus, panels and dialog follow the keyboard and ARIA patterns of their roles.

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

Type below and watch the preview: try the toolbar, the shortcuts (the ? button lists them), Ctrl+F, and Enter after a line starting with - or 1. .

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 default editor: full toolbar, split edit/preview panes and the status bar.

Nothing to preview yet.

Split 0 words 0 chars

Binding

@bind-Value keeps the markdown in sync both ways without moving the caret. DefaultValue seeds an uncontrolled editor once, and OnChange reports every edit.

Two-way binding

Split 3 words 17 chars

Bound value (editable)

This is the default value

Split 6 words 27 chars

OnChange value:

Mode

Mode (two-way bindable) shows Edit, Split or Preview. The eye button and F9 cycle it, announcing the new mode to screen readers and moving the focus to the visible pane. A split editor narrower than two pane widths stacks its panes, and in split mode they 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

Height & FullScreen

Height, MinHeight and MaxHeight take any CSS length and bound the Resizable handle; AutoHeight grows the editor with its content up to MaxHeight instead, and StickyToolbar keeps its toolbar in view while the page scrolls past it. FullScreen (two-way bindable, also the toolbar button and F11) covers the viewport, locks the page scroll and keeps Tab inside; Escape leaves it.

Nothing to preview yet.

Split 0 words 0 chars

AutoHeight with a StickyToolbar (type a few lines, then scroll):

Edit 0 words 0 chars

Toolbar

Toolbar takes your own list of items: commands, dropdowns, separators and Custom items that receive the editor (AlwaysEnabled keeps one usable while read-only). An item draws an SVG Icon or a built-in IconName, may spell out a Text, and its Shortcut is bound and listed in the shortcuts panel. ShowToolbar and ShowStatusBar hide the chrome. The toolbar is one tab stop; arrow keys move between buttons and Enter, Space or Arrow Down opens a menu.

The toolbar of this editor only offers basic formatting, a custom clear button and a Save button bound to Ctrl+S.

Split 20 words 121 chars

Nothing to preview yet.

Commands

Drive the editor from code: Run applies any command to the selection, Insert adds markdown as one undo step, GetSelection / SetSelection read and move the caret, Undo / Redo follow CanUndo / CanRedo, and GetValue reads the live text.

Nothing to preview yet.

Split 0 words 0 chars

Result:

Preview

The preview uses the GitHub pipeline of the BitMarkdownViewer. PreviewPipeline swaps it, PreviewTemplate replaces the pane, and DebounceTime sets how long typing settles before it 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

PreviewTemplate rendering the raw source:

GitHub flavored extras like ~~strikethrough~~, https://bitplatform.dev autolinks,

- [ ] task
- [x] lists

| and | tables |
| --- | ------ |
| are | here   |

Split 29 words 157 chars

Editing

Tune typing: Placeholder, SpellCheck, IndentUnit, AutoPair (wrap a selection in a typed *, `, […), AutoClosePairs (close ( [ { ` " as typed) and ChangeDebounceTime (throttle the value sent to .NET). TabIndents off lets Tab leave; either way Escape then Tab always does, so the editor never traps the keyboard.

Edit 0 words 0 chars

BoldStyle, ItalicStyle and BulletStyle pick the markdown spelling the commands write, and TableColumns / TableRows size the inserted table. ReadOnly keeps the text selectable and searchable; Disabled disables the whole editor.

Edit 13 words 67 chars

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

Disabled

Split 2 words 10 chars

Find & replace

The magnifier or Ctrl+F opens the panel, seeded with the selection: Enter / Shift+Enter walk the matches, Enter in the replace box replaces (Ctrl+Enter replaces all), Aa matches case, and the count is announced. FindNext, FindPrevious and Replace do the same from code.

Find

Replace with

Edit 27 words 159 chars

Table tools

The table menu edits the table at the caret - rows, columns, column alignment - and re-pads every column so the source stays aligned. Tab / Shift+Tab walk the cells and add a row past the last one. Each tool is a command, so Run reaches it too.

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

Split 32 words 154 chars

Image upload

OnImageUpload turns on image paste, drop and the toolbar's upload button (the keyboard's way to a file): a placeholder goes in at once and the returned URL replaces it (null cancels). AcceptedImageTypes and MaxImageSize refuse a file before it is read, reported through OnImageRejected. Pasted HTML or spreadsheet tables become markdown tables, and a URL pasted over a selection becomes a link.

Image upload

Paste an image, drop one anywhere on this editor, or pick one with the upload button of the toolbar.

Split 22 words 115 chars

Auto save

AutoSaveId keeps a draft in localStorage and restores it when no value is given; OnDraftRestored says when it did. Type, reload the page, and call ClearDraft once the content is saved for real.

Nothing to preview yet.

Split 0 words 0 chars

Status bar

Words (each CJK character counts as one) and characters (an emoji counts as one) by default. ShowReadingTime adds an estimate at WordsPerMinute, ShowCursorPosition the line, column and selection, and MaxLength caps the text and turns the counter into "used / allowed" - read out with the textarea and highlighted at the limit.

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

Localization

Texts holds every string the editor renders - tooltips, accessible names, status bar templates, panels and announcements. Override only what you need; the counts are {0} templates so the translation owns 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

Forms & accessibility

Inside an EditForm, @bind-Value ties the editor to its field: edits are validated as typed, and a failing field gets aria-invalid and the error border. Label (or LabelTemplate) names the textarea, Description (or DescriptionTemplate) describes it, Required marks it, Name posts it with a plain form, and OnSubmit makes Ctrl/Cmd+Enter submit. OnFocus, OnBlur, Focus, Blur and AutoFocus handle the focus.

Cascading parameters

BitParams with a BitMarkdownEditorParams sets defaults - texts, toolbar, upload handler, sizes, styles - for every editor under it. An editor's own value wins (the second keeps its own placeholder).

Nothing to preview yet.

Split 0 words 0 chars0 min read

Nothing to preview yet.

Split 0 words 0 chars0 min read

Style & Class

Style and Class reach the root; Styles and Classes reach each part. The public --bit-MarkdownEditor-* CSS variables restyle the editor here or app-wide from :root.

Component's Style & Class:

Nothing to preview yet.

Split 0 words 0 chars

Styles & Classes:

Nothing to preview yet.

Split 0 words 0 chars

CSS variables:

Restyled with CSS variables

Rounded corners, a tinted toolbar, pill buttons, a serif writing font, and split panes that never stack (--bit-MarkdownEditor-pane-min-width:0).

Split 23 words 181 chars

RTL

With Dir set to Rtl the toolbar, panes, menus and status bar flip.

ویرایشگر مارک‌داون

این یک متن راست به چپ برای نمایش قابلیت RTL است.

پشتیبانی کامل از لیست‌ها
میانبرهای صفحه‌کلید

Split 22 words 120 chars

CSS variables

The public custom properties this component reads off its root, for what no parameter covers.

Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property: set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it, or on the Style of one instance to restyle that one alone. Leave a variable unset and the component falls back to the theme token beside it.

BitMarkdownEditor CSS variables

Name	Default value	Description
--bit-MarkdownEditor-color	var(--bit-clr-fg-pri)	Text color of the editor.
--bit-MarkdownEditor-background	var(--bit-clr-bg-pri)	Background of the editor.
--bit-MarkdownEditor-border-color	var(--bit-clr-brd-pri)	Color of the outer border.
--bit-MarkdownEditor-border-width	var(--bit-shp-brd-width)	Width of the outer border.
--bit-MarkdownEditor-border-radius	var(--bit-shp-radius-surface)	Corner radius of the editor.
--bit-MarkdownEditor-divider-color	var(--bit-clr-brd-sec)	Lines between the toolbar, panes and status bar, and the toolbar separators.
--bit-MarkdownEditor-focus-color	var(--bit-clr-pri-focus)	Every focus indicator of the editor, and the drop-target frame.
--bit-MarkdownEditor-error-color	var(--bit-clr-err)	Border of an invalid editor, the required asterisk and the counter at its limit.
--bit-MarkdownEditor-height	spacing(40)	Height of the panes (the Height parameter sets it on the instance).
--bit-MarkdownEditor-min-height	spacing(15)	Smallest height of the panes (the MinHeight parameter sets it on the instance).
--bit-MarkdownEditor-max-height	none	Largest height of the panes (the MaxHeight parameter sets it on the instance).
--bit-MarkdownEditor-pane-min-width	18rem	Narrowest a split pane gets before the two stack; 0 keeps them side by side.
--bit-MarkdownEditor-font-family	var(--bit-tpg-font-family-mono)	Font of the textarea.
--bit-MarkdownEditor-font-size	var(--bit-tpg-fs-sm)	Font size of the textarea.
--bit-MarkdownEditor-line-height	1.6	Line height of the textarea.
--bit-MarkdownEditor-padding	spacing(1.5) spacing(1.75)	Padding of the textarea.
--bit-MarkdownEditor-placeholder-color	var(--bit-clr-fg-sec)	Placeholder text of the textarea.
--bit-MarkdownEditor-preview-background	transparent	Background of the preview pane.
--bit-MarkdownEditor-preview-padding	spacing(1.5) spacing(2)	Padding of the preview pane.
--bit-MarkdownEditor-toolbar-background	var(--bit-clr-bg-sec)	Background of the toolbar and the find panel.
--bit-MarkdownEditor-toolbar-sticky-offset	0	Gap between a StickyToolbar and the top of the scrolling ancestor once it is pinned (the height of a fixed header).
--bit-MarkdownEditor-button-size	var(--bit-siz-ctrl-md)	Width and height of a toolbar button.
--bit-MarkdownEditor-button-color	var(--bit-clr-fg-sec)	Glyph of a toolbar button.
--bit-MarkdownEditor-button-radius	var(--bit-shp-radius-button)	Corner radius of a toolbar button.
--bit-MarkdownEditor-button-hover-color	var(--bit-clr-fg-pri)	Glyph of a toolbar button under the pointer.
--bit-MarkdownEditor-button-hover-background	var(--bit-clr-bg-sec-hover)	Background of a toolbar button under the pointer.
--bit-MarkdownEditor-button-active-color	var(--bit-clr-pri-text)	Glyph of a pressed button (the format at the caret, an open panel).
--bit-MarkdownEditor-button-active-background	var(--bit-clr-pri)	Background of a pressed button.
--bit-MarkdownEditor-statusbar-color	var(--bit-clr-fg-sec)	Text of the status bar.
--bit-MarkdownEditor-statusbar-background	var(--bit-clr-bg-sec)	Background of the status bar.

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/picker 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.
AutoHeight	bool	false	Grows the editor with its content instead of scrolling it, from MinHeight up to MaxHeight (past which it scrolls again). Height and Resizable have no effect while it is on.
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.
Description	string?	null	A hint rendered below the panes and tied to the textarea through aria-describedby, so assistive tech reads it out with the field.
DescriptionTemplate	RenderFragment?	null	A custom template for the description of the editor, replacing Description.
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, dropped or picked 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.
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, dropped or picked image the editor refused to upload because of MaxImageSize, AcceptedImageTypes or MaxLength.
OnImageUpload	Func<BitMarkdownEditorImageUploadInfo, Task<string?>>?	null	A handler that uploads a pasted, dropped or picked image and returns the URL to reference it by. When set, the editor enables clipboard-paste and drag-and-drop image upload and shows the toolbar's upload button; 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.
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.
StickyToolbar	bool	false	Keeps the toolbar on screen while the page scrolls past a tall editor, pinned --bit-MarkdownEditor-toolbar-sticky-offset below the top of the scrolling ancestor.
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.
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.

BitInputBase parameters

Name	Type	Default value	Description
DefaultValue	TValue?	null	The default value of the input to be used in uncontrolled mode (i.e. when the Value is not bound), typically used alongside the OnChange callback.
DisplayName	string?	null	Gets or sets the display name for this field.
InputHtmlAttributes	IReadOnlyDictionary<string, object>?	null	Gets or sets a collection of additional attributes that will be applied to the created element.
Name	string?	null	Gets or sets the name of the element. Allows access by name from the associated form.
NoValidate	bool	false	Disables the validation of the input.
OnChange	EventCallback<TValue?>		Callback for when the input value changes.
ReadOnly	bool	false	Makes the input read-only.
Required	bool	false	Makes the input required.
Value	TValue?	null	Gets or sets the value of the input. This should be used with two-way binding.

BitInputBase public members

Name	Type	Description
InputElement	ElementReference	The ElementReference of the input element.
FocusAsync()	() => ValueTask	Gives focus to the input element.
FocusAsync(bool preventScroll)	(bool preventScroll) => ValueTask	Gives focus to the input element.

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.
Disabled	bool	false	Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction.
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.
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 markup rendered inside the button: an SVG, or the element of an external icon font. Takes precedence over IconName.
IconName	string?	null	The name of a built-in Fabric MDL2 icon (e.g. BitIconName.Save) drawn when Icon is empty.
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	The keyboard shortcut of the item, e.g. "Ctrl+S": shown in the tooltip and reported as aria-keyshortcuts. On a Command or Custom item it is also bound (ahead of a built-in shortcut on the same keys), and a custom one is listed in the shortcuts panel. It needs Ctrl/Cmd or Alt unless it is a function key.
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; a handler written in a component re-renders it afterwards.
Children	IReadOnlyList<BitMarkdownEditorToolbarItem>?	null	Child items shown in the menu when the Type is Dropdown.
Text	string?	null	A short text rendered beside the icon: the label of a menu item, or of a toolbar button worth spelling out (Save, Publish). Names the item when it has no Title.
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.
Description	string?	null	Custom CSS classes/styles for the description of the BitMarkdownEditor.
StatusBar	string?	null	Custom CSS classes/styles for the status bar of the BitMarkdownEditor.

BitMarkdownEditorImageUploadInfo properties

Describes an image pasted into, dropped onto or picked for 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, ModeAnnouncementFormat	string	"Edit", "Split", "Preview", "{0} mode"	The mode label of the status bar, and what a screen reader is told once the mode is cycled.
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).
ImageUpload	10	Opens the file picker and uploads the chosen images through OnImageUpload. Only rendered while OnImageUpload is set.

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