<script setup>
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import { cel as _rawCel } from "../../../../../utils/cel";
import { celBindings, injectCELContext } from "../../../../../utils/cel-context";
import { getLocalizedText } from "../../../../../share/locale";
import { Markdown } from "../../../../ui/markdown";
import { interpolateMarkdown } from "../../../../table/utils/runtime";
import { useFormState } from "../../../utils/state";
defineOptions({ name: "ShwfedMarkdownFieldRuntime" });
const props = defineProps({
  fieldId: { type: String, required: true },
  config: { type: null, required: true }
});
const { locale } = useI18n();
const { state } = useFormState();
const inherited = injectCELContext();
const $cel = (expression, context) => _rawCel(expression, { ...celBindings(inherited), ...context });
const source = computed(() => {
  const template = getLocalizedText(props.config.content, locale.value) ?? "";
  if (!template) return "";
  return interpolateMarkdown(template, $cel, { form: state.value ?? {} });
});
</script>

<template>
  <Markdown
    v-if="source"
    :source="source"
    block
    class="prose prose-sm prose-zinc max-w-none"
  />
</template>
