Notion API で取得した BlockObject とそれを受け取った Component の Preview

- Table of contents -

$ BASIC BLOCKS h1 h2 h3 チェックボックスアンチェックボックス箇条書きリスト1 箇条書きリスト2 箇条書きリスト3 番号リスト1 番号リスト2 番号リスト3 empty: table トグルブロック export const decorators = [ (Story) => { return ( <ThemeProvider theme={theme}> <CssBaseline /> <Story /> </ThemeProvider> ) }, ]empty: child_page コールアウト引用ブロック empty: divider empty: link_to_page $ ANNOTATIONS（テキストの装飾）ボールド太字イタリック斜体アンダーライン下線取り消し線 short code y=\frac{1}{x^2+1}リンク付き ■Gray ■Brown ■Orange ■Yellow ■Green ■Blue ■Purple ■Pink ■Red Gray background Brawn background Orange background Yellow background Green background Blue background Purple background Pink background Red background Red Blue background ここには,開業します改行でした ↑改行2個 $ DATABASE empty: child_database empty: child_database $ MEDIA & EMBEDS empty: image empty: video empty: bookmark empty: embed empty: pdf $ ADVANCED BLOCKS empty: table_of_contents empty: column_list ここにparagraphブロックがあり子と孫がいます empty: link_preview https://github.com/nbr41to/noblog/pull/19 empty: link_preview https://github.com/nbr41to/noblog empty: embed

$ BASIC BLOCKS

h1

h2

h3

チェックボックス

アンチェックボックス

箇条書きリスト1

箇条書きリスト2

箇条書きリスト3

番号リスト1

番号リスト2

番号リスト3

ここで、対応していない NotionのBlockが使用されています。

Not supported: 'table' type is not supported.

ここで、対応していない NotionのBlockが使用されています。

Not supported: 'toggle' type is not supported.

javascript

export const decorators = [
    (Story) => {
      return (
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <Story />
        </ThemeProvider>
      )
    },
]

ちなみにこれはStorybookの設定ファイルのコード

ここで、対応していない NotionのBlockが使用されています。

Not supported: 'child_page' type is not supported.

💡

コールアウト

引用ブロック

ここで、対応していない NotionのBlockが使用されています。

Not supported: 'link_to_page' type is not supported.

$ ANNOTATIONS（テキストの装飾）

ボールド太字

イタリック斜体

アンダーライン下線

取り消し線

short code

y=\frac{1}{x^2+1} 数式

リンク付き

■Gray

■Brown

■Orange

■Yellow

■Green

■Blue

■Purple

■Pink

■Red

Gray background

Brawn background

Orange background

Yellow background

Green background

Blue background

Purple background

Pink background

Red background

Red

Blue background

ここには,赤色にしたり太字にしたり,青色でイタリックだったりした文章があります.ブロック自体はGreen backgroundにしています.さらにリンクも埋め込んでみましょう.

JSON

{
  "object": "block",
  "id": "4badd8d9-9139-40ee-9533-93be4436841b",
  "parent": {
    "type": "page_id",
    "page_id": "d362dedb-260c-4fa7-b132-57f119ea8d06"
  },
  "created_time": "2021-10-03T06:01:00.000Z",
  "last_edited_time": "2021-10-11T06:15:00.000Z",
  "created_by": {
    "object": "user",
    "id": "bd50db90-e833-4237-8605-7575e3a871fb"
  },
  "last_edited_by": {
    "object": "user",
    "id": "bd50db90-e833-4237-8605-7575e3a871fb"
  },
  "has_children": false,
  "archived": false,
  "type": "paragraph",
  "paragraph": {
    "rich_text": [
      {
        "type": "text",
        "text": {
          "content": "ここには,",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "ここには,",
        "href": null
      },
      {
        "type": "text",
        "text": {
          "content": "赤色",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "red"
        },
        "plain_text": "赤色",
        "href": null
      },
      {
        "type": "text",
        "text": {
          "content": "にしたり",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "にしたり",
        "href": null
      },
      {
        "type": "text",
        "text": {
          "content": "太字",
          "link": null
        },
        "annotations": {
          "bold": true,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "太字",
        "href": null
      },
      {
        "type": "text",
        "text": {
          "content": "にしたり,",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "にしたり,",
        "href": null
      },
      {
        "type": "text",
        "text": {
          "content": "青色でイタリック",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": true,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "blue"
        },
        "plain_text": "青色でイタリック",
        "href": null
      },
      {
        "type": "text",
        "text": {
          "content": "だったりした文章があります.ブロック自体は",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "だったりした文章があります.ブロック自体は",
        "href": null
      },
      {
        "type": "text",
        "text": {
          "content": "Green background",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "green_background"
        },
        "plain_text": "Green background",
        "href": null
      },
      {
        "type": "text",
        "text": {
          "content": "にしています.さらに",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "にしています.さらに",
        "href": null
      },
      {
        "type": "text",
        "text": {
          "content": "リンク",
          "link": {
            "url": "https://www.notion.so/"
          }
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "リンク",
        "href": "https://www.notion.so/"
      },
      {
        "type": "text",
        "text": {
          "content": "も埋め込んでみましょう.",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "も埋め込んでみましょう.",
        "href": null
      }
    ],
    "color": "green_background"
  }
}

開業します改行でした ↑改行2個

$ DATABASE

ここで、対応していない NotionのBlockが使用されています。

Not supported: 'child_database' type is not supported.

ここで、対応していない NotionのBlockが使用されています。

Not supported: 'child_database' type is not supported.

$ MEDIA & EMBEDS

ここで、対応していない NotionのBlockが使用されています。

Not supported: 'video' type is not supported.

ここで、対応していない NotionのBlockが使用されています。

Not supported: 'embed' type is not supported.

ここで、対応していない NotionのBlockが使用されています。

Not supported: 'pdf' type is not supported.

$ ADVANCED BLOCKS

ここで、対応していない NotionのBlockが使用されています。

Not supported: 'column_list' type is not supported.

ここにparagraphブロックがあり子と孫がいます

https://github.com/nbr41to/noblog/pull/19

https://github.com/nbr41to/noblog

ここで、対応していない NotionのBlockが使用されています。

Not supported: 'embed' type is not supported.