ProseMirrorの作者が手掛けた、ブラウザ完結型リッチテキストエディタ「Wordgard」が登場

ProseMirrorの開発者によって制作された、新しいブラウザ向けリッチテキストエディタ「Wordgard」が公開されました。エディタ構築の専門家がどのようなツールを完成させたのか、要チェックです。

ProseMirrorは素晴らしいプロジェクトだけど、Reactで直接使うのはいつも少し勝手が悪かったな。NYTが自分たちのユースケースに合わせるためにレンダラーを書き直さなきゃいけなかったのを覚えてるよ。Wordgardだとその辺がどう違うのか気になる！

みんな「なぜ」Wordgardなのかを知りたいはずだよ。このページがProsemirrorとの違いを論じていて、疑問に対する答えとしては一番近かったかな：(https://wordgard.net/docs/prosemirror/) 。一点注意すべきは、アップグレードパスがないこと。Prosemirrorと概念は多く共有してるけど、切り替えるにはかなりの作業が必要そう（間違ってたら訂正して）。ObsidianはCode Mirrorベースだから乗り換えることはないだろうけど、tiptap.devなんかはそうなるかもね。@merijn、Wordgardに乗り換える価値がどこにあるのか教えてくれない？ 追記：Marijnの個人ブログに多くのポイントが書かれてた。コンテキストのために(https://marijnhaverbeke.nl/blog/wordgard-0.1.html) をHNに投稿しておいたよ。

約25年前、PHP-Nukeのサイトで学校新聞を運用してた時、WYSIWYGエディタを動かすのが最大の難関だったな。15年も前にWeb標準の実装ができてなかったなんて、今考えると狂ってるよ。

6年くらい前に「@」形式のリモートリソース補完（他のユーザーやドキュメントの参照）の実装でめちゃくちゃ苦労したんだけど、このエディタの拡張機能のスタイルはProsemirrorの進化系って感じがするね。こういうのが標準搭載されてたらすごく助かる。Dinosaursのサンプルを参考に自前で実装するのはもうこりごりだよ。テキストエディタ系のライブラリを導入する時はいつも、WYSIWYGの次にこれが最優先のユースケースなんだ。

サイトのアートワークがすごく美しい！こうやって人の目を惹きつける手法は（最近）忘れられてたね。

エディタは置いといて、デザインを担当したアーティストには本当に感銘を受けた。すごくセンスが良いし、間違いなく目を引くよ https://kamilastankiewicz.com/

Web上のWYSIWYGって好きじゃないんだよね。フォーラムへの投稿に長々と時間をかけて書式を整えても、タブを閉じた瞬間に全部消えちゃうし。ローカルのテキストエディタで書いてからWebフォームにCtrl+Vする方が好き。Markdownならそうできるしね。

これは驚くほど素晴らしいね。最近ちょうど似たようなものを探してたんだけど、結局ブロックベースのOT（操作変換）をローカルサーバーに持たせて、リモートと差分同期する仕組みを自作してしまったよ。システムガイドを読んでて、ずっと頷きっぱなしだった。似ている部分と対照的な部分を確認できて、すごく確信が持てた。

Prosemirror（TipTap経由）を使っていて苦労しているのは、データの抽出のためにドキュメントのJSON表現とプログラムでやり取りすることが多いんだけど、静的型付けされた表現が必要（というか強く希望）なんだよね。Prosemirrorにはその仕組みがほとんどないから、結局以下のどっちかをやる羽目になってる。1. Prosemirror用とZod用でスキーマを二重定義して、それらが一致するかを確認する大量の等価性テストを書く。2. 標準のスキーマ仕様（https://standardschema.dev/ ）に準拠しつつProsemirrorのスキーマを出力できるメタスキーマ定義層を自作する。Tiptapを使わないなら後者の方が現実的だけどね。Wordgardはまだ試してないからこの問題にどうアプローチしてるか分からないけど、解決してほしい痛いポイントとして挙げておくよ。

久しぶりにちゃんとしたアートを見られて本当に嬉しい。すごく素敵だね。