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
- Theme previews
Installation
- npm
- Yarn
npm install @rcarls/rc-markdown-editor
yarn add @rcarls/rc-markdown-editor
import '@rcarls/rc-markdown-editor/define';
Live demo
The editor composes its formatting surface from rc-toolbar, rc-button, and
rc-select, allowing the selected theme to style the controls consistently
with the rest of an application.
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.
API
Properties
| Property | Markup | Type | Default | Description |
|---|---|---|---|---|
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`. |
toolbar | toolbar | boolean | true | Show the formatting toolbar. |
readOnly | read-only | boolean | false | Make the editor read-only. |
Methods
No public methods are documented in the custom elements manifest.
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 |
|---|---|---|
--rme-font-family | inherit | Font family of the rich-text view |
--rme-font-size | inherit | Font size of the rich-text view |
--rme-line-height | 1.6 | Line height of the rich-text view |
--rme-padding | 0.75em 1em | Padding inside the rich-text view |
--rme-background | Canvas | Background color of the rich-text view |
--rme-color | CanvasText | Text color of the rich-text view |
--rme-border | 1px solid ButtonBorder | Border around the rich-text view |
--rme-border-radius | 0 0 4px 4px | Border radius of the rich-text view |
--rme-focus-outline | 2px solid Highlight | Focus ring outline on the rich-text view |
--rme-src-font-family | 'Cascadia Code', 'Fira Code', ui-monospace, monospace | Font family of the source editor |
--rme-toolbar-gap | 1px | Gap between toolbar buttons |
--rme-toolbar-button-size | 2rem | Minimum inline and block size of toolbar buttons |
--rme-src-heading-color | light-dark(#1d6fc4, #82b4f5) | Source-mode heading token color |
--rme-src-code-color | light-dark(#c94a1a, #f09060) | Source-mode inline/fenced code token color |
--rme-src-link-color | light-dark(#0370b0, #60b8e8) | Source-mode link token color |
--rme-src-blockquote-color | light-dark(#2d7a42, #70b880) | Source-mode blockquote token color |
--rme-src-list-color | light-dark(#7a5c0a, #d4ac48) | Source-mode list marker token color |
--rme-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. |