Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

imaimai17468
August 22, 2024
2.4k

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

imaimai17468

August 22, 2024
Tweet

Transcript

  1. 必要なのはこれだけ! 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
  2. (前置き) 型構造は複雑 type Block = { id: string; type: string;

    props: Record<string, boolean | number | string>; content: InlineContent[] | TableContent | undefined; children: Block[]; }; children: Block[] : 無限入れ子 12
  3. 入出力は簡単! 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
  4. 設定方法 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