Tiptap V3 betaにコントリビュートした話
はじめに
Tiptapとはヘッドレスエディターフレームワークです。
ProsemirrorというヘッドレスエディターライブラリをベースにしているフレームワークでExtensionでエディター機能のカスタマイズや拡張が柔軟に行えることやヘッドレスフレームワークなのでフレームワーク固有のデザインに左右されず自由にエディターを作成できることが主な特徴です。
そんなTiptapですが、2025年5月にTiptapV3 betaのページが公開されました！
現在はbeta版で提供されていて、2025年後半に安定版のリリースが予定されています。
対象読者
- OSSに貢献してみたい人
- 絶賛TiptapV3でバグを踏みまくっている人
V3で提供される予定の新機能を触ってみるも動かない...
個人的にV3で提供される予定のMarkViewが激アツだったので早速触ってみることにしました。
ざっくりMarkViewの説明をすると、Mark(ex. Link,strongなどのテキストの一部として表示される要素)に対してカスタムコンポーネントを設定できる機能になります。
例えばテキストリンクのURLを編集するためのダイアログみたいな機能をExtension経由で提供できるようになります。
詳しい内容やAPIの仕様に関しては以下を参照ください。
ただ触ってみたものの、型エラーが起きたり出力されるHTMLが想定していたものと異なっていて動かないなどの不具合がちょこちょこありました。
そうだコントリビュートしよう
TiptapはOSSなので使いたい機能はIssueやPullRequestを出して貢献ができます。
不具合や使いづらい箇所があるのであればContributeすれば良いと思い、TiptapにContributeすることにしました。
自分が行った内容は以下です。
行った内容
1. Discussionにコメントを書いた
仕様なのか不具合なのかわからない場合、一度Disucussionにコメントを書いてみるのが良いかなと思います。こちらが現状一番ハードルが低く貢献できる手段かなと思います。
2025年5月現在、TiptapはV3 beta用の公式スペースを設けており、こちらでV3に関する質問や報告を行うことができます。
自分はMarkViewのHTML出力に対してわからないことがあったのでコメントを追加してみました。
2. Issueを作成した
明確に不具合だなと思ったものはDiscussionにコメントせずIssueを作成するのも手です。
TiptapはIssueのテンプレートがあるので、現在の状況に応じてテンプレートを選択して内容を記載していくことができます。
自分は.isActiveというExtensionがActiveかどうかを判定するコアのメソッドがReactで動いていなかったのでIssueとして起票してみました。
メンテナーがIssueを確認後、安定版のリリースまでに修正が必要なものは以下のIssueにトリアージされていくみたいです。
3. PullRequestを作成した
修正方法がわかっているのであればPullRequestを出しましょう！
自分が出した以下のPullRequestでの経験を元に説明したいと思います。
3.1. Tiptapのリポジトリをフォークする
まず自分のリポジトリにTiptapをフォークします。
フォークはGitHubのリポジトリの右上にあるForkボタンを押して、Create forkボタンを押せばOKです。
3.2. フォークしたリポジトリをlocal環境にcloneする
フォークしたリポジトリを自分のLocal環境にcloneします。
git clone <フォークしたリポジトリ名>
3.3. 環境構築をする
TiptapV3ではpnpmを使って環境構築を行います。
以下の方法で環境構築を行うことが可能です。
-
pnpm installを実行する -
pnpm run startで開発環境のサーバーを立ち上げる -
localhost:3000にアクセスする
3.4. 修正を行う
local環境でブランチを切って修正作業を行います。
修正が完了したらtestを通したり、lintを通して問題がないことを確認します。
3.5. PullRequestを作成する
修正が完了したらTiptapの本体にPullRequestを作成します。
プルリクエストはテンプレートが用意されているので、そちらの記述を確認しながらDescriptionを埋めていけばOKです。
自分は英語が苦手なのでChatGPTのお世話になりながら日本語を英訳して埋めていきました。
まとめ
今回はTiptapV3に貢献する方法を紹介しました。
beta版が公開されたばかりということもあり、上記で触れた内容以外にもドキュメントが間違っていたり他の箇所で不具合が起きていたりとContributeチャンスにあふれている状態です！！！
ぜひTiptapに貢献してOSS活動の第一歩を踏み出してみてください！
Discussion