Add initial project files
This commit is contained in:
@@ -0,0 +1,46 @@
|
||||
# @crux-kit/editor-tiptap
|
||||
|
||||
A free, headless rich-text editor for Crux apps, built on [TipTap](https://tiptap.dev)
|
||||
(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
|
||||
|
||||
```tsx
|
||||
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:
|
||||
|
||||
```css
|
||||
/* 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.)
|
||||
Reference in New Issue
Block a user