TiptapでストレスフリーなWYSIWYGエディター開発を！

Transcript

1. Tiptapでストレスフリーな WYSIWYGエディター開発を！
2. 自己紹介
3. 飯原帆隆(IIHARA 議長) 株式会社メタップスホールディングス エンジニア 23新卒で入社後、re:shine開発を担当 Vue/Nuxt Rails Litを主に書きます Github: https://github.com/Gityosan Qiita: https://qiita.com/Gityosan Zenn: https://zenn.dev/iihara 株式会社メタップスホールディングス 「UNLEASH THE WORLD(世界を解き放つ)」 をビジョンに re:shineとSRE:shineの二つのサービスを展開 Lightning TechTalks #2 〜フロントエンドで導入してよかったOSS〜 3
4. これは内定者インターンとして働いていた頃の話
5. Nuxt3製社内アプリの新機能開発でWYSIWYGエディターが必要になった。 Quillにする？Editor.jsにする？Draft.jsにする？はたまたTinyMCE？ Lightning TechTalks #2 〜フロントエンドで導入してよかったOSS〜 5
6. ここで問題発生 WYSIWYGエディターを配置する予定のページはそれ以外にも入力欄が複雑に絡み 合っていてページ全体でデザインの統一性を保ちたかった しかし、過去Quillを使って開発した時の記憶ではデザインはテーマを選ぶ形で細か いカスタマイズはできなかった印象 Lightning TechTalks #2 〜フロントエンドで導入してよかったOSS〜 6
7. Tipatapに出会う
8. Tiptapとは Tiptap is a headless wrapper around ProseMirror – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as New York Times, The Guardian or Atlassian. Tiptapは、リッチテキストWYSIWYGエディタを構築するためのツールキットであるProseMirrorのヘッドレスラッパーであり、New York Times、The Guardian、Atlassianなどの多くの有名企業ですでに使用されている。 => Headless WYSIWYG editor と呼ばれることも => Headless = View(UI) less。つまり、関数群のみ含むライブラリ Lightning TechTalks #2 〜フロントエンドで導入してよかったOSS〜 8
9. 触れるサンプルがあります https://main.d19rmyx6xtyx5c.amplifyapp.com/tiptap Lightning TechTalks #2 〜フロントエンドで導入してよかったOSS〜 9
10. 導入してよかった点
11. 導入してよかった点 1. やはりUIを自由に組めるため、実装もしやすい上に 提案もしやすい(←ココ重要！) 2. エディタ上で受け入れるhtmlタグを制限することができる 3. キーアクションを自由にカスタマイズすることができる Lightning TechTalks #2 〜フロントエンドで導入してよかったOSS〜 11
14. Thank you for listening!!