Installation
Included by default in SuperDoc.import { DocumentSection } from 'superdoc/super-editor';
Commands
createDocumentSection
Create a new document section.
editor.commands.createDocumentSection({
id: 'legal-1',
title: 'Terms & Conditions',
description: 'Legal terms',
isLocked: true,
html: '<p>Content...</p>'
})
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';
const superdoc = new SuperDoc({
selector: '#editor',
document: yourFile,
onReady: (superdoc) => {
const editor = superdoc.activeEditor;
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.
editor.commands.removeSectionAtSelection()
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';
const superdoc = new SuperDoc({
selector: '#editor',
document: yourFile,
onReady: (superdoc) => {
const editor = superdoc.activeEditor;
editor.commands.removeSectionAtSelection()
},
});
removeSectionById
Remove a section by its ID.
editor.commands.removeSectionById('legal-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.removeSectionById('legal-1')
},
});
lockSectionById
Lock a section to prevent editing.
editor.commands.lockSectionById('legal-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.lockSectionById('legal-1')
},
});
updateSectionById
Update a section’s content or attributes.
editor.commands.updateSectionById({
id: 'legal-1',
html: '<p>Updated...</p>',
attrs: { title: 'New Title' }
})
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';
const superdoc = new SuperDoc({
selector: '#editor',
document: yourFile,
onReady: (superdoc) => {
const editor = superdoc.activeEditor;
editor.commands.updateSectionById({
id: 'legal-1',
html: '<p>Updated...</p>',
attrs: { title: 'New Title' }
})
},
});
Helpers
// 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
);
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';
const superdoc = new SuperDoc({
selector: '#editor',
document: yourFile,
onReady: (superdoc) => {
const editor = superdoc.activeEditor;
// 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' },
editor
);
},
});
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
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)
});
});
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';
const superdoc = new SuperDoc({
selector: '#editor',
document: yourFile,
onReady: (superdoc) => {
const editor = superdoc.activeEditor;
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
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);
}
});
}
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';
const superdoc = new SuperDoc({
selector: '#editor',
document: yourFile,
onReady: (superdoc) => {
const editor = superdoc.activeEditor;
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