Spreadsheet: nested arrays?

I have a spreadsheet interface (jspreadsheet) and I want to be able to collaboratively edit it.

I have created a binding. When the binding is initialized I push the data to yjs:

const data = ydoc.getArray("mytable");
const tblData = table.getData(); // the array of arrays containing the spreadsheet data
ydoc.transact(() => {
        for (let i = 0; i < tblData.length; i += 1) {
          const yarray = new Y.Array();
          yarray.insert(0, tblData[i]);
          data.push([yarray]);
        }
});

Now when I change a cell (x, y, value), I do the following:

ydoc.transact(() => {
      const yarray = data.get(y); 
      yarray.delete(x, 1);
      yarray.insert(x, [value]);
      tdata.delete(y, 1);
      data.insert(y, [yarray]);
});

However, the delta changes do not make sense. Is this the right approach and implementation?

Summary

This text will be hidden

I can’t infer why the deltas would not make sense. What would you expect and what is the outcome?

However, I can say that I’m fairly confident that the deltas do what they are supposed to do.

I updated one cell, expected to see the change in deltas. I have checked the deltas and get only one delete with one number and an insert with one integer.

I think I spotted the issue: in my case, it would be enough to change the child array and use observeDeep:

ydoc.transact(() => {
      const yarray = data.get(y); 
      yarray.delete(x, 1);
      yarray.insert(x, [value]);
});

Now imagine I do something more complicated:

ydoc.transact(() => {
      const yarray1 = data.get(y1); 
      yarray1.insert(x, [value]);
      const yarray2 = data.get(y2); 
      yarray2.insert(x, [value]);
      data.delete(0,1)
});

My understanding is that I would get 3 events. Now how do I know

  1. event1 is for child array at index y1,
  2. event2 is for child array at index y2, and
  3. event3 is for parent array (data) ?