@hejiayue/x-markdown-test 0.0.1-beta.121 → 0.0.1-beta.126

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (85) hide show
  1. package/LICENSE +21 -0
  2. package/dist/x-markdown.cjs10.js +1 -1
  3. package/dist/x-markdown.cjs13.js +1 -1
  4. package/dist/x-markdown.cjs14.js +1 -1
  5. package/dist/x-markdown.cjs14.js.map +1 -1
  6. package/dist/x-markdown.cjs15.js +1 -1
  7. package/dist/x-markdown.cjs15.js.map +1 -1
  8. package/dist/x-markdown.cjs16.js +1 -1
  9. package/dist/x-markdown.cjs17.js +1 -1
  10. package/dist/x-markdown.cjs18.js +1 -1
  11. package/dist/x-markdown.cjs19.js +1 -1
  12. package/dist/x-markdown.cjs19.js.map +1 -1
  13. package/dist/x-markdown.cjs21.js +2 -0
  14. package/dist/x-markdown.cjs21.js.map +1 -0
  15. package/dist/x-markdown.cjs22.js +1 -1
  16. package/dist/x-markdown.cjs22.js.map +1 -1
  17. package/dist/{x-markdown.cjs25.js → x-markdown.cjs24.js} +2 -2
  18. package/dist/{x-markdown.cjs25.js.map → x-markdown.cjs24.js.map} +1 -1
  19. package/dist/x-markdown.cjs26.js +2 -0
  20. package/dist/x-markdown.cjs26.js.map +1 -0
  21. package/dist/x-markdown.cjs27.js +1 -1
  22. package/dist/x-markdown.cjs27.js.map +1 -1
  23. package/dist/x-markdown.cjs28.js +1 -1
  24. package/dist/x-markdown.cjs28.js.map +1 -1
  25. package/dist/x-markdown.cjs30.js +2 -0
  26. package/dist/x-markdown.cjs30.js.map +1 -0
  27. package/dist/x-markdown.cjs31.js +1 -1
  28. package/dist/x-markdown.cjs31.js.map +1 -1
  29. package/dist/{x-markdown.cjs34.js → x-markdown.cjs33.js} +2 -2
  30. package/dist/x-markdown.cjs33.js.map +1 -0
  31. package/dist/x-markdown.cjs7.js +1 -1
  32. package/dist/x-markdown.cjs7.js.map +1 -1
  33. package/dist/x-markdown.es10.js +1 -1
  34. package/dist/x-markdown.es13.js +3 -3
  35. package/dist/x-markdown.es14.js +28 -69
  36. package/dist/x-markdown.es14.js.map +1 -1
  37. package/dist/x-markdown.es15.js +2 -31
  38. package/dist/x-markdown.es15.js.map +1 -1
  39. package/dist/x-markdown.es16.js +2 -1
  40. package/dist/x-markdown.es16.js.map +1 -1
  41. package/dist/x-markdown.es17.js +4 -2
  42. package/dist/x-markdown.es17.js.map +1 -1
  43. package/dist/x-markdown.es18.js +4 -4
  44. package/dist/x-markdown.es19.js +204 -5
  45. package/dist/x-markdown.es19.js.map +1 -1
  46. package/dist/x-markdown.es21.js +11 -0
  47. package/dist/x-markdown.es21.js.map +1 -0
  48. package/dist/x-markdown.es22.js +71 -7
  49. package/dist/x-markdown.es22.js.map +1 -1
  50. package/dist/{x-markdown.es25.js → x-markdown.es24.js} +4 -4
  51. package/dist/{x-markdown.es25.js.map → x-markdown.es24.js.map} +1 -1
  52. package/dist/x-markdown.es26.js +160 -0
  53. package/dist/x-markdown.es26.js.map +1 -0
  54. package/dist/x-markdown.es27.js +5 -157
  55. package/dist/x-markdown.es27.js.map +1 -1
  56. package/dist/x-markdown.es28.js +139 -5
  57. package/dist/x-markdown.es28.js.map +1 -1
  58. package/dist/x-markdown.es30.js +78 -0
  59. package/dist/x-markdown.es30.js.map +1 -0
  60. package/dist/x-markdown.es31.js +121 -74
  61. package/dist/x-markdown.es31.js.map +1 -1
  62. package/dist/x-markdown.es33.js +6 -0
  63. package/dist/x-markdown.es33.js.map +1 -0
  64. package/dist/x-markdown.es7.js +25 -14
  65. package/dist/x-markdown.es7.js.map +1 -1
  66. package/package.json +87 -85
  67. package/dist/x-markdown.cjs20.js +0 -2
  68. package/dist/x-markdown.cjs20.js.map +0 -1
  69. package/dist/x-markdown.cjs23.js +0 -2
  70. package/dist/x-markdown.cjs23.js.map +0 -1
  71. package/dist/x-markdown.cjs29.js +0 -2
  72. package/dist/x-markdown.cjs29.js.map +0 -1
  73. package/dist/x-markdown.cjs32.js +0 -2
  74. package/dist/x-markdown.cjs32.js.map +0 -1
  75. package/dist/x-markdown.cjs34.js.map +0 -1
  76. package/dist/x-markdown.es20.js +0 -207
  77. package/dist/x-markdown.es20.js.map +0 -1
  78. package/dist/x-markdown.es23.js +0 -75
  79. package/dist/x-markdown.es23.js.map +0 -1
  80. package/dist/x-markdown.es29.js +0 -142
  81. package/dist/x-markdown.es29.js.map +0 -1
  82. package/dist/x-markdown.es32.js +0 -125
  83. package/dist/x-markdown.es32.js.map +0 -1
  84. package/dist/x-markdown.es34.js +0 -6
  85. package/dist/x-markdown.es34.js.map +0 -1
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),a=require("lodash-es"),n=require("./x-markdown.cjs9.js"),t={key:0,class:"syntax-mermaid__loading"},r=["innerHTML"],i=e.defineComponent({__name:"SyntaxMermaid",props:{content:{default:""},id:{default:"mermaid-default"},isDark:{type:Boolean,default:!1},config:{default:()=>({})}},emits:["degraded","ready"],setup(i,{expose:o,emit:d}){const l=i,s=d,u=e.ref(null),c=e.computed(()=>l.content),m=e.computed(()=>({id:l.id,theme:l.isDark?"dark":"default",config:l.config,container:u.value})),v=n.useMermaid(c,m),f=e.ref(""),g=e.computed(()=>v.isLoading.value),y=e.computed(()=>v.error.value),p=e.ref(null),k=n.useMermaidZoom({container:p}),x=a.debounce(function(){e.nextTick(()=>{p.value&&k.initialize()})},500);return e.watch(()=>v.data.value,(e,a)=>{console.log("[SyntaxMermaid] mermaidResult.data.value changed:",{oldSvg:a,newSvg:e,isNewSvg:!!e,startsWithSvg:e?.trim().startsWith("<svg"),preview:e?.substring(0,50)}),e&&(f.value=e,x(),e.trim().startsWith("<svg")?(console.log("[SyntaxMermaid] Emitting ready event - Mermaid is available"),s("ready")):(console.log("[SyntaxMermaid] Emitting degraded event - Mermaid not available"),s("degraded")))},{immediate:!0}),e.watch(f,e=>{e&&x()}),e.onMounted(()=>{f.value&&x()}),o({svg:f,isLoading:g,error:y,containerRef:p,zoomIn:function(){k?.zoomIn()},zoomOut:function(){k?.zoomOut()},reset:function(){k?.reset()},fullscreen:function(){k?.fullscreen(),k?.reset()},download:function(){n.downloadSvgAsPng(f.value)},getSvg:function(){return f.value},reinitialize:function(){x()}}),(a,n)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"containerRef",ref:p,class:e.normalizeClass(["syntax-mermaid",{"syntax-mermaid--dark":l.isDark}])},[e.createElementVNode("div",{ref_key:"renderContainerRef",ref:u,class:"syntax-mermaid__render-container","aria-hidden":"true"},null,512),g.value?(e.openBlock(),e.createElementBlock("div",t,[e.renderSlot(a.$slots,"loading",{},()=>[n[0]||(n[0]=e.createElementVNode("span",{class:"syntax-mermaid__loading-text"},"加载中...",-1))])])):(e.openBlock(),e.createElementBlock("div",{key:1,class:"syntax-mermaid__content",innerHTML:f.value},null,8,r))],2))}});exports.default=i;
2
- //# sourceMappingURL=x-markdown.cjs29.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"x-markdown.cjs29.js","sources":["../src/components/Mermaid/SyntaxMermaid.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, nextTick, ref, watch, onMounted } from 'vue'\r\nimport { debounce } from 'lodash-es'\r\nimport { useMermaid, useMermaidZoom, downloadSvgAsPng } from '../../hooks'\r\n\r\ninterface SyntaxMermaidProps {\r\n content: string\r\n id?: string\r\n isDark?: boolean\r\n config?: Record<string, any>\r\n}\r\n\r\nconst props = withDefaults(defineProps<SyntaxMermaidProps>(), {\r\n content: '',\r\n id: 'mermaid-default',\r\n isDark: false,\r\n config: () => ({}),\r\n})\r\n\r\nconst emit = defineEmits<{\r\n degraded: []\r\n ready: []\r\n}>()\r\n\r\nconst renderContainerRef = ref<HTMLElement | null>(null)\r\n\r\nconst mermaidContent = computed(() => props.content)\r\nconst mermaidOptions = computed(() => ({\r\n id: props.id,\r\n theme: props.isDark ? 'dark' : 'default',\r\n config: props.config,\r\n container: renderContainerRef.value,\r\n}))\r\nconst mermaidResult = useMermaid(mermaidContent, mermaidOptions)\r\n\r\nconst svg = ref('')\r\nconst isLoading = computed(() => mermaidResult.isLoading.value)\r\nconst error = computed(() => mermaidResult.error.value)\r\n\r\nconst containerRef = ref<HTMLElement | null>(null)\r\n\r\nconst zoomControls = useMermaidZoom({\r\n container: containerRef,\r\n scaleStep: 0.2,\r\n minScale: 0.1,\r\n maxScale: 5,\r\n})\r\n\r\nconst debouncedInitialize = debounce(initializeZoom, 500)\r\n\r\nfunction initializeZoom() {\r\n nextTick(() => {\r\n if (containerRef.value) {\r\n zoomControls.initialize()\r\n }\r\n })\r\n}\r\n\r\nwatch(\r\n () => mermaidResult.data.value,\r\n (newSvg, oldSvg) => {\r\n console.log('[SyntaxMermaid] mermaidResult.data.value changed:', {\r\n oldSvg,\r\n newSvg,\r\n isNewSvg: !!newSvg,\r\n startsWithSvg: newSvg?.trim().startsWith('<svg'),\r\n preview: newSvg?.substring(0, 50)\r\n })\r\n\r\n if (newSvg) {\r\n svg.value = newSvg\r\n debouncedInitialize()\r\n\r\n // 检测是否成功渲染了 SVG(以 <svg 开头)\r\n if (newSvg.trim().startsWith('<svg')) {\r\n console.log('[SyntaxMermaid] Emitting ready event - Mermaid is available')\r\n emit('ready')\r\n } else {\r\n console.log('[SyntaxMermaid] Emitting degraded event - Mermaid not available')\r\n emit('degraded')\r\n }\r\n }\r\n },\r\n { immediate: true },\r\n)\r\n\r\nwatch(svg, (newSvg) => {\r\n if (newSvg) {\r\n debouncedInitialize()\r\n }\r\n})\r\n\r\nfunction zoomIn() {\r\n zoomControls?.zoomIn()\r\n}\r\n\r\nfunction zoomOut() {\r\n zoomControls?.zoomOut()\r\n}\r\n\r\nfunction reset() {\r\n zoomControls?.reset()\r\n}\r\n\r\nfunction fullscreen() {\r\n zoomControls?.fullscreen()\r\n zoomControls?.reset()\r\n}\r\n\r\nfunction download() {\r\n downloadSvgAsPng(svg.value)\r\n}\r\n\r\nfunction getSvg() {\r\n return svg.value\r\n}\r\n\r\nfunction reinitialize() {\r\n debouncedInitialize()\r\n}\r\n\r\nonMounted(() => {\r\n if (svg.value) {\r\n debouncedInitialize()\r\n }\r\n})\r\n\r\ndefineExpose({\r\n svg,\r\n isLoading,\r\n error,\r\n containerRef,\r\n zoomIn,\r\n zoomOut,\r\n reset,\r\n fullscreen,\r\n download,\r\n getSvg,\r\n reinitialize,\r\n})\r\n</script>\r\n\r\n<template>\r\n <div ref=\"containerRef\" class=\"syntax-mermaid\" :class=\"{ 'syntax-mermaid--dark': props.isDark }\">\r\n <div ref=\"renderContainerRef\" class=\"syntax-mermaid__render-container\" aria-hidden=\"true\" />\r\n\r\n <div v-if=\"isLoading\" class=\"syntax-mermaid__loading\">\r\n <slot name=\"loading\">\r\n <span class=\"syntax-mermaid__loading-text\">加载中...</span>\r\n </slot>\r\n </div>\r\n <div v-else class=\"syntax-mermaid__content\" v-html=\"svg\" />\r\n </div>\r\n</template>\r\n\r\n<style>\r\n.syntax-mermaid {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 200px;\r\n overflow: hidden;\r\n cursor: grab;\r\n position: relative;\r\n}\r\n\r\n.syntax-mermaid__render-container {\r\n position: absolute;\r\n max-height: 0;\r\n opacity: 0;\r\n overflow: hidden;\r\n pointer-events: none;\r\n}\r\n\r\n.syntax-mermaid:active {\r\n cursor: grabbing;\r\n}\r\n\r\n.syntax-mermaid__content {\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.syntax-mermaid__content svg {\r\n transform-origin: center center;\r\n max-width: 100%;\r\n max-height: 100%;\r\n}\r\n\r\n.syntax-mermaid:fullscreen {\r\n max-height: 100vh;\r\n}\r\n\r\n.syntax-mermaid:fullscreen .syntax-mermaid__content {\r\n justify-content: center;\r\n}\r\n\r\n.syntax-mermaid__loading {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n height: 100%;\r\n min-height: 200px;\r\n}\r\n\r\n.syntax-mermaid__loading-text {\r\n color: #666;\r\n font-size: 14px;\r\n}\r\n\r\n.syntax-mermaid--dark .syntax-mermaid__loading-text {\r\n color: #999;\r\n}\r\n</style>\r\n"],"names":["props","__props","emit","__emit","renderContainerRef","ref","mermaidContent","computed","content","mermaidOptions","id","theme","isDark","config","container","value","mermaidResult","useMermaid","svg","isLoading","error","containerRef","zoomControls","useMermaidZoom","debouncedInitialize","debounce","nextTick","initialize","watch","data","newSvg","oldSvg","console","log","isNewSvg","startsWithSvg","trim","startsWith","preview","substring","immediate","onMounted","__expose","zoomIn","zoomOut","reset","fullscreen","download","downloadSvgAsPng","getSvg","reinitialize","_createElementBlock","class","_normalizeClass","_createElementVNode","_openBlock","_hoisted_1","_renderSlot","_ctx","_cache","innerHTML"],"mappings":"+cAYA,MAAMA,EAAQC,EAORC,EAAOC,EAKPC,EAAqBC,EAAAA,IAAwB,MAE7CC,EAAiBC,EAAAA,SAAS,IAAMP,EAAMQ,SACtCC,EAAiBF,EAAAA,SAAS,KAAA,CAC9BG,GAAIV,EAAMU,GACVC,MAAOX,EAAMY,OAAS,OAAS,UAC/BC,OAAQb,EAAMa,OACdC,UAAWV,EAAmBW,SAE1BC,EAAgBC,EAAAA,WAAWX,EAAgBG,GAE3CS,EAAMb,EAAAA,IAAI,IACVc,EAAYZ,EAAAA,SAAS,IAAMS,EAAcG,UAAUJ,OACnDK,EAAQb,EAAAA,SAAS,IAAMS,EAAcI,MAAML,OAE3CM,EAAehB,EAAAA,IAAwB,MAEvCiB,EAAeC,EAAAA,eAAe,CAClCT,UAAWO,IAMPG,EAAsBC,EAAAA,SAE5B,WACEC,EAAAA,SAAS,KACHL,EAAaN,OACfO,EAAaK,cAGnB,EARqD,YAUrDC,EAAAA,MACE,IAAMZ,EAAca,KAAKd,MACzB,CAACe,EAAQC,KACPC,QAAQC,IAAI,oDAAqD,CAC/DF,SACAD,SACAI,WAAYJ,EACZK,cAAeL,GAAQM,OAAOC,WAAW,QACzCC,QAASR,GAAQS,UAAU,EAAG,MAG5BT,IACFZ,EAAIH,MAAQe,EACZN,IAGIM,EAAOM,OAAOC,WAAW,SAC3BL,QAAQC,IAAI,+DACZ/B,EAAK,WAEL8B,QAAQC,IAAI,mEACZ/B,EAAK,eAIX,CAAEsC,WAAW,IAGfZ,QAAMV,EAAMY,IACNA,GACFN,MAiCJiB,EAAAA,UAAU,KACJvB,EAAIH,OACNS,MAIJkB,EAAa,CACXxB,MACAC,YACAC,QACAC,eACAsB,OAxCF,WACErB,GAAcqB,QAChB,EAuCEC,QArCF,WACEtB,GAAcsB,SAChB,EAoCEC,MAlCF,WACEvB,GAAcuB,OAChB,EAiCEC,WA/BF,WACExB,GAAcwB,aACdxB,GAAcuB,OAChB,EA6BEE,SA3BF,WACEC,EAAAA,iBAAiB9B,EAAIH,MACvB,EA0BEkC,OAxBF,WACE,OAAO/B,EAAIH,KACb,EAuBEmC,aArBF,WACE1B,GACF,0BAwBE2B,EAAAA,mBASM,MAAA,SATG,eAAJ9C,IAAIgB,EAAe+B,MAAKC,EAAAA,eAAA,CAAC,iBAAgB,CAAA,uBAAmCrD,EAAMY,YACrF0C,EAAAA,mBAA4F,MAAA,SAAnF,qBAAJjD,IAAID,EAAqBgD,MAAM,mCAAmC,cAAY,kBAExEjC,EAAAJ,OAAXwC,EAAAA,YAAAJ,EAAAA,mBAIM,MAJNK,EAIM,CAHJC,EAAAA,WAEOC,sBAFP,IAEO,CADLC,EAAA,KAAAA,EAAA,GAAAL,EAAAA,mBAAwD,OAAA,CAAlDF,MAAM,gCAA+B,UAAM,wBAGrDD,EAAAA,mBAA2D,MAAA,OAA/CC,MAAM,0BAA0BQ,UAAQ1C,EAAAH"}
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),t=require("./x-markdown.cjs7.js"),o={class:"x-md-syntax-code-block"},l={class:"x-md-code-content"},n={key:0},a=e.defineComponent({name:"SyntaxCodeBlock",__name:"SyntaxCodeBlock",props:{code:{},language:{},lightTheme:{default:"vitesse-light"},darkTheme:{default:"vitesse-dark"},isDark:{type:Boolean,default:!1},colorReplacements:{},codeMaxHeight:{},enableAnimate:{type:Boolean,default:!1}},setup(a,{expose:c}){const r=a,s=e.computed(()=>r.code.trim()),i=e.computed(()=>r.language||"text"),d=e.computed(()=>r.isDark?r.darkTheme:r.lightTheme),{lines:m,preStyle:u}=t.useHighlight(s,{language:i,theme:d,colorReplacements:r.colorReplacements}),p=(e,t)=>t&&t[e.toLowerCase()]||e,k=e=>{if(!e)return{};if(e.htmlStyle){const t=(e=>{const t={};return Object.entries(e).forEach(([e,o])=>{const l=e.replace(/-([a-z])/g,(e,t)=>t.toUpperCase());t[l]=o}),t})(e.htmlStyle);if(!r.colorReplacements)return t;const o={...t};return o.color&&"string"==typeof o.color&&(o.color=p(o.color,r.colorReplacements)),o.backgroundColor&&"string"==typeof o.backgroundColor&&(o.backgroundColor=p(o.backgroundColor,r.colorReplacements)),o}const t={};return e.color&&(t.color=r.colorReplacements?p(e.color,r.colorReplacements):e.color),"italic"===e.fontStyle&&(t.fontStyle="italic"),e.fontWeight&&(t.fontWeight=e.fontWeight),t},g=e.computed(()=>!m.value?.length),y=e.computed(()=>({...u.value,maxHeight:r.codeMaxHeight}));return c({lines:m,code:s,language:i,actualTheme:d}),(t,a)=>(e.openBlock(),e.createElementBlock("div",o,[g.value?(e.openBlock(),e.createElementBlock("pre",{key:0,style:e.normalizeStyle(y.value)},[e.createElementVNode("code",null,e.toDisplayString(s.value),1)],4)):(e.openBlock(),e.createElementBlock("pre",{key:1,class:e.normalizeClass(["shiki",d.value]),style:e.normalizeStyle(y.value),tabindex:"0"},[a[4]||(a[4]=e.createTextVNode(" ",-1)),e.createElementVNode("code",l,[a[2]||(a[2]=e.createTextVNode("\n ",-1)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(m),(t,o)=>(e.openBlock(),e.createElementBlock("span",{key:o,class:"x-md-code-line"},[a[0]||(a[0]=e.createTextVNode("\n ",-1)),t.length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(t,(t,o)=>(e.openBlock(),e.createElementBlock("span",{key:o,style:e.normalizeStyle(k(t)),class:e.normalizeClass({"x-md-animated-word":r.enableAnimate})},e.toDisplayString(t.content),7))),128)):(e.openBlock(),e.createElementBlock("span",n," ")),a[1]||(a[1]=e.createTextVNode("\n ",-1))]))),128)),a[3]||(a[3]=e.createTextVNode("\n ",-1))]),a[5]||(a[5]=e.createTextVNode("\n ",-1))],6))]))}});exports.default=a;
2
- //# sourceMappingURL=x-markdown.cjs32.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"x-markdown.cjs32.js","sources":["../src/components/CodeBlock/SyntaxCodeBlock.vue"],"sourcesContent":["<template>\r\n <div class=\"x-md-syntax-code-block\">\r\n <pre v-if=\"showFallback\" :style=\"codeContainerStyle\"><code>{{ code }}</code></pre>\r\n <pre v-else :class=\"['shiki', actualTheme]\" :style=\"codeContainerStyle\" tabindex=\"0\">\r\n <code class=\"x-md-code-content\">\r\n <span v-for=\"(line, i) in lines\" :key=\"i\" class=\"x-md-code-line\">\r\n <span v-if=\"!line.length\">&nbsp;</span>\r\n <span \r\n v-else \r\n v-for=\"(token, j) in line\" \r\n :key=\"j\" \r\n :style=\"getTokenStyle(token)\"\r\n :class=\"{ 'x-md-animated-word': props.enableAnimate }\"\r\n >{{ token.content }}</span>\r\n </span>\r\n </code>\r\n </pre>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, type CSSProperties } from 'vue'\r\nimport { useHighlight } from '../../hooks/useHighlight'\r\nimport type { SyntaxCodeBlockProps } from './types'\r\n\r\ninterface HighlightToken {\r\n content?: string\r\n color?: string\r\n fontStyle?: 'italic' | null\r\n fontWeight?: 'normal' | 'bold' | null\r\n htmlStyle?: Record<string, string>\r\n}\r\n\r\ndefineOptions({\r\n name: 'SyntaxCodeBlock',\r\n})\r\n\r\nconst props = withDefaults(defineProps<SyntaxCodeBlockProps>(), {\r\n lightTheme: 'vitesse-light',\r\n darkTheme: 'vitesse-dark',\r\n isDark: false,\r\n enableAnimate: false,\r\n})\r\n\r\nconst code = computed(() => props.code.trim())\r\n\r\nconst language = computed(() => props.language || 'text')\r\n\r\nconst actualTheme = computed(() => (props.isDark ? props.darkTheme : props.lightTheme))\r\n\r\nconst { lines, preStyle } = useHighlight(code, {\r\n language,\r\n theme: actualTheme,\r\n colorReplacements: props.colorReplacements,\r\n})\r\n\r\nconst applyColorReplacement = (color: string, replacements?: Record<string, string>) => {\r\n if (!replacements) return color\r\n return replacements[color.toLowerCase()] || color\r\n}\r\n\r\nconst normalizeStyleKeys = (style: Record<string, string | number>): CSSProperties => {\r\n const normalized: CSSProperties = {}\r\n Object.entries(style).forEach(([key, value]) => {\r\n const camelKey = key.replace(/-([a-z])/g, (_, char) => char.toUpperCase())\r\n ;(normalized as Record<string, string | number>)[camelKey] = value\r\n })\r\n return normalized\r\n}\r\n\r\nconst getTokenStyle = (token: HighlightToken | null | undefined): CSSProperties => {\r\n // 处理 null/undefined token\r\n if (!token) {\r\n return {}\r\n }\r\n\r\n // 优先使用 htmlStyle(如果存在)\r\n if (token.htmlStyle) {\r\n const baseStyle = normalizeStyleKeys(token.htmlStyle)\r\n\r\n if (!props.colorReplacements) return baseStyle\r\n\r\n const style = { ...baseStyle }\r\n\r\n if (style.color && typeof style.color === 'string') {\r\n style.color = applyColorReplacement(style.color, props.colorReplacements)\r\n }\r\n if (style.backgroundColor && typeof style.backgroundColor === 'string') {\r\n style.backgroundColor = applyColorReplacement(style.backgroundColor, props.colorReplacements)\r\n }\r\n\r\n return style\r\n }\r\n\r\n // 直接使用 token 的 color、fontStyle、fontWeight 属性\r\n const style: CSSProperties = {}\r\n\r\n if (token.color) {\r\n style.color = props.colorReplacements\r\n ? applyColorReplacement(token.color, props.colorReplacements)\r\n : token.color\r\n }\r\n\r\n if (token.fontStyle === 'italic') {\r\n style.fontStyle = 'italic'\r\n }\r\n\r\n if (token.fontWeight) {\r\n style.fontWeight = token.fontWeight\r\n }\r\n\r\n return style\r\n}\r\n\r\nconst showFallback = computed(() => !lines.value?.length)\r\n\r\nconst codeContainerStyle = computed(() => ({\r\n ...preStyle.value,\r\n maxHeight: props.codeMaxHeight,\r\n}))\r\n\r\ndefineExpose({\r\n lines,\r\n code,\r\n language,\r\n actualTheme,\r\n})\r\n</script>\r\n\r\n<style scoped>\r\n.x-md-syntax-code-block {\r\n width: 100%;\r\n}\r\n\r\n.x-md-syntax-code-block pre {\r\n margin: 0;\r\n padding: 16px;\r\n overflow: auto;\r\n background: transparent !important;\r\n}\r\n\r\n.x-md-code-content {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.x-md-code-line {\r\n width: 100%;\r\n font-size: 14px;\r\n line-height: 1.5;\r\n display: flex;\r\n}\r\n</style>"],"names":["props","__props","code","computed","trim","language","actualTheme","isDark","darkTheme","lightTheme","lines","preStyle","useHighlight","theme","colorReplacements","applyColorReplacement","color","replacements","toLowerCase","getTokenStyle","token","htmlStyle","baseStyle","style","normalized","Object","entries","forEach","key","value","camelKey","replace","_","char","toUpperCase","normalizeStyleKeys","backgroundColor","fontStyle","fontWeight","showFallback","length","codeContainerStyle","maxHeight","codeMaxHeight","__expose","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","class","tabindex","_hoisted_2","_Fragment","_renderList","_unref","line","i","j","_normalizeStyle","_normalizeClass","enableAnimate","_toDisplayString","content"],"mappings":"4hBAqCA,MAAMA,EAAQC,EAORC,EAAOC,EAAAA,SAAS,IAAMH,EAAME,KAAKE,QAEjCC,EAAWF,EAAAA,SAAS,IAAMH,EAAMK,UAAY,QAE5CC,EAAcH,EAAAA,SAAS,IAAOH,EAAMO,OAASP,EAAMQ,UAAYR,EAAMS,aAErEC,MAAEA,EAAAC,SAAOA,GAAaC,EAAAA,aAAaV,EAAM,CAC7CG,WACAQ,MAAOP,EACPQ,kBAAmBd,EAAMc,oBAGrBC,EAAwB,CAACC,EAAeC,IACvCA,GACEA,EAAaD,EAAME,gBADAF,EAatBG,EAAiBC,IAErB,IAAKA,EACH,MAAO,CAAA,EAIT,GAAIA,EAAMC,UAAW,CACnB,MAAMC,EAjBiB,CAACC,IAC1B,MAAMC,EAA4B,CAAA,EAKlC,OAJAC,OAAOC,QAAQH,GAAOI,QAAQ,EAAEC,EAAKC,MACnC,MAAMC,EAAWF,EAAIG,QAAQ,YAAa,CAACC,EAAGC,IAASA,EAAKC,eAC1DV,EAA+CM,GAAYD,IAExDL,GAWaW,CAAmBf,EAAMC,WAE3C,IAAKrB,EAAMc,kBAAmB,OAAOQ,EAErC,MAAMC,EAAQ,IAAKD,GASnB,OAPIC,EAAMP,OAAgC,iBAAhBO,EAAMP,QAC9BO,EAAMP,MAAQD,EAAsBQ,EAAMP,MAAOhB,EAAMc,oBAErDS,EAAMa,iBAAoD,iBAA1Bb,EAAMa,kBACxCb,EAAMa,gBAAkBrB,EAAsBQ,EAAMa,gBAAiBpC,EAAMc,oBAGtES,CACT,CAGA,MAAMA,EAAuB,CAAA,EAgB7B,OAdIH,EAAMJ,QACRO,EAAMP,MAAQhB,EAAMc,kBAChBC,EAAsBK,EAAMJ,MAAOhB,EAAMc,mBACzCM,EAAMJ,OAGY,WAApBI,EAAMiB,YACRd,EAAMc,UAAY,UAGhBjB,EAAMkB,aACRf,EAAMe,WAAalB,EAAMkB,YAGpBf,GAGHgB,EAAepC,EAAAA,SAAS,KAAOO,EAAMmB,OAAOW,QAE5CC,EAAqBtC,EAAAA,SAAS,KAAA,IAC/BQ,EAASkB,MACZa,UAAW1C,EAAM2C,wBAGnBC,EAAa,CACXlC,QACAR,OACAG,WACAC,wBA5HAuC,cAAAC,qBAgBM,MAhBNC,EAgBM,CAfOR,EAAAV,qBAAXiB,EAAAA,mBAAkF,MAAA,OAAxDvB,uBAAOkB,EAAAZ,SAAoBmB,EAAAA,mBAAuB,8BAAd9C,EAAA2B,OAAI,uBAClEiB,EAAAA,mBAaM,MAAA,OAbOG,gCAAiB3C,EAAAuB,QAAeN,uBAAOkB,EAAAZ,OAAoBqB,SAAS,oCAAI,UACnF,IAAAF,EAAAA,mBAWO,OAXPG,EAWO,+BAXyB,cAC9B,KAAAN,EAAAA,WAAA,GAAAC,EAAAA,mBASOM,EAAAA,SAAA,KAAAC,aATmBC,EAAAA,MAAA5C,GAAK,CAAjB6C,EAAMC,mBAApBV,EAAAA,mBASO,OAAA,CAT2BlB,IAAK4B,EAAGP,MAAM,iDAAiB,gBAC/D,IAAaM,EAAKf,QAClBK,aAAA,GAAAC,qBAM2BM,EAAAA,SAAA,CAAAxB,IAAA,GAAAyB,EAAAA,WAJJE,EAAI,CAAjBnC,EAAOqC,mBAFjBX,EAAAA,mBAM2B,OAAA,CAHxBlB,IAAK6B,EACLlC,MAAKmC,EAAAA,eAAEvC,EAAcC,IACrB6B,MAAKU,EAAAA,eAAA,CAAA,qBAA0B3D,EAAM4D,iBACpCC,kBAAAzC,EAAM0C,SAAO,YAPjBjB,EAAAA,YAAAC,EAAAA,mBAAuC,SAAb,oCAOC,cAC7B,4CAAO,YACT,oCAAO,UACT"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"x-markdown.cjs34.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -1,207 +0,0 @@
1
- import { defineComponent, ref, computed, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, renderSlot, unref, toDisplayString, Fragment, renderList, normalizeStyle, createBlock, resolveDynamicComponent, createVNode, h } from "vue";
2
- import { useClipboard } from "./x-markdown.es27.js";
3
- import SyntaxCodeBlock from "./x-markdown.es28.js";
4
- const _hoisted_1 = { class: "x-md-code-header" };
5
- const _hoisted_2 = { class: "x-md-code-header__left" };
6
- const _hoisted_3 = ["title"];
7
- const _hoisted_4 = { class: "x-md-code-lang" };
8
- const _hoisted_5 = { class: "x-md-code-header__right" };
9
- const _hoisted_6 = ["title", "disabled", "onClick"];
10
- const _hoisted_7 = {
11
- key: 0,
12
- class: "x-md-copy-icon",
13
- width: "16",
14
- height: "16",
15
- xmlns: "http://www.w3.org/2000/svg",
16
- viewBox: "0 0 1024 1024"
17
- };
18
- const _hoisted_8 = {
19
- key: 1,
20
- class: "x-md-copy-icon",
21
- width: "16",
22
- height: "16",
23
- xmlns: "http://www.w3.org/2000/svg",
24
- viewBox: "0 0 1024 1024"
25
- };
26
- const _sfc_main = /* @__PURE__ */ defineComponent({
27
- ...{
28
- name: "CodeBlock"
29
- },
30
- __name: "index",
31
- props: {
32
- code: {},
33
- language: {},
34
- lightTheme: { default: "vitesse-light" },
35
- darkTheme: { default: "vitesse-dark" },
36
- isDark: { type: Boolean, default: false },
37
- colorReplacements: {},
38
- codeMaxHeight: {},
39
- showCodeBlockHeader: { type: Boolean, default: true },
40
- enableAnimate: { type: Boolean, default: false },
41
- codeBlockActions: { default: void 0 },
42
- stickyCodeBlockHeader: { type: Boolean, default: true }
43
- },
44
- setup(__props, { expose: __expose }) {
45
- const { copy, copied } = useClipboard({ copiedDuring: 2e3 });
46
- const collapsed = ref(false);
47
- const syntaxCodeBlockRef = ref(null);
48
- const toggleCollapse = () => {
49
- collapsed.value = !collapsed.value;
50
- };
51
- const props = __props;
52
- const code = computed(() => props.code.trim());
53
- const language = computed(() => props.language || "text");
54
- const normalizedActions = computed(() => {
55
- return props.codeBlockActions || [];
56
- });
57
- const filteredActions = computed(() => {
58
- return normalizedActions.value.filter((action) => {
59
- if (!action.show) return true;
60
- return action.show(slotProps.value);
61
- });
62
- });
63
- const slotProps = computed(() => ({
64
- language: language.value,
65
- code: code.value,
66
- copy,
67
- copied: copied.value,
68
- collapsed: collapsed.value,
69
- toggleCollapse
70
- }));
71
- function renderActionIcon(action) {
72
- if (!action.icon) return null;
73
- if (typeof action.icon === "string") {
74
- return h("span", {
75
- class: "x-md-action-icon",
76
- innerHTML: action.icon
77
- });
78
- }
79
- if (typeof action.icon === "function") {
80
- try {
81
- const result = action.icon(slotProps.value);
82
- if (result && typeof result === "object" && "__v_isVNode" in result) {
83
- return result;
84
- }
85
- } catch {
86
- }
87
- return h(action.icon);
88
- }
89
- return h(action.icon);
90
- }
91
- function handleActionClick(action) {
92
- if (action.disabled) return;
93
- action.onClick?.(slotProps.value);
94
- }
95
- __expose({
96
- copy,
97
- copied,
98
- collapsed,
99
- toggleCollapse,
100
- syntaxCodeBlockRef
101
- });
102
- return (_ctx, _cache) => {
103
- return openBlock(), createElementBlock("div", {
104
- class: normalizeClass(["x-md-code-block", { "x-md-code-block--dark": props.isDark }])
105
- }, [
106
- __props.showCodeBlockHeader ? (openBlock(), createElementBlock("div", {
107
- key: 0,
108
- class: normalizeClass(["x-md-code-header-wrapper", [{ "x-md-code-header-wrapper--sticky": props.stickyCodeBlockHeader }, { "x-md-code-header-wrapper--collapsed": collapsed.value }]])
109
- }, [
110
- createElementVNode("div", _hoisted_1, [
111
- renderSlot(_ctx.$slots, "codeHeader", {
112
- language: language.value,
113
- code: code.value,
114
- copy: unref(copy),
115
- copied: unref(copied),
116
- collapsed: collapsed.value,
117
- toggleCollapse
118
- }, () => [
119
- createElementVNode("div", _hoisted_2, [
120
- createElementVNode("button", {
121
- class: normalizeClass(["x-md-collapse-btn", { "x-md-collapse-btn--collapsed": collapsed.value }]),
122
- onClick: toggleCollapse,
123
- title: collapsed.value ? "展开代码" : "折叠代码"
124
- }, [..._cache[1] || (_cache[1] = [
125
- createElementVNode("svg", {
126
- class: "x-md-collapse-icon",
127
- viewBox: "0 0 24 24",
128
- width: "14",
129
- height: "14",
130
- fill: "none",
131
- stroke: "currentColor",
132
- "stroke-width": "2",
133
- "stroke-linecap": "round",
134
- "stroke-linejoin": "round"
135
- }, [
136
- createElementVNode("polyline", { points: "6 9 12 15 18 9" })
137
- ], -1)
138
- ])], 10, _hoisted_3),
139
- createElementVNode("span", _hoisted_4, toDisplayString(language.value), 1)
140
- ]),
141
- createElementVNode("div", _hoisted_5, [
142
- renderSlot(_ctx.$slots, "codeActions", {
143
- code: code.value,
144
- copy: unref(copy),
145
- copied: unref(copied)
146
- }, () => [
147
- (openBlock(true), createElementBlock(Fragment, null, renderList(filteredActions.value, (action) => {
148
- return openBlock(), createElementBlock("button", {
149
- key: action.key,
150
- class: normalizeClass(["x-md-action-btn", [action.class, { "x-md-action-btn--disabled": action.disabled }]]),
151
- style: normalizeStyle(action.style),
152
- title: action.title,
153
- disabled: action.disabled,
154
- onClick: ($event) => handleActionClick(action)
155
- }, [
156
- action.icon ? (openBlock(), createBlock(resolveDynamicComponent(renderActionIcon(action)), { key: 0 })) : createCommentVNode("", true)
157
- ], 14, _hoisted_6);
158
- }), 128)),
159
- createElementVNode("button", {
160
- class: normalizeClass(["x-md-copy-btn", { "x-md-copy-btn--copied": unref(copied) }]),
161
- onClick: _cache[0] || (_cache[0] = ($event) => unref(copy)(code.value))
162
- }, [
163
- unref(copied) ? (openBlock(), createElementBlock("svg", _hoisted_7, [..._cache[2] || (_cache[2] = [
164
- createElementVNode("path", {
165
- fill: "currentColor",
166
- d: "M406.656 706.944 195.84 496.256a32 32 0 1 0-45.248 45.248l256 256 512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z"
167
- }, null, -1)
168
- ])])) : (openBlock(), createElementBlock("svg", _hoisted_8, [..._cache[3] || (_cache[3] = [
169
- createElementVNode("path", {
170
- fill: "currentColor",
171
- d: "M768 832a128 128 0 0 1-128 128H192A128 128 0 0 1 64 832V384a128 128 0 0 1 128-128v64a64 64 0 0 0-64 64v448a64 64 0 0 0 64 64h448a64 64 0 0 0 64-64z"
172
- }, null, -1),
173
- createElementVNode("path", {
174
- fill: "currentColor",
175
- d: "M384 128a64 64 0 0 0-64 64v448a64 64 0 0 0 64 64h448a64 64 0 0 0 64-64V192a64 64 0 0 0-64-64zm0-64h448a128 128 0 0 1 128 128v448a128 128 0 0 1-128 128H384a128 128 0 0 1-128-128V192A128 128 0 0 1 384 64"
176
- }, null, -1)
177
- ])]))
178
- ], 2)
179
- ], true)
180
- ])
181
- ], true)
182
- ])
183
- ], 2)) : createCommentVNode("", true),
184
- createElementVNode("div", {
185
- class: normalizeClass(["x-md-code-body", { "x-md-code-body--collapsed": collapsed.value }])
186
- }, [
187
- createVNode(SyntaxCodeBlock, {
188
- ref_key: "syntaxCodeBlockRef",
189
- ref: syntaxCodeBlockRef,
190
- code: code.value,
191
- language: language.value,
192
- "light-theme": props.lightTheme,
193
- "dark-theme": props.darkTheme,
194
- "is-dark": props.isDark,
195
- "color-replacements": props.colorReplacements,
196
- "code-max-height": props.codeMaxHeight,
197
- "enable-animate": props.enableAnimate
198
- }, null, 8, ["code", "language", "light-theme", "dark-theme", "is-dark", "color-replacements", "code-max-height", "enable-animate"])
199
- ], 2)
200
- ], 2);
201
- };
202
- }
203
- });
204
- export {
205
- _sfc_main as default
206
- };
207
- //# sourceMappingURL=x-markdown.es20.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"x-markdown.es20.js","sources":["../src/components/CodeBlock/index.vue"],"sourcesContent":["<template>\r\n <div class=\"x-md-code-block\" :class=\"{ 'x-md-code-block--dark': props.isDark }\">\r\n <!-- 头部区域:支持完全自定义或默认渲染 -->\r\n <div\r\n v-if=\"showCodeBlockHeader\"\r\n class=\"x-md-code-header-wrapper\"\r\n :class=\"[{'x-md-code-header-wrapper--sticky': props.stickyCodeBlockHeader }, { 'x-md-code-header-wrapper--collapsed': collapsed }]\"\r\n >\r\n <div class=\"x-md-code-header\">\r\n <slot\r\n name=\"codeHeader\"\r\n :language=\"language\"\r\n :code=\"code\"\r\n :copy=\"copy\"\r\n :copied=\"copied\"\r\n :collapsed=\"collapsed\"\r\n :toggleCollapse=\"toggleCollapse\"\r\n >\r\n <div class=\"x-md-code-header__left\">\r\n <button\r\n class=\"x-md-collapse-btn\"\r\n :class=\"{ 'x-md-collapse-btn--collapsed': collapsed }\"\r\n @click=\"toggleCollapse\"\r\n :title=\"collapsed ? '展开代码' : '折叠代码'\"\r\n >\r\n <svg\r\n class=\"x-md-collapse-icon\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"14\"\r\n height=\"14\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <polyline points=\"6 9 12 15 18 9\"></polyline>\r\n </svg>\r\n </button>\r\n <span class=\"x-md-code-lang\">{{ language }}</span>\r\n </div>\r\n <div class=\"x-md-code-header__right\">\r\n <slot name=\"codeActions\" :code=\"code\" :copy=\"copy\" :copied=\"copied\">\r\n <button\r\n v-for=\"action in filteredActions\"\r\n :key=\"action.key\"\r\n class=\"x-md-action-btn\"\r\n :class=\"[action.class, { 'x-md-action-btn--disabled': action.disabled }]\"\r\n :style=\"action.style\"\r\n :title=\"action.title\"\r\n :disabled=\"action.disabled\"\r\n @click=\"handleActionClick(action)\"\r\n >\r\n <component :is=\"renderActionIcon(action)\" v-if=\"action.icon\" />\r\n </button>\r\n <button class=\"x-md-copy-btn\" :class=\"{ 'x-md-copy-btn--copied': copied }\" @click=\"copy(code)\">\r\n <svg\r\n v-if=\"copied\"\r\n class=\"x-md-copy-icon\"\r\n width=\"16\"\r\n height=\"16\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1024 1024\"\r\n >\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M406.656 706.944 195.84 496.256a32 32 0 1 0-45.248 45.248l256 256 512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z\"\r\n />\r\n </svg>\r\n <svg\r\n v-else\r\n class=\"x-md-copy-icon\"\r\n width=\"16\"\r\n height=\"16\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1024 1024\"\r\n >\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M768 832a128 128 0 0 1-128 128H192A128 128 0 0 1 64 832V384a128 128 0 0 1 128-128v64a64 64 0 0 0-64 64v448a64 64 0 0 0 64 64h448a64 64 0 0 0 64-64z\"\r\n />\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M384 128a64 64 0 0 0-64 64v448a64 64 0 0 0 64 64h448a64 64 0 0 0 64-64V192a64 64 0 0 0-64-64zm0-64h448a128 128 0 0 1 128 128v448a128 128 0 0 1-128 128H384a128 128 0 0 1-128-128V192A128 128 0 0 1 384 64\"\r\n />\r\n </svg>\r\n </button>\r\n </slot>\r\n </div>\r\n </slot>\r\n </div>\r\n </div>\r\n <div class=\"x-md-code-body\" :class=\"{ 'x-md-code-body--collapsed': collapsed }\">\r\n <SyntaxCodeBlock\r\n ref=\"syntaxCodeBlockRef\"\r\n :code=\"code\"\r\n :language=\"language\"\r\n :light-theme=\"props.lightTheme\"\r\n :dark-theme=\"props.darkTheme\"\r\n :is-dark=\"props.isDark\"\r\n :color-replacements=\"props.colorReplacements\"\r\n :code-max-height=\"props.codeMaxHeight\"\r\n :enable-animate=\"props.enableAnimate\"\r\n />\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, ref, h, type VNode } from 'vue'\r\nimport { useClipboard } from '@vueuse/core'\r\nimport type { CodeBlockProps, CodeBlockAction, CodeBlockSlotProps } from './types'\r\nimport SyntaxCodeBlock from './SyntaxCodeBlock.vue'\r\n\r\ndefineOptions({\r\n name: 'CodeBlock',\r\n})\r\n\r\nconst { copy, copied } = useClipboard({ copiedDuring: 2000 })\r\n\r\nconst collapsed = ref(false)\r\n\r\nconst syntaxCodeBlockRef = ref<InstanceType<typeof SyntaxCodeBlock> | null>(null)\r\n\r\nconst toggleCollapse = () => {\r\n collapsed.value = !collapsed.value\r\n}\r\n\r\nconst props = withDefaults(defineProps<CodeBlockProps>(), {\r\n lightTheme: 'vitesse-light',\r\n darkTheme: 'vitesse-dark',\r\n isDark: false,\r\n showCodeBlockHeader: true,\r\n enableAnimate: false,\r\n codeBlockActions: undefined,\r\n stickyCodeBlockHeader: true,\r\n})\r\n\r\nconst code = computed(() => props.code.trim())\r\n\r\nconst language = computed(() => props.language || 'text')\r\n\r\nconst normalizedActions = computed<CodeBlockAction[]>(() => {\r\n return props.codeBlockActions || []\r\n})\r\n\r\nconst filteredActions = computed<CodeBlockAction[]>(() => {\r\n return normalizedActions.value.filter((action) => {\r\n if (!action.show) return true\r\n return action.show(slotProps.value)\r\n })\r\n})\r\n\r\nconst slotProps = computed<CodeBlockSlotProps>(() => ({\r\n language: language.value,\r\n code: code.value,\r\n copy,\r\n copied: copied.value,\r\n collapsed: collapsed.value,\r\n toggleCollapse,\r\n}))\r\n\r\nfunction renderActionIcon(action: CodeBlockAction): VNode | null {\r\n if (!action.icon) return null\r\n\r\n if (typeof action.icon === 'string') {\r\n return h('span', {\r\n class: 'x-md-action-icon',\r\n innerHTML: action.icon,\r\n })\r\n }\r\n\r\n if (typeof action.icon === 'function') {\r\n try {\r\n const result = (action.icon as (props: CodeBlockSlotProps) => VNode)(slotProps.value)\r\n if (result && typeof result === 'object' && '__v_isVNode' in result) {\r\n return result\r\n }\r\n } catch {\r\n }\r\n return h(action.icon as any)\r\n }\r\n\r\n return h(action.icon as any)\r\n}\r\n\r\nfunction handleActionClick(action: CodeBlockAction) {\r\n if (action.disabled) return\r\n action.onClick?.(slotProps.value)\r\n}\r\n\r\ndefineExpose({\r\n copy,\r\n copied,\r\n collapsed,\r\n toggleCollapse,\r\n syntaxCodeBlockRef,\r\n})\r\n</script>\r\n\r\n<style scoped>\r\n.x-md-code-block {\r\n border-radius: 8px;\r\n overflow: hidden;\r\n font-size: 0;\r\n background: rgba(0, 0, 0, 0.03);\r\n}\r\n\r\n.x-md-code-block.x-md-code-block--dark {\r\n background: rgba(255, 255, 255, 0.13);\r\n}\r\n\r\n.x-md-code-header-wrapper--sticky {\r\n background: #fff;\r\n position: sticky;\r\n top: 0;\r\n}\r\n\r\n.x-md-code-block.x-md-code-block--dark .x-md-code-header-wrapper--sticky {\r\n background: #1a1a1a;\r\n}\r\n\r\n.x-md-code-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 8px 16px;\r\n background: rgba(0, 0, 0, 0.05);\r\n color: #333;\r\n}\r\n\r\n.x-md-code-block .x-md-code-header-wrapper--sticky .x-md-code-header{\r\n background: rgba(235, 235, 235);\r\n border-radius: 8px 8px 0 0;\r\n}\r\n\r\n.x-md-code-block:has(.x-md-code-header-wrapper--sticky) {\r\n overflow: visible;\r\n}\r\n\r\n.x-md-code-block.x-md-code-block--dark .x-md-code-header {\r\n background: rgba(0, 0, 0, 0.25);\r\n color: #fff;\r\n}\r\n\r\n.x-md-code-block.x-md-code-block--dark .x-md-code-header-wrapper--sticky .x-md-code-header {\r\n background: rgba(44, 44, 44);\r\n}\r\n\r\n.x-md-code-block .x-md-code-header-wrapper--collapsed .x-md-code-header {\r\n border-radius: 8px;\r\n}\r\n\r\n.x-md-code-header__left,\r\n.x-md-code-header__right {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.x-md-code-lang {\r\n font-size: 12px;\r\n font-weight: 500;\r\n opacity: 0.6;\r\n text-transform: lowercase;\r\n}\r\n\r\n.x-md-copy-btn {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 28px;\r\n height: 28px;\r\n padding: 0;\r\n border: none;\r\n border-radius: 4px;\r\n background: transparent;\r\n color: inherit;\r\n cursor: pointer;\r\n opacity: 0.7;\r\n transition: all 0.2s ease;\r\n}\r\n\r\n.x-md-copy-btn:hover {\r\n opacity: 1;\r\n background: rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.x-md-code-block.x-md-code-block--dark .x-md-copy-btn:hover {\r\n background: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.x-md-copy-btn.x-md-copy-btn--copied {\r\n opacity: 1;\r\n color: #22c55e;\r\n}\r\n\r\n.x-md-copy-icon {\r\n flex-shrink: 0;\r\n}\r\n\r\n.x-md-action-btn {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 28px;\r\n height: 28px;\r\n padding: 0;\r\n border: none;\r\n border-radius: 4px;\r\n background: transparent;\r\n color: inherit;\r\n cursor: pointer;\r\n opacity: 0.7;\r\n transition: all 0.2s ease;\r\n}\r\n\r\n.x-md-action-btn:hover {\r\n opacity: 1;\r\n background: rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.x-md-code-block.x-md-code-block--dark .x-md-action-btn:hover {\r\n background: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.x-md-action-btn.x-md-action-btn--disabled {\r\n opacity: 0.3;\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n.x-md-action-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.x-md-action-icon :deep(svg) {\r\n width: 16px;\r\n height: 16px;\r\n flex-shrink: 0;\r\n}\r\n\r\n.x-md-collapse-btn {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 20px;\r\n height: 20px;\r\n padding: 0;\r\n border: none;\r\n border-radius: 4px;\r\n background: transparent;\r\n color: inherit;\r\n cursor: pointer;\r\n opacity: 0.5;\r\n transition: all 0.2s ease;\r\n}\r\n\r\n.x-md-collapse-btn:hover {\r\n opacity: 1;\r\n background: rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.x-md-code-block.x-md-code-block--dark .x-md-collapse-btn:hover {\r\n background: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.x-md-collapse-icon {\r\n transition: transform 0.2s ease;\r\n}\r\n\r\n.x-md-collapse-btn--collapsed .x-md-collapse-icon {\r\n transform: rotate(-90deg);\r\n}\r\n\r\n.x-md-code-body {\r\n overflow: hidden;\r\n transition:\r\n max-height 0.3s ease,\r\n opacity 0.2s ease;\r\n}\r\n\r\n.x-md-code-body--collapsed {\r\n max-height: 0 !important;\r\n opacity: 0;\r\n}\r\n</style>"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","_unref","_toDisplayString","_Fragment","_renderList","_normalizeStyle","_createBlock","_resolveDynamicComponent","_openBlock","_createVNode"],"mappings":"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"}
@@ -1,75 +0,0 @@
1
- import { defineComponent, onMounted, computed, createElementBlock, openBlock, normalizeClass, createElementVNode, normalizeStyle, Fragment, createTextVNode, toDisplayString, renderList } from "vue";
2
- import { useHighlight } from "./x-markdown.es7.js";
3
- const SHIKI_CORE_PKG = "@shikijs/core";
4
- const _sfc_main = /* @__PURE__ */ defineComponent({
5
- __name: "index",
6
- props: {
7
- raw: { default: () => ({}) },
8
- isDark: { type: Boolean, default: false },
9
- shikiTheme: { default: () => ["vitesse-light", "vitesse-dark"] },
10
- enableAnimate: { type: Boolean, default: false }
11
- },
12
- setup(__props) {
13
- let getTokenStyleObjectFn = null;
14
- onMounted(async () => {
15
- const mod = await Function(`return import('${SHIKI_CORE_PKG}')`)().catch(() => {
16
- return { getTokenStyleObject: () => ({}) };
17
- });
18
- getTokenStyleObjectFn = mod.getTokenStyleObject;
19
- });
20
- const props = __props;
21
- const content = computed(() => props.raw?.content ?? "");
22
- const language = computed(() => props.raw?.language || "ts");
23
- const actualTheme = computed(() => props.isDark ? props.shikiTheme[1] : props.shikiTheme[0]);
24
- const { lines, preStyle } = useHighlight(content, {
25
- language,
26
- theme: actualTheme
27
- });
28
- const flatTokens = computed(() => lines.value.flat());
29
- const codeStyle = computed(() => preStyle.value || {});
30
- const normalizeStyleKeys = (style) => {
31
- const normalized = {};
32
- Object.entries(style).forEach(([key, value]) => {
33
- const camelKey = key.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
34
- normalized[camelKey] = value;
35
- });
36
- return normalized;
37
- };
38
- const getTokenStyle = (token) => {
39
- if (token.htmlStyle) {
40
- return normalizeStyleKeys(token.htmlStyle);
41
- }
42
- if (!getTokenStyleObjectFn) {
43
- return {};
44
- }
45
- const rawStyle = getTokenStyleObjectFn(token);
46
- return normalizeStyleKeys(rawStyle);
47
- };
48
- return (_ctx, _cache) => {
49
- return openBlock(), createElementBlock("div", {
50
- class: normalizeClass(["x-md-inline-code", {
51
- "x-md-inline-code--dark": props.isDark,
52
- "x-md-animated-word": props.enableAnimate
53
- }])
54
- }, [
55
- createElementVNode("code", {
56
- style: normalizeStyle(codeStyle.value)
57
- }, [
58
- !flatTokens.value.length ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
59
- createTextVNode(toDisplayString(content.value), 1)
60
- ], 64)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(flatTokens.value, (token, i) => {
61
- return openBlock(), createElementBlock("span", {
62
- key: i,
63
- style: normalizeStyle(getTokenStyle(token)),
64
- class: normalizeClass({ "x-md-animated-word": props.enableAnimate })
65
- }, toDisplayString(token.content), 7);
66
- }), 128))
67
- ], 4)
68
- ], 2);
69
- };
70
- }
71
- });
72
- export {
73
- _sfc_main as default
74
- };
75
- //# sourceMappingURL=x-markdown.es23.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"x-markdown.es23.js","sources":["../src/components/CodeLine/index.vue"],"sourcesContent":["<template>\r\n <!-- 行内代码容器 - 支持深浅色主题和语法高亮 -->\r\n <div\r\n class=\"x-md-inline-code\"\r\n :class=\"{\r\n 'x-md-inline-code--dark': props.isDark,\r\n 'x-md-animated-word': props.enableAnimate,\r\n }\"\r\n >\r\n <code :style=\"codeStyle\">\r\n <!-- 无高亮时显示纯文本 -->\r\n <template v-if=\"!flatTokens.length\">{{ content }}</template>\r\n <!-- 有高亮时渲染 token -->\r\n <template v-else>\r\n <span\r\n v-for=\"(token, i) in flatTokens\"\r\n :key=\"i\"\r\n :style=\"getTokenStyle(token)\"\r\n :class=\"{ 'x-md-animated-word': props.enableAnimate }\"\r\n >{{ token.content }}</span\r\n >\r\n </template>\r\n </code>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, onMounted, type CSSProperties } from 'vue'\r\nimport { useHighlight } from '../../hooks/useHighlight'\r\nimport type { CodeLineProps } from './types'\r\n\r\nconst SHIKI_CORE_PKG = '@shikijs/core'\r\n\r\nlet getTokenStyleObjectFn: any = null\r\n\r\nonMounted(async () => {\r\n const mod = await (Function(`return import('${SHIKI_CORE_PKG}')`)())\r\n .catch(() => {\r\n return { getTokenStyleObject: () => ({}) }\r\n })\r\n getTokenStyleObjectFn = mod.getTokenStyleObject\r\n})\r\n\r\nconst props = withDefaults(defineProps<CodeLineProps>(), {\r\n raw: () => ({}),\r\n isDark: false,\r\n shikiTheme: () => ['vitesse-light', 'vitesse-dark'],\r\n enableAnimate: false,\r\n})\r\n\r\nconst content = computed(() => props.raw?.content ?? '')\r\nconst language = computed(() => props.raw?.language || 'ts')\r\nconst actualTheme = computed(() => (props.isDark ? props.shikiTheme[1] : props.shikiTheme[0]))\r\n\r\nconst { lines, preStyle } = useHighlight(content, {\r\n language,\r\n theme: actualTheme,\r\n})\r\n\r\nconst flatTokens = computed(() => lines.value.flat())\r\nconst codeStyle = computed<CSSProperties>(() => preStyle.value || {})\r\n\r\nconst normalizeStyleKeys = (style: Record<string, string | number>): CSSProperties => {\r\n const normalized: CSSProperties = {}\r\n Object.entries(style).forEach(([key, value]) => {\r\n const camelKey = key.replace(/-([a-z])/g, (_, char) => char.toUpperCase())\r\n ;(normalized as Record<string, string | number>)[camelKey] = value\r\n })\r\n return normalized\r\n}\r\n\r\nconst getTokenStyle = (token: ThemedToken): CSSProperties => {\r\n if (token.htmlStyle) {\r\n return normalizeStyleKeys(token.htmlStyle)\r\n }\r\n\r\n if (!getTokenStyleObjectFn) {\r\n return {}\r\n }\r\n\r\n const rawStyle = getTokenStyleObjectFn(token)\r\n return normalizeStyleKeys(rawStyle)\r\n}\r\n</script>\r\n<style scoped>\r\n.x-md-inline-code {\r\n display: inline-block;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n font-size: 14px;\r\n background: rgba(0, 0, 0, 0.03);\r\n vertical-align: sub;\r\n}\r\n\r\n.x-md-inline-code.x-md-inline-code--dark {\r\n background: rgba(255, 255, 255, 0.13);\r\n}\r\n.x-md-inline-code code {\r\n background: transparent !important;\r\n}\r\n</style>\r\n"],"names":["_createElementBlock","_createElementVNode","_Fragment","_openBlock","_renderList","_normalizeStyle","_normalizeClass","_toDisplayString"],"mappings":";;AA+BA,MAAM,iBAAiB;;;;;;;;;;AAEvB,QAAI,wBAA6B;AAEjC,cAAU,YAAY;AACpB,YAAM,MAAM,MAAO,SAAS,kBAAkB,cAAc,IAAI,IAC7D,MAAM,MAAM;AACX,eAAO,EAAE,qBAAqB,OAAO,CAAA,GAAC;AAAA,MACxC,CAAC;AACH,8BAAwB,IAAI;AAAA,IAC9B,CAAC;AAED,UAAM,QAAQ;AAOd,UAAM,UAAU,SAAS,MAAM,MAAM,KAAK,WAAW,EAAE;AACvD,UAAM,WAAW,SAAS,MAAM,MAAM,KAAK,YAAY,IAAI;AAC3D,UAAM,cAAc,SAAS,MAAO,MAAM,SAAS,MAAM,WAAW,CAAC,IAAI,MAAM,WAAW,CAAC,CAAE;AAE7F,UAAM,EAAE,OAAO,aAAa,aAAa,SAAS;AAAA,MAChD;AAAA,MACA,OAAO;AAAA,IAAA,CACR;AAED,UAAM,aAAa,SAAS,MAAM,MAAM,MAAM,MAAM;AACpD,UAAM,YAAY,SAAwB,MAAM,SAAS,SAAS,CAAA,CAAE;AAEpE,UAAM,qBAAqB,CAAC,UAA0D;AACpF,YAAM,aAA4B,CAAA;AAClC,aAAO,QAAQ,KAAK,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AAC9C,cAAM,WAAW,IAAI,QAAQ,aAAa,CAAC,GAAG,SAAS,KAAK,aAAa;AACvE,mBAA+C,QAAQ,IAAI;AAAA,MAC/D,CAAC;AACD,aAAO;AAAA,IACT;AAEA,UAAM,gBAAgB,CAAC,UAAsC;AAC3D,UAAI,MAAM,WAAW;AACnB,eAAO,mBAAmB,MAAM,SAAS;AAAA,MAC3C;AAEA,UAAI,CAAC,uBAAuB;AAC1B,eAAO,CAAA;AAAA,MACT;AAEA,YAAM,WAAW,sBAAsB,KAAK;AAC5C,aAAO,mBAAmB,QAAQ;AAAA,IACpC;;0BAhFEA,mBAqBM,OAAA;AAAA,QApBJ,uBAAM,oBAAkB;AAAA,UACmB,0BAAA,MAAM;AAAA,UAAqC,sBAAA,MAAM;AAAA,QAAA;;QAK5FC,mBAaO,QAAA;AAAA,UAbA,sBAAO,UAAA,KAAS;AAAA,QAAA;UAEJ,CAAA,WAAA,MAAW,uBAA5BD,mBAA4DE,UAAA,EAAA,KAAA,KAAA;AAAA,4CAArB,QAAA,KAAO,GAAA,CAAA;AAAA,UAAA,WAG5CC,UAAA,IAAA,GAAAH,mBAKuCE,UAAA,EAAA,KAAA,KAAAE,WAJhB,WAAA,OAAU,CAAvB,OAAO,MAAC;gCADlBJ,mBAKuC,QAAA;AAAA,cAHpC,KAAK;AAAA,cACL,OAAKK,eAAE,cAAc,KAAK,CAAA;AAAA,cAC1B,OAAKC,eAAA,EAAA,sBAA0B,MAAM,eAAa;AAAA,YAAA,GAC/CC,gBAAA,MAAM,OAAO,GAAA,CAAA;AAAA;;;;;;"}
@@ -1,142 +0,0 @@
1
- import { defineComponent, ref, computed, nextTick, watch, onMounted, createElementBlock, openBlock, normalizeClass, createElementVNode, renderSlot } from "vue";
2
- import { debounce } from "lodash-es";
3
- import { useMermaid, useMermaidZoom, downloadSvgAsPng } from "./x-markdown.es9.js";
4
- const _hoisted_1 = {
5
- key: 0,
6
- class: "syntax-mermaid__loading"
7
- };
8
- const _hoisted_2 = ["innerHTML"];
9
- const _sfc_main = /* @__PURE__ */ defineComponent({
10
- __name: "SyntaxMermaid",
11
- props: {
12
- content: { default: "" },
13
- id: { default: "mermaid-default" },
14
- isDark: { type: Boolean, default: false },
15
- config: { default: () => ({}) }
16
- },
17
- emits: ["degraded", "ready"],
18
- setup(__props, { expose: __expose, emit: __emit }) {
19
- const props = __props;
20
- const emit = __emit;
21
- const renderContainerRef = ref(null);
22
- const mermaidContent = computed(() => props.content);
23
- const mermaidOptions = computed(() => ({
24
- id: props.id,
25
- theme: props.isDark ? "dark" : "default",
26
- config: props.config,
27
- container: renderContainerRef.value
28
- }));
29
- const mermaidResult = useMermaid(mermaidContent, mermaidOptions);
30
- const svg = ref("");
31
- const isLoading = computed(() => mermaidResult.isLoading.value);
32
- const error = computed(() => mermaidResult.error.value);
33
- const containerRef = ref(null);
34
- const zoomControls = useMermaidZoom({
35
- container: containerRef
36
- });
37
- const debouncedInitialize = debounce(initializeZoom, 500);
38
- function initializeZoom() {
39
- nextTick(() => {
40
- if (containerRef.value) {
41
- zoomControls.initialize();
42
- }
43
- });
44
- }
45
- watch(
46
- () => mermaidResult.data.value,
47
- (newSvg, oldSvg) => {
48
- console.log("[SyntaxMermaid] mermaidResult.data.value changed:", {
49
- oldSvg,
50
- newSvg,
51
- isNewSvg: !!newSvg,
52
- startsWithSvg: newSvg?.trim().startsWith("<svg"),
53
- preview: newSvg?.substring(0, 50)
54
- });
55
- if (newSvg) {
56
- svg.value = newSvg;
57
- debouncedInitialize();
58
- if (newSvg.trim().startsWith("<svg")) {
59
- console.log("[SyntaxMermaid] Emitting ready event - Mermaid is available");
60
- emit("ready");
61
- } else {
62
- console.log("[SyntaxMermaid] Emitting degraded event - Mermaid not available");
63
- emit("degraded");
64
- }
65
- }
66
- },
67
- { immediate: true }
68
- );
69
- watch(svg, (newSvg) => {
70
- if (newSvg) {
71
- debouncedInitialize();
72
- }
73
- });
74
- function zoomIn() {
75
- zoomControls?.zoomIn();
76
- }
77
- function zoomOut() {
78
- zoomControls?.zoomOut();
79
- }
80
- function reset() {
81
- zoomControls?.reset();
82
- }
83
- function fullscreen() {
84
- zoomControls?.fullscreen();
85
- zoomControls?.reset();
86
- }
87
- function download() {
88
- downloadSvgAsPng(svg.value);
89
- }
90
- function getSvg() {
91
- return svg.value;
92
- }
93
- function reinitialize() {
94
- debouncedInitialize();
95
- }
96
- onMounted(() => {
97
- if (svg.value) {
98
- debouncedInitialize();
99
- }
100
- });
101
- __expose({
102
- svg,
103
- isLoading,
104
- error,
105
- containerRef,
106
- zoomIn,
107
- zoomOut,
108
- reset,
109
- fullscreen,
110
- download,
111
- getSvg,
112
- reinitialize
113
- });
114
- return (_ctx, _cache) => {
115
- return openBlock(), createElementBlock("div", {
116
- ref_key: "containerRef",
117
- ref: containerRef,
118
- class: normalizeClass(["syntax-mermaid", { "syntax-mermaid--dark": props.isDark }])
119
- }, [
120
- createElementVNode("div", {
121
- ref_key: "renderContainerRef",
122
- ref: renderContainerRef,
123
- class: "syntax-mermaid__render-container",
124
- "aria-hidden": "true"
125
- }, null, 512),
126
- isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
127
- renderSlot(_ctx.$slots, "loading", {}, () => [
128
- _cache[0] || (_cache[0] = createElementVNode("span", { class: "syntax-mermaid__loading-text" }, "加载中...", -1))
129
- ])
130
- ])) : (openBlock(), createElementBlock("div", {
131
- key: 1,
132
- class: "syntax-mermaid__content",
133
- innerHTML: svg.value
134
- }, null, 8, _hoisted_2))
135
- ], 2);
136
- };
137
- }
138
- });
139
- export {
140
- _sfc_main as default
141
- };
142
- //# sourceMappingURL=x-markdown.es29.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"x-markdown.es29.js","sources":["../src/components/Mermaid/SyntaxMermaid.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, nextTick, ref, watch, onMounted } from 'vue'\r\nimport { debounce } from 'lodash-es'\r\nimport { useMermaid, useMermaidZoom, downloadSvgAsPng } from '../../hooks'\r\n\r\ninterface SyntaxMermaidProps {\r\n content: string\r\n id?: string\r\n isDark?: boolean\r\n config?: Record<string, any>\r\n}\r\n\r\nconst props = withDefaults(defineProps<SyntaxMermaidProps>(), {\r\n content: '',\r\n id: 'mermaid-default',\r\n isDark: false,\r\n config: () => ({}),\r\n})\r\n\r\nconst emit = defineEmits<{\r\n degraded: []\r\n ready: []\r\n}>()\r\n\r\nconst renderContainerRef = ref<HTMLElement | null>(null)\r\n\r\nconst mermaidContent = computed(() => props.content)\r\nconst mermaidOptions = computed(() => ({\r\n id: props.id,\r\n theme: props.isDark ? 'dark' : 'default',\r\n config: props.config,\r\n container: renderContainerRef.value,\r\n}))\r\nconst mermaidResult = useMermaid(mermaidContent, mermaidOptions)\r\n\r\nconst svg = ref('')\r\nconst isLoading = computed(() => mermaidResult.isLoading.value)\r\nconst error = computed(() => mermaidResult.error.value)\r\n\r\nconst containerRef = ref<HTMLElement | null>(null)\r\n\r\nconst zoomControls = useMermaidZoom({\r\n container: containerRef,\r\n scaleStep: 0.2,\r\n minScale: 0.1,\r\n maxScale: 5,\r\n})\r\n\r\nconst debouncedInitialize = debounce(initializeZoom, 500)\r\n\r\nfunction initializeZoom() {\r\n nextTick(() => {\r\n if (containerRef.value) {\r\n zoomControls.initialize()\r\n }\r\n })\r\n}\r\n\r\nwatch(\r\n () => mermaidResult.data.value,\r\n (newSvg, oldSvg) => {\r\n console.log('[SyntaxMermaid] mermaidResult.data.value changed:', {\r\n oldSvg,\r\n newSvg,\r\n isNewSvg: !!newSvg,\r\n startsWithSvg: newSvg?.trim().startsWith('<svg'),\r\n preview: newSvg?.substring(0, 50)\r\n })\r\n\r\n if (newSvg) {\r\n svg.value = newSvg\r\n debouncedInitialize()\r\n\r\n // 检测是否成功渲染了 SVG(以 <svg 开头)\r\n if (newSvg.trim().startsWith('<svg')) {\r\n console.log('[SyntaxMermaid] Emitting ready event - Mermaid is available')\r\n emit('ready')\r\n } else {\r\n console.log('[SyntaxMermaid] Emitting degraded event - Mermaid not available')\r\n emit('degraded')\r\n }\r\n }\r\n },\r\n { immediate: true },\r\n)\r\n\r\nwatch(svg, (newSvg) => {\r\n if (newSvg) {\r\n debouncedInitialize()\r\n }\r\n})\r\n\r\nfunction zoomIn() {\r\n zoomControls?.zoomIn()\r\n}\r\n\r\nfunction zoomOut() {\r\n zoomControls?.zoomOut()\r\n}\r\n\r\nfunction reset() {\r\n zoomControls?.reset()\r\n}\r\n\r\nfunction fullscreen() {\r\n zoomControls?.fullscreen()\r\n zoomControls?.reset()\r\n}\r\n\r\nfunction download() {\r\n downloadSvgAsPng(svg.value)\r\n}\r\n\r\nfunction getSvg() {\r\n return svg.value\r\n}\r\n\r\nfunction reinitialize() {\r\n debouncedInitialize()\r\n}\r\n\r\nonMounted(() => {\r\n if (svg.value) {\r\n debouncedInitialize()\r\n }\r\n})\r\n\r\ndefineExpose({\r\n svg,\r\n isLoading,\r\n error,\r\n containerRef,\r\n zoomIn,\r\n zoomOut,\r\n reset,\r\n fullscreen,\r\n download,\r\n getSvg,\r\n reinitialize,\r\n})\r\n</script>\r\n\r\n<template>\r\n <div ref=\"containerRef\" class=\"syntax-mermaid\" :class=\"{ 'syntax-mermaid--dark': props.isDark }\">\r\n <div ref=\"renderContainerRef\" class=\"syntax-mermaid__render-container\" aria-hidden=\"true\" />\r\n\r\n <div v-if=\"isLoading\" class=\"syntax-mermaid__loading\">\r\n <slot name=\"loading\">\r\n <span class=\"syntax-mermaid__loading-text\">加载中...</span>\r\n </slot>\r\n </div>\r\n <div v-else class=\"syntax-mermaid__content\" v-html=\"svg\" />\r\n </div>\r\n</template>\r\n\r\n<style>\r\n.syntax-mermaid {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 200px;\r\n overflow: hidden;\r\n cursor: grab;\r\n position: relative;\r\n}\r\n\r\n.syntax-mermaid__render-container {\r\n position: absolute;\r\n max-height: 0;\r\n opacity: 0;\r\n overflow: hidden;\r\n pointer-events: none;\r\n}\r\n\r\n.syntax-mermaid:active {\r\n cursor: grabbing;\r\n}\r\n\r\n.syntax-mermaid__content {\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.syntax-mermaid__content svg {\r\n transform-origin: center center;\r\n max-width: 100%;\r\n max-height: 100%;\r\n}\r\n\r\n.syntax-mermaid:fullscreen {\r\n max-height: 100vh;\r\n}\r\n\r\n.syntax-mermaid:fullscreen .syntax-mermaid__content {\r\n justify-content: center;\r\n}\r\n\r\n.syntax-mermaid__loading {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n height: 100%;\r\n min-height: 200px;\r\n}\r\n\r\n.syntax-mermaid__loading-text {\r\n color: #666;\r\n font-size: 14px;\r\n}\r\n\r\n.syntax-mermaid--dark .syntax-mermaid__loading-text {\r\n color: #999;\r\n}\r\n</style>\r\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_openBlock","_renderSlot"],"mappings":"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"}