← All components Editors

MarkdownEditor

Bear/iA Writer-flavoured prose editor. Markdown shortcuts, Cmd+K inline-edit, slash trigger, optional focus mode.

Inspired by Marijn Haverbeke (ProseMirror input rules), Bear, iA Writer, Notion (slash menu).

Preview

What it looks like.

Try ⌘B / ⌘I on a selection.Focus mode0w · 0c · 0L

Live — the real component, scoped to this frame.

Usage

Drop it into your app.

import { MarkdownEditor } from '@locara/components'

const [text, setText] = useState('')

<MarkdownEditor
  value={text}
  onChange={setText}
  placeholder="Start writing…"
  focusMode={false}
  onInlineEdit={({ text, anchor }) => openInlineEditor(text, anchor)}
  onSlashTrigger={(query, anchor) => openSlashMenu(query, anchor)}
  onStats={({ chars, words, lines }) => setStats(...)}
/>

Or copy the source into your repo: locara add markdown-editor

Design notes

Why it works this way.

A hand-rolled textarea-backed editor — no ProseMirror / CodeMirror dependency. Cmd+B / Cmd+I / Cmd+` wrap the selection (Bear-flavoured). Cmd+K calls onInlineEdit with the selection + a DOMRect, ready to be passed to InlineEditPopover. Slash detection is a regex on the last token before the caret; the consumer renders the SlashMenu and applies the chosen command.