@crux-kit/editor-tiptap
A free, headless rich-text editor for Crux apps, built on TipTap
(MIT-licensed). Emits and consumes plain HTML strings, so it drops into the same
value / onChange seam the previous TinyMCE editor used.
This package contains all TipTap-specific editor code. Other editor libraries live in
their own sibling packages (e.g. @crux-kit/editor-quill, @crux-kit/editor-lexical).
The editor is preset-driven: one library, multiple feature levels. Pick a preset per app / per field instead of shipping a different editor library in each app.
Usage
import { RichTextEditor } from '@crux-kit/editor-tiptap';
<RichTextEditor value={html} onChange={setHtml} preset="light" placeholder="Write…" />;
Presets
| Preset | Features |
|---|---|
light |
Bold, italic, underline, strike, headings, lists, blockquote, text align, links, undo/redo. |
Extend by adding new presets in src/presets.ts — the toolbar renders from the preset, so
new apps (e.g. web studio / page manager) reuse the same component with a different preset.
Styling
The toolbar uses the shared design-system Tailwind tokens (bg-accent, border-input,
text-muted-foreground, …), so it themes automatically with the host app.
Wire it up once, entirely in the app's main Tailwind CSS entry:
/* generate the toolbar's utility classes */
@source '../../../../../packages/design-system/editor-tiptap/src';
/* editor content styles */
@import '@crux-kit/editor-tiptap/styles.css';
(The content styles can also be pulled in from JS with
import '@crux-kit/editor-tiptap/styles.css'; — but keeping both lines together in the CSS
entry is cleaner.)