Next.js+yjs+BlockNoteでNotionライクな最高の共同編集エディタを作ろう

Transcript

1. Next.js+yjs+BlockNoteでNotionライクな最高の共 同編集エディタを作ろう いまいまい 1
2. 自己紹介 いまいまい　(今井俊希) 初登壇 株式会社ゆめみ 新卒 フロントエンドエンジニア 2
3. リッチエディタの実装、枯れてない？ 技術的知見が少ない Zennの検索結果 リッチエディタ 9件 WYSIWYG 19件 開発停止&TS未対応多数 3
4. 現状 Mantine Editor.js TipTap 大体見た目同じ 10年くらい前から変わってない 4
5. 現時点でのベストプラクティス？ Zennやしずかなインターネット メニューバーは非表示 markdown入力でスタイル反映 5
6. なんかいいのないの？ 最近使った中で良いテキストエディタ... 6
7. あるじゃん 7
8. そんなあなたに BlockNote 8
9. 必要なのはこれだけ！ hooksでインスタンスを作ってコンポーネントに渡すだけ グラフ描画とかでよく見るパターン import "@blocknote/core/fonts/inter.css"; import { useCreateBlockNote } from "@blocknote/react"; import { BlockNoteView } from "@blocknote/mantine"; import "@blocknote/mantine/style.css"; export default function App() { const editor = useCreateBlockNote(); return <BlockNoteView editor={editor} />; } 9
10. カスタマイズも豊富！ ツールバーやカーソルなどの形や色の変更 カスタムブロックも定義可能！ 独自のコードブロックやアラートなど 10
11. でも、controlどうするの？ どうせ面倒でしょ？ 11
12. (前置き) 型構造は複雑 type Block = { id: string; type: string; props: Record<string, boolean | number | string>; content: InlineContent[] | TableContent | undefined; children: Block[]; }; children: Block[] : 無限入れ子 12
13. ちゃんと詰まらないように変換できます 13
14. 入出力は簡単！ Markdown / HTMLで入力・出力できます！ ex) Markdownの場合 // INPUT: in first rendering (ex. useEffect) const blocks = await editor.tryParseMarkdownToBlocks(e.target.value); // OUTPUT: Markdown export handler const markdown = await editor.blocksToMarkdownLossy(editor.document); 14
15. 共同編集エディタにしてみよう（魔改造） 15
16. yjsとy-webrtcについて yjs: yjsはリアルタイムコラボレーションのためのJSライブラリ CRDT(Conflict-free Replicated Data Type)を使用しており、競合を自動的に 解決 y-webrtc: yjsのためのWebRTCプロバイダ 16
17. 設定方法 Yjsとwebrtcの設定をして const doc = new Y.Doc(); const provider = new WebrtcProvider("my-document-id", doc); ブチ込む！ const editor = useCreateBlockNote({ // ... collaboration: { provider, fragment: doc.getXmlFragment("document-store"), user: { name: "My Username", color: "#ff0000", }, }, }); 17
18. BlockNote + yjsの環境は1コマンドで構築できます！ npx create-liveblocks-app@latest --example nextjs-yjs-blocknote-advanced 18
19. BlockNote、魅力的じゃない？ お知らせ 私が所属している株式会社ゆめみは複数のアフタートークイベントをやります！ 奮ってご参加ください！ 19