<script setup lang="ts">
import { computed } from "vue";
import { setExternalLinksToOpenInNewTab } from "@/utils/dom";

const props = withDefaults(
  defineProps<{
    content?: string;
    openLinksInNewTab?: boolean;
  }>(),
  {
    content: "",
    openLinksInNewTab: false,
  }
);

const updatedContent = computed(() => {
  if (!props.openLinksInNewTab || !props.content) return props.content;

  const parser = new DOMParser();
  const doc = parser.parseFromString(props.content, "text/html");
  const anchors = doc.querySelectorAll("a");

  setExternalLinksToOpenInNewTab(anchors);

  return doc.body.innerHTML;
});
</script>

<template>
  <!-- eslint-disable vue/no-v-html -->
  <section class="default-wagtail-rich-text" v-html="updatedContent"></section>
</template>
