RenderHTML without escaping HTML characters

[robinbisping]

I am trying to add a Raw HTML field to tiptap, wrapped in a custom node view. Its purpose is to allow a user to insert raw HTML into the field, which is then rendered at the same place as HTML. However, renderHTML seems to always escape HTML characters. For example,

<div class="video">
  <video src="video.mp4"></video>
</div>

is rendered as

<div data-type="raw">&lt;div class="video"&gt;
    &lt;video src="video.mp4"&gt;&lt;/video&gt;
    &lt;/div&gt;</div>

My renderHTML function looks as follows:

renderHTML ({ node }) {
  return [
    'div',
    { 'data-type': 'raw' },
    node.attrs.html
  ]
}

Does anyone have an idea how to render the data without escaping any HTML characters?

[philippkuehn]

This is not supported with this syntax. But you can also return a DOM node in renderHTML so you could try the following:

renderHTML ({ node }) {
  const div = document.createElement('div')

  div.dataset.type = 'raw'
  div.innerHTML = node.attrs.html

  return div
}

[robinbisping]

Great! This is exactly what I wanted. Thanks a lot, Philipp! 🙏