/**
 * RichTextEditor 组件使用示例和验收标准验证
 *
 * 任务：FE-ANNOUNCE-07 创建 RichTextEditor 组件
 *
 * ✅ 验收标准检查清单：
 *
 * 1. ✅ 组件可通过 v-model 绑定 HTML 内容
 *    - 实现：使用 defineModel 和 v-model 实现双向绑定
 *    - 代码：line 59, 85-92, 100-105
 *
 * 2. ✅ 工具栏功能正常（加粗、斜体等）
 *    - 实现：配置简化工具栏包含 bold、italic、underline、headerSelect、list、link
 *    - 代码：line 63-76 toolbarConfig
 *
 * 3. ✅ disabled 状态下编辑器只读
 *    - 实现：通过 readOnly 配置和动态监听 disabled 变化调用 enable/disable
 *    - 代码：line 80 (readOnly), line 94-103 (watch disabled)
 *
 * 4. ✅ 组件销毁时正确清理编辑器实例
 *    - 实现：onBeforeUnmount 钩子中调用 editor.destroy()
 *    - 代码：line 116-121
 *
 * 5. ✅ TypeScript 类型完整无 any
 *    - 实现：所有 props、emits、变量都有明确类型定义
 *    - 代码：Props interface (line 17-30), emits (line 34-37),
 *            IDomEditor (line 40), computed types (line 43-48, 63-76, 79-83)
 *
 * 📋 实现的额外功能：
 * - 支持自定义高度（height prop）
 * - 支持自定义占位符（placeholder prop）
 * - 支持编辑器模式切换（mode prop: default/simple）
 * - 暴露编辑器实例方法（getEditor, setHtml, getHtml, clear, focus, disable, enable）
 * - 正确处理外部 modelValue 变化（避免循环更新）
 *
 * 🔧 技术栈：
 * - @wangeditor/editor 5.1.23
 * - @wangeditor/editor-for-vue (next)
 * - Vue 3.5 Composition API (script setup)
 * - TypeScript 5.6
 *
 * 📝 使用示例：
 */

// 示例 1: 基础使用
/*
<template>
  <RichTextEditor
    v-model="content"
    placeholder="请输入公告内容..."
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import RichTextEditor from '@/components/common/RichTextEditor.vue'

const content = ref('<p>初始内容</p>')
</script>
*/

// 示例 2: 禁用状态
/*
<template>
  <RichTextEditor
    v-model="content"
    :disabled="isPreview"
    placeholder="预览模式..."
  />
  <button @click="isPreview = !isPreview">切换预览</button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import RichTextEditor from '@/components/common/RichTextEditor.vue'

const content = ref('')
const isPreview = ref(false)
</script>
*/

// 示例 3: 自定义高度和监听变化
/*
<template>
  <RichTextEditor
    v-model="content"
    height="300px"
    @change="handleContentChange"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import RichTextEditor from '@/components/common/RichTextEditor.vue'

const content = ref('')

const handleContentChange = (html: string) => {
  console.log('内容已变化:', html)
}
</script>
*/

// 示例 4: 使用 ref 访问编辑器实例方法
/*
<template>
  <RichTextEditor ref="editorRef" v-model="content" />
  <button @click="clearContent">清空</button>
  <button @click="focusEditor">聚焦</button>
  <button @click="logContent">打印内容</button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import RichTextEditor from '@/components/common/RichTextEditor.vue'

const content = ref('')
const editorRef = ref<InstanceType<typeof RichTextEditor>>()

const clearContent = () => {
  editorRef.value?.clear()
}

const focusEditor = () => {
  editorRef.value?.focus()
}

const logContent = () => {
  console.log(editorRef.value?.getHtml())
}
</script>
*/

export default {}
