Anthropic ClaudeLLM・AI開発⭐ リポ 0品質スコア 50/100

tiptap

Name: tiptap
Author: ueberdosis

Tiptapリッチテキストエディタの統合・実装をサポートするスキルです。Tiptapを使ったエディタの構築・修正、拡張機能のインストール、コラボレーション・コメント・AI・ドキュメント変換などの機能実装時に活用できます。

description の原文を見る

Helps coding agents integrate and work with the Tiptap rich text editor. Use when building or modifying a rich text editor with Tiptap, installing Tiptap extensions, or implementing features like collaboration, comments, AI, or document conversion.

SKILL.md 本文

Tiptap Integration Skill

このスキルには、Tiptap リッチテキストエディタをアプリに統合し、それを使用して新しい機能を開発するための指示が含まれています。

これは従来のTiptapエディタではありません。Tiptap で任意の機能を実装する前に、Tiptap のコードとドキュメントを参照して、正しく実装されていることを確認してください。実装するすべての決定が「ベストプラクティス」セクションに準拠し、tiptap のドキュメントとソースコードに基づいていることを確認してください。推測や独自のパターンを発明しないでください。記述するコードはライブラリのソースコードとドキュメントと一致していることを確認してください。

初期セットアップ

ソースコードとドキュメントを検索できるように、tiptap と tiptap-docs リポジトリをクローンします。

ワークスペースに他のリポジトリを参照するフォルダがすでにある場合は、そこにクローンします。

そうでない場合は、新しい .reference フォルダにリポジトリをクローンします。参照フォルダは git で無視される必要があります。

Tiptap ドキュメントの参照

Tiptap エディタに関連するタスクを実行する前に:

ローカルの tiptap と tiptap-docs リポジトリの main ブランチの最新の変更をプルします
ドキュメントとソースコードを調査して、実装方法を確認します

ベストプラクティス

一般的な事項

Tiptap 3 の最新安定版を使用します。
@tiptap/ で始まるすべてのパッケージは、同じバージョン番号を持つ必要があります。
初めて Tiptap を統合する場合は、tiptap-docs の対応するインストールガイドを読んでください。
サーバーサイドレンダリング (例: Next.js) の場合、エディタを初期化するときに immediatelyRender: false オプションを設定します。そうしないとエディタがクラッシュします。tiptap-docs でこの詳細を確認してください。

React

React Composable API の使用を優先してください。tiptap-docs/src/content/guides/react-composable-api.mdx を参照してください

エディタ機能の実装

ユーザーがこれらの機能の 1 つを実装するよう求めた場合、tiptap-docs の対応するセクションを参照してガイダンスを得てください。

リアルタイム共同編集

複数のユーザーが同時にドキュメントを編集します。tiptap-docs/src/content/collaboration/ を参照してください。

リアルタイム共同編集を実装するには Tiptap Cloud を使用します。Collaboration エクステンションを使用します:

const doc = new Y.Doc()

const editor = new Editor({
  extensions: [
    Collaboration.configure({
      document: doc,
    }),
  ],
})

TiptapCollabProvider を使用します:

const provider = new TiptapCollabProvider({
  name: 'unique_document_name',
  appId: 'APP_ID', // Cloud ダッシュボードからのドキュメントサーバー ID
  token: 'JWT_TOKEN', // JWT トークン
  document: doc,
})

初めて共同編集を設定する際に Tiptap Cloud アカウントがまだセットアップされていない場合は、ユーザーに Tiptap Cloud アカウントのセットアップ方法と環境変数の取得方法を説明してください。

Comments エクステンションでコメントを実装します。

スレッドベースのインラインおよびドキュメントコメント。tiptap-docs/src/content/comments/ を参照してください。

変更の追跡

ドキュメント編集の追跡、承認、却下。tiptap-docs/src/content/tracked-changes/ を参照してください。

インポート/エクスポート

DOCX、PDF、Markdown、その他の形式との間でドキュメントを変換します。tiptap-docs/src/content/conversion/ を参照してください。

AI コンテンツ生成

AI を使用してテキストコンテンツをドキュメントに生成します。tiptap-docs/src/content/content-ai/capabilities/ai-toolkit/workflows/insert-content.mdx を参照してください。

AI エージェントドキュメント編集

AI エージェントに Tiptap ドキュメント編集機能を付与します。tiptap-docs/src/content/content-ai/capabilities/ai-toolkit/ を参照してください。

AI レビューおよび校正

レビュー、校正、スタイル改善の提案。tiptap-docs/src/content/content-ai/capabilities/ai-toolkit/workflows/proofreader.mdx を参照してください。

AI サーバーサイド処理

リッチテキストドキュメントを編集する AI ワークフローをサーバーで実行します。tiptap-docs/src/content/content-ai/capabilities/server-ai-toolkit/ を参照してください。

バージョン履歴

ドキュメントスナップショットを保存して復元します。tiptap-docs/src/content/collaboration/documents/snapshot.mdx を参照してください。

スナップショット比較

ドキュメントバージョン間の違いをハイライトします。tiptap-docs/src/content/collaboration/documents/snapshot-compare.mdx を参照してください。

ページ

ヘッダー、フッター、ページ区切りを備えた印刷対応レイアウト。tiptap-docs/src/content/pages/ を参照してください。

Pro Extensions

一部の Tiptap エクステンションはプライベート npm レジストリを通じて配布されています。Pro パッケージをインストールするには、tiptap-docs/src/content/guides/pro-extensions.mdx でセットアップ手順を確認してください。

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者: ueberdosis
リポジトリ: ueberdosis/tiptap
ライセンス: MIT
最終更新: 不明

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/ueberdosis/tiptap / ライセンス: MIT