【BlockNote入門】ReactでNotion風のメモアプリを作る方法

はじめに

この記事では、Notion風のテキストエディタ環境を簡単に作れるBlockNoteというReactライブラリを紹介していきます。

BlockNoteを使ってメモを書いている様子↓

使い方

インストールと最初のセットアップ

まずはReactの環境を構築します。

npx create-react-app --template typescript myapp

以下のコマンドを打って開発用サーバを起動し、以下の画像のような画面が出れば成功です。

npm start

ここまできたら一旦開発用サーバを停止し、BlockNoteをインストールします。

npm install @blocknote/core @blocknote/react @blocknote/mantine

インストールが終わったらsrc/App.tsxを以下のように書き換えます。

src/App.tsx

import "@blocknote/core/fonts/inter.css";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import { useCreateBlockNote } from "@blocknote/react";
 
export default function App() {
  const editor = useCreateBlockNote();

  return <BlockNoteView editor={editor} />;
}

再び開発用サーバを立ち上げ、以下のような画面が表示されれば成功です。

日本語化

このままでは英語表示で使いづらいので日本語化します。

src/App.tsxを以下のように書き換えます。

src/App.tsx

import { locales } from "@blocknote/core";
import "@blocknote/core/fonts/inter.css";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import { useCreateBlockNote } from "@blocknote/react";

export default function App() {
    const editor = useCreateBlockNote({
        dictionary: locales.ja,  // 日本語化
    });

    return <BlockNoteView editor={editor} />;
}

無事に日本語になりました。

保存方法

このままではリロードすると書いた内容が消えてしまうので、保存できるようにしていきます。

参考として、ローカルストレージに保存する方法を紹介します。
場合に応じてAPIやデータベースに保存するように変更してください。

src/App.tsx

import { locales } from "@blocknote/core";
import { Block, BlockNoteEditor, PartialBlock } from "@blocknote/core";
import "@blocknote/core/fonts/inter.css";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import { useEffect, useMemo, useState } from "react";

async function saveToStorage(jsonBlocks: Block[]) {
    // ローカルストレージにコンテンツを保存する。
    // 場合に応じてAPIやデータベースに保存するように変更する。
    localStorage.setItem("editorContent", JSON.stringify(jsonBlocks));
}

async function loadFromStorage() {
    // 前のエディターの内容を取得する。
    const storageString = localStorage.getItem("editorContent");
    return storageString ? (JSON.parse(storageString) as PartialBlock[]) : undefined;
}

export default function App() {
    const [initialContent, setInitialContent] = useState<PartialBlock[] | undefined | "loading">("loading");

    // 前のエディターの内容をロードする。
    useEffect(() => {
        loadFromStorage().then((content) => {
            setInitialContent(content);
        });
    }, []);

    // 初期コンテンツがロードされるまでエディターの作成を遅らせるようにするため、
    // useCreateBlockNoteを使わずにuseMemo + createBlockNoteEditorを使う。
    const editor = useMemo(() => {
        if (initialContent === "loading") {
            return undefined;
        }
        return BlockNoteEditor.create({
            initialContent: initialContent,
            dictionary: locales.ja,
        });
    }, [initialContent]);

    if (editor === undefined) {
        return "Loading content...";
    }

    return (
        <BlockNoteView
            editor={editor}
            onChange={() => {
                saveToStorage(editor.document);
            }}
        />
    );
}

以下の動画のようにリロードしてもメモした内容が消去されなくなっていれば成功です。

さいごに

最後まで読んでいただき、ありがとうございました。

今回の記事では、ReactでNotion風のメモアプリを作る方法を紹介しました。
サンプルコードは以下のGithubに置いてあります。

スタイルの変更方法やファイルのアップロード方法の紹介などもこれから追加していこうと思っています。

ハートを押していただけると記事投稿のモチベーションが上がるのでよろしくお願いします！
また、誤字・脱字や意見などがあればコメントしていただけると助かります。