ブロックタイプガイドの紹介

ノーションプレッソは、ノーションの様々なブロックタイプをサポートし、各ブロックタイプに対してノーションと可能な限り類似したスタイルのコンポーネントを提供します。このガイドでは、現在サポートされているブロックタイプ、各ブロックタイプのProps、カスタマイズ方法、そして内部動作原理について説明します。

サポートされているブロックタイプ

ノーションプレッソで現在サポートされているブロックタイプと、サポート予定のブロックタイプの一覧です：

ブロックタイプ	サポート状況	ブロックタイプEnum
Paragraph	✅ Yes	`paragraph`
Heading 1	✅ Yes	`heading_1`
Heading 2	✅ Yes	`heading_2`
Heading 3	✅ Yes	`heading_3`
Bulleted List Item	✅ Yes	`bulleted_list_item`
Numbered List Item	✅ Yes	`numbered_list_item`
To-do	❌ No	`to_do`
Toggle	✅ Yes	`toggle`
Quote	✅ Yes	`quote`
Callout	✅ Yes	`callout`
Equation	❌ No	`equation`
Code	❌ No	`code`
Image	❌ No	`image`
Video	❌ No	`video`
Bookmark	❌ No	`bookmark`
Divider	✅ Yes	`divider`
Table	❌ No	`table`
Table Row	❌ No	`table_row`
Column	❌ No	`column`
Column List	❌ No	`column_list`
Audio	❌ No	`audio`
Synced Block	❌ No	`synced_block`
Table Of Contents	❌ No	`table_of_contents`
Embed	❌ No	`embed`
Figma	❌ No	`figma`
Google Maps	❌ No	`maps`
Google Drive	❌ No	`drive`
Tweet	❌ No	`tweet`
PDF	❌ No	`pdf`
File	❌ No	`file`
Link	❌ No	`text` (inline)
Page Link	❌ No	`page`
External Page Link	❌ No	`text` (inline)
Collections	❌ No	-
Collection View	❌ No	`collection_view`
Collection View Table	❌ No	`collection_view`
Collection View Gallery	❌ No	`collection_view`
Collection View Board	❌ No	`collection_view`
Collection View List	❌ No	`collection_view`
Collection View Calendar	❌ No	`collection_view`
Collection View Page	❌ No	`collection_view_page`

このリストは継続的に更新される予定で、今後さらに多くのブロックタイプをサポートする計画です。

Propsの使用方法

ノーションプレッソは、各ブロックタイプに対するPropsタイプを提供します。これらのPropsタイプはライブラリから直接インポートして使用できます。

例えば、Paragraphコンポーネントのpropsは以下のようにインポートして使用できます：

import { ParagraphProps } from "@notionpresso/react";

// ParagraphPropsの構造
interface ParagraphProps {
  type: "paragraph";
  paragraph: {
    rich_text: Array<RichTextItemResponse>;
    color: string;
  };
  id: string;
  has_children?: boolean;
}

// 使用例
const MyParagraph: React.FC<ParagraphProps> = (props) => {
  // カスタマイズ実装
};

各ブロックタイプのPropsの詳細な構造は、該当するブロックタイプのドキュメントで確認できます。

カスタマイズされたコンポーネントの適用

ノーションプレッソの大きな利点の一つは、各ブロックタイプに対して完全にカスタマイズされたコンポーネントを適用できることです。カスタマイズされたコンポーネントを適用する方法は以下のようになります：

import { Notion } from "@notionpresso/react";
import CustomParagraph from "./CustomParagraph";
import CustomHeading from "./CustomHeading";

const customComponents = {
  paragraph: CustomParagraph,
  heading_1: CustomHeading,
  heading_2: CustomHeading,
  heading_3: CustomHeading,
  // ... 他のブロックタイプに対するカスタマイズされたコンポーネント
};

function MyNotionPage({ blocks }) {
  return (
    <Notion custom={customComponents}>
      <Notion.Blocks blocks={blocks} />
    </Notion>
  );
}

Notionコンポーネントに注入されるcomponentsの型は以下のようになります：

type NotionComponents = Record<string, React.ComponentType<any>>;

ここで、keyはNotionのブロックタイプ（例：'paragraph', 'heading_1'など）であり、valueは該当するブロックタイプをレンダリングするReactコンポーネントです。

データの前処理プロセス

ノーションプレッソは、Notion APIから取得したブロックデータをUIレンダリングに最適化された形式に変換します。このプロセスでは、ContextedBlockという新しい型を定義して使用します。

+----------------------+
|    Notion API        |
|    Block Data        |
| +------------------+ |
| | Block            | |
| | - id             | |
| | - type           | |
| | - has_children   | |
| | - [type_specific]| |
| +------------------+ |
+----------------------+
           |
           | (Input)
           v
+---------------------------+
| resolveToContextedBlocks  |
| +-------------------------+
| | For each block:         |
| | +---------------------+ |
| | |resolveToContextedBlo| |
| | |ck (recursive)       | |
| | +---------------------+ |
| |   |                     |
| |   v                     |
| | Map parent-child        |
| | relationships           |
| +-------------------------+
|   |
|   v
| Map sibling relationships |
+---------------------------+
           |
           | (Output)
           v
+---------------------------+
|     ContextedBlocks       |
| +-------------------------+
| | ContextedBlock          |
| | - ...Block properties   |
| | - context:              |
| |   - previous (sibling)  |
| |   - next (sibling)      |
| |   - parent              |
| | - blocks (children)     |
| +-------------------------+
+---------------------------+
           |
           | (Used by)
           v
    +----------------+
    | Notion.Blocks  |
    | Component      |
    +----------------+

ContextedBlockは、従来のBlock型を拡張して、以下の追加情報を含むようになります：

前のブロック（兄弟関係）
次のブロック（兄弟関係）
親ブロック

これらの追加情報は、特定のブロックコンポーネントで便利に使用できます。

レンダリングプロセス

ノーションプレッソのレンダリングプロセスは以下のようになります：

+-------------------+      +------------------+
|   Custom          |      |   Default        |
|   Components      |      |   Components     |
+-------------------+      +------------------+
          |                         |
          |   +-----------------+   |
          +-->|     Notion      |<--+
              |    Component    |
              |(React.Provider) |
              +-----------------+
                    |     |
         +----------+     +------------+
         |                             |
+----------------+             +----------------+
| Notion.Cover   |             | Notion.Body    |
+----------------+             +----------------+
                                       |
                               +----------------+
                               | Notion.Title   |
                               +----------------+
                                       |
                               +----------------+
                               | Notion.Blocks  |
                               +----------------+
                                       |
                                       v
                               +----------------+
                               | Rendered       |
                               | Notion Page    |
                               +----------------+

このプロセスにより、カスタマイズされたコンポーネントとデフォルトのコンポーネントが連携してNotionページをレンダリングします。

スタイリング

現在提供されているNotionコンポーネントは、Notionのスタイルを可能な限り類似した形式で実装しています。各コンポーネントは、notion-という接頭辞を持つCSSクラスを使用してスタイリングされています。

今後の計画

さらに多くのブロックタイプのサポート追加
テーマに適用されたコンポーネントセットの開発
高度なカスタマイズオプションの拡張

これらのページでは、各ブロックタイプについての詳細な説明、Propsの構造、使用例、そしてカスタマイズオプションを確認できます。