<template>
  <div ref="solveHtmlDiv" class="nana-no-rich-html" v-html="content" />
  {{ pureContent }}
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

const props = defineProps({	
  content: {
    type: String,
    default: '',
  },
})

const solveHtmlDiv = ref<HTMLElement|null>(null);
const pureContent = ref('');

watch(() => props.content, () => {
  setTimeout(() => {
    if (solveHtmlDiv.value) {
      pureContent.value = solveHtmlDiv.value.textContent || '';
    }
  }, 200);
}, { immediate: true })

</script>

<style lang="scss">
.nana-no-rich-html {
  position: absolute;
  opacity: 0;
  left: -1000px;
  pointer-events: none;
}

</style>