Paragraph (aka “Text”)

1. Notion original

📝 This ↑ might look like two paragraph blocks, but it’s actually a single line with a soft return (⇧+enter) after the semicolon.
📝 This ↑ might look like two paragraph blocks, but it’s actually a single line with a soft return (⇧+enter) after the semicolon.

2. Notion API

Partial output of src/routes/[slug]/notion-export.js
(as of this writing)
{
  "object": "block",
  …
  "type": "paragraph",
  "paragraph": {
    "text": [
      {
        "type": "text",
        "text": {
          "content": "The shape of each world comes at a cost; for nothing can grow where nothing is lost.",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "The shape of each world comes at a cost; for nothing can grow where nothing is lost.",
        "href": null
      }
    ]
  }
},
  json

3. Svelte output

Partial output of src/routes/[slug].svelte
<Paragraph
  blockProps={{
    pageId: '28fac2e07c794fb4935e9284a4b6a313',
    id: '7d801d61-b5be-41a6-aa3b-b13964699024',
    created_time: '2022-01-23T08:40:00.000Z',
    last_edited_time: '2022-01-23T08:40:00.000Z'
  }}
>
  The shape of each world comes at a cost;
  <br />
  for nothing can grow where nothing is lost.
</Paragraph>
  html

4. Example rendering

Rendered by Paragraph.svelte
The shape of each world comes at a cost;
for nothing can grow where nothing is lost.
 
Fancy horizontal divider

🏠 Browse the docs ⚘

High-level Discussion

Turn-intoable Block Components

Toggle Headings (not yet implemented)

Layout-only Components

Page-level Components

Annotation Components

bold → <strong>

italic → <em>

strikethrough → <s>

Other Components