<template>
	<rich-text v-if="data" class="htmlCss" :nodes="cleanedHtml(data)"></rich-text>
</template>

<script setup>
defineProps({ data: String })

const cleanedHtml = (text) => {
  const cleaned = text.replace(/\n/g, '<br>')
  .replace(/\s+/g, ' ')
  .replace(/(^|\s+)<\/p>(\s*<p>|$)/g, '</p><p>')
  .replace(/<p>\s*(<br>)\s*<\/p>/g, '')
  .replace(/<pre([^>]*)>/g, '<div$1>')
  .replace(/<\/pre>/g, '</div>')
  .replace(/<p>\s*(<\/br>)\s*<\/p>/g, '').trim()
  return cleaned
}
</script>

<style scoped lang="scss">
.htmlCss {
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 28px;
  color: var(--color-333);
  font-size: 15px;
  text-align: justify;
  letter-spacing: 0;
}
</style>
