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.9k
Next.js+yjs+BlockNoteでNotionライクな最高の共同編集エディタを作ろう
imaimai17468
August 22, 2024
Tweet
Share
More Decks by imaimai17468
See All by imaimai17468
コーディングチェックの自動化がしたい!
imaimai17468
4
1.1k
型パズルを好きになるために、競プロを型システムだけで解いてみることにした
imaimai17468
5
620
フロントエンド設計の所感 1年目
imaimai17468
0
57
Silk Weave -未来研究大会発表資料-
imaimai17468
1
26
Next.jsでクエリパラメータを楽に扱おう nuqsを紹介!
imaimai17468
3
1.8k
TailwindCSSで学ぶ技術批判の気をつけ方
imaimai17468
7
6.7k
BlockNoteを布教するぜ
imaimai17468
0
39
Marp + Cursorによるスライド生成
imaimai17468
0
460
Next.jsにおけるLazy Loading
imaimai17468
0
590
Featured
See All Featured
Producing Creativity
orderedlist
PRO
347
40k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Building an army of robots
kneath
306
46k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
560
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
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