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! 🙏

[reteps]

For anyone finding this in the future, this is the solution we landed on:

export const RawHtml = Node.create({
  name: 'rawHtml',
  group: 'block',
  defining: false,
  whitespace: 'pre',
  atom: true,

  addAttributes() {
    return {
      html: {
        parseHTML: (element) => element.innerHTML,
        rendered: false,
      },
      tag: {
        parseHTML: (element) => element.tagName.toLowerCase(),
        rendered: false,
      },
      attrs: {
        parseHTML: (element) => element.attributes,
        rendered: false,
      },
    };
  },

  parseHTML() {
    // For this to work, we need all the nodes to be matched correctly by the other extensions.
    return [
      {
        tag: '*',
      },
    ];
  },

  renderHTML({ node }) {
    const div = document.createElement(node.attrs.tag);
    for (const attr of node.attrs.attrs) {
      div.setAttribute(attr.name, attr.value);
    }
    div.innerHTML = node.attrs.html;
    // For debugging.
    div.dataset.type = 'raw';
    return div;
  },
});