Insert special inline content blocks like dividers, spacers, and custom elements. Content blocks are atomic inline nodes that can serve as horizontal rules, spacers, or containers for special content. They preserve through Word import/export.

​
OOXML Structure

<!-- Horizontal Rule -->
<w:p>
  <w:pPr>
    <w:pBdr>
      <w:bottom w:val="single" w:sz="6" w:space="1" w:color="auto"/>
    </w:pBdr>
  </w:pPr>
</w:p>

<!-- Custom Block -->
<w:p>
  <w:r>
    <w:drawing>
      <!-- Shape definition with size and color -->
    </w:drawing>
  </w:r>
</w:p>

​
Why you’d use this

  • Document sections - Visually separate different parts of your document
  • Visual breaks - Create breathing room between dense content
  • Emphasis - Draw attention with colored accent lines
  • Page layout - Add custom spacing without empty paragraphs
  • Brand elements - Insert company color dividers

​
Options

Configure the extension behavior:
​
htmlAttributes
Object
HTML attributes for the block element
Usage: 
ContentBlock.configure({
  resizable: false,
  cellMinWidth: 50
})

​
Attributes

​
horizontalRule
boolean
Whether this block is a horizontal rule
​
size
ContentBlockSize
Size and position of the content block
​
background
string
Background color for the block

​
Commands

​
insertHorizontalRule

Insert a horizontal rule
Creates a visual separator between content sections
insertHorizontalRule()

​
insertContentBlock

Insert a content block
Used for spacing, dividers, and special inline content
// Insert a spacer block
insertContentBlock({ size: { height: 20 } })

// Insert a colored divider
insertContentBlock({
  size: { width: '50%', height: 3 },
  background: '#3b82f6'
})
Parameters:
​
config
ContentBlockConfig
required
See ContentBlockConfig type definition

​
Types

​
ContentBlockSize

Size configuration for content blocks

​
ContentBlockConfig

Content block configuration