<script setup lang="ts">
import DOMPurify from 'dompurify'
import { computed } from 'vue'

const { as = 'div', html:rawHtml } = defineProps<{ as?:string, html:string }>()

DOMPurify.addHook('afterSanitizeAttributes', (node) => {
  // set all elements owning target to target=_blank
  if ('target' in node) {
    node.setAttribute('target', '_blank')
  }
})

const html = computed(() => DOMPurify.sanitize(rawHtml))
</script>

<template>
  <component :is="as" v-html="html" />
</template>
