How do I use browser state change tracking for generated data

Question

Lets say i have simple content editable rectangle on screen.

Here is its data;

{"left":438,"top":252,"width":410,"height":257}

Even if i put this in in some text box which is normally tracked it doesn't work.

I'm trying to leaverage the innate browser undo capabilities for a simple visual puzzle containing basic objects like rectangles.

I'm a novice. i tried a few things like inputting it differently through

innerText innerHTML Range and DocumentFragment Dispatching Events

I don't need code, just a tip for a method/strategy that could use built-in browser undo to move the rectangle to the previous position from where the used moved it to.

There is some answer with document.execCommand. from 2014 but it doesn't work well.