NumberedListItem

1. Notion original

2. Notion API

Partial output of src/routes/[slug]/notion-export.js

{
  "object": "block",
  …
  "type": "numbered_list_item",
  "numbered_list_item": {
    "text": [
      {
        "type": "text",
        "text": {
          "content": "First level",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "First level",
        "href": null
      }
    ]
  },
  "blocks": [
    {
      "object": "block",
      "id": "67053ed2-6641-4e30-97a9-8a9ccfda5874",
      "created_time": "2022-01-26T09:15:00.000Z",
      "last_edited_time": "2022-01-26T09:15:00.000Z",
      "has_children": false,
      "archived": false,
      "type": "numbered_list_item",
      "numbered_list_item": {
        "text": [
          {
            "type": "text",
            "text": {
              "content": "Indented",
              "link": null
            },
            "annotations": {
              "bold": false,
              "italic": false,
              "strikethrough": false,
              "underline": false,
              "code": false,
              "color": "default"
            },
            "plain_text": "Indented",
            "href": null
          }
        ]
      }
    }
  ]
},
{
  "object": "block",
  "id": "001c6ef6-fe61-40ef-84dd-fa494adf08f8",
  "created_time": "2022-01-26T09:15:00.000Z",
  "last_edited_time": "2022-01-26T09:15:00.000Z",
  "has_children": false,
  "archived": false,
  "type": "numbered_list_item",
  "numbered_list_item": {
    "text": [
      {
        "type": "text",
        "text": {
          "content": "2nd entry at 1st level",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "2nd entry at 1st level",
        "href": null
      }
    ]
  }
}
  javascript

3. Svelte output

Partial output of src/routes/[slug].svelte

<NumberedListItem number="1">First level</NumberedListItem>
<IndentGroup>
  <NumberedListItem number="a">Indented</NumberedListItem>
</IndentGroup>
<NumberedListItem number="2">2nd entry at 1st level</NumberedListItem>
  html

See IndentGroup.

4. Example rendering

Rendered byNumberedListItem.svelte

1.First level

a.Indented

2.2nd entry at 1st level

Known bug

Note: the current implementation is slightly naive, rotating the numbering styles on indentation, regardless of whether the “parent” block is itself a numbered-list-item.

This next line should begin with a 1. but…it doesn’t.

a.First numbered item