Search code examples
javascriptreactjsdraftjs

What are Blocks in Draftjs?


I am going through the draftjs documentation and at a lot of places, 'block' word is used interchangeably. For ex.:

Within Editor, some block types are given default CSS styles to limit the amount of basic configuration required to get engineers up and running with custom editors.

I am trying to understand exactly what this block means at granular level, is it a snippet of text, or the whole editorState?


Solution

  • The editorstate contains the selectionstate and contentstate. contentstate is composed by blocks. so a block is mainly a html paragraph with id, type and data. id is for identifying a paragraph. type is a little complex, but mainly there are two types, atomic and non-atomic, for non-editable paragraph(image/vide/...) and texts. data is for using you want store something to the block and use it later in any draft callbacks.

    You may read docs more with patience, especially understand it by example codes.