\n \n \n \n \n \n \n \n \n \n {{ content }}\n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n \n \n
\n \n \n \n
\n","import { NgModule } from '@angular/core';\nimport { InputComponent } from './input.component';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { ButtonComponent } from './button/button.component';\nimport { SendIconComponent } from './send-icon/send-icon.component';\n\n@NgModule({\n declarations: [],\n imports: [\n CommonModule,\n FormsModule,\n ButtonComponent,\n SendIconComponent,\n InputComponent\n ],\n exports: [InputComponent],\n})\nexport class InputModule {}\n","import { filterXSS, getDefaultCSSWhiteList, getDefaultWhiteList, type IWhiteList } from 'xss';\nimport type { CustomXssRule, MdPlugin } from './mdCard.types';\nexport class MDCardService {\n private xssWhiteList = getDefaultWhiteList();\n private cssWhiteList = getDefaultCSSWhiteList();\n\n constructor() {\n this.setDefaultXss();\n }\n\n private setDefaultXss() {\n this.xssWhiteList['input'] = ['type', 'checked', 'disabled', 'class'];\n this.xssWhiteList['label'] = ['for'];\n this.xssWhiteList['ul'] = ['class'];\n this.xssWhiteList['div'] = ['class', 'key'];\n this.xssWhiteList['a'] = ['href', 'class', 'target', 'name'];\n this.xssWhiteList['ol'] = ['start'];\n\n this.xssWhiteList['p'] = ['class'];\n this.xssWhiteList['span'] = ['style', 'class', 'title', 'id'];\n this.xssWhiteList['svg'] = ['style', 'class', 'width', 'height', 'viewbox', 'preserveaspectratio', 'id', 'fill', 'stroke'];\n this.xssWhiteList['path'] = ['style', 'class', 'd', 'id', 'fill', 'stroke'];\n this.xssWhiteList['th'] = ['style'];\n this.xssWhiteList['td'] = ['style'];\n }\n\n private onIgnoreTagAttr(tag: string, name: string, value: string, isWhiteAttr: boolean) {\n if (!isWhiteAttr && (name === 'id' || (tag === 'span' && name === 'style'))) {\n return name + '=' + value;\n }\n return undefined;\n }\n\n getXssWhiteList() {\n return this.xssWhiteList;\n }\n\n setXssWhiteList(list: IWhiteList) {\n this.xssWhiteList = list;\n }\n\n setCustomXssRules(rules: CustomXssRule[]) {\n if (rules) {\n rules.forEach((rule) => {\n if (rule['value'] === null) {\n delete this.xssWhiteList[rule['key']];\n } else {\n this.xssWhiteList[rule['key']] = rule['value'];\n }\n });\n }\n }\n\n\n setMdPlugins(plugins: MdPlugin[], mdt: any) {\n if (plugins && plugins.length) {\n plugins.forEach(item => {\n const { plugin, opts } = item;\n mdt.use(plugin, opts);\n })\n }\n }\n\n filterHtml(html: string) {\n return filterXSS(html, {\n whiteList: this.xssWhiteList,\n onIgnoreTagAttr: this.onIgnoreTagAttr,\n css: {\n whiteList: Object.assign({}, this.cssWhiteList, {\n top: true,\n left: true,\n bottom: true,\n right: true,\n }),\n },\n });\n }\n}","import type { MermaidConfig } from './mdCard.types';\n\ninterface MermaidViewState {\n scale: number;\n offsetX: number;\n offsetY: number;\n dragging: boolean;\n dragStart: { x: number; y: number };\n lastOffset: { x: number; y: number };\n}\n\nexport class MermaidService {\n private mermaidInstance: any = null;\n private isLoading = false;\n private lastValidResult: string = '';\n private viewStateMap = new WeakMap\n \n \n \n \n \n \n \n \n \n
\n\n \n \n \n \n \n \n
\n\n
\n\n \n {{ language }}\n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n \n \n \n 图表\n \n \n 代码\n \n \n
\n \n @if (showMermaidDiagram && isMermaid && !contentTemplate) {\n \n } @else if(!contentTemplate) {\n \n \n }\n
\n\n","import type { Options, PluginSimple, PluginWithOptions, PluginWithParams } from 'markdown-it';\nimport type { Token } from 'markdown-it';\nexport interface MermaidConfig {\n theme?: string;\n}\n\nexport interface CustomXssRule {\n key: string;\n value: string[] | null;\n}\n\nexport interface CodBlockData {\n code: string;\n language: string;\n}\n\nexport type CodeBlockSlot = {\n actions?: () => void;\n header?: () => void;\n content?: () => void;\n};\n\nexport type Theme = 'light' | 'dark';\n\nexport type TypingStyle = 'normal' | 'cursor' | 'color' | 'gradient';\n\nexport type IntervalType = number | [number, number];\n\nexport const defaultTypingConfig = {\n step: 2,\n interval: 50,\n style: 'normal' as TypingStyle,\n};\n\nexport interface MdPlugin {\n plugin: PluginSimple | PluginWithOptions | PluginWithParams;\n opts?: unknown;\n}\n\nexport interface MarkdownCardProps {\n content?: string;\n typing?: boolean;\n enableThink?: boolean;\n typingOptions?: {\n step?: number;\n interval?: number | [number, number];\n style?: TypingStyle;\n };\n thinkOptions?: {\n customClass?: string;\n };\n mdOptions?: Options;\n mdPlugins?: Array`)\n ?.replace('', '
') || ''\n );\n };\n\n parseTypingContent = (content: string) => {\n const { typingOptions } = this.getProps();\n const { typingIndex } = this.getStates();\n content = content.slice(0, typingIndex) || '';\n const options = { ...defaultTypingConfig, ...typingOptions };\n\n if (options.style === 'cursor') {\n content += `|`;\n } else if (options.style === 'color' || options.style === 'gradient') {\n content =\n content.slice(0, -5) +\n `${content.slice(-5)}`;\n }\n return content || '';\n };\n\n parseContent = () => {\n const { content, thinkOptions, enableThink } = this.getProps();\n const { typing, isTyping } = this.getStates();\n let parseContent = content || '';\n if (typing && isTyping) {\n parseContent = this.parseTypingContent(content);\n }\n\n if (enableThink) {\n parseContent = this.getThinkContent(content, thinkOptions);\n }\n\n parseContent = this._adapter.parseContent(parseContent);\n };\n\n typewriterStart = () => {\n const { typingOptions } = this.getProps();\n const { timer } = this.getStates();\n if (timer) {\n clearTimeout(timer);\n }\n\n this.setState({ isTyping: true });\n this._adapter.typingStart?.();\n const options = { ...defaultTypingConfig, ...typingOptions };\n\n const typingStep = () => {\n const { typingIndex, content } = this.getStates();\n\n let step = options.step || 2;\n if (Array.isArray(options.step)) {\n step =\n options.step[0] +\n Math.floor(Math.random() * (options.step[1] - options.step[0]));\n }\n let index = typingIndex + step;\n this.setState({ typingIndex: index });\n this.parseContent();\n this._adapter.typingEvent();\n\n if (index >= content!.length) {\n this.typewriterEnd();\n this.parseContent();\n return;\n }\n\n let typingTimeout = setTimeout(\n typingStep,\n typeof options.interval === 'number' ? options.interval : 50\n );\n this.setState({\n timer: typingTimeout,\n });\n };\n\n let typingStepTimeout = setTimeout(typingStep);\n this.setState({\n timer: typingStepTimeout,\n });\n };\n}\n","import type { Token } from \"markdown-it\";\nimport type { ASTNode } from './mdCard.types';\n// 判断是否自闭合标签\nexport const isSelfClosingTag = (token: Token): boolean => {\n // 判断token.content里面是否包含完整的HTML结构（所有开始标签都有对应的结束标签）\n const content = token.content || '';\n\n // 检查是否是自闭合标签（如 等）\n if (content.match(/<(\\w+)[^>]*\\/>/)) {\n return true;\n }\n\n // 检查是否包含完整的HTML结构\n const tagStack: string[] = [];\n const openTagRegex = /<(\\w+)[^>]*>/g;\n const closeTagRegex = /<\\/(\\w+)>/g;\n\n let openMatch;\n let closeMatch;\n\n // 重置正则表达式的lastIndex\n openTagRegex.lastIndex = 0;\n closeTagRegex.lastIndex = 0;\n\n // 按顺序处理所有标签\n const allMatches: Array<{ type: 'open' | 'close', tagName: string, index: number }> = [];\n\n // 收集所有开始标签\n while ((openMatch = openTagRegex.exec(content)) !== null) {\n allMatches.push({\n type: 'open',\n tagName: openMatch[1],\n index: openMatch.index\n });\n }\n\n // 收集所有结束标签\n while ((closeMatch = closeTagRegex.exec(content)) !== null) {\n allMatches.push({\n type: 'close',\n tagName: closeMatch[1],\n index: closeMatch.index\n });\n }\n\n // 按位置排序\n allMatches.sort((a, b) => a.index - b.index);\n\n // 检查标签是否完全匹配\n for (const match of allMatches) {\n if (match.type === 'open') {\n tagStack.push(match.tagName);\n } else {\n if (tagStack.length === 0) {\n return false; // 没有对应的开始标签\n }\n const lastOpenTag = tagStack[tagStack.length - 1];\n if (lastOpenTag !== match.tagName) {\n return false; // 标签不匹配\n }\n tagStack.pop();\n }\n }\n\n // 只有当所有标签都正确匹配时，才认为是自闭合的\n return tagStack.length === 0;\n}\n\n// 判断是否是结束标签\nexport const isClosingTag = (openToken: Token, closeToken: Token): boolean => {\n const openContent = openToken?.content || '';\n const closeContent = closeToken?.content || '';\n\n const openTagMatch = openContent.match(/<(\\w+)/);\n const closeTagMatch = closeContent.match(/<\\/(\\w+)/);\n\n if (openTagMatch && closeTagMatch) {\n return openTagMatch[1] === closeTagMatch[1];\n }\n\n return false;\n}\n\n// 创建ast树节点\nexport const genTreeNode = (node: Token | null): ASTNode => {\n return {\n nodeType: node ? node.type.replace('_open', '') : 'root',\n openNode: node,\n closeNode: null,\n children: [],\n vNodeKey: (node as any)?.vNodeKey || ''\n };\n};\n\n// 匹配成对html token\nexport const matchHtmlToken = (token: Token, stack: Token[]) => {\n // 简单排除单独的闭合标签\n const isCloseTag = token.content.startsWith(' {\n if (!tagName) return false\n try {\n document.createElement(tagName)\n return true\n } catch (error) {\n return false\n }\n}\n\nexport const tokensToAst = (tokens: Token[]) => {\n // 递归处理 inline 类型的 token\n const processInlineToken = (token: Token): ASTNode => {\n const node = genTreeNode(token);\n\n // 如果 token 有 children，递归处理它们\n if (token.children && token.children.length > 0) {\n node.children = tokensToAst(token.children);\n }\n\n return node;\n };\n\n // 创建根节点\n const rootNode = genTreeNode(null);\n let curr: ASTNode = rootNode;\n const stack: ASTNode[] = [];\n const htmlInlineTokenStack: Token[] = [];\n const htmlBlockTokenStack: Token[] = [];\n // 处理html token nesting值\n tokens.forEach((tok: Token, idx: number) => {\n (tok as any).vNodeKey = `mc-markdown-content-key-${idx}`;\n (tok as any).tokenIndex = idx;\n\n if (tok.type.includes('html_')) {\n if (isSelfClosingTag(tok)) {\n tok.nesting = 0;\n return;\n }\n\n const stack =\n tok.type === 'html_block'\n ? htmlBlockTokenStack\n : htmlInlineTokenStack;\n\n matchHtmlToken(tok, stack);\n }\n });\n\n tokens.forEach((tok: Token, idx: number) => {\n let tmp: ASTNode;\n if (tok.nesting === 1) {\n // 开始标签\n tmp = genTreeNode(tok);\n curr.children.push(tmp);\n stack.push(curr);\n curr = tmp;\n } else if (tok.nesting === -1) {\n // 结束标签\n curr.closeNode = tok;\n if (!stack.length) {\n throw new Error('AST stack underflow.');\n }\n tmp = stack.pop()!;\n curr = tmp;\n } else if (tok.nesting === 0) {\n // 自闭合标签或 inline 内容\n if (tok.type === 'inline' && tok.children && tok.children.length > 0) {\n // 对于 inline 类型，递归处理其 children\n const inlineNode = processInlineToken(tok);\n curr.children.push(inlineNode);\n } else {\n // 普通 token，直接添加\n curr.children.push(tok);\n }\n } else {\n throw new Error(`Invalid nesting level found in token index ${idx}.`);\n }\n });\n\n if (stack.length !== 0) {\n // throw new Error('Unbalanced block open/close tokens.');\n }\n return rootNode.children as ASTNode[];\n };\n\n// 声明一个utils静态默认导出\nexport default {\n isSelfClosingTag,\n isClosingTag,\n tokensToAst,\n genTreeNode,\n matchHtmlToken,\n isValidTagName\n}","import { DiffDOM } from 'diff-dom';\nimport {\n Component,\n Input,\n OnInit,\n OnChanges,\n OnDestroy,\n ChangeDetectorRef,\n SimpleChanges,\n ViewChild,\n Output,\n EventEmitter,\n Renderer2,\n ViewContainerRef,\n TemplateRef,\n} from '@angular/core';\nimport markdownit from 'markdown-it';\nimport type { Token } from 'markdown-it';\nimport { MDCardService } from '../components-common/MarkdownCard/common/MDCardService';\nimport type { ASTNode } from '../components-common/MarkdownCard/common/mdCard.types';\nimport { CodeBlockComponent } from './code-block.component';\nimport {\n MarkdownCardProps,\n defaultTypingConfig,\n} from '../components-common/MarkdownCard/common/mdCard.types';\nimport BaseComponent from '../Base/base.component';\nimport {\n MarkdownCardAdapter,\n MarkdownCardFoundation,\n} from '../components-common/MarkdownCard/foundation';\nimport MdParserUtils from '../components-common/MarkdownCard/common/parser';\n\n@Component({\n selector: 'mc-markdown-card',\n standalone: false,\n templateUrl: './markdown-card.component.html',\n styleUrls: ['./markdown-card.component.scss'],\n})\nexport class MarkdownCardComponent\n extends BaseComponent
${html}
`, 'text/html');\n const token = doc.body.firstChild;\n // 如果只有一个子节点，直接返回子节点而不是包含div\n if (token && token.childNodes.length === 1) {\n return token.firstChild;\n }\n return token;\n }\n\n private processFenceNode(token: Token) {\n const language =\n token.info?.replace(/\n \n
\n