Change insertion markers to use JSON deserialization when duplicating blocks

[BeksOmega]

Check for duplicates

• I have searched for similar issues before opening a new one.

Problem

Insertion markers duplicate the block being dragged, and then tell the duplicate to be an insertion marker.

Currently the duplication duplicates (ha) a lot of code from the serialization system. We think this is because in the past the XML system didn't have a good way to just serialize and deserialize a single block (without children). But the JSON system does have this!

Request

Change the insertion marker createMarkerBlock code over to use JSON serialization and deserialization.

Alternatives considered

No response

Additional context

Sparked by this discussion: https://groups.google.com/g/blockly/c/gcvynl88QLY/m/shFyX4x0BwAJ

[varshneydevansh]

Can I pick this challenge?

[BeksOmega]

Sure go for it @varshneydevansh !

[varshneydevansh]

I found the discussion to be very intriguing and understood how we arrived at this issue.

To use the JSON serialization and deserialization the toJSON method is used to serialize the sourceBlock into a JSON object, which captures the relevant data of the block. The fromJson method is then called on the result block to deserialize the JSON and populate the block with the serialized data.

Is this is a suitable approach?

---

I think I also have to remove all the related functions regarding the mutation state. for example- https://github.com/google/blockly/blob/2a2b3b3ac506e58896c1a8a215c566f9739329a0/core/block.ts#L123

---

If I do this, then I also have to remove the references from these places? Or should I leave them as it's and just change the createMarkerBlock

I think I also have to add the toJson and fromJson something like this in -

https://github.com/google/blockly/blob/2a2b3b3ac506e58896c1a8a215c566f9739329a0/core/block_svg.ts#L70

export class BlockSVG {
    // Add the toJson method
    toJson(): string {
        return JSON.stringify(this);
    }

    // Add the fromJson method
    fromJson(json: string): void {
        const data = JSON(json);

[BeksOmega]

Hello @varshneydevansh =)

When I said the "JSON serialization system" above I meant this one! The example of serializing individual blocks should help you.

So you don't need to remove or add any APIs, just call the APIs linked above from the insertion marker code to create the marker block =)

I hope that helps! If you have any further questions please reply =)

[BeksOmega]

Reoppening due to rollback #7430