<script setup lang="ts">
/**
 * Markdown 编辑器表单组件（封装 md-editor-v3）
 * 经 component-map 自动注册，schema 中以 component: 'MarkdownEditor' 使用（vben form 默认 v-model:value 绑定）
 * 为什么封装：统一精简工具栏（轻量备注场景不需要图片/公式等重型功能）+ 主题跟随系统亮暗切换，避免各表单重复配置
 */
import type { ToolbarNames } from 'md-editor-v3';

import { computed, defineAsyncComponent } from 'vue';

import { usePreferences } from '@vben/preferences';

import { useVModel } from '@vueuse/core';

import 'md-editor-v3/lib/style.css';

// 本文件经 component-map 的 eager glob 全量打进主包，md-editor-v3（含 CodeMirror）体积大，
// 必须异步加载：外壳进主包、库本体在编辑器真正渲染时才拉取，避免拖累全站首屏
const MdEditor = defineAsyncComponent(() =>
  import('md-editor-v3').then((m) => m.MdEditor),
);

const props = defineProps({
  value: {
    type: String,
    default: '',
  },
  placeholder: {
    type: String,
    default: '请输入内容（支持 Markdown 格式）',
  },
  /** 编辑器整体高度（px），弹窗场景建议 200-300 */
  height: {
    type: Number,
    default: 240,
  },
});
const emits = defineEmits(['update:value']);
const mValue = useVModel(props, 'value', emits, {
  defaultValue: props.value,
  passive: true,
});
/** 主题必须跟随系统亮/暗切换，不能写死（与消息详情 MdPreview 的处理一致） */
const { isDark } = usePreferences();
const theme = computed(() => (isDark.value ? 'dark' : 'light'));
/** 同页面可能挂载多个编辑器实例（如弹窗嵌套），随机 id 避免内部 DOM id 冲突 */
const editorId = `md-form-${Math.random().toString(36).slice(2, 9)}`;
/** 精简工具栏：加粗/斜体/删除线、标题/引用/列表/任务、代码/链接/表格，右侧仅保留预览切换 */
const toolbars: ToolbarNames[] = [
  'bold',
  'italic',
  'strikeThrough',
  '-',
  'title',
  'quote',
  'unorderedList',
  'orderedList',
  'task',
  '-',
  'code',
  'link',
  'table',
  '=',
  'preview',
];
</script>
<template>
  <MdEditor
    :id="editorId"
    v-model="mValue"
    :theme="theme"
    :placeholder="placeholder"
    :toolbars="toolbars"
    :footers="[]"
    :preview="false"
    :style="{ height: `${height}px` }"
    class="md-form-editor"
  />
</template>
<style scoped>
/* 圆角与边框贴近 antd 输入组件，融入表单视觉 */
.md-form-editor {
  width: 100%;
  border: 1px solid hsl(var(--border));
  border-radius: 6px;
}
</style>
