Is there any way to prevent GrapesJS from changing the HTML of my custom blocks?

[sandenson]

Hello. I'm trying to make a custom Block and Component to integrate with Plyr, and for that I need the internal HMTL of the Blocks to be formatted in an specific way, such as this:

<div class="plyr-player-div" data-gjs-custom-name="Plyr player">
  <video controls data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" class="plyr-html5-player">
    <!-- Video files -->
    <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4" type="video/mp4" size="576" />

    <!-- Caption files -->
    <track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default />
    <track kind="captions" label="Français" srclang="fr" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt" />
  </video>
</div>

But when I set this as the Block's content, either through its content attribute when I add it to the BlockManager or through its component's view's init function, the HTML above is changed to this:

<div id="izom" data-gjs-type="plyr-player" draggable="true" data-highlightable="1" class="plyr-player-div">
  <div id="ilpv" data-gjs-type="video" draggable="true" allowfullscreen="allowfullscreen" controls="true" data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" class="plyr-html5-player">
    <video src="<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;100&quot; viewBox=&quot;0 0 24 24&quot; style=&quot;fill: rgba(0,0,0,0.15); transform: scale(0.75)&quot;><path d=&quot;M8.5 13.5l2.5 3 3.5-4.5 4.5 6H5m16 1V5a2 2 0 0 0-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2z&quot;></path></svg>" class="gjs-no-pointer" controls="" poster="" style="height: 100%; width: 100%;">
     </video>
  </div>
</div>

Is there any way to prevent this from happening and just stick with the original HTML + properties that Grapes needs to add (id, data-gjs-type, draggable, etc)?

[sandenson]

A mate of mine, which is working with me using GrapesJS, told me about the data-gjs-type="generic" HTML attribute, which does what I was looking for.

<div class="plyr-player-div" data-gjs-custom-name="Plyr player">
  <video ==> data-gjs-type="generic" <== controls data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" class="plyr-html5-player">
    <!-- Video files -->
    <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4" type="video/mp4" size="576" />

    <!-- Caption files -->
    <track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default />
    <track kind="captions" label="Français" srclang="fr" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt" />
  </video>
</div>