diff --git a/packages/tiptap/README.md b/packages/tiptap/README.md index f5a136a62b..0d9d636408 100644 --- a/packages/tiptap/README.md +++ b/packages/tiptap/README.md @@ -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"; @@ -62,7 +51,7 @@ function NotePage() { } ``` -### Chat Editor +### Chat editor ```tsx import ChatEditor from "@hypr/tiptap/chat"; @@ -84,7 +73,7 @@ function ChatInput() { } ``` -### Prompt Template Editor +### Prompt template editor ```tsx import { PromptEditor } from "@hypr/tiptap/prompt"; @@ -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); ```