tiptap-dev

Tiptap 開発エキスパート

Tiptap を使ってリッチテキストエディターを構築するためのエキスパート向けガイダンスです。Tiptap は、ProseMirror を基盤とするヘッドレスでフレームワークに依存しないエディターです。

関連項目： tiptap-editor スキル — VMark 固有の Tiptap API パターン（コマンド、ノードの走査、選択範囲の処理）。一般的な Tiptap／ProseMirror 開発には tiptap-dev を、VMark 固有のエディター統合には tiptap-editor を使用してください。

このスキルを使用する場面

• Tiptap 用のカスタムノード、マーク、拡張機能を作成するとき
• 入力ルールや貼り付けルールを実装するとき
• Tiptap のコマンド API を使用するとき
• useEditor を使った React 統合を構築するとき
• 既存の拡張機能を拡張するとき
• カスタムノードビューを作成するとき
• スキーマとコンテンツモデルを理解するとき

リファレンスファイル

ファイル	説明
references/extensions.md	拡張機能の種類（Node、Mark、Extension）と作成パターン
references/commands-and-api.md	コマンド API、エディター API、チェーン処理
references/input-paste-rules.md	入力ルールと貼り付けルール
references/react-integration.md	React 固有のフックとコンポーネント
references/schema.md	スキーマのプロパティとコンテンツパターン
references/examples.md	動作する完全な例

クイックリファレンス

拡張機能の種類

// Functionality extension (no schema)
Extension.create({ name: 'myExtension', addKeyboardShortcuts() { ... } })

// Node extension (block content)
Node.create({ name: 'myNode', group: 'block', content: 'inline*' })

// Mark extension (inline formatting)
Mark.create({ name: 'myMark', parseHTML() { ... }, renderHTML() { ... } })

コマンドのチェーン処理

editor.chain().focus().toggleBold().run()
editor.can().chain().focus().toggleBold().run() // dry run

React 統合

const editor = useEditor({
  extensions: [StarterKit],
  content: '<p>Hello</p>',
  immediatelyRender: false, // for SSR
})

コアコンセプト

1. ヘッドレスアーキテクチャ：Tiptap はロジックを提供し、レンダリングは自由に制御できます
2. 拡張機能ベース：すべてが拡張機能です（ノード、マーク、機能）
3. ProseMirror 基盤：ProseMirror を基盤として構築されており、その API に全面的にアクセスできます
4. スキーマ駆動：ノード／マークのスキーマによってコンテンツモデルが定義されます
5. コマンドパターン：すべての操作はチェーン可能なコマンドを通じて行います