Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Next.js+yjs+BlockNoteでNotionライクな最高の共同編集エディタを作ろう
Search
imaimai17468
August 22, 2024
0
2.7k
Next.js+yjs+BlockNoteでNotionライクな最高の共同編集エディタを作ろう
imaimai17468
August 22, 2024
Tweet
Share
More Decks by imaimai17468
See All by imaimai17468
フロントエンド設計の所感 1年目
imaimai17468
0
26
Silk Weave -未来研究大会発表資料-
imaimai17468
1
18
Next.jsでクエリパラメータを楽に扱おう nuqsを紹介!
imaimai17468
3
1.5k
TailwindCSSで学ぶ技術批判の気をつけ方
imaimai17468
6
6.4k
BlockNoteを布教するぜ
imaimai17468
0
34
Marp + Cursorによるスライド生成
imaimai17468
0
260
Next.jsにおけるLazy Loading
imaimai17468
0
490
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
540
Embracing the Ebb and Flow
colly
85
4.7k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
GraphQLとの向き合い方2022年版
quramy
46
14k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Making Projects Easy
brettharned
116
6.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
KATA
mclloyd
29
14k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Transcript
Next.js+yjs+BlockNoteでNotionライクな最高の共 同編集エディタを作ろう いまいまい 1
自己紹介 いまいまい (今井俊希) 初登壇 株式会社ゆめみ 新卒 フロントエンドエンジニア 2
リッチエディタの実装、枯れてない? 技術的知見が少ない Zennの検索結果 リッチエディタ 9件 WYSIWYG 19件 開発停止&TS未対応多数 3
現状 Mantine Editor.js TipTap 大体見た目同じ 10年くらい前から変わってない 4
現時点でのベストプラクティス? Zennやしずかなインターネット メニューバーは非表示 markdown入力でスタイル反映 5
なんかいいのないの? 最近使った中で良いテキストエディタ... 6
あるじゃん 7
そんなあなたに BlockNote 8
必要なのはこれだけ! 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
でも、controlどうするの? どうせ面倒でしょ? 11
(前置き) 型構造は複雑 type Block = { id: string; type: string;
props: Record<string, boolean | number | string>; content: InlineContent[] | TableContent | undefined; children: Block[]; }; children: Block[] : 無限入れ子 12
ちゃんと詰まらないように変換できます 13
入出力は簡単! 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
yjsとy-webrtcについて yjs: yjsはリアルタイムコラボレーションのためのJSライブラリ CRDT(Conflict-free Replicated Data Type)を使用しており、競合を自動的に 解決 y-webrtc: yjsのためのWebRTCプロバイダ
16
設定方法 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
BlockNote + yjsの環境は1コマンドで構築できます! npx create-liveblocks-app@latest --example nextjs-yjs-blocknote-advanced 18
BlockNote、魅力的じゃない? お知らせ 私が所属している株式会社ゆめみは複数のアフタートークイベントをやります! 奮ってご参加ください! 19