admin-ui/src/components/markdown/plugins/struct-data.ts

import MarkdownIt from 'markdown-it'
import type { RenderRule } from 'markdown-it/lib/renderer.mjs'
import type Token from 'markdown-it/lib/token.mjs'
import { defineMarkdownPlugin } from '../type/markdown.ts'
import { h } from 'vue'
import VueStructData from '/@/components/markdown/plugins/impl/VueStructData.vue'

// 渲染echarts代码块
const renderStructData: RenderRule = (tokens: Token[], idx: number) => {
	const token = tokens[idx]
	const content = token.content.trim()

	if (!content) {
		return '<div style="padding: 16px;background-color: #fff5f5;border: 1px solid #fed7d7;border-radius: 6px;color: #c53030;margin: 16px 0;">ECharts配置不能为空</div>'
	}
	// 生成完整HTML
	return `<struct-data style="width: 100%;height: 350px;margin: 16px 0; border-radius: 6px" data="${encodeURIComponent(
		content
	)}"></struct-data>`
}

const StructDataPlugin = defineMarkdownPlugin({
	tagName: 'struct-data',
	mdItPlugin: function (md: MarkdownIt) {
		// 保存原始的fence渲染器
		const defaultRender =
			md.renderer.rules.fence ??
			function (tokens, idx, options, _env, renderer) {
				return renderer.renderToken(tokens, idx, options)
			}

		// if (customElements.get('struct-data') === undefined) {
		//   customElements.define('struct-data', EChartsElement, { extends: 'div' })
		// }

		// 重写fence渲染器
		md.renderer.rules.fence = function (tokens, idx, options, env, renderer) {
			const token = tokens[idx]
			const info = token.info ? token.info.trim() : ''

			// 检查是否是echarts代码块
			if (info === 'structdata') {
				return renderStructData(tokens, idx, options, env, renderer)
			}

			// 其他代码块使用默认渲染器
			return defaultRender(tokens, idx, options, env, renderer)
		}
	},
	renderer: (node: { attribs: Record<string, string> }) => {
		return h(VueStructData, {
			data: node.attribs.data,
		})
	},
})

export default StructDataPlugin