Overview
Composite operations combine multiple operations in a transaction for complex transformations like paste, split paragraph, or format multiple ranges.
Paste Operation
function pasteContent(editor: Editor, position: Path, content: string) {
const tx = editor.beginTransaction();
const selection = editor.getSelection();
// Delete selection if exists
if (!selection.isCollapsed) {
tx.add({
type: 'deleteContent',
path: selection.start,
length: selection.length
});
}
// Insert pasted content
tx.add({
type: 'insertText',
path: position,
text: content
});
tx.commit(); // Single undo entry for entire paste
}Format Multiple Ranges
function formatMultipleRanges(editor: Editor, ranges: Range[], format: string) {
const tx = editor.beginTransaction();
for (const range of ranges) {
tx.add({
type: 'applyFormat',
path: range.start,
length: range.length,
format: format,
value: true
});
}
tx.commit(); // Single undo for all formatting
}Split Paragraph
function splitParagraph(editor: Editor, position: Path) {
const tx = editor.beginTransaction();
const paragraph = editor.getNodeAtPath(position);
const beforeText = paragraph.text.slice(0, position[1]);
const afterText = paragraph.text.slice(position[1]);
// Update current paragraph
tx.add({
type: 'replace',
path: position,
length: paragraph.text.length,
content: beforeText
});
// Insert new paragraph
tx.add({
type: 'insertNode',
path: [position[0] + 1],
node: {
type: 'paragraph',
children: [{ type: 'text', text: afterText }]
}
});
tx.commit();
}