Document Section extension

Encapsulate and manage discrete parts of documents. Legal clauses stay locked while sales updates pricing.

Installation

Included by default in SuperDoc.

import { DocumentSection } from 'superdoc/super-editor';

Commands

createDocumentSection

Create a new document section.

Usage

editor.commands.createDocumentSection({
  id: 'legal-1',
  title: 'Terms & Conditions',
  description: 'Legal terms',
  isLocked: true,
  html: '<p>Content...</p>'
})

removeSectionAtSelection

Remove the section at the current cursor position.

Usage

editor.commands.removeSectionAtSelection()

removeSectionById

Remove a section by its ID.

Usage

editor.commands.removeSectionById('legal-1')

lockSectionById

Lock a section to prevent editing.

Usage

editor.commands.lockSectionById('legal-1')

updateSectionById

Update a section’s content or attributes.

Usage

editor.commands.updateSectionById({
  id: 'legal-1',
  html: '<p>Updated...</p>',
  attrs: { title: 'New Title' }
})

Helpers

Usage

// Get all sections
const sections = editor.helpers.documentSection.getAllSections(editor);

// Export sections
const html = editor.helpers.documentSection.exportSectionsToHTML(editor);
const json = editor.helpers.documentSection.exportSectionsToJSON(editor);

// Create a linked editor for a section
const childEditor = editor.helpers.documentSection.getLinkedSectionEditor(
  'section-id',
  { element: '#editor' },
  parentEditor
);

Attributes

Attribute	Type	Default	Description
id	string/number	auto	Unique identifier
title	string	”	Section label (w:alias in Word)
description	string	”	Metadata (w:tag in Word)
sectionType	string	”	Business classification
isLocked	boolean	false	Edit prevention

Word export

Sections export as Word content controls:

<w:sdt>
  <w:sdtPr>
    <w:alias w:val="Terms & Conditions"/>
    <w:tag w:val="Legal terms"/>
    <w:lock w:val="sdtContentLocked"/>
  </w:sdtPr>
  <w:sdtContent>
    <!-- Section content -->
  </w:sdtContent>
</w:sdt>

Common patterns

Contract structure

Usage

const contractSections = [
  { id: 'parties', title: '1. Parties', isLocked: false },
  { id: 'terms', title: '2. Terms', isLocked: true },
  { id: 'pricing', title: '3. Pricing', isLocked: false },
  { id: 'signatures', title: '4. Signatures', isLocked: true }
];

contractSections.forEach(section => {
  editor.commands.createDocumentSection({
    ...section,
    html: loadTemplate(section.id)
  });
});

Role-based locking

Usage

function applyRolePermissions(userRole) {
  const sections = editor.helpers.documentSection.getAllSections(editor);

  sections.forEach(({ node }) => {
    const { id, sectionType } = node.attrs;

    if (sectionType === 'legal' && userRole !== 'legal') {
      editor.commands.lockSectionById(id);
    }
  });
}

Related

• Field Annotation - Form fields
• Structured Content - Structured content blocks