<template>
  <template
    v-if="content && content.length > 0">
    <Suspense :timeout="0">
      <MarkdownRenderer #default :key="key" v-if="node" :node="node"></MarkdownRenderer>
      <template #fallback><div class="loading"></div></template>
    </Suspense>
  </template>
</template>

<script setup lang="ts">
import { hash } from 'ohash'

const { content } = defineProps({
  content: {
    type: String,
    required: true,
  }
})

const parser = useMarkdown();
const key = computed(() => hash(content));
const node = computed(() => content ? parser(content) : undefined);
</script>