History

@pluv/react comes with hooks to manipulate history that are built on top of the CRDT library you are using.

For Yjs (@pluv/crdt-yjs), it is built on top of the UndoManager.
For Loro (@pluv/crdt-loro), this feature is not yet supported.

This will allow users to apply undos and redos to Pluv storage mutations.

Assume you have storage defined like so:

1import { yjs } from "@pluv/crdt-yjs";
2import { createBundle, createClient } from "@pluv/react";
3import type { io } from "../server/io";
4
5const client = createClient<typeof io>({ /* ... */ });
6
7export const { createRoomBundle } = createBundle(client);
8
9export const pluvRoom = createRoomBundle({
10    initialStorage: yjs.doc(() => ({
11        messages: yjs.array([
12            yjs.object({
13                message: "hello",
14                name: "leedavidcs",
15            }),
16        ]),
17    })),
18});

To undo a storage mutation, you will need to wrap your mutation with a transaction.

1const transact = pluvRoom.useTransact();
2const [messages, sharedType] = pluvRoom.useStorage();
3
4// We can undo this
5transact(() => {
6    sharedType.push(["world!"]);
7});
8
9// We can also access all shared types to undo like this
10transact((tx) => {
11    tx.messages.push(["world!"]);
12});
13
14// We cannot undo this
15sharedType.push(["world!"]);

Then from anywhere within the PluvRoomProvider, you can undo your last transacted operation.

1const undo = pluvRoom.useUndo();
2const redo = pluvRoom.useRedo();
3
4undo();
5redo();

Yjs UndoManager

History

Relevant Hooks

Undoing a storage mutation

References