Document extension

The root container for all document content.

Every editor starts with a Document node that contains all blocks like paragraphs, headings, and lists.

Structure

<doc>
  <p>First paragraph</p>
  <p>Second paragraph</p>
  <!-- All block content -->
</doc>

Why it’s essential

• Required root - Every editor needs exactly one document node
• Content validation - Ensures at least one block element exists
• Document operations - Enables document-level commands and queries

Commands

getDocumentStats

Get document statistics

Returns word count, character count, and paragraph count

Example:

Usage

// Get word and character count
const stats = editor.commands.getDocumentStats()
console.log(`${stats.words} words, ${stats.characters} characters`)

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

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    // Get word and character count
    const stats = editor.commands.getDocumentStats()
    console.log(`${stats.words} words, ${stats.characters} characters`)
  },
});

clearDocument

Clear entire document

Replaces all content with an empty paragraph

Example:

Usage

editor.commands.clearDocument()

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

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

setSectionPageMarginsAtSelection

Set page margins for the section at the current cursor position.

Example:

Usage

editor.commands.setSectionPageMarginsAtSelection({
  topInches: 1,
  rightInches: 1,
  bottomInches: 1,
  leftInches: 1
})

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

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    editor.commands.setSectionPageMarginsAtSelection({
      topInches: 1,
      rightInches: 1,
      bottomInches: 1,
      leftInches: 1
    })
  },
});

Parameters:

options · Object

Object with optional topInches, rightInches, bottomInches, leftInches (numbers in inches)

Source code