<template>
  <span v-html="htmlSafeValue" />
</template>

<script>
import * as DOMPurify from 'dompurify'
import { computed, defineComponent, toRefs } from '@vue/composition-api'
import { useTextValueRenderer } from './useTextValueRenderer'

export default defineComponent({
  name: 'TextRenderer',
  props: {
    // eslint-disable-next-line vue/no-unused-properties
    item: {
      type: Object,
      required: true,
    },
    // eslint-disable-next-line vue/no-unused-properties
    value: {
      type: [String, Function],
      required: true,
    },
  },
  setup(props) {
    const { item, value } = toRefs(props)
    const htmlSafeValue = computed(() => DOMPurify.sanitize(textValue.value))
    const textValue = useTextValueRenderer(item, value)

    return {
      htmlSafeValue,
    }
  },
})
</script>
