Slide 1

Slide 1 text

BlockNoteを布教するぜ いまいまい 1

Slide 2

Slide 2 text

自己紹介 いまいまい (今井俊希) 株式会社ゆめみ 新卒 フロントエンドエンジニア 勉強中です | お手柔らかに 2

Slide 3

Slide 3 text

リッチエディタの実装、枯れてない? 技術的知見、 zennでもみない Qiitaでもみない TLでもみない 開発止まってるのもチラホラ TS対応してないのもチラホラ 3

Slide 4

Slide 4 text

現状 Mantine Editor.js Draft.js 大体見た目同じ ちょっと古臭くない? 4

Slide 5

Slide 5 text

現時点でのベストプラクティス? Zennやしずかなインターネット メニューバーは非表示 markdown入力でスタイル反映 5

Slide 6

Slide 6 text

なんかええのないの? 最近使った中で良いテキストエディタ... 6

Slide 7

Slide 7 text

あ!! 7

Slide 8

Slide 8 text

そんなあなたに BlockNote 8

Slide 9

Slide 9 text

BlockNoteって? 美しいテキストエディタ。 ユーザーが気に入るエディタをアプリに簡単に追加できます。 カスタムブロックやAIツールのような独自の機能でカスタマイズできます。 (公式訳) ほぼNotionです 9

Slide 10

Slide 10 text

百聞は一見に如かず 10

Slide 11

Slide 11 text

使い勝手良さそう! 11

Slide 12

Slide 12 text

必要なのはこれだけ! 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 ; } 12

Slide 13

Slide 13 text

カスタマイズも豊富! ツールバーやカーソルなどの形や色の変更 カスタムブロックも定義可能! 独自のコードブロックやアラートなど 13

Slide 14

Slide 14 text

でも、controlどうするの? どうせ面倒でしょ? 14

Slide 15

Slide 15 text

(前置き) 型構造は複雑 type Block = { id: string; type: string; props: Record; content: InlineContent[] | TableContent | undefined; children: Block[]; }; children: Block[] : 無限入れ子 15

Slide 16

Slide 16 text

ちゃんと詰まらないように変換できます 16

Slide 17

Slide 17 text

入出力が簡単! Markdown / HTMLで入力・出力できます! const editor = useCreateBlockNote(); // INPUT: in first rendering (ex. useEffect) const blocks = await editor.tryParseMarkdownToBlocks(e.target.value); editor.replaceBlocks(editor.document, blocks); // OUTPUT: Markdown export handler const [markdown, setMarkdown] = useState(); const onChange = async () => { const markdown = await editor.blocksToMarkdownLossy(editor.document); setMarkdown(markdown); }; return 17

Slide 18

Slide 18 text

BlockNote、魅力的じゃない? 18

Slide 19

Slide 19 text

蛇足 1. フロントエンドカンファレンス北海道に登壇します 今回の内容+yjs BlockNoteをオンラインエディタに改造しようというお話 2. このエディタを使ったサイトを作ってます BlockNoteを使って技術のTipsを投稿できるやつ いつ完成するんだろうね 19