BlockNoteを布教するぜ

BlockNoteを紹介するためのスライドです

Transcript

1. BlockNoteを布教するぜ いまいまい 1
2. 自己紹介 いまいまい　(今井俊希) 株式会社ゆめみ 新卒 フロントエンドエンジニア 勉強中です | お手柔らかに 2
3. リッチエディタの実装、枯れてない？ 技術的知見、 zennでもみない Qiitaでもみない TLでもみない 開発止まってるのもチラホラ TS対応してないのもチラホラ 3
4. 現状 Mantine Editor.js Draft.js 大体見た目同じ ちょっと古臭くない？ 4
5. 現時点でのベストプラクティス？ Zennやしずかなインターネット メニューバーは非表示 markdown入力でスタイル反映 5
6. なんかええのないの？ 最近使った中で良いテキストエディタ... 6
7. あ！！ 7
8. そんなあなたに BlockNote 8
9. BlockNoteって？ 美しいテキストエディタ。 ユーザーが気に入るエディタをアプリに簡単に追加できます。 カスタムブロックやAIツールのような独自の機能でカスタマイズできます。 （公式訳） ほぼNotionです 9
10. 百聞は一見に如かず 10
11. 使い勝手良さそう！ 11
12. 必要なのはこれだけ！ 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} />; } 12
13. カスタマイズも豊富！ ツールバーやカーソルなどの形や色の変更 カスタムブロックも定義可能！ 独自のコードブロックやアラートなど 13
14. でも、controlどうするの？ どうせ面倒でしょ？ 14
15. (前置き) 型構造は複雑 type Block = { id: string; type: string; props: Record<string, boolean | number | string>; content: InlineContent[] | TableContent | undefined; children: Block[]; }; children: Block[] : 無限入れ子 15
16. ちゃんと詰まらないように変換できます 16
17. 入出力が簡単！ 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<string>(); const onChange = async () => { const markdown = await editor.blocksToMarkdownLossy(editor.document); setMarkdown(markdown); }; return <BlockNoteView editor={editor} onChange={onChange} /> 17
18. BlockNote、魅力的じゃない？ 18
19. 蛇足 1. フロントエンドカンファレンス北海道に登壇します 今回の内容+yjs BlockNoteをオンラインエディタに改造しようというお話 2. このエディタを使ったサイトを作ってます BlockNoteを使って技術のTipsを投稿できるやつ いつ完成するんだろうね 19