BlockNoteを布教するぜ

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 <BlockNoteView editor={editor} />; } 12

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

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

(前置き) 型構造は複雑 type Block = { id: string; type: string;
props: Record<string, boolean | number | string>; 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<string>(); const onChange = async () => { const markdown = await editor.blocksToMarkdownLossy(editor.document); setMarkdown(markdown); }; return <BlockNoteView editor={editor} onChange={onChange} /> 17

BlockNote、魅力的じゃない？ 18

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

BlockNoteを布教するぜ

BlockNoteを布教するぜ

imaimai17468

More Decks by imaimai17468

Featured

Transcript