Cloning an element links them together

[lahdekorpi]

When cloning an element, the new element has all its attributes and content linked to the old. If you do any modifications to either one, both of them are modified. This also happens when copying elements (ctrl + c, ctrl + v).

[lahdekorpi]

Looking at the component JSON, these buttons get a "__symbol": "randomid here" when cloned. I'm assuming this is the reason why this behavior persists even when saving and reloading the contents.

[lahdekorpi]

Ended up doing:

removeSymbols(model) {
    if (typeof model.attributes?.__symbol !== "undefined") {
        delete model.attributes.__symbol;
    }

    if (typeof model.attributes?.__symbols !== "undefined") {
        delete model.attributes.__symbols;
    }
}

And calling it on component:update and component:add. Not really sure if this has any side-effects but so far everything works. Does anybody know the use of the symbol and symbols? There is nothing about those in the documentation.

[yucomds]

Hi @lahdekorpi , where should I put this code for make it working?

[lahdekorpi]

Hi @lahdekorpi , where should I put this code for make it working?

Something like this should work:

function removeSymbols(model) {
    if (typeof model.attributes?.__symbol !== "undefined") {
        delete model.attributes.__symbol;
    }

    if (typeof model.attributes?.__symbols !== "undefined") {
        delete model.attributes.__symbols;
    }
}
editor.on("add", model => removeSymbols(model));
editor.on("component:update", model => removeSymbols(model));

But just to be clear, I have no idea if this breaks anything else and this is a nasty hack, not a solution.

[yucomds]

Ok thank you. I'll try it in my application. Maybe this issue could be related to this one --> https://github.com/artf/grapesjs/issues/3325

[artf]

Yeah, this is related to an old bug in the core library.