見出しブロック

見出しブロックは文書の構造を表現するために使用され、3つのレベル（見出し1、見出し2、見出し3）をサポートしています。

データ構造

見出しブロックのノーションAPIデータ構造は以下の通りです（見出し1の例）：

{
  "type": "heading_1",
  "heading_1": {
    "rich_text": [
      {
        "type": "text",
        "text": {
          "content": "This is a heading",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "This is a heading",
        "href": null
      }
    ],
    "color": "default",
    "is_toggleable": false
  }
}

type: "heading_1", "heading_2", または "heading_3" のいずれかです。
rich_text: 見出しテキストの内容とスタイル情報を含む配列です。
color: 見出しの色を指定します。
is_toggleable: トグル機能を使用するかどうかを示すフラグです。

Reactコンポーネント

Notionpressoで見出しブロックをレンダリングするコンポーネントは以下の通りです：

import React, { useMemo } from "react";
import type { HeadingsProps, HeadingConfig } from "../types";
import { getColorCss } from "../utils";
import RichText from "./internal/rich-text";

const Headings: React.FC<HeadingsProps> = ({ children, type, ...props }) => {
  const {
    [type]: { color, rich_text: texts, is_toggleable },
  } = props;

  const { headingTag: HeadingTag, headingClassName } =
    useMemo<HeadingConfig>(() => {
      switch (type) {
        case "heading_2":
          return { headingTag: "h2", headingClassName: "notion-h2" };
        case "heading_3":
          return { headingTag: "h3", headingClassName: "notion-h3" };
        default:
          return { headingTag: "h1", headingClassName: "notion-h1" };
      }
    }, [type]);

  return (
    <div
      className={`notion-block ${headingClassName} ${getColorCss(color)}`}
    >
      <HeadingTag className={`notion-h-content ${headingClassName}-content`}>
        <RichText props={texts} />
      </HeadingTag>
      {children}
    </div>
  );
};

export default Headings;

使用例

見出しブロックを使用する例は以下の通りです：

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

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

ここで blocks はNotion APIから取得したブロックデータの配列です。

スタイリング

見出しブロックのスタイルは以下のCSSクラスを使用してカスタマイズできます：

.notion-block: すべてのNotionブロックに適用されるデフォルトのスタイル
.notion-h1, .notion-h2, .notion-h3: 各見出しレベルに対する特定のスタイル
.notion-h1-content, .notion-h2-content, .notion-h3-content: 各見出しの内容のスタイル

追加のスタイリングが必要な場合は、これらのクラスを対象にCSSを記述することができます。

注意点

見出しブロックは文書の構造を表現する重要な要素であるため、適切なレベルの見出しを使用することが推奨されます。
is_toggleable プロパティが true の場合、その見出しはトグル機能を持つことになります。この場合、追加のロジックが必要になる場合があります。