CODEWITHSUNDEEP
javascripttiptapprose-mirror
user13653
user13653

Reputation: 343

How to use TipTap insertContent for bulletlist

TipTap v2 docs for insertContent has an example for inserting a paragraph node.

editor.commands.insertContent([
  {
    type: 'paragraph',
    content: [
      {
        type: 'text',
        text: 'First paragraph',
      },
    ],
  },
])

What's the object format for inserting a bulletlist or how does one figure out the object structure?

editor.commands.insertContent({
          type: 'bulletList',
          content: [
            {
              type: 'listItem',
              content: 'some string,
            },
    ])

Upvotes: 0

Views: 1339

Answers (1)

user13653
user13653

Reputation: 343

Example for bulletlist

editor.commands.insertContent({
  type: 'bulletList',
  content: [
    {
      type: 'listItem',
      content: [
        {
          type: 'paragraph',
          content: [
            {
              type: 'text',
              text: 'first bullet',
            },
          ],
        }
      ]
    },
    {
      type: 'listItem',
      content: [
        {
          type: 'paragraph',
          content: [
            {
              type: 'text',
              text: '2nd bullet',
            },
          ],
        }
      ]
    }
  ]
})

Why this Object structure?

bulletList is composed of listItems

listItem comes from the extension source code

listItem is composed of content: 'paragraph block*': means 0 or more paragraph blocks

paragraph is composed of content: 'inline*': means 0 or more inline blocks

inline is composed of text or other inline nodes

Thus you get the above data structure.

Upvotes: 0

Related Questions