Understanding how copy-paste work

[cruxcode]

Let's suppose there is a very simple component structure on the canvas. One flexbox with a button inside it.
Now if we select the flexbox and copy press Ctrl+C to copy it and paste it inside the JSON editor, it looks
somewhat like this. I've removed some extra styles etc. for simplicity.

{
  "type": "template",
  "template": [
    {
      "type": "CREATE$$@atrilabs/app-design-forest/lib/cssTree.js",
      "id": "c35effea-b764-4ba0-be41-0db040fff925",
      "meta": {

      },
      "state": {
        "parent": {
          "id": "",
          "index": 0
        },
        "property": {
          "styles": {
            "color": "#fff",
            "backgroundColor": "#1890ff"
          }
        }
      }
    },
    {
      "type": "CREATE$$@atrilabs/app-design-forest/lib/customPropsTree.js",
      "id": "bf748f3a-50aa-403e-b9c8-f137b073ab93",
      "meta": {

      },
      "state": {
        "parent": {
          "id": "",
          "index": 0
        },
        "property": {
          "custom": {
            "text": "Submit"
          }
        }
      }
    },
    {
      "type": "CREATE$$@atrilabs/app-design-forest/lib/cssTree.js",
      "id": "de0be4b5-f434-4b4b-b142-821e2ecd8d49",
      "meta": {

      },
      "state": {
        "parent": {
          "id": "",
          "index": 0
        },
        "property": {
          "styles": {
            "display": "flex",
            "paddingTop": "55px",
            "paddingLeft": "90px",
            "marginBottom": "0px",
            "paddingBottom": "53px"
          }
        }
      }
    },
    {
      "id": "f2cdce35-32b8-4c5b-88ad-a2b6d64b660f",
      "type": "CREATE$$@atrilabs/app-design-forest/lib/callbackHandlerTree.js",
      "meta": {

      },
      "state": {
        "parent": {
          "id": "",
          "index": 0
        },
        "property": {
          "callbacks": {
            "onClick": [
              {
                "sendEventData": true
              }
            ]
          }
        }
      }
    },
    {
      "id": "28676771-b1e5-493a-adbd-8687256af73c",
      "type": "CREATE$$@atrilabs/app-design-forest/lib/componentTree.js",
      "meta": {
        "pkg": "@atrilabs/react-component-manifests",
        "key": "Button",
        "manifestSchemaId": "@atrilabs/react-component-manifest-schema"
      },
      "state": {
        "parent": {
          "id": "bf9e85ba-f16e-466b-a4a9-c2ea6af87f65",
          "index": 1
        },
        "alias": "Button10"
      }
    },
    {
      "id": "bf9e85ba-f16e-466b-a4a9-c2ea6af87f65",
      "type": "CREATE$$@atrilabs/app-design-forest/lib/componentTree.js",
      "meta": {
        "pkg": "@atrilabs/react-component-manifests",
        "key": "Flex",
        "manifestSchemaId": "@atrilabs/react-component-manifest-schema"
      },
      "state": {
        "parent": {
          "id": "templateRoot",
          "index": 0
        },
        "alias": "Flex76"
      }
    }
  ],
  "copiedId": "bf9e85ba-f16e-466b-a4a9-c2ea6af87f65"
}

Every component has an id attached to it, the JSON for that component has the id of itself as well as the parent.
The outermost component in our set is assigned the special templateRoot. The JSON also shows that on pasting this
set of components it emits numerous events, though it only made up of two simple components. The cssTree, componentTree,
callbackHandlerTree and customPropsTree all emit a separate event which can be seen in the JSON above.

Copy pasting in case of templates is handled just like wiring. We see the outermost element and handle undo redo by triggering opposite events for the same. When we paste this set of components inside something, the id parentRoot earlier assigned is replaced
with the id of new parent component. The JSON also has a copied id which is same as that of the flexbox so that
after pasting if we want to undo our action, we can just reference the copied id and the entire set of components
gets removed.