引用ブロック

引用ブロックは、他のソースからの引用テキストを表示するために使用されます。通常、視覚的に区別されるスタイルで表現されます。

データ構造

引用ブロックのノーションAPIデータ構造は以下の通りです：

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

rich_text: 引用文のテキスト内容とスタイル情報を含む配列です。
color: 引用文の色を指定します。

Reactコンポーネント

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

import React from "react";
import type { QuoteArgs } from "../types";
import { getColorCss } from "../utils";
import RichText from "./internal/rich-text";

type QuoteProps = {
  children?: React.ReactNode;
} & QuoteArgs;

const Quote: React.FC<QuoteProps> = ({ children, ...props }) => {
  const {
    quote: { color, rich_text: texts },
  } = props;

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

export default Quote;

使用例

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

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

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

ここでblocksは、Notion APIから受け取ったブロックデータの配列です。

スタイリング

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

.notion-block: すべてのNotionブロックに適用される基本スタイル
.notion-quote: 引用ブロックの特定のスタイル
.notion-quote-content: 引用文の内容のスタイル

追加のスタイリングが必要な場合は、これらのクラスを対象にCSSを記述することができます。通常、引用ブロックは以下のようなスタイル特性を持ちます：

左または両側に太い枠線
若干のインデント
背景色の変更
フォントスタイルの変更（例：斜体）

例えば、以下のようなCSSを適用することができます：

.notion-quote {
  border-left: 4px solid #ccc;
  padding-left: 16px;
  margin-left: 0;
  margin-right: 0;
  font-style: italic;
  background-color: #f9f9f9;
}

ネストのサポート

引用ブロックは、他のブロックを含むことができます。これはchildrenプロップを使用して処理されます。例えば、引用文の中にリストや他のテキストブロックを含むことができます。

注意点

引用ブロックは通常、短い引用文に使用されます。長い引用文の場合、読みやすさのために複数の引用ブロックに分割することが考えられます。
引用文の出典を明示することが重要です。これは、引用ブロックの下に別のParagraphブロックを追加することで実現できます。
アクセシビリティを考慮し、スクリーンリーダーを使用するユーザーのために適切なARIA属性を追加することが重要です。例えば、role="blockquote"属性を使用することができます。