mcpField
T
tiptap

tiptap

github.com/oakoss開発21112 回インストール12 週間前に更新
リポジトリ

tiptap について

tiptapはProseMirrorを基盤とするヘッドレスのリッチテキストエディターで、Reactアプリ向けのモジュール式拡張を備えています。コンテンツ編集や共同編集機能の開発に適しています。

主な機能

  1. 01モジュール式拡張システム
  2. 02React連携
  3. 03テキストとリストの基本機能
  4. 04Markdown対応
  5. 05オプションのリアルタイム共同編集

活用シーン

  1. 01ブログやドキュメントのエディター構築
  2. 02コメントやタスクリストの追加
  3. 03共同編集アプリの作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/oakoss/agent-skills --skill tiptap

インストール後、Claude Code で/tiptapを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
extensions.md
image-upload.md
known-issues.md
patterns.md
prose-styling.md
setup.md

詳細

Tiptap リッチテキストエディター

概要

Tiptap は ProseMirror をベースに構築されたヘッドレスのリッチテキストエディターで、React アプリケーション向けのモジュール式拡張システムを提供します。React 19、Tailwind v4、Next.js などの SSR フレームワークに対応しています。ブログエディター、コメントシステム、ドキュメントツール、Notion のような共同編集アプリを構築する際に使用してください。Create React App では使用しないでください（CRA は Tiptap v3 の ESM モジュール構造と互換性がありません。代わりに Vite を使用してください）。

クイックリファレンス

パターンAPI／要点
エディターを作成useEditor({ extensions: [StarterKit], immediatelyRender: false })
エディターを表示<EditorContent editor={editor} />
Prose のスタイル設定コンテナーに className="prose dark:prose-invert max-w-none" を追加します
StarterKit を設定StarterKit.configure({ heading: { levels: [1, 2, 3] } })
Undo／Redo を無効化StarterKit.configure({ undoRedo: false })（Y.js の共同編集に必須）
画像のアップロードallowBase64: false を設定し、URL を置換するアップロードハンドラーを使用します
Markdown のサポートimport { Markdown } from '@tiptap/markdown'（公式、オープンソース）
shadcn コンポーネントnpx shadcn@latest add https://raw.githubusercontent.com/Aslam97/shadcn-minimal-tiptap/main/registry/block-registry.json
Null ガードuseEditor() は Editor | null を返します。メソッドを呼び出す前にガードしてください

コア依存関係

パッケージ用途
@tiptap/reactReact との統合（v2.10.0 以降、React 19 をサポート）
@tiptap/starter-kitバンドルされた拡張機能：マーク、ノード、機能
@tiptap/pmProseMirror のピア依存関係（必須、自動インストールされません）
@tailwindcss/typography見出し、リスト、リンクの Prose スタイル設定

StarterKit v3 の内容

カテゴリ含まれる項目
マーク太字、斜体、取り消し線、コード、リンク（v3）、下線（v3）
ノードドキュメント、段落、テキスト、見出し、箇条書きリスト、番号付きリスト、リスト項目、引用、コードブロック、水平線、改行
機能Undo／Redo、Dropcursor、Gapcursor、ListKeymap（v3）、TrailingNode（v3）

よく使われる追加拡張機能

拡張機能パッケージ用途
画像@tiptap/extension-imageサイズ変更に対応した画像サポート
色@tiptap/extension-colorテキストの色（TextStyle が必要）
タイポグラフィ@tiptap/extension-typographyスマート引用符、ダッシュ、省略記号
プレースホルダー@tiptap/extension-placeholderプレースホルダーテキスト（CSS が必要）
テーブル@tiptap/extension-tableテーブルのサポート（Row、Cell、Header を含む）
タスクリスト@tiptap/extension-task-listチェックボックス付きのタスクリスト
CodeBlockLowlight@tiptap/extension-code-block-lowlightシンタックスハイライト付きコード
コラボレーション@tiptap/extension-collaborationリアルタイムの複数ユーザー編集（Y.js）
Markdown@tiptap/markdown双方向の Markdown（オープンソース）

よくある間違い

間違い修正
immediatelyRender: false がないuseEditor() の設定に追加します — SSR/Next.js では必須です
エディターコンテナーに prose クラスがないclassName="prose prose-sm dark:prose-invert max-w-none" を追加します
画像が base64 として保存されるallowBase64: false を設定し、URL を置き換えるアップロードハンドラーを使用します
EditorProvider と useEditor を併用するどちらかを選択します — EditorProvider は内部で useEditor をラップします
Collaboration 使用時に Undo/Redo が有効Y.js 使用時は StarterKit で undoRedo: false を設定します
ProseMirror のバージョンが競合するpackage.json で prosemirror-model/view/state に resolutions を追加します
Create React App を使用するVite に切り替えます — CRA は v3 ESM モジュールと互換性がありません
editor が null かどうかを確認しないuseEditor() は Editor | null を返します — 使用前に null を確認します
コラボレーションに history: false を使用するv3 では設定キーが undoRedo に変更されています
@tiptap/extension-markdown をインポートする正しいパッケージは @tiptap/markdown です

委任

  • Tailwind のスタイリング: tailwind スキルを参照してください
  • フォーム連携: tanstack-form スキルを参照してください

参考資料

コメント

Markdown 対応