annotate snapshot example (#2454)

annotate snapshot example

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Add a step-by-step description of how to test your PR here.
2.

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- annotate snapshot example
This commit is contained in:
Taha 2024-01-12 15:52:47 +00:00 committed by GitHub
parent 6c5dd85feb
commit 6fdd0987b0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -1,28 +1,21 @@
import { Tldraw } from '@tldraw/tldraw' import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css' import '@tldraw/tldraw/tldraw.css'
import jsonSnapshot from './snapshot.json' import jsonSnapshot from './snapshot.json'
// ^^^
// This snapshot was previously created with `editor.store.getSnapshot()` // There's a guide at the bottom of this file!
// We'll now load this into the editor with `editor.store.loadSnapshot()`.
// Loading it also migrates the snapshot, so even though the snapshot was
// created in the past (potentially a few versions ago) it should load
// successfully.
const LOAD_SNAPSHOT_WITH_INITIAL_DATA = true const LOAD_SNAPSHOT_WITH_INITIAL_DATA = true
//[1]
export default function SnapshotExample() { export default function SnapshotExample() {
if (LOAD_SNAPSHOT_WITH_INITIAL_DATA) { if (LOAD_SNAPSHOT_WITH_INITIAL_DATA) {
// If you want to use the snapshot as the store's initial data, you can do so like this:
return ( return (
<div className="tldraw__editor"> <div className="tldraw__editor">
<Tldraw snapshot={jsonSnapshot} /> <Tldraw snapshot={jsonSnapshot} />
</div> </div>
) )
} }
//[2]
// You can also load the snapshot an existing editor instance afterwards. Note that this
// does not create a new editor, and doesn't change the editor's state or the editor's undo
// history, so you should only ever use this on mount.
return ( return (
<div className="tldraw__editor"> <div className="tldraw__editor">
<Tldraw <Tldraw
@ -33,6 +26,20 @@ export default function SnapshotExample() {
</div> </div>
) )
} }
/*
This example shows how to load a snapshot into the editor. Thanks to our
migration system, you can load snapshots from any version of Tldraw. The
snapshot we're using can be found in the snapshot.json file in this folder.
You can generate a snapshot by using editor.store.getSnapshot().
// Tips: There are two ways to load a snapshot:
// Want to migrate a snapshot but not load it? Use `editor.store.migrateSnapshot()`
[1] Via the `snapshot` prop of the Tldraw component.
[2] Using editor.store.loadSnapshot() in the callback of the onMount prop of the
Tldraw component.
Tips:
Want to migrate a snapshot but not load it? Use `editor.store.migrateSnapshot()`
*/