Minimal — quick note field
Add a quick note...
import { RichTextEditor } from '@mihcm/ui/RichTextEditor';
<RichTextEditor variant="minimal" placeholder="Add a quick note..." minHeight="80px" />Default — form description
Describe the role, responsibilities, and requirements...
import { RichTextEditor } from '@mihcm/ui/RichTextEditor';
import { Label } from '@mihcm/ui/Label';
<div className="space-y-1.5">
<Label>Job description</Label>
<RichTextEditor placeholder="Describe the role, responsibilities, and requirements..." />
</div>Semi — content authoring with markdown shortcuts
Type # for headings, ** for bold, * for italic, ` for inline code. Use Tab/Shift+Tab to indent/outdent.
Try typing # for headings, ** for bold...
import { RichTextEditor } from '@mihcm/ui/RichTextEditor';
<RichTextEditor
variant="semi"
placeholder="Try typing # for headings, ** for bold..."
/>Full — document editor with tables and check lists
Includes tables (3×3), check lists, justify alignment, and all markdown shortcuts.
Full-featured editor with table, check list, alignment...
import { RichTextEditor } from '@mihcm/ui/RichTextEditor';
<RichTextEditor
variant="full"
placeholder="Full-featured editor with table, check list, alignment..."
minHeight="300px"
/>Persisting content
Use onChange to capture the Lexical EditorState as JSON for storage.
import { RichTextEditor } from '@mihcm/ui/RichTextEditor';
const handleChange = (editorState) => {
const json = editorState.toJSON();
// Save to form state, API, or local storage
console.log(json);
};
<RichTextEditor
variant="semi"
placeholder="Compose content..."
onChange={handleChange}
/>Read-only display
Start typing...
import { RichTextEditor } from '@mihcm/ui/RichTextEditor';
<RichTextEditor readOnly />