RadzenMarkdownEditor Class

A Markdown editor component with a toolbar, keyboard shortcuts, and a Design/Source mode switcher.

Inheritance

Object

ComponentBase

RadzenComponent

FormComponent<string>

RadzenMarkdownEditor

Implements

IComponent

IHandleEvent

IHandleAfterRender

IRadzenFormComponent

Inherited Members

FormComponent<string>.GetValue

FormComponent<string>.NotifyFieldChanged

FormComponent<string>.OnContextMenu

FormComponent<string>.GetClassList

FormComponent<string>.Name

FormComponent<string>.TabIndex

FormComponent<string>.Placeholder

FormComponent<string>.Disabled

FormComponent<string>.EditContext

FormComponent<string>.Form

FormComponent<string>.ValueChanged

FormComponent<string>.HasValue

FormComponent<string>.IsBound

FormComponent<string>.Value

FormComponent<string>.Change

FormComponent<string>.FieldIdentifier

FormComponent<string>.ValueExpression

FormComponent<string>.FormFieldContext

FormComponent<string>.CurrentPlaceholder

FormComponent<string>._value

RadzenComponent.OnMouseEnter

RadzenComponent.OnMouseLeave

RadzenComponent.GetCssClass

RadzenComponent.GetId

RadzenComponent.GetIdAttribute

RadzenComponent.Debounce

RadzenComponent.Localize

RadzenComponent.RaiseContextMenu

RadzenComponent.RaiseMouseEnter

RadzenComponent.AddContextMenu

RadzenComponent.RaiseMouseLeave

RadzenComponent.OnBecameInvisible

RadzenComponent.Attributes

RadzenComponent.Element

RadzenComponent.MouseEnter

RadzenComponent.MouseLeave

RadzenComponent.ContextMenu

RadzenComponent.Culture

RadzenComponent.DefaultCulture

RadzenComponent.UICulture

RadzenComponent.DefaultUICulture

RadzenComponent.Style

RadzenComponent.Visible

RadzenComponent.UniqueID

RadzenComponent.JSRuntime

RadzenComponent.IsJSRuntimeAvailable

RadzenComponent.Reference

RadzenComponent.CurrentStyle

ComponentBase.OnInitializedAsync

ComponentBase.OnParametersSet

ComponentBase.OnParametersSetAsync

ComponentBase.StateHasChanged

ComponentBase.ShouldRender

ComponentBase.OnAfterRender

ComponentBase.InvokeAsync

ComponentBase.DispatchExceptionAsync

ComponentBase.RendererInfo

ComponentBase.Assets

ComponentBase.AssignedRenderMode

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenMarkdownEditor : FormComponent<string>, IComponent, IHandleEvent, IHandleAfterRender, IRadzenFormComponent

Examples

<RadzenMarkdownEditor @bind-Value=@markdown @bind-Mode=@mode />
@code {
  string markdown = "# Hello";
  MarkdownEditorMode mode = MarkdownEditorMode.Design;
}

Remarks

The Markdown text is the value in both modes. Design mode edits a parsed document and writes it back to Markdown after every edit; blocks that were not edited are kept as written. Text typed in Design mode is inserted literally: characters with a Markdown meaning are escaped. Pasted text is parsed as Markdown.

Constructors

RadzenMarkdownEditorLink to this section

A Markdown editor component with a toolbar, keyboard shortcuts, and a Design/Source mode switcher.

Declaration
public RadzenMarkdownEditor()

Properties

CanRedoLink to this section

Whether the editor's history has a state to redo to.

Declaration
public bool CanRedo { get; }
Property Value
Type Description
boolWhether the editor's history has a state to redo to.

CanUndoLink to this section

Whether the editor's history has a state to undo to.

Declaration
public bool CanUndo { get; }
Property Value
Type Description
boolWhether the editor's history has a state to undo to.

ChildContentLink to this section

Custom toolbar content. When set, it replaces the default toolbar tools.

Declaration
public RenderFragment ChildContent { get; set; }
Property Value
Type Description
RenderFragmentCustom toolbar content. When set, it replaces the default toolbar tools.

CurrentModeLink to this section

The mode the editor is currently in.

Declaration
public MarkdownEditorMode CurrentMode { get; }
Property Value
Type Description
MarkdownEditorModeThe mode the editor is currently in.

ExecuteLink to this section

A callback invoked after a command is executed, either by a built-in tool, a shortcut, String) or a RadzenMarkdownEditorCustomTool.

Declaration
public EventCallback<MarkdownEditorExecuteEventArgs> Execute { get; set; }
Property Value
Type Description
EventCallback<MarkdownEditorExecuteEventArgs>A callback invoked after a command is executed, either by a built-in tool, a shortcut, String) or a RadzenMarkdownEditorCustomTool.

FormatBlockLink to this section

The block at the current selection: p or h1 to h6, an empty string when the selection spans several kinds of blocks, or null when it contains no paragraph or heading at all.

Declaration
public string FormatBlock { get; }
Property Value
Type Description
stringThe block at the current selection: p or h1 to h6, an empty string when the selection spans several kinds of blocks, or null when it contains no paragraph or heading at all.

ImmediateLink to this section

Specifies whether Input is raised on every keystroke. Set to false by default. Unlike Immediate, Value is always updated on input; this only controls whether Input is raised per keystroke.

Declaration
public bool Immediate { get; set; }
Property Value
Type Description
boolSpecifies whether Input is raised on every keystroke. Set to false by default. Unlike Immediate, Value is always updated on input; this only controls whether Input is raised per keystroke.

InTableLink to this section

Whether the caret is inside a table.

Declaration
public bool InTable { get; }
Property Value
Type Description
boolWhether the caret is inside a table.

InputLink to this section

A callback invoked on every keystroke when Immediate is true.

Declaration
public EventCallback<string> Input { get; set; }
Property Value
Type Description
EventCallback<string>A callback invoked on every keystroke when Immediate is true.

ModeLink to this section

Gets or sets the mode of the editor. Two-way bindable.

Declaration
public MarkdownEditorMode Mode { get; set; }
Property Value
Type Description
MarkdownEditorModeGets or sets the mode of the editor. Two-way bindable.

ModeChangedLink to this section

A callback invoked when the user switches the mode.

Declaration
public EventCallback<MarkdownEditorMode> ModeChanged { get; set; }
Property Value
Type Description
EventCallback<MarkdownEditorMode>A callback invoked when the user switches the mode.

RowsLink to this section

The number of visible text rows of the textarea. Set to 10 by default.

Declaration
public int Rows { get; set; }
Property Value
Type Description
intThe number of visible text rows of the textarea. Set to 10 by default.

SelectionLink to this section

The selection: positions in the rendered document in Design mode, offsets in the Markdown text in Source mode.

Declaration
public ValueTuple<int, int> Selection { get; }
Property Value
Type Description
ValueTuple<int, int>The selection: positions in the rendered document in Design mode, offsets in the Markdown text in Source mode.

ShowToolbarLink to this section

Specifies whether the toolbar is shown. Set to true by default.

Declaration
public bool ShowToolbar { get; set; }
Property Value
Type Description
boolSpecifies whether the toolbar is shown. Set to true by default.

TableAlignmentLink to this section

The alignment of the table column at the caret: none, left, center or right. null outside a table.

Declaration
public string TableAlignment { get; }
Property Value
Type Description
stringThe alignment of the table column at the caret: none, left, center or right. null outside a table.

TableColumnLink to this section

The index of the table column at the caret, or -1 outside a table.

Declaration
public int TableColumn { get; }
Property Value
Type Description
intThe index of the table column at the caret, or -1 outside a table.

TableRowLink to this section

The index of the table row at the caret (0 is the header row), or -1 outside a table.

Declaration
public int TableRow { get; }
Property Value
Type Description
intThe index of the table row at the caret (0 is the header row), or -1 outside a table.

Methods

BuildRenderTreeLink to this section

Declaration
protected override void BuildRenderTree(Rendering.RenderTreeBuilder __builder)
Parameters
Type Name Description
Rendering.RenderTreeBuilder __builder

DisposeLink to this section

Declaration
public override void Dispose()

ExecuteCommandAsyncLink to this section

Executes a command. Built-in commands (see MarkdownEditorCommands) modify the text; unknown command names only raise Execute.

Declaration
public Task ExecuteCommandAsync(string name, string value)
Parameters
Type Name Description
string name The command name.
string value The command value: the URL for Link and Image (a dialogue is opened when null), the text for InsertText, the size as rows x columns for InsertTable (a dialogue is opened when null), the alignment for TableAlign.
Returns
Type Description
Task

ExecuteShortcutAsyncLink to this section

Invoked from JavaScript when a registered shortcut is pressed.

Declaration
public Task ExecuteShortcutAsync(string shortcut)
Parameters
Type Name Description
string shortcut
Returns
Type Description
Task

FocusAsyncLink to this section

Focuses the editable surface in Design mode, or the textarea in Source mode.

Declaration
public override ValueTask FocusAsync()
Returns
Type Description
ValueTask

GetComponentCssClassLink to this section

Declaration
protected override string GetComponentCssClass()
Returns
Type Description
string

IsActiveLink to this section

Returns whether the current selection has the format of commandName applied.

Declaration
public bool IsActive(string commandName)
Parameters
Type Name Description
string commandName
Returns
Type Description
bool

OnAfterRenderAsyncLink to this section

Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type Name Description
bool firstRender
Returns
Type Description
Task

OnBlurAsyncLink to this section

Invoked from JavaScript when the editing surface loses focus. Raises Change when the text changed.

Declaration
public Task OnBlurAsync()
Returns
Type Description
Task

OnContextMenuAsyncLink to this section

Invoked from JavaScript when the context menu is requested inside a table. Opens the table commands.

Declaration
public Task OnContextMenuAsync(double clientX, double clientY, int start, int end)
Parameters
Type Name Description
double clientX
double clientY
int start
int end
Returns
Type Description
Task

OnCopyAsyncLink to this section

Invoked from JavaScript once a selection settles in Design mode. Returns the selected content as Markdown, which the browser puts on the clipboard when the selection is copied.

Declaration
public Task<string> OnCopyAsync(int start, int end)
Parameters
Type Name Description
int start
int end
Returns
Type Description
Task<string>

OnEditAsyncLink to this section

Invoked from JavaScript when text is inserted, replaced or deleted.

Declaration
public Task<MarkdownEditorUpdate> OnEditAsync(int start, int end, string text, string inputType, int version)
Parameters
Type Name Description
int start
int end
string text
string inputType
int version
Returns
Type Description
Task<MarkdownEditorUpdate>

OnFocusAsyncLink to this section

Invoked from JavaScript when the editing surface gains focus.

Declaration
public Task OnFocusAsync()
Returns
Type Description
Task

OnIndentAsyncLink to this section

Invoked from JavaScript when Tab or Shift+Tab is pressed in a list item in Design mode.

Declaration
public Task<MarkdownEditorUpdate> OnIndentAsync(int start, int end, bool outdent, int version)
Parameters
Type Name Description
int start
int end
bool outdent
int version
Returns
Type Description
Task<MarkdownEditorUpdate>

OnInitializedLink to this section

Declaration
protected override void OnInitialized()

OnInsertLineBreakAsyncLink to this section

Invoked from JavaScript when Shift+Enter is pressed in Design mode.

Declaration
public Task<MarkdownEditorUpdate> OnInsertLineBreakAsync(int start, int end, int version)
Parameters
Type Name Description
int start
int end
int version
Returns
Type Description
Task<MarkdownEditorUpdate>

OnInsertParagraphAsyncLink to this section

Invoked from JavaScript when Enter is pressed in Design mode.

Declaration
public Task<MarkdownEditorUpdate> OnInsertParagraphAsync(int start, int end, int version)
Parameters
Type Name Description
int start
int end
int version
Returns
Type Description
Task<MarkdownEditorUpdate>

OnInsertRowAsyncLink to this section

Invoked from JavaScript when Tab is pressed in the last table cell in Design mode.

Declaration
public Task<MarkdownEditorUpdate> OnInsertRowAsync(int start, int end, int version)
Parameters
Type Name Description
int start
int end
int version
Returns
Type Description
Task<MarkdownEditorUpdate>

OnRedoAsyncLink to this section

Invoked from JavaScript when the redo shortcut is pressed.

Declaration
public Task<MarkdownEditorUpdate> OnRedoAsync(int version)
Parameters
Type Name Description
int version
Returns
Type Description
Task<MarkdownEditorUpdate>

OnSelectionAsyncLink to this section

Invoked from JavaScript when the selection changes.

Declaration
public Task OnSelectionAsync(int start, int end)
Parameters
Type Name Description
int start
int end
Returns
Type Description
Task

OnToggleCheckAsyncLink to this section

Invoked from JavaScript when a task list checkbox is clicked in Design mode.

Declaration
public Task<MarkdownEditorUpdate> OnToggleCheckAsync(int position, int version)
Parameters
Type Name Description
int position
int version
Returns
Type Description
Task<MarkdownEditorUpdate>

OnUndoAsyncLink to this section

Invoked from JavaScript when the undo shortcut is pressed.

Declaration
public Task<MarkdownEditorUpdate> OnUndoAsync(int version)
Parameters
Type Name Description
int version
Returns
Type Description
Task<MarkdownEditorUpdate>

RegisterShortcutLink to this section

Registers a keyboard shortcut. Used by toolbar tools.

Declaration
public void RegisterShortcut(string key, Func<Task> action)
Parameters
Type Name Description
string key
Func<Task> action

SetParametersAsyncLink to this section

Declaration
public override Task SetParametersAsync(ParameterView parameters)
Parameters
Type Name Description
ParameterView parameters
Returns
Type Description
Task

UnregisterShortcutLink to this section

Unregisters a keyboard shortcut. Used by toolbar tools.

Declaration
public void UnregisterShortcut(string key)
Parameters
Type Name Description
string key
An error has occurred. This app may no longer respond until reloaded. Reload 🗙