🔧
API
🧪
Tutorials
Y.UndoManager
A selective Undo/Redo manager for Yjs.
Yjs ships with a selective Undo/Redo manager. The changes can be optionally scoped to transaction origins.
1
import * as Y from 'yjs'
2
3
const ytext = doc.getText('text')
4
const undoManager = new Y.UndoManager(ytext)
5
6
ytext.insert(0, 'abc')
7
undoManager.undo()
8
ytext.toString() // => ''
9
undoManager.redo()
10
ytext.toString() // => 'abc'
Copied!
const undoManager = new Y.UndoManager(scope: Y.AbstractType | Array<Y.AbstractType> [, {captureTimeout: number, trackedOrigins: Set<any>, deleteFilter: function(item):boolean}])
Creates a new Y.UndoManager on a scope of shared types. If any of the specified types, or any of its children is modified, the UndoManager adds a reverse-operation on its stack. Optionally, you may specify trackedOrigins to filter specific changes. By default, all local changes will be tracked. The UndoManager merges edits that are created within a certain captureTimeout (defaults to 500ms). Set it to 0 to capture each change individually.undoManager.undo()
Undo the last operation on the UndoManager stack. The reverse operation will be put on the redo-stack.undoManager.redo()
Redo the last operation on the redo-stack. I.e. the previous redo is reversed.undoManager.stopCapturing()
Call stopCapturing() to ensure that the next operation that is put on the UndoManager is not merged with the previous operation.undoManager.clear()
Delete all captured operations from the undo & redo stack.undoManager.on('stack-item-added', {stackItem: { meta: Map<any,any>, type: 'undo'|'redo'}}
Register an event that is called when a StackItem is added to the undo- or the redo-stack.on('stack-item-popped', { stackItem: { meta: Map<any,any> }, type: 'undo' | 'redo' })
Register an event that is called when a StackItem is popped from the undo- or the redo-stack.Example: Stop Capturing
UndoManager merges Undo-StackItems if they are created within time-gap smaller than
options.captureTimeout. Call um.stopCapturing() so that the next StackItem won't be merged.1
// without stopCapturing
2
ytext.insert(0, 'a')
3
ytext.insert(1, 'b')
4
undoManager.undo()
5
ytext.toString() // => '' (note that 'ab' was removed)
6
7
// with stopCapturing
8
ytext.insert(0, 'a')
9
undoManager.stopCapturing()
10
ytext.insert(0, 'b')
11
undoManager.undo()
12
ytext.toString() // => 'a' (note that only 'b' was removed)
Copied!
Example: Specify tracked origins
Every change on the shared document has an origin. If no origin was specified, it defaults to
null. By specifying trackedOrigins you can selectively specify which changes should be tracked by UndoManager. The UndoManager instance is always added to trackedOrigins.1
class CustomBinding {}
2
3
const ytext = doc.getText('text')
4
const undoManager = new Y.UndoManager(ytext, {
5
trackedOrigins: new Set([42, CustomBinding])
6
})
7
8
ytext.insert(0, 'abc')
9
undoManager.undo()
10
ytext.toString() // => 'abc' (does not track because origin `null` and not part
11
// of `trackedTransactionOrigins`)
12
ytext.delete(0, 3) // revert change
13
14
doc.transact(() => {
15
ytext.insert(0, 'abc')
16
}, 42)
17
undoManager.undo()
18
ytext.toString() // => '' (tracked because origin is an instance of `trackedTransactionorigins`)
19
20
doc.transact(() => {
21
ytext.insert(0, 'abc')
22
}, 41)
23
undoManager.undo()
24
ytext.toString() // => '' (not tracked because 41 is not an instance of
25
// `trackedTransactionorigins`)
26
ytext.delete(0, 3) // revert change
27
28
doc.transact(() => {
29
ytext.insert(0, 'abc')
30
}, new CustomBinding())
31
undoManager.undo()
32
ytext.toString() // => '' (tracked because origin is a `CustomBinding` and
33
// `CustomBinding` is in `trackedTransactionorigins`)
Copied!
Example: Add additional information to the StackItems
When undoing or redoing a previous action, it is often expected to restore additional meta information like the cursor location or the view on the document. You can assign meta-information to Undo-/Redo-StackItems.
1
const ytext = doc.getText('text')
2
const undoManager = new Y.UndoManager(ytext, {
3
trackedOrigins: new Set([42, CustomBinding])
4
})
5
6
undoManager.on('stack-item-added', event => {
7
// save the current cursor location on the stack-item
8
event.stackItem.meta.set('cursor-location', getRelativeCursorLocation())
9
})
10
11
undoManager.on('stack-item-popped', event => {
12
// restore the current cursor location on the stack-item
13
restoreCursorLocation(event.stackItem.meta.get('cursor-location'))
14
})
Copied!
Last modified 11mo ago
Copy link
Edit on GitHub