共同編集可能で全ブラウザで動くWYSIWYGのリッチテキストエディタを簡単に作成できる「Tiptap」を使って実際に共同編集してみた

ウェブ上でリッチテキストエディタを構築するためのオープンソースのツールキットが「Tiptap」です。同様のツールキットとして「ProseMirror」が存在していますが、高性能で自由度が高い分だけ構築の難易度も高かったProseMirrorに対して、より簡単に使用できるように構築されたラッパーがTiptapというわけ。Tiptap開発元のバックエンドサービスを使用することで簡単に共同編集機能を導入できるとのことなので、実際に共同編集できるエディタを組み上げてみました。

Dev toolkit for building collaborative editors – Tiptap
https://tiptap.dev/

Tiptapを利用するためにはNode.jsのインストールが必要です。下記のURLから、手元の環境に合ったインストール方法を選択してください。

パッケージマネージャを利用した Node.js のインストール | Node.js
https://nodejs.org/ja/download/package-manager

今回はUbuntuを利用するため、下記のコードでNode.jsをインストールしました。

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

今回はNext.js上でTiptapを実装します。下記のコードで作業用のディレクトリを用意します。

npx create-next-app

名前や使用するライブラリなどの設定を行えるので、下記の通り選択します。今回は「tiptap-test」という名前にしました。

下記のコードでディレクトリを移動し、アプリを起動します。

cd tiptap-test
npm run dev

URLが表示されるのでブラウザで開きます。

下図の通り、Next.jsのページが開けばOK。ページに記載されている通り、「src/app/page.tsx」の内容が表示されています。

続いてTiptapの設定を行います。下記のコマンドでTiptapのライブラリをインストール。

npm install @tiptap/react @tiptap/pm @tiptap/starter-kit

Tiptapのチュートリアルのページの「Setting Up Tiptap」の項目に記載されている4ファイル分のコードをコピーします。

「page.tsx」がある場所に4つのファイルを作成し、それぞれコピーしたコードを貼り付けます。さらに、index.tsxの一番上に「"use client"」と記入した上で、「./Note.jsx」「./types.js」となっている部分を「./Note.tsx」「./types.ts」に書き換えます。

Note.tsxのimport文でも同様に拡張子が「.js」となっている部分を「.ts」に書き換えればOK。

「.ts」のままインポートできるようにするため、「tsconfig.json」を開いて「compilerOptions」に「"allowImportingTsExtensions": true,」を追記。

最後にpage.tsxを開いてindex.tsxの内容をインポートし、適当な部分に配置します。

ブラウザを見るとエディタが挿入されています。無事にTiptapのエディタを設定できました。

続いて共同編集の仕組みを導入します。下記のコマンドで必要なライブラリをインストール。

npm install @tiptap/extension-collaboration yjs @hocuspocus/provider

Tiptapのチュートリアルのページを一番下までスクロールし、「Let's now create the TiptapCollabProvider to finally get syncing:」という文の下にあるコード例の「Note.tsx」の内容をコピーして手元のNote.tsxに上書きします。

共同編集を設定するのに必要なデータをもらうため、Tiptapのトップページへアクセスし、「Sign up」をクリックします。

氏名・メールアドレス・パスワードを入力して「Register」をクリック。

分かりやすいアプリ名を付けて「Let's collab!」をクリックします。

ダッシュボードが開くので、「App ID」をコピーして手元に保存しておきます。

さらに「Settings」をクリックし、Authenticationの項目にある「JWT」をコピー。

「Note.tsx」の18行目・19行目の部分をコピーしておいたApp IDとJWTに置き換えて保存します。

これで共同編集が可能になりました。試しにブラウザを2つ開いて片方を編集してみると、もう片方にもリアルタイムで反映されていきます。

無料版のバックエンドサービスでは1カ月あたり5000コネクション・同時アクセス数10に制限されています。料金表によると、月額1.49ドル(約220円)のStarterプランでは1カ月あたり10万コネクション・同時アクセス数200まで対応可能で、月額9.99ドル(約1460円)のBusinessプランでは1カ月あたり100万コネクション・同時アクセス数1000まで対応できるとのことです。