vocab quiz convert ** to em

docs/.vitepress/theme/components/SentenceAudio.vue

@@ -0,0 +1,54 @@
+<template>
+  <component :is="lang !== 'ko' || v.audio ? 'span' : TTS" ref="stts">
+    <span
+      v-for="(seg, i) in v[lang].split('**')"
+      :key="i"
+      :class="i % 2 === 0 ? '' : spoiler ? 'spoiler' : $style.em"
+    >
+      {{ seg }}
+    </span>
+    <AudioButton v-if="lang === 'ko' && v.audio" :src="v.audio" ref="saud" />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef } from "vue";
+import TTS from "./TTS.vue";
+import AudioButton from "./AudioButton.vue";
+
+export interface IVoc {
+  ko: string;
+  audio?: string;
+  en: string;
+  usages?: IVoc[];
+  notes?: string;
+  examples?: IVoc[];
+}
+
+defineProps<{
+  v: IVoc;
+  lang: "ko" | "en";
+  spoiler?: boolean;
+}>();
+
+defineExpose({
+  playAudio,
+});
+
+const stts = useTemplateRef<HTMLSpanElement | InstanceType<typeof TTS>>("stts");
+const saud = useTemplateRef<InstanceType<typeof AudioButton>>("saud");
+
+async function playAudio() {
+  if (saud.value) {
+    await saud.value.playAudio();
+  } else if (stts.value && "playAudio" in stts.value) {
+    await stts.value.playAudio();
+  }
+}
+</script>
+
+<style module>
+.em {
+  font-style: italic;
+}
+</style>