live-state.tsx

import { createLiveState, crdtSchema } from "@/lib/live-state";

export type NotebookJSON = {
  title: string;
  description: string;
  cells: TextCell[];
};

const notebookCRDTSchema = {
  title: crdtSchema.LiveText(),
  cells: crdtSchema.LiveList({ content: crdtSchema.LiveText() }),
};

export const { RoomProvider, useActions, useLiveStateSelector } =
  createLiveState<NotebookJSON>()(notebookCRDTSchema, (notebook) => ({
    replaceTitle: (content: string) => {
      const title = notebook.get("title");
      title.delete(0, title.length);
      title.insert(0, content);
    },
    replaceDescription: (content: string) => {
      notebook.set("description", content);
    },
    insertTitle: (index: number, content: string) => {
      notebook.get("title").insert(index, content);
    },
    deleteTitle: (index: number, length: number) => {
      notebook.get("title").delete(index, length);
    },
    addCell: () => {
      notebook.get("cells").push([{ content: new Y.Text("Default text") }]);
    },
    deleteCell: (index: number) => {
      notebook.get("cells").delete(index);
    },
    insertCellText: (cellIndex: number, index: number, content: string) => {
      notebook.get("cells").get(cellIndex).content.insert(index, content);
    },
    deleteCellText: (cellIndex: number, index: number, length: number) => {
      notebook.get("cells").get(cellIndex).content.delete(index, length);
    },
  }));