Component toHTML function doesn't bring gjs definitions

[RakulAgn]

editor.Commands.add("tlb-save", {
    run() {
      console.log(
        editor.BlockManager.get("summary-vertical-block").getContent()
      );

      const compBlockData = editor.getSelected();
      console.log(compBlockData?.toHTML());
    },
  });

The Block Content is Right Content Once I Dropped That Block into the canvas and I Modified the Style of the component and i am writing to get the comp content it gives the content without the data-gjs definitions for example

Original Content

<mj-wrapper padding="0px !important" store-element=summary-vertical-block  data-gjs-copyable='true' data-gjs-droppable='false' padding='0px'>
                <mj-raw >{% for line in line_items %}{% capture product_attributes %}{% for p in line.properties %}{% unless p.last==blank or p.first contains '_options' %} <br /> {{p.first}}:{{p.last}}{% endunless %}{% endfor %}{% endcapture %}</mj-raw>
                <mj-section store-element=summary-vertical-block  data-gjs-copyable='false' data-gjs-draggable='false' data-gjs-highlightable='false' data-gjs-hoverable='false' data-gjs-droppable='false'>
                <mj-column  data-gjs-copyable='false' data-gjs-draggable='false' data-gjs-highlightable='false' data-gjs-hoverable='false' data-gjs-droppable='false' data-gjs-selectable='false' data-gjs-removable='false'>
                    <mj-image  data-gjs-copyable='false' data-gjs-draggable='false' data-gjs-highlightable='false' data-gjs-hoverable='false' data-gjs-droppable='false' data-gjs-editable='false' data-gjs-selectable='false' data-gjs-removable='false' data-lq-attr="product_image" width="200px" align="center" src="{{line.image_url | img_url: 100x100, scale: 2}}"></mj-image>
                    <mj-text  data-gjs-copyable='false' data-gjs-draggable='false' data-gjs-highlightable='false' data-gjs-hoverable='false' data-gjs-droppable='false' data-gjs-editable='false' data-gjs-selectable='true' data-gjs-removable='false' data-lq-attr="product_quantity" align="center !important">{{ line.title }} x {{ line.quantity }} {{ product_attributes }}</mj-text>
                    <mj-text  data-gjs-copyable='false' data-gjs-draggable='false' data-gjs-highlightable='false' data-gjs-hoverable='false' data-gjs-droppable='false' data-gjs-editable='false' data-gjs-selectable='true' data-gjs-removable='false' data-lq-attr="product_price" align="center !important">{% if line.price %}{{ line.price | money | times: line.quantity }}{% elsif line.line_price  %}{{ line.line_price | money}}{% endif %}</mj-text>
                </mj-column>
                </mj-section>
                <mj-raw>{% endfor %}</mj-raw>
            </mj-wrapper>

After Component toHTML

<mj-section store-element="summary-vertical-block" background-color="#ffffff"><mj-column padding="10px" padding-check="true" padding-top="10px" padding-bottom="10px" padding-left="10px" padding-right="10px"><mj-image data-lq-attr="product_image" width="200px" align="center" src="{{line.image_url | img_url: 100x100, scale: 2}}"></mj-image><mj-text css-class="text-font-style text-font-family text-font-size text-alignment text-spacing text-font-color text-line-height" data-lq-attr="product_quantity" align="center !important" line-height="1">{{ line.title }} x {{ line.quantity }} {{ product_attributes }}</mj-text><mj-text css-class="text-font-style text-font-family text-font-size text-alignment text-spacing text-font-color text-line-height" data-lq-attr="product_price" align="center !important" line-height="1">{% if line.price %}{{ line.price | money | times: line.quantity }}{% elsif line.line_price  %}{{ line.line_price | money}}{% endif %}</mj-text></mj-column></mj-section>

How to Clone Exactly Same as like in Original Content but with modified UI

@artf

[artf]

Those properties are not really supposed to be exported, but you can try using toHTML({ withProps: true })

[RakulAgn]

When using a custom block, for example, I have a hardcoded block that cannot be copied or deleted. However, once I save that block and load it into the editor, the cloned block has the features to clone and delete. This happens because these properties are not applied to the new block.

[RakulAgn]

Those properties are not really supposed to be exported, but you can try using toHTML({ withProps: true })

this Options Does'nt Bring the Definition it give same ouput what i get without withProps