段落块

段落块是表示普通文本的最基本块类型。

数据结构

段落块的 Notion API 数据结构如下：

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

• rich_text: 包含文本内容和样式信息的数组。
• color: 指定文本的颜色。

React 组件

Notionpresso 中用于渲染段落块的组件如下：

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

type ParagraphProps = {
  children?: React.ReactNode;
} & ParagraphArgs;

const Paragraph: React.FC<ParagraphProps> = ({ children, ...props }) => {
  const {
    paragraph: { color, rich_text: texts },
  } = props;

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

export default Paragraph;

使用示例

段落块的使用示例如下：

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

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

这里 blocks 是来自 Notion API 的块数据数组。

样式

段落块的样式可以通过以下 CSS 类进行自定义：

• .notion-block: 应用于所有 Notion 块的基本样式
• .notion-paragraph: 段落块的特定样式
• .notion-paragraph-content: 段落内容样式

如果需要额外的样式，可以对这些类进行 CSS 编写。