[Feature Request] Option to prevent rendering of components that are not explicitly defined

[toniengelhardt]

It would be great to have an option, e.g. escapeHtml to ignore components that are not explicitly defined (similar to how dangerousTags are treated, except that they are rendered as plain text instead of wrapped into a pre).

This is important when using the module to format LLM streams to markdown where we want to display and not strip custom tags, e.g. <custom-tag>something</custom-tag>, should display as is and not as "something" with the tags stripped and a "component not defined" warning thrown.

IMO this should be the default behavior, but there could be an option in config to toggle between this and the current behavior.

Alternatively, there could be two settings, escapeHtml and escapeTags to distinguish between standard HTML tags and unknown tags.

Additionally, it would also be nice to be able to turn off Vue string interpolation via setting, aka. that {{ and }} are escaped so that "this is a {{ var }}" is displayed as is and not as "this is a ".

[toniengelhardt]

If anybody needs this... I tried to make a PR to handle the case, but failed, so I solved it with the following two things:

Escape curlies in the input to prevent Vue string interpolation

content = content.replace(/{|}/g, m => m === '{' ? '{' : '}')

Custom rehype plugin to escape unknown HTML tags

import type { Root } from 'hast'
import type { Plugin } from 'unified'
import { toHtml } from 'hast-util-to-html'
import { kebabCase } from 'scule'
import { SKIP, visit } from 'unist-util-visit'

// Taken from @nuxtjs/mdc MDCRenderer component.
const proseTags = [
  'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
  'p', 'a', 'strong', 'em', 'blockquote', 'hr',
  'code', 'pre', 'ul', 'ol', 'li', 'img',
  'table', 'thead', 'tbody', 'td', 'th', 'tr',
]

const mathTags = [
  'mjx-container', 'style',
]

let richTags: Set<string> | undefined // Tags that should be rendered, including all children.
let safeTags: Set<string> | undefined // Tags that should be rendered, with a separate check for children.

const rehypeEscapeHtml: Plugin<[], Root> = () => {
  // Initialize sets if they don't exist yet.
  // This should happen only once in the plugin lifecycle.
  if (!richTags) richTags = new Set([...mathTags])
  if (!safeTags) safeTags = new Set([...proseTags])

  return function transformer(tree) {
    visit(tree, 'element', (node, index, parent) => {
      if (!parent || index == null) return

      const tagName = kebabCase(node.tagName)

      if (richTags!.has(tagName)) return SKIP
      if (safeTags!.has(tagName)) return

      const textNode = {
        type: 'text',
        value: toHtml(node),
      }
      const newNode = parent.type === 'root'
        ? {
          type: 'element',
          tagName: 'p',
          position: node.position,
          children: [textNode],
        }
        : textNode

      parent.children.splice(index, 1, newNode as any)

      return [SKIP, index]
    })
  }
}

export default rehypeEscapeHtml