rc-markdown-editor
Rich/source Markdown editor with a formatting toolbar, backed by rc-textarea.
- Package
@rcarls/rc-markdown-editor- Element
<rc-markdown-editor>- Native dependency
- Requires a textarea child
- State model
- Native textarea value plus editor mode
- Main events
rc-formatting-changerc-changerc-mode-change- Related
- Usage rulesTheme previews
Installation
- npm
- Yarn
- pnpm
npm install @rcarls/rc-webcomponents@next
yarn add @rcarls/rc-webcomponents@next
pnpm add @rcarls/rc-webcomponents@next
import '@rcarls/rc-webcomponents/rc-markdown-editor/define';
Usage
Place a native <textarea> inside the element. Its content is the initial Markdown, and it keeps
the value for form submission.
<label for="notes">Notes</label>
<rc-markdown-editor>
<textarea id="notes" name="notes"># Shopping list</textarea>
</rc-markdown-editor>
Live demo
The editor composes its formatting surface from rc-toolbar, rc-button, and
a native <select> for the heading level, allowing the selected theme to style
the controls consistently with the rest of an application.
Accessibility
The rich editing surface is a role="textbox" with aria-multiline="true", named by the native
textarea's labels or aria-label; clicking a label focuses the active editing surface. Source mode is
an rc-textarea named by the source message. The formatting
toolbar is an rc-toolbar of native buttons that report active
formats with aria-pressed, and the link editor is a labeled role="dialog" popover.
A wrapping label names the editor without including the textarea's initial Markdown content. Label click forwarding stops when the editor disconnects and follows its current labels when it reconnects.
| Key | Action |
|---|---|
| Ctrl/Cmd+B | Bold |
| Ctrl/Cmd+I | Italic |
| Ctrl/Cmd+U | Underline |
| Ctrl/Cmd+` | Inline code |
| Ctrl/Cmd+K | Opens the link editor |
| Ctrl/Cmd+Shift+S | Switches between rich and source mode |
Theming
The default demo mode shows the component without a package theme. Use the shared preview controls on this page to compare inherited, light, and dark color schemes or to apply the optional Material theme only inside the demo frames.
Localization
Built-in text follows the element's own lang, else <html lang>. Override it with
messages, or register it for every instance under rc-markdown-editor: source, linkPopover, url, applyLink, openLink, removeLink, shortcut; the toolbar reads rc-editor-toolbar (toolbar, bold, italic, underline, strikethrough, inlineCode, link, headingLevel, paragraph, heading, blockquote, bulletList, orderedList, codeBlock, codeBlockLanguage, languagePlaceholder, languageHint, sourceMode, sourceModeHint, shortcut). See
Localization.
API
Properties
| Property | Markup | Type | Default | Description |
|---|---|---|---|---|
messages | JS property only | Partial<RCMarkdownEditorMessages> | undefined | Not specified | Built-in text overrides; unset keys fall back to registered text, then English. |
defaultValue | default-value | string | Not specified | Initial uncontrolled Markdown value. |
value | value | string | Not specified | Current Markdown value. Host writes are silent. |
defaultSourceMode | default-source-mode | boolean | Not specified | Initial uncontrolled source-mode state. |
sourceMode | source-mode | boolean | Not specified | Controlled: show the markdown source editor instead of the rich view. Host writes are silent; toolbar/keyboard toggles dispatch `rc-mode-change`. |
hideToolbar | hide-toolbar | boolean | false | Hides the formatting toolbar. |
readOnly | read-only | boolean | false | Make the editor read-only. |
Events
| Event | Detail type | Description |
|---|---|---|
rc-formatting-change | CustomEvent | Active formats at cursor changed. Detail: `ActiveFormats`. |
rc-change | CustomEvent | Value changed. Detail: `{ value: string }`. |
rc-mode-change | CustomEvent | Mode toggled. Detail: `{ mode: EditorMode }`. |
Slots
| Name | Description |
|---|---|
(default) | Accepts a native `<textarea>` element (and optional `<label>`) for form wiring. |
CSS Custom Properties
| Property | Default | Description |
|---|---|---|
--rc-markdown-editor-font-family | inherit | Font family of the rich-text view |
--rc-markdown-editor-font-size | inherit | Font size of the rich-text view |
--rc-markdown-editor-line-height | 1.6 | Line height of the rich-text view |
--rc-markdown-editor-padding | 0.75em 1em | Padding inside the rich-text view |
--rc-markdown-editor-background | Canvas | Background color of the rich-text view |
--rc-markdown-editor-color | CanvasText | Text color of the rich-text view |
--rc-markdown-editor-border | 1px solid ButtonBorder | Border around the rich-text view |
--rc-markdown-editor-border-radius | 0 0 4px 4px | Border radius of the rich-text view |
--rc-markdown-editor-focus-outline | 2px solid Highlight | Focus ring outline on the rich-text view |
--rc-markdown-editor-src-font-family | 'Cascadia Code', 'Fira Code', ui-monospace, monospace | Font family of the source editor |
--rc-markdown-editor-toolbar-gap | 1px | Gap between toolbar buttons |
--rc-markdown-editor-toolbar-padding | 4px | Padding inside the toolbar |
--rc-markdown-editor-toolbar-radius | 4px 4px 0 0 | Toolbar border radius |
--rc-markdown-editor-toolbar-border | 1px solid ButtonBorder | Toolbar border |
--rc-markdown-editor-toolbar-background | Canvas | Toolbar background |
--rc-markdown-editor-toolbar-color | CanvasText | Toolbar text color |
--rc-markdown-editor-toolbar-button-size | 2rem | Minimum inline and block size of toolbar buttons |
--rc-markdown-editor-toolbar-button-background | transparent | Toolbar button background |
--rc-markdown-editor-toolbar-button-color | ButtonText | Toolbar button text color |
--rc-markdown-editor-toolbar-button-border | 1px solid transparent | Toolbar button border |
--rc-markdown-editor-toolbar-button-radius | 3px | Toolbar button border radius |
--rc-markdown-editor-toolbar-button-hover-opacity | 0.08 | Toolbar button hover state-layer opacity |
--rc-markdown-editor-toolbar-button-focus-opacity | 0.12 | Toolbar button focus state-layer opacity |
--rc-markdown-editor-toolbar-button-pressed-opacity | 0.12 | Toolbar button pressed state-layer opacity |
--rc-markdown-editor-toolbar-button-active-background | Highlight | Active toolbar button background |
--rc-markdown-editor-toolbar-button-active-color | HighlightText | Active toolbar button text color |
--rc-markdown-editor-toolbar-button-active-border | 1px solid Highlight | Active toolbar button border |
--rc-markdown-editor-toolbar-focus-outline | 2px solid Highlight | Toolbar control focus outline |
--rc-markdown-editor-toolbar-focus-outline-offset | 1px | Toolbar control focus outline offset |
--rc-markdown-editor-toolbar-select-border | 1px solid ButtonBorder | Toolbar select border |
--rc-markdown-editor-toolbar-select-radius | 3px | Toolbar select border radius |
--rc-markdown-editor-toolbar-select-background | ButtonFace | Toolbar select background |
--rc-markdown-editor-toolbar-select-color | ButtonText | Toolbar select text color |
--rc-markdown-editor-toolbar-select-active-background | Highlight | Active toolbar select background |
--rc-markdown-editor-toolbar-select-active-color | HighlightText | Active toolbar select text color |
--rc-markdown-editor-toolbar-select-active-border-color | Highlight | Active toolbar select border color |
--rc-markdown-editor-toolbar-input-border | 1px solid ButtonBorder | Toolbar input border |
--rc-markdown-editor-toolbar-input-radius | 3px | Toolbar input border radius |
--rc-markdown-editor-toolbar-input-background | Field | Toolbar input background |
--rc-markdown-editor-toolbar-input-color | FieldText | Toolbar input text color |
--rc-markdown-editor-src-heading-color | light-dark(#1d6fc4, #82b4f5) | Source-mode heading token color |
--rc-markdown-editor-src-code-color | light-dark(#c94a1a, #f09060) | Source-mode inline/fenced code token color |
--rc-markdown-editor-src-link-color | light-dark(#0370b0, #60b8e8) | Source-mode link token color |
--rc-markdown-editor-src-blockquote-color | light-dark(#2d7a42, #70b880) | Source-mode blockquote token color |
--rc-markdown-editor-src-list-color | light-dark(#7a5c0a, #d4ac48) | Source-mode list marker token color |
--rc-markdown-editor-src-dim-color | GrayText | Source-mode strikethrough token color |
CSS Parts
| Part | Description |
|---|---|
toolbar | The `<rc-editor-toolbar>` element. |
rich-view | The contenteditable rich-text view. |