<template>
  <UCard class="mb-4">
    <div class="flex flex-wrap gap-2">
      <UButton variant="ghost" size="sm" icon="i-heroicons-bars-3" @click="insertSyntax('# ', '')" title="标题 H1" />
      <UButton variant="ghost" size="sm" icon="i-heroicons-bars-3" class="font-bold" @click="insertSyntax('## ', '')" title="标题 H2" />
      <UButton variant="ghost" size="sm" icon="i-heroicons-bold" @click="insertSyntax('**', '**')" title="粗体" />
      <UButton variant="ghost" size="sm" icon="i-heroicons-italic" @click="insertSyntax('*', '*')" title="斜体" />
      <UDivider orientation="vertical" class="h-8" />
      <UButton variant="ghost" size="sm" icon="i-heroicons-link" @click="insertSyntax('[', '](url)')" title="链接" />
      <UButton variant="ghost" size="sm" icon="i-heroicons-photo" @click="insertSyntax('![alt text](', ')')" title="图片" />
      <UDivider orientation="vertical" class="h-8" />
      <UButton variant="ghost" size="sm" icon="i-heroicons-list-bullet" @click="insertSyntax('- ', '')" title="无序列表" />
      <UButton variant="ghost" size="sm" icon="i-heroicons-numbered-list" @click="insertSyntax('1. ', '')" title="有序列表" />
      <UButton variant="ghost" size="sm" icon="i-heroicons-code-bracket" @click="insertSyntax('```\n', '\n```')" title="代码块" />
      <UButton variant="ghost" size="sm" icon="i-heroicons-command-line" @click="insertSyntax('`', '`')" title="行内代码" />
      <UDivider orientation="vertical" class="h-8" />
      <UButton variant="ghost" size="sm" icon="i-heroicons-minus" @click="insertSyntax('\n---\n', '')" title="分割线" />
      <UButton variant="ghost" size="sm" icon="i-heroicons-table-cells" @click="insertSyntax('\n| 列1 | 列2 |\n|-----|-----|\n| 值1 | 值2 |\n', '')" title="表格" />
    </div>
  </UCard>
</template>

<script setup lang="ts">
const emit = defineEmits<{
  insert: [before: string, after: string]
}>()

const insertSyntax = (before: string, after: string) => {
  emit('insert', before, after)
}
</script>
