how to design/insert a table without too many events

[sunnyawake5]

hi,
i'm experimenting implementing a richtext editor based on canvas.
my loro doc structrue look like this:

LoroDoc{
    body:LoroList[
        paragraph:LoroMap{
            pPr:{},
            text:LoroText
        },
        table:LoroMap{
            tblPr:{},
            columns:number[],
            rows:LoroList[
                row:LoroMap{
                    rowPr:{},
                    cells:LoroList[
                        LoroMap{
                            cellPr:{},
                            body:body
                        }
                    ]
                }
            ]
        }
    ]
}

insert table code:

let table = {
    sid: p.sid,
    rows,
    columns,
  } as Tbl;
  let lbody = body.lbody as LoroList;
  let index = body.blocks.indexOf(p);
  tbl2ltable(lbody, table,index + 1);

  model.ldoc.commit()

tbl2ltable:

export function tbl2ltable(lbody:LoroList, tbl: Tbl,index) {
  let lb = index===-1?lbody.pushContainer(new LoroMap()):lbody.insertContainer(index,new LoroMap);
  lb.set("type", "tbl");
  let lrows = lb.setContainer("content", new LoroList());
  for (let row of tbl.rows) {
    let lrow = lrows.pushContainer(new LoroMap());
    let lcells = lrow.setContainer("content", new LoroList());
    for (let cell of row.cells) {
      let lcell = lcells.pushContainer(new LoroMap());
      let lbody = lcell.setContainer("content", new LoroList());
      body2lbody(cell, lbody);
    }
  }
}

my problem is when inserting a new table, too many events in subscribe call back.
what i want is only captureing the main event: inserting table(LoroMap) and ignore the other child events.
how to achieve this?

[zxch3n]

How to capture only main events in LoroDoc?

To capture only the main events, such as inserting a table (LoroMap), and ignore the child events in your LoroDoc structure, you can utilize the transaction behavior in Loro. Transactions in Loro are designed to bundle related operations and emit their events together as a cohesive unit. This allows you to handle events more efficiently by focusing on the main events and filtering out the less significant ones.

Here's how you can achieve this:

1. Use Transactions: When you perform multiple operations that are logically connected, such as inserting a table, you can wrap these operations in a transaction. This way, you can emit a single event for the entire transaction rather than individual events for each operation.

2. Set an Origin Identifier: During the commit of a transaction, you can set an origin identifier. This identifier will be included in the emitted events, allowing you to filter and process events based on their origin.

3. Filter Events: In your event subscription callback, you can check the origin of the event and decide whether to process it or ignore it based on your criteria.

Here's an example of how you might implement this:

const doc = new LoroDoc();
doc.subscribe((event) => {
  if (event.origin === 'mainEvent') {
    console.log("Main Event:", event);
  }
});

const body = doc.getList("body");
const table = new LoroMap();
body.push(table);

// Commit the previous transaction and start a new one
doc.commit(); 
table.set("tblPr", {});
table.set("columns", []);
table.set("rows", new LoroList());
doc.commit({ origin: 'mainEvent' }); // Commit with an origin identifier

By using transactions and setting an origin identifier, you can effectively capture only the main events and ignore the child events in your LoroDoc structure. For more details, you can refer to the Event Handling in Loro documentation.

[sunnyawake5]

in ts:
model.ldoc.beginTransaction();
report error: Property 'beginTransaction' does not exist on type 'LoroDoc<Record<string, Container>>'.ts(2339)
ldoc is LoroDoc
loro version:1.9

[zxch3n]

Oh, it should be doc.commit() directly. Updated.

[sunnyawake5]

when insert loro map(table) into ldoc body(LoroList), it's a list event. in subscribe handler, i want the complete table structure(with internal data,like tblPr,rows,etc), not an empty table.

i tried this :model.ldoc.commit({origin:'inserttable'})
got this:

though i can hack to handle the main event and ignore other events, it's best to have an api to stop and resume capture.

another thing, is this origin message can be seen by peer?

[zxch3n]

another thing, is this origin message can be seen by peer?
no

in subscribe handler, i want the complete table structure(with internal data,like tblPr,rows,etc), not an empty table.
maybe you can just use map.toJSON() to get all the data?