DOCS / EDITOR
Editor
@cubster/editor is a headless, markdown-aware textarea component — the same one that ships in this doc's playground below,
pulled straight from npm.
Live playground
Cursor context appears here as you type
Install
$ npm install @cubster/editor
Usage
import { useState } from 'react'
import { Editor } from '@cubster/editor'
import '@cubster/editor/styles.css'
function App() {
const [text, setText] = useState('')
return <Editor value={text} onChange={setText} />
}
Keyboard shortcuts
Formatting shortcuts are keyed off the physical key (e.code), so they keep working on non-US keyboard layouts.
| Shortcut | Action |
|---|---|
| Cmd/Ctrl + B | Toggle bold (**text**) |
| Cmd/Ctrl + I | Toggle italic (_text_) |
| Cmd/Ctrl + Shift + X | Toggle strikethrough (~~text~~) |
| Cmd/Ctrl + Alt + E | Toggle inline code |
| Cmd/Ctrl + Alt + Shift + E | Wrap selection in a fenced code block |
| Cmd/Ctrl + Alt + 1–6 | Toggle heading level 1–6 |
| Cmd/Ctrl + Alt + 0 | Clear block formatting back to a paragraph |
| Cmd/Ctrl + Alt + Q | Toggle blockquote |
| Cmd/Ctrl + Shift + 7 | Toggle an ordered list |
| Cmd/Ctrl + Shift + 8 | Toggle an unordered list |
| Cmd/Ctrl + Shift + 9 | Toggle a task list |
| Cmd/Ctrl + K | Insert/wrap a Markdown link |
| Tab / Shift+Tab | Indent / unindent |
| Paste a URL over a selection | Wraps it as [selected text](url) |
Styling
The editor is headless by default; the optional stylesheet defines these custom properties, scoped
under [data-cubster-editor] — override any of them on your own selector to re-theme without touching the stylesheet. The
playground above re-themes them to match this site.
--cub-editor-font-family--cub-editor-font-size--cub-editor-color--cub-editor-background--cub-editor-caret-color--cub-editor-placeholder-color--cub-editor-selection-background--cub-editor-border-color--cub-editor-border-radius--cub-editor-padding--cub-editor-focus-ring-color