ContentBlock extension

Flexible inline blocks for horizontal rules, spacers, and custom dividers.

Preserves special Word content like shapes and drawings through import/export.

OOXML Structure

<!-- Horizontal Rule -->
<w:p>
  <w:r>
    <w:pict>
      <v:rect style="width:100%;height:2px" 
              fillcolor="#e5e7eb"
              stroked="f"/>
    </w:pict>
  </w:r>
</w:p>

Use case

• Section Breaks - Visually separate different parts of your document
• Horizontal Rules - Classic divider between content sections
• Spacers - Add precise vertical spacing without empty paragraphs
• Custom Dividers - Brand-colored separators for professional documents
• Shape Preservation - Maintains Word shapes and drawings through import/export
• Layout Control - Fine-tune document appearance with inline blocks

Options

Configure the extension behavior:

htmlAttributes · Object

HTML attributes for the block element

Attributes

Node attributes that can be set and retrieved:

horizontalRule · boolean · default: "false"

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

Example:

Usage

editor.commands.insertHorizontalRule()

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    editor.commands.insertHorizontalRule()
  },
});

insertContentBlock

Insert a content block

Used for spacing, dividers, and special inline content

Example:

Usage

// Insert a spacer block
editor.commands.insertContentBlock({ size: { height: 20 } })

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    // Insert a spacer block
    editor.commands.insertContentBlock({ size: { height: 20 } })
  },
});

Parameters:

config · ContentBlockConfig · required

Block configuration

Types

ContentBlockSize

Size configuration for content blocks

Show Properties

top · number

Top position in pixels

left · number

Left position in pixels

width · number | string

Width in pixels or percentage (e.g., “50%”)

height · number | string

Height in pixels or percentage

ContentBlockConfig

Content block configuration

Show Properties

horizontalRule · boolean

Whether this is a horizontal rule

size · ContentBlockSize

Size and position configuration

background · string

Background color (hex, rgb, or named color)

Source code