Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 17 additions & 31 deletions packages/tiptap/README.md
Original file line number Diff line number Diff line change
@@ -1,48 +1,37 @@
# @hypr/tiptap

> oh-my-tiptap -- an opinionated, batteries-included framework for building beautiful rich-text editors with [Tiptap](https://tiptap.dev).
Opinionated Tiptap wrapper with preconfigured extensions, styles, and editor components.

Like [oh-my-zsh](https://ohmyz.sh/) takes a powerful shell and makes it delightful out of the box, `@hypr/tiptap` takes Tiptap's excellent editor core and wraps it in a carefully curated set of extensions, styles, and components so you can ship a polished editing experience without the boilerplate.
## What's in the box

## Philosophy

- **Opinionated defaults** -- We pick the extensions, configure them well, and style everything so it looks great from the first render.
- **Drop-in components** -- Import a component, pass your content, done. No wiring up 15 extensions by hand.
- **Beautiful out of the box** -- Headings, lists, task lists, tables, code blocks, blockquotes, links, images, mentions, hashtags, and more -- all styled and ready to go.
- **Extensible when you need it** -- Built on Tiptap and ProseMirror, so you can always reach down and customize.

## What's included

### Editor Presets
### Editor presets

| Export | Description |
|--------|-------------|
| `@hypr/tiptap/editor` | Full-featured document editor with mentions, file handling, keyboard navigation, and debounced updates. |
| `@hypr/tiptap/chat` | Chat-optimized editor with Enter-to-submit, slash commands, and mentions. |
| `@hypr/tiptap/prompt` | Jinja-aware prompt template editor built on CodeMirror, with syntax highlighting, linting, autocomplete, and read-only regions. |
| `@hypr/tiptap/editor` | Document editor with mentions, file handling, keyboard navigation, and debounced updates. |
| `@hypr/tiptap/chat` | Chat editor with Enter-to-submit, slash commands, and mentions. |
| `@hypr/tiptap/prompt` | Jinja-aware prompt template editor built on CodeMirror. |

### Shared Toolkit (`@hypr/tiptap/shared`)
### Shared extensions (`@hypr/tiptap/shared`)

A curated extension bundle and utility layer that powers every preset:
All presets pull from the same extension bundle:

- **StarterKit** -- bold, italic, strike, code, headings (1-6), bullet list, ordered list, blockquote, code block, horizontal rule, hard break.
- **Rich nodes** -- tables (resizable), task lists (nestable), images (with attachment support), links (Cmd+click to open), YouTube clip embeds.
- **Decorations** -- hashtag highlighting, AI content highlights, search & replace, streaming animation.
- **Utilities** -- markdown round-trip (`json2md` / `md2json`), content validation, clipboard serialization, custom list keymaps.
- StarterKit (bold, italic, strike, code, headings, lists, blockquote, code block, horizontal rule, hard break)
- Tables (resizable), task lists (nestable), images, links, YouTube embeds
- Hashtag highlighting, AI content highlights, search & replace, streaming animation
- Markdown conversion (`json2md` / `md2json`), content validation, clipboard serialization

### Styles (`@hypr/tiptap/styles.css`)

A single CSS import that covers every node type:

```css
@import "@hypr/tiptap/styles.css";
```

Includes styles for headings, code blocks, blockquotes, links, lists, task lists, tables, mentions, hashtags, search highlights, AI highlights, scrollbars, and streaming animations. Cross-platform adjustments for Windows and Linux are handled automatically.
One import, styles every node type.

## Quick Start
## Quick start

### Document Editor
### Document editor

```tsx
import Editor from "@hypr/tiptap/editor";
Expand All @@ -62,7 +51,7 @@ function NotePage() {
}
```

### Chat Editor
### Chat editor

```tsx
import ChatEditor from "@hypr/tiptap/chat";
Expand All @@ -84,7 +73,7 @@ function ChatInput() {
}
```

### Prompt Template Editor
### Prompt template editor

```tsx
import { PromptEditor } from "@hypr/tiptap/prompt";
Expand Down Expand Up @@ -114,16 +103,13 @@ import {
EMPTY_TIPTAP_DOC,
} from "@hypr/tiptap/shared";

// Convert between formats
const markdown = json2md(tiptapJson);
const json = md2json("# Hello\n\nWorld");

// Validate content
if (isValidTiptapContent(data)) {
editor.commands.setContent(data);
}

// Extract hashtags from HTML
const tags = extractHashtags(htmlString);
```

Expand Down