<template>
  <template
    v-if="model && model.length > 0">
    <Suspense>
      <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'
import { watch, computed } from 'vue'
import type { Root } from 'hast';

const model = defineModel<string>();

const parser = useMarkdown();
const key = computed(() => hash(model.value));

const node = ref<Root>();

watch(model, async () => {
  if(model.value && model.value)
  {
    node.value = parser(model.value);
  }
}, { immediate: true });
</script>