Skip to main content

Paragraph

Below you can view an example of the paragraph block in JSON format.

{
  "type": "paragraph",
  "text": null,
  "marks": [],
  "content": [
    {
      "type": "text",
      "text": "This is a paragraph",
      "marks": []
    }
  ],
  "attrs": {
    "align": "left",
    "blockId": "blockId",
    "dropCap": false
  },
  "contentHTML": "This is a paragraph"
}
info

Paragraph blocks will automatically nest themselves whenever there is a disruption from regular writing. If you were to make a certain part of the paragraph bold, a new content object would be created inside the pre-existing content array with the bold part of the paragraph as its content. You can view some examples of how this looks further down with italic, bold, underlined, crossed out, and hyperlink text.

Below you can read details about each attribute of the paragraph block.

type​

A string that represents the type of the block. Paragraph blocks will always display paragraph as their type.

text​

A string that represents the text written by the user in the paragraph block.

marks​

An array of objects that represents the marks of the block. This value can be something like bold or italic.

content​

An array of objects that represents the content of the block.

attrs​

An object that represents the attributes of the block.

attrs.align​

A string that represents the paragraph alignment. This value can be left, center, or right.

attrs.blockId​

A string that represents the unique block ID of the paragraph.

attrs.dropCap​

A boolean that indicates whether the paragraph contains a drop cap, meaning the first letter is larger than the rest of the text.

contentHTML​

A string that represents the generated HTML of the paragraph.

Paragraph with bold text​

{
    "type": "paragraph",
    "attrs": {
        "align": "left",
        "blockId": "blockId",
        "dropCap": false
    },
    "content": [
        {
            "type": "text",
            "text": "This text is "
        },
        {
            "type": "text",
            "marks": [
                {
                    "type": "bold"
                }
            ],
            "text": "bold."
        }
    ],
    "contentHTML": "This text is *bold.*"
}

Paragraph with italic text​

{
    "type": "paragraph",
    "attrs": {
        "align": "left",
        "blockId": "blockId",
        "dropCap": false
    },
    "content": [
        {
            "type": "text",
            "text": "This text is "
        },
        {
            "type": "text",
            "marks": [
                {
                    "type": "italic"
                }
            ],
            "text": "italic"
        },
        {
            "type": "text",
            "text": "."
        }
    ],
    "contentHTML": "This text is <em>italic</em>."
}

Paragraph with underlined text​

{
    "type": "paragraph",
    "attrs": {
        "align": "left",
        "blockId": "blockId",
        "dropCap": false
    },
    "content": [
        {
            "type": "text",
            "text": "This text is "
        },
        {
            "type": "text",
            "marks": [
                {
                    "type": "underline"
                }
            ],
            "text": "underlined"
        },
        {
            "type": "text",
            "text": "."
        }
    ],
    "contentHTML": "This text is <u>underlined</u>."
}
{
    "type": "paragraph",
    "attrs": {
        "align": "left",
        "blockId": "blockId",
        "dropCap": false
    },
    "content": [
        {
            "type": "text",
            "text": "This text is a "
        },
        {
            "type": "text",
            "marks": [
                {
                    "type": "link",
                    "attrs": {
                        "href": "https://www.example.com",
                        "target": null,
                        "quickLinkId": null
                    }
                }
            ],
            "text": "link"
        },
        {
            "type": "text",
            "text": "."
        }
    ],
    "contentHTML": "This text is a <a href=\"https://www.example.com\" rel=\"noopener noreferrer nofollow\">link</a>."
}

Paragraph with srike text​

{
    "type": "paragraph",
    "attrs": {
        "align": "left",
        "blockId": "bl7e8870b98b6f4bef9095",
        "dropCap": false
    },
    "content": [
        {
            "type": "text",
            "text": "This is "
        },
        {
            "type": "text",
            "marks": [
                {
                    "type": "strike"
                }
            ],
            "text": "crossed out text"
        },
        {
            "type": "text",
            "text": "."
        }
    ],
    "contentHTML": "This is <s>crossed out text</s>."
}