MarkdownEditor

Write/Preview toggle editor for markdown content

Default

Usage

import { MarkdownEditor } from '@tryvienna/ui'

<div className="w-[500px]">
  <MarkdownEditor value={value} onChange={setValue} showActions={false} />
</div>

Examples

Default

Default

<div className="w-[500px]">
  <MarkdownEditor value={value} onChange={setValue} showActions={false} />
</div>

With Actions

With Actions

<div className="w-[500px] flex flex-col gap-4">
  <MarkdownEditor
    value={value}
    onChange={setValue}
    onSave={(v) => setSaved(v)}
    onCancel={() => setValue('')}
  />
  {saved && (
    <p className="text-xs text-muted-foreground">
      Last saved: &quot;{saved.slice(0, 60)}...&quot;
    </p>
  )}
</div>

Small Size

Small Size

<div className="w-[500px]">
  <MarkdownEditor value={value} onChange={setValue} size="sm" showActions={false} />
</div>

API Reference

MarkdownEditor

Prop	Type	Default	Description
value	string	-
onChange	(value: string) => void	-
onSave	(value: string) => void	-
onCancel	() => void	-
placeholder	string	-
minHeight	string	-
showActions	boolean	-
size	'sm' | 'md' | 'lg'	-

Data Attributes

Component	data-slot
MarkdownEditor	"markdown-editor"