@saastro/editor

TipTap-based rich text editor for SaastroCMS with Markdown conversion, slash commands, bubble menu, callout blocks, and table support.

Installation

pnpm add @saastro/editor

Peer dependencies: react ^18/^19, react-dom ^18/^19

Usage

import { Editor } from '@saastro/editor';

<Editor
  content="# Hello World"
  onChange={(content) => console.log(content.markdown)}
  placeholder="Start writing..."
  showToolbar={true}
/>;

useEditor Hook

import { useEditor } from '@saastro/editor';

const { editor, state, commands, isActive } = useEditor({
  content: '# Hello',
  onChange: (content) => console.log(content),
});

commands?.bold();
commands?.heading(2);
commands?.insertTable(3, 3);
commands?.setCallout('info');
commands?.getMarkdown();

Markdown Conversion

import { htmlToMarkdown, markdownToHtml, isMarkdown } from '@saastro/editor';

htmlToMarkdown('<h1>Title</h1>'); // "# Title"
markdownToHtml('# Title'); // "<h1>Title</h1>"
isMarkdown('# Title'); // true

Features

• Rich text (bold, italic, strike, headings, lists, blockquote, code)
• Tables with resize, merge/split cells
• Code blocks with syntax highlighting (lowlight)
• Callouts (info, warning, error, tip)
• Slash commands (type /)
• Bubble menu on text selection
• Full toolbar with undo/redo
• Bidirectional HTML/Markdown conversion
• Links and images with base64 support

Development

pnpm build          # Build with tsup
pnpm dev            # Watch mode
pnpm test           # Run vitest tests
pnpm typecheck      # TypeScript check

License

MIT