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

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

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

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

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

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

あ！！ 7

そんなあなたに BlockNote 8

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

百聞は一見に如かず 10

使い勝手良さそう！ 11

必要なのはこれだけ！ 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

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

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

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

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

入出力が簡単！ 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

BlockNote、魅力的じゃない？ 18

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