@zuilib/text-editor

Markdown editor for ZUI Design System — a React component built on Lexical with markdown shortcuts, code highlighting, checklists, and raw/rich/view modes.

Installation

pnpm add @zuilib/text-editor @zuilib/core lexical @lexical/react @lexical/markdown @lexical/rich-text @lexical/code @lexical/list @lexical/link

Usage

import { useState } from 'react'
import { MarkdownEditor } from '@zuilib/text-editor'
import '@zuilib/text-editor/styles.css'

function Notes() {
  const [value, setValue] = useState('# Hello\n\n- [ ] Try me')

  return <MarkdownEditor value={value} onChange={setValue} />
}

Modes

// Rich markdown editing (default) — shortcuts like `#`, `- [ ]`, ``` `
<MarkdownEditor mode="edit-md" value={value} onChange={setValue} />

// Raw markdown in a plain textarea
<MarkdownEditor mode="edit-raw" value={value} onChange={setValue} />

// Read-only rendered view
<MarkdownEditor mode="view" value={value} />

Props

• value: string — markdown source
• onChange: (value: string) => void
• mode: 'edit-md' | 'edit-raw' | 'view' (default 'edit-md')
• placeholder: string (default 'Start writing...')
• readOnly: boolean
• autoFocus: boolean
• className: string

Features

• Markdown shortcuts: headings, lists, checklists, code blocks, quotes, links
• Syntax-highlighted fenced code blocks
• Undo/redo history
• Cursor-stable mode switching between raw and rich editing

License

MIT