The <source>
tag in the Editor gets closed incorrectly. It's a void element, so it should either close itself or not have a closing tag at all. To quote MDN:
The element is a void element, which means that it not only has no content but also has no closing tag. That is, you never use "</source>" in your HTML.
Follow these steps:
viewHtml
" enabled in the toolbar, e.g.:$("#editor").kendoEditor({ tools: ["viewHtml"] });
</>
button to open the "view HTML" modal;<picture>
<source media="(min-width: 0px)" srcset="https://picsum.photos/id/0/300/200.webp" type="image/webp" />
<source media="(min-width: 0px)" srcset="https://picsum.photos/id/0/300/200.png" type="image/png" />
<source media="(min-width: 0px)" srcset="https://picsum.photos/id/0/300/200.jpg" type="image/jpg" />
<img src="https://picsum.photos/id/0/300/200.jpg" width="300" height="200" />
</picture>
</>
button again to view the HTML, and you'll notice that all <source>
tags now have a </source>
closing tag added.All the <source>
get closing tags (</source>
), which makes the HTML invalid as it's a void element. Above snippet would get turned into this (indented for readability):
<picture>
<source media="(min-width: 0px)" srcset="https://picsum.photos/id/0/300/200.webp" type="image/webp"></source>
<source media="(min-width: 0px)" srcset="https://picsum.photos/id/0/300/200.png" type="image/png"></source>
<source media="(min-width: 0px)" srcset="https://picsum.photos/id/0/300/200.jpg" type="image/jpg"></source>
<img src="https://picsum.photos/id/0/300/200.jpg" width="300" height="200" />
</picture>
The <source>
should not get a closing tag, but should either close themselves, or not be closed at all.