Tiptap Editor - ヘッドレスWYSIWYGエディタ (github.com/ueberdosis) 20 ポイント 投稿者 nemorize 2024-02-29 | 9件のコメント | WhatsAppで共有 UIを提供しないヘッドレスフレームワークのため、スタイリングに有利 React、Vue、Svelte、Alpine.js、Next.js、Nuxt.js、バニラJSと非常によく連携 ProseMirror ベース 関連記事 2025年にはどのリッチテキストエディタフレームワークを選ぶべきか？ 65 ポイント · 14件のコメント · 2025-02-10 9件のコメント bbulbum 2024-03-04 個人的に使ってみた中では、いちばん使いやすく、拡張しやすい構成だったと思います。 Slate でエディタを作りながら感じていた不便さの多くが、ここで本当にたくさん解消されました。 gomjellie 2024-03-04 Slateエディタを使ったときに、どんな不便さがあったのか共有していただけますか？ 私はTiptapしか使ったことがないのですが、Slateも良いという話を聞いて興味が湧いています!! firea32 2024-03-04 外部コンポーネントを作る部分がずっと便利です。特にReactのように独自のDOMを使う場合、HTMLではなくコンポーネントとしてのレンダリングが必要になりますが、そもそもモジュール化を考慮して作られたtiptapのほうが修正しやすかったです。 bbulbum 2024-03-04 全体的に、Slate のドキュメントは難しいと感じましたし、かなり raw なので、自分が欲しい機能を実装するには学ばなければならない部分がもっと多いと感じました。 2年ほど前の記憶なので少し違うかもしれませんが、こんな問題を経験しました。 モバイル環境での韓国語入力の問題: これはどこで発生したのか特定するのがとても難しかったのですが、カスタムしている途中で発生して、正確には覚えていません。 select 関連のコントロールの難しさ: 選択した文字に属性を処理する機能を追加するのが非常に厄介でした。 （オブジェクト自体が複雑） プラグイン開発の難しさ: 地図などのプラグインを自分で開発しようとしたのですが、tiptap はプラグインを追加開発しやすいように構成されていて楽でした。 gomjellie 2024-03-04 おお……ありがとうございます〜！ nemorize 2024-02-29 https://tiptap.dev/docs/editor/installation/react#7-the-complete-setup で動作するエディタのサンプルを確認できます。 個人的にはドキュメントはかなりよく整備されていると思いますが、有料サブスクリプションが必要な要素が途中に混ざっています。 ドキュメントを読むうえで不便を感じるほどではありませんが、必要でもないのに物欲を刺激されてしまって、すごいと思う反面ちょっと憎らしくもあり……複雑な気分です。 savvykang 2024-03-02 「ドキュメントがそれなりによく整備されている」という意見には、なかなか同意しづらいです。私の感覚では、Getting Started ドキュメントと API ドキュメントのあいだの隔たりが大きすぎて、学習曲線が急です。私たちが進めている React プロジェクトでは、Prosemirror と react-prosemirror のドキュメントスタイルのほうがよりユーザーフレンドリーで完成度が高いと判断し、react-prosemirror を選び、tiptap は選びませんでした。 私たちの要件に対する PoC 用サンプルコードを作るために React のサンプルを把握しているあいだ、次のような問題がありました。 StarterKit を追加したときに使える要素は何でしょうか。パッケージ名で別のドキュメントを探さなければなりません。tiptap のサンプルを動かしていた集中状態から外れてしまいます。 ListItem は StarterKit に含まれているのに、なぜサンプルではさらに ListItem をプロジェクトに含めているのでしょうか。extension に対する設定を行うためです。 なぜ editor().chain().focus() のような構文を書かなければならないのでしょうか。メソッドチェーンに関する設計原則や説明がありません。 Bubble menu と Floating menu は React のサンプルに入っていません。Try it live ページ (https://templates.tiptap.dev/pjrwkQtNpq) で見た機能と異なる動作をするため、なぜ機能が抜けているのかをドキュメントで確認しなければなりません。 表機能がないので Extensions ページで table キーワード検索をします。Table、TableCell、TableHeader、TableRow が検索結果に出てきます。これらを全部追加しなければならないのでしょうか。 Table と各種 extension をどうにか追加しました。機能が正しく動くか確認するには、まず表の挿入から始める必要があります。ツールバーコマンドはどう書けばよいのでしょうか。editor ツールバーのどこにそれらのコマンド用関数を追加すればよいのでしょうか。まったくヒントがありません。 表の中に別の表をネストできないようにしなければならないという要件があります。カーソルが表の中にあるかどうかを判定するロジックは、どう実装すればよいのでしょうか。まったくヒントがありません。 Color が extension としてパッケージ化されていたことを思い出し、気になってソースコードを開いてみます。src ディレクトリにファイルがたった 2 つしかないのを見てため息が出ます。なぜここまで細かいモジュールにしたのか、意図が理解できません。これほど小さな機能までパッケージ化すると、再利用性よりも依存関係のバージョン管理の負担が大きいのではないでしょうか。 nemorize 2024-03-03 1-3、4-6、8については、私はまったく疑問や不便さを感じなかったので、あまり同意しづらいですね。 1-2 StarterKitは文字どおりStarterのためのKitなので、実運用の段階ではあまり意味がないように見えます。 ListItemについてはおっしゃるとおりです。Colorエクステンションの設定のための要素です。これもStarterKitを使わなければ済む部分だと思います。 3 chain().something().run() は単なるシンタックスシュガーのような存在ですが、バッテリー同梱ライブラリというコンセプトに合った機能を提供していると思います。 太字にした後でフォーカスするようなアクションが事実上必須なモバイル環境で、とても便利に使っています。 4 その機能は使っていないので、よく分かりません。 （自分が使わない機能についての情報をあえて見なくていいという点では、1番で述べられていた「集中状態から外れてしまう」という欠点の裏返しとして生まれる利点だと思います。） 5-6 各エクステンションのドキュメントにしっかり書かれていますし、一般的にエディタを実装するのとまったく変わりません。 正直、6番でおっしゃっている部分は、私がsavvykangさんの言葉を正しく理解できているのかもよく分かりません……。「これのどこが疑問なんだろう……？ いったいどんなヒントが必要なんだろう……？」という考えがずっと浮かびますね（笑）…… 7 「ほかのノードと同じように」 editor.isActive('table') でフォーカスを確認できます。 ただ、単にフォーカスされたノードだけを把握すれば解決する問題ではない気がします。貼り付け時のフィルタリングや、開発者ツールを使った挿入など、多くの点を考慮する必要がある要件だと思います。 8 依存関係のバージョン管理が負担になるという点には同意しますが、不要な機能のコードを持たなくて済むという点では利点があると思います。 ちょうど私たちのケースでは、言及されていたColorエクステンションを使わない状況だったんです。結局、それぞれに長所短所があるのだと思います。 . 言及されていたreact-prosemirrorとtiptapは、コンセプトがまったく異なるものだと思います。 prosemirrorをReactらしく使えるようにするもの vs prosemirrorベースかどうかは重要ではなく、とにかく自分のサービスに合うエディタを実装するのに必要なものをひと通り揃えたもの nemorize 2024-02-29 Vue界隈ではすでに人気があるので書こうかどうか迷ったのですが、 今回SvelteKitに適用して使ってみたところかなり満足できたので投稿してみます。 Svelte界隈には「これだ！」と思える満足度の高いWYSIWYGエディタがなくて悩んでいたのですが、 同じような悩みをお持ちの方がいれば、一度試してみるのも良いと思います。
9件のコメント
個人的に使ってみた中では、いちばん使いやすく、拡張しやすい構成だったと思います。
Slate でエディタを作りながら感じていた不便さの多くが、ここで本当にたくさん解消されました。
Slateエディタを使ったときに、どんな不便さがあったのか共有していただけますか？
私はTiptapしか使ったことがないのですが、Slateも良いという話を聞いて興味が湧いています!!
外部コンポーネントを作る部分がずっと便利です。特にReactのように独自のDOMを使う場合、HTMLではなくコンポーネントとしてのレンダリングが必要になりますが、そもそもモジュール化を考慮して作られたtiptapのほうが修正しやすかったです。
全体的に、Slate のドキュメントは難しいと感じましたし、かなり raw なので、自分が欲しい機能を実装するには学ばなければならない部分がもっと多いと感じました。
2年ほど前の記憶なので少し違うかもしれませんが、こんな問題を経験しました。
おお……ありがとうございます〜！
https://tiptap.dev/docs/editor/installation/react#7-the-complete-setup で動作するエディタのサンプルを確認できます。
個人的にはドキュメントはかなりよく整備されていると思いますが、有料サブスクリプションが必要な要素が途中に混ざっています。
ドキュメントを読むうえで不便を感じるほどではありませんが、必要でもないのに物欲を刺激されてしまって、すごいと思う反面ちょっと憎らしくもあり……複雑な気分です。
「ドキュメントがそれなりによく整備されている」という意見には、なかなか同意しづらいです。私の感覚では、Getting Started ドキュメントと API ドキュメントのあいだの隔たりが大きすぎて、学習曲線が急です。私たちが進めている React プロジェクトでは、Prosemirror と react-prosemirror のドキュメントスタイルのほうがよりユーザーフレンドリーで完成度が高いと判断し、react-prosemirror を選び、tiptap は選びませんでした。
私たちの要件に対する PoC 用サンプルコードを作るために React のサンプルを把握しているあいだ、次のような問題がありました。
editor().chain().focus()のような構文を書かなければならないのでしょうか。メソッドチェーンに関する設計原則や説明がありません。tableキーワード検索をします。Table、TableCell、TableHeader、TableRow が検索結果に出てきます。これらを全部追加しなければならないのでしょうか。srcディレクトリにファイルがたった 2 つしかないのを見てため息が出ます。なぜここまで細かいモジュールにしたのか、意図が理解できません。これほど小さな機能までパッケージ化すると、再利用性よりも依存関係のバージョン管理の負担が大きいのではないでしょうか。1-3、4-6、8については、私はまったく疑問や不便さを感じなかったので、あまり同意しづらいですね。
1-2
StarterKitは文字どおりStarterのためのKitなので、実運用の段階ではあまり意味がないように見えます。
ListItemについてはおっしゃるとおりです。Colorエクステンションの設定のための要素です。これもStarterKitを使わなければ済む部分だと思います。
3
chain().something().run() は単なるシンタックスシュガーのような存在ですが、バッテリー同梱ライブラリというコンセプトに合った機能を提供していると思います。
太字にした後でフォーカスするようなアクションが事実上必須なモバイル環境で、とても便利に使っています。
4
その機能は使っていないので、よく分かりません。
（自分が使わない機能についての情報をあえて見なくていいという点では、1番で述べられていた「集中状態から外れてしまう」という欠点の裏返しとして生まれる利点だと思います。）
5-6
各エクステンションのドキュメントにしっかり書かれていますし、一般的にエディタを実装するのとまったく変わりません。
正直、6番でおっしゃっている部分は、私がsavvykangさんの言葉を正しく理解できているのかもよく分かりません……。「これのどこが疑問なんだろう……？ いったいどんなヒントが必要なんだろう……？」という考えがずっと浮かびますね（笑）……
7
「ほかのノードと同じように」 editor.isActive('table') でフォーカスを確認できます。
ただ、単にフォーカスされたノードだけを把握すれば解決する問題ではない気がします。貼り付け時のフィルタリングや、開発者ツールを使った挿入など、多くの点を考慮する必要がある要件だと思います。
8
依存関係のバージョン管理が負担になるという点には同意しますが、不要な機能のコードを持たなくて済むという点では利点があると思います。
ちょうど私たちのケースでは、言及されていたColorエクステンションを使わない状況だったんです。結局、それぞれに長所短所があるのだと思います。
.
言及されていたreact-prosemirrorとtiptapは、コンセプトがまったく異なるものだと思います。
prosemirrorをReactらしく使えるようにするもの
vs
prosemirrorベースかどうかは重要ではなく、とにかく自分のサービスに合うエディタを実装するのに必要なものをひと通り揃えたもの
Vue界隈ではすでに人気があるので書こうかどうか迷ったのですが、
今回SvelteKitに適用して使ってみたところかなり満足できたので投稿してみます。
Svelte界隈には「これだ！」と思える満足度の高いWYSIWYGエディタがなくて悩んでいたのですが、
同じような悩みをお持ちの方がいれば、一度試してみるのも良いと思います。