import { createApp } from 'vue'
import './assets/styles/global.css'
import App from './App.vue'
import router from './router/'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

// 1. 导入编辑器和预览组件
import VMdEditor from '@kangc/v-md-editor'
import VMdPreview from '@kangc/v-md-editor/lib/preview'

// 2. 导入基础样式
import '@kangc/v-md-editor/lib/style/base-editor.css'
import '@kangc/v-md-editor/lib/style/preview.css'

// 3. 导入主题和样式
import githubTheme from '@kangc/v-md-editor/lib/theme/github'
import '@kangc/v-md-editor/lib/theme/style/github.css'

// 4. 导入复制代码插件及其样式
import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index'
import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css'

// 5. 导入高亮库
import hljs from 'highlight.js'

const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

// 6. 配置编辑器
VMdEditor.use(githubTheme, {
    Hljs: hljs,
})

// 7. 配置预览组件
VMdPreview.use(githubTheme, {
    Hljs: hljs,
})

// 8. 为编辑器和预览分别添加复制插件
VMdEditor.use(createCopyCodePlugin())
VMdPreview.use(createCopyCodePlugin()) // 注意这里使用同一个插件创建函数

// 9. 注册组件
app.use(VMdEditor)
app.use(VMdPreview)

// 10. 使用Element Plus和路由
app.use(ElementPlus)
app.use(router)
app.use(pinia)

app.mount('#app')