【Draft.js】ContentBlock

ContentBlockとは

• HTMLのブロック要素に対応する要素
• ContentState の blocks にブロックの数分格納されている
  ※ ContentStateについては こちらの記事 に記載

ContentBlockに格納される情報

key

• ContentBlockの識別のためのキー
• key の生成には generateRandomKey を使用する

type

• ブロック要素の種類
  • デフォルトで用意されている type は下記の通り
    • unstyled
    • paragraph
    • header-one
    • header-two
    • header-three
    • header-four
    • header-five
    • header-six
    • unordered-list-item
    • ordered-list-item
    • blockquote
    • code-block
    • atomic
  • 上記以外に自作の type も定義可能

text

• プレーンテキスト
  • スタイリング・装飾・HTML情報は含まれない

depth

• インデントの深さ
  • リストアイテムで使用されている

inlineStyleRanges

• text の装飾情報がObject型の配列で格納されている
• 装飾情報のプロパティは下記の通り
  • offset: 装飾情報を付与する開始位置
  • length: 装飾情報を付与する長さ
  • style: インライン要素の装飾の種類
    • デフォルトで用意されている style は下記の通り
      ・BOLD
      ・CODE
      ・ITALIC
      ・UNDERLINE
    • 上記以外に自作の style も定義可能

entityRanges

• text への補足情報がObject型の配列で格納されている
• 補足情報のプロパティは下記の通り
  • offset: 補足情報を付与する開始位置
  • length: 補足情報を付与する長さ
  • key: entityMap の中のどの entity を適用させるか
    ※ Entityについては こちらの記事 に記載

data

• ブロックのメタデータ