Issues with duplicating a page, data-gjs-type attribute is removed from HTML

[sandenson]

Hello! I'm working on creating a functionality to duplicate pages, and it's mostly working, but I have a problem which I'll explain after giving some context.

I'm currently using the editor.storeData() function to get the current page's data and using it to create a new one:

const storeData = editor?.storeData()
editor?.Pages.add({
  id: pageName,
  component: storeData?.html,
  styles: storeData?.styles,
});

This mostly works fine, but some components get completely broken because they can't be detected. When the editor HTML is exported through either editor.getHtml() or editor.storeData().html, the data-gjs-type attribute is removed, and so the countdown component, for example, which uses the data-gjs-type attribute in its isComponent() function, doesn't work.

Expected Countdown component HTML:

<div
    id="ibvg"
    data-gjs-type="countdown" <!-- here's the correct value -->
    draggable="true"
    data-highlightable="1"
    class="countdown"
>
    <span
        id="ihxd"
        data-gjs-type="default"
        draggable="true"
        data-highlightable="1"
        data-js="countdown"
        class="countdown-cont"
    >
        <div
            id="i8dh"
            data-gjs-type="default"
            draggable="true"
            data-highlightable="1"
            class="countdown-block"
        >
            <div
                id="iab7"
                data-gjs-type="default"
                draggable="true"
                data-highlightable="1"
                data-js="countdown-day"
                class="countdown-digit"
            >00</div>
            <div
                id="isuy"
                data-gjs-type="text"
                draggable="true"
                data-highlightable="1"
                class="countdown-label"
            >days</div>
        </div>
        <div
            id="ifux"
            data-gjs-type="default"
            draggable="true"
            data-highlightable="1"
            class="countdown-block"
        >
            <div
                id="iw45"
                data-gjs-type="default"
                draggable="true"
                data-highlightable="1"
                data-js="countdown-hour"
                class="countdown-digit"
            >00</div>
            <div
                id="i2hss"
                data-gjs-type="text"
                draggable="true"
                data-highlightable="1"
                class="countdown-label"
            >hours</div>
        </div>
        <div
            id="idd8z"
            data-gjs-type="default"
            draggable="true"
            data-highlightable="1"
            class="countdown-block"
        >
            <div
                id="ip9t8"
                data-gjs-type="default"
                draggable="true"
                data-highlightable="1"
                data-js="countdown-minute"
                class="countdown-digit"
            >00</div>
            <div
                id="ipa9g"
                data-gjs-type="text"
                draggable="true"
                data-highlightable="1"
                class="countdown-label"
            >minutes</div>
        </div>
        <div
            id="i6khx"
            data-gjs-type="default"
            draggable="true"
            data-highlightable="1"
            class="countdown-block"
        >
            <div
                id="i7a4k"
                data-gjs-type="default"
                draggable="true"
                data-highlightable="1"
                data-js="countdown-second"
                class="countdown-digit"
            >00</div>
            <div
                id="irgng"
                data-gjs-type="text"
                draggable="true"
                data-highlightable="1"
                class="countdown-label"
            >seconds</div>
        </div>
    </span>
    <span
        id="ilckr"
        data-gjs-type="default"
        draggable="true"
        data-highlightable="1"
        data-js="countdown-endtext"
        class="countdown-endtext"
    ></span>
</div>

Broken HTML:

<div
  id="i9ujp-2"
  data-gjs-type="default" <!-- here's the wrong value -->
  draggable="true"
  data-highlightable="1"
  class="countdown"
>
  <span
    id="isigm"
    data-gjs-type="default"
    draggable="true"
    data-highlightable="1"
    data-js="countdown"
    class="countdown-cont"
    ><div
      id="in17a"
      data-gjs-type="default"
      draggable="true"
      data-highlightable="1"
      class="countdown-block"
    >
      <div
        id="ipw2p"
        data-gjs-type="text"
        draggable="true"
        data-highlightable="1"
        class="countdown-digit"
        data-js="countdown-day"
      ></div>
      <div
        id="i0446"
        data-gjs-type="text"
        draggable="true"
        data-highlightable="1"
        class="countdown-label"
      >
        days
      </div>
    </div>
    <div
      id="ipcy0a"
      data-gjs-type="default"
      draggable="true"
      data-highlightable="1"
      class="countdown-block"
    >
      <div
        id="i24n8o"
        data-gjs-type="text"
        draggable="true"
        data-highlightable="1"
        class="countdown-digit"
        data-js="countdown-hour"
      ></div>
      <div
        id="iht74j"
        data-gjs-type="text"
        draggable="true"
        data-highlightable="1"
        class="countdown-label"
      >
        hours
      </div>
    </div>
    <div
      id="ijx3c7"
      data-gjs-type="default"
      draggable="true"
      data-highlightable="1"
      class="countdown-block"
    >
      <div
        id="ijn5f7"
        data-gjs-type="text"
        draggable="true"
        data-highlightable="1"
        class="countdown-digit"
        data-js="countdown-minute"
      ></div>
      <div
        id="i79uaf"
        data-gjs-type="text"
        draggable="true"
        data-highlightable="1"
        class="countdown-label"
      >
        minutes
      </div>
    </div>
    <div
      id="i7dgok"
      data-gjs-type="default"
      draggable="true"
      data-highlightable="1"
      class="countdown-block"
    >
      <div
        id="iwfu8j"
        data-gjs-type="text"
        draggable="true"
        data-highlightable="1"
        class="countdown-digit"
        data-js="countdown-second"
      ></div>
      <div
        id="iuc9ki"
        data-gjs-type="text"
        draggable="true"
        data-highlightable="1"
        class="countdown-label"
      >
        seconds
      </div>
    </div></span
  ><span
    id="i5s82i"
    data-gjs-type="default"
    draggable="true"
    data-highlightable="1"
    data-js="countdown-endtext"
    class="countdown-endtext"
  ></span>
</div>

Is there any way to circumvent that?

[aliibrahim123]

maybe you can use

editor.getWrapper().getEl().innerHTML

[sandenson]

Worked like a charm, thanks!