Yjs Collaboration

Add real-time collaboration to Spreadsheet 2 using Yjs

You can install Yjs hook as a separate module

yarn

yarn add "@rowsncolumns/y-spreadsheet"

npm

npm install "@rowsncolumns/y-spreadsheet"

Initializing Yjs

This hook uses WebSocketProvider from Yjs to initialize a connection to one of the demo servers wss://demos.yjs.dev

The default provider can be easily switched to WebRTCProvider, but as of right now, WebRTC does not support synced events.

Running yjs locally

HOST=localhost PORT=1234 npx y-websocket

import {
  SheetData,
  useSpreadsheetState,
} from "@rowsncolumns/spreadsheet-state";
import { useYSpreadsheet } from "@rowsncolumns/yjs-spreadsheet"
import { SpreadsheetProvider, CanvasGrid } from '@rowsncolumns/spreadsheet'

const version = "v1"
const yDoc = new Y.Doc({ gc: true });
const yWebsocketProvider = new WebsocketProvider(
  "ws://localhost:1234",
  `y-spreadsheet-${version}`,
  yDoc,
  {
    connect: true,
  }
);

const MySpreadsheet = () => {
  const userId = 'foobar'
  const name = 'foobar'
  const [sheets, onChangeSheets] = useState<Sheet[]>([]);
  const [sheetData, onChangeSheetData] = useState<SheetData<CellData>>({});
  const [tables, onChangeTables] = useState<TableView[]>([]);
  
  const { activeCell, activeSheetId enqueueCalculation, ... } = useSpreadsheetState({
    ....,
    onChangeHistory(patches) {
      onBroadcastPatch(patches);
    },
  })
  
  // Add Yjs hook
  const { users, onBroadcastPatch } = useYSpreadsheet({
    provider: yWebsocketProvider,
    doc: yDoc,
    onChangeSheetData,
    onChangeSheets,
    onChangeTables,
    enqueueCalculation,
    sheetId: activeSheetId,
    activeCell,

    // User info
    userId,
    title: name,
  });


  return (
    <CanvasGrid
      {...}
      users={users}
      userId={userId}
    >
  )

}

const App = () => (
  <SpreadsheetProvider>
    <MySpreadsheet />
  </SpreadsheetProvider>
)