@hejiayue/x-markdown-test 0.0.1-beta.136 → 0.0.1-beta.138
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.
- package/dist/x-markdown.cjs19.js +1 -1
- package/dist/x-markdown.cjs24.js +1 -1
- package/dist/x-markdown.cjs27.js +1 -1
- package/dist/x-markdown.cjs27.js.map +1 -1
- package/dist/x-markdown.cjs29.js +2 -0
- package/dist/x-markdown.cjs29.js.map +1 -0
- package/dist/x-markdown.cjs31.js +1 -1
- package/dist/x-markdown.cjs31.js.map +1 -1
- package/dist/x-markdown.cjs32.js +2 -0
- package/dist/x-markdown.cjs32.js.map +1 -0
- package/dist/x-markdown.cjs7.js +1 -1
- package/dist/x-markdown.cjs7.js.map +1 -1
- package/dist/x-markdown.es19.js +1 -1
- package/dist/x-markdown.es24.js +1 -1
- package/dist/x-markdown.es27.js +139 -5
- package/dist/x-markdown.es27.js.map +1 -1
- package/dist/x-markdown.es29.js +8 -0
- package/dist/x-markdown.es29.js.map +1 -0
- package/dist/x-markdown.es31.js +2 -121
- package/dist/x-markdown.es31.js.map +1 -1
- package/dist/x-markdown.es32.js +125 -0
- package/dist/x-markdown.es32.js.map +1 -0
- package/dist/x-markdown.es7.js +32 -8
- package/dist/x-markdown.es7.js.map +1 -1
- package/package.json +1 -1
- package/src/vite-plugin.js +5 -1
- package/dist/x-markdown.cjs28.js +0 -2
- package/dist/x-markdown.cjs28.js.map +0 -1
- package/dist/x-markdown.cjs33.js +0 -2
- package/dist/x-markdown.cjs33.js.map +0 -1
- package/dist/x-markdown.es28.js +0 -142
- package/dist/x-markdown.es28.js.map +0 -1
- package/dist/x-markdown.es33.js +0 -6
- package/dist/x-markdown.es33.js.map +0 -1
package/dist/x-markdown.cjs19.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),o=require("./x-markdown.cjs26.js"),l=require("./x-markdown.
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),o=require("./x-markdown.cjs26.js"),l=require("./x-markdown.cjs29.js"),a={class:"x-md-code-header"},t={class:"x-md-code-header__left"},c=["title"],n={class:"x-md-code-lang"},d={class:"x-md-code-header__right"},r=["title","disabled","onClick"],s={key:0,class:"x-md-copy-icon",width:"16",height:"16",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},i={key:1,class:"x-md-copy-icon",width:"16",height:"16",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},u=e.defineComponent({name:"CodeBlock",__name:"index",props:{code:{},language:{},lightTheme:{default:"vitesse-light"},darkTheme:{default:"vitesse-dark"},isDark:{type:Boolean,default:!1},colorReplacements:{},codeMaxHeight:{},showCodeBlockHeader:{type:Boolean,default:!0},enableAnimate:{type:Boolean,default:!1},codeBlockActions:{default:void 0},stickyCodeBlockHeader:{type:Boolean,default:!0}},setup(u,{expose:m}){const{copy:p,copied:k}=o.useClipboard({copiedDuring:2e3}),h=e.ref(!1),v=e.ref(null),g=()=>{h.value=!h.value},f=u,x=e.computed(()=>f.code.trim()),y=e.computed(()=>f.language||"text"),B=e.computed(()=>f.codeBlockActions||[]),C=e.computed(()=>B.value.filter(e=>!e.show||e.show(b.value))),b=e.computed(()=>({language:y.value,code:x.value,copy:p,copied:k.value,collapsed:h.value,toggleCollapse:g}));function w(o){if(!o.icon)return null;if("string"==typeof o.icon)return e.h("span",{class:"x-md-action-icon",innerHTML:o.icon});if("function"==typeof o.icon){try{const e=o.icon(b.value);if(e&&"object"==typeof e&&"__v_isVNode"in e)return e}catch{}return e.h(o.icon)}return e.h(o.icon)}return m({copy:p,copied:k,collapsed:h,toggleCollapse:g,syntaxCodeBlockRef:v}),(o,m)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["x-md-code-block",{"x-md-code-block--dark":f.isDark}])},[u.showCodeBlockHeader?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["x-md-code-header-wrapper",[{"x-md-code-header-wrapper--sticky":f.stickyCodeBlockHeader},{"x-md-code-header-wrapper--collapsed":h.value}]])},[e.createElementVNode("div",a,[e.renderSlot(o.$slots,"codeHeader",{language:y.value,code:x.value,copy:e.unref(p),copied:e.unref(k),collapsed:h.value,toggleCollapse:g},()=>[e.createElementVNode("div",t,[e.createElementVNode("button",{class:e.normalizeClass(["x-md-collapse-btn",{"x-md-collapse-btn--collapsed":h.value}]),onClick:g,title:h.value?"展开代码":"折叠代码"},[...m[1]||(m[1]=[e.createElementVNode("svg",{class:"x-md-collapse-icon",viewBox:"0 0 24 24",width:"14",height:"14",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},[e.createElementVNode("polyline",{points:"6 9 12 15 18 9"})],-1)])],10,c),e.createElementVNode("span",n,e.toDisplayString(y.value),1)]),e.createElementVNode("div",d,[e.renderSlot(o.$slots,"codeActions",{code:x.value,copy:e.unref(p),copied:e.unref(k)},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(C.value,o=>(e.openBlock(),e.createElementBlock("button",{key:o.key,class:e.normalizeClass(["x-md-action-btn",[o.class,{"x-md-action-btn--disabled":o.disabled}]]),style:e.normalizeStyle(o.style),title:o.title,disabled:o.disabled,onClick:e=>function(e){e.disabled||e.onClick?.(b.value)}(o)},[o.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(w(o)),{key:0})):e.createCommentVNode("",!0)],14,r))),128)),e.createElementVNode("button",{class:e.normalizeClass(["x-md-copy-btn",{"x-md-copy-btn--copied":e.unref(k)}]),onClick:m[0]||(m[0]=o=>e.unref(p)(x.value))},[e.unref(k)?(e.openBlock(),e.createElementBlock("svg",s,[...m[2]||(m[2]=[e.createElementVNode("path",{fill:"currentColor",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"},null,-1)])])):(e.openBlock(),e.createElementBlock("svg",i,[...m[3]||(m[3]=[e.createElementVNode("path",{fill:"currentColor",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"},null,-1),e.createElementVNode("path",{fill:"currentColor",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"},null,-1)])]))],2)],!0)])],!0)])],2)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["x-md-code-body",{"x-md-code-body--collapsed":h.value}])},[e.createVNode(l.default,{ref_key:"syntaxCodeBlockRef",ref:v,code:x.value,language:y.value,"light-theme":f.lightTheme,"dark-theme":f.darkTheme,"is-dark":f.isDark,"color-replacements":f.colorReplacements,"code-max-height":f.codeMaxHeight,"enable-animate":f.enableAnimate},null,8,["code","language","light-theme","dark-theme","is-dark","color-replacements","code-max-height","enable-animate"])],2)],2))}});exports.default=u;
|
|
2
2
|
//# sourceMappingURL=x-markdown.cjs19.js.map
|
package/dist/x-markdown.cjs24.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),t=require("./x-markdown.cjs26.js"),o=require("./x-markdown.cjs9.js"),a=require("./x-markdown.
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),t=require("./x-markdown.cjs26.js"),o=require("./x-markdown.cjs9.js"),a=require("./x-markdown.cjs27.js");;/* empty css */const l=require("./x-markdown.cjs17.js"),n={class:"toolbar-container"},r={class:"mermaid-toolbar"},i={class:"toolbar-left"},c={class:"segmented-control"},d={class:"toolbar-right"},s=["title","onClick"],u={key:0,width:"16",height:"16",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},m={key:1,width:"16",height:"16",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},v={class:"mermaid-source-code"},h=e.defineComponent({__name:"index",props:{isDark:{type:Boolean,default:!1},shikiTheme:{default:()=>["vitesse-light","vitesse-dark"]},config:{default:()=>({})},mermaidActions:{default:void 0},raw:{default:()=>({})}},setup(h){const k=h,w=e.ref(null),p=e.ref(!1),g=e.ref(!0),f=e.computed(()=>k.raw?.content||""),V=e.computed(()=>`mermaid-${k.raw?.key||"default"}`),C=e.computed(()=>w.value?.isLoading??!0),E=e.computed(()=>w.value?.svg??""),N=e.computed(()=>p.value?"code":"diagram");function y(e){e?.stopPropagation(),e?.preventDefault(),p.value||w.value?.zoomIn()}function b(e){e?.stopPropagation(),e?.preventDefault(),p.value||w.value?.zoomOut()}function B(e){e?.stopPropagation(),e?.preventDefault(),p.value||w.value?.reset()}function x(){p.value||w.value?.fullscreen()}function z(){p.value=!p.value}const{copy:L,copied:M}=t.useClipboard({copiedDuring:1500});function j(e){"code"!==e||p.value?"diagram"===e&&p.value&&(p.value=!1):p.value=!0}async function D(e){e?.stopPropagation(),e?.preventDefault(),M.value||k.raw.content&&await L(k.raw.content)}function P(){w.value?.download()}const S=e.computed(()=>k.mermaidActions||[]),_=e.computed(()=>S.value.filter(e=>!e.show||e.show(H.value))),H=e.computed(()=>({showSourceCode:p.value,svg:E.value,rawContent:k.raw.content||"",isLoading:C.value,copied:M.value,zoomIn:y,zoomOut:b,reset:B,fullscreen:x,toggleCode:z,copyCode:D,download:P,raw:k.raw}));function T(t){if(!t.icon)return null;if("string"==typeof t.icon)return e.h("span",{class:"mermaid-action-icon",innerHTML:t.icon});if("function"==typeof t.icon){try{const e=t.icon(H.value);if(e&&"object"==typeof e&&"__v_isVNode"in e)return e}catch{}return e.h(t.icon)}return e.h(t.icon)}const q=e.computed(()=>({showSourceCode:p.value,svg:E.value,rawContent:k.raw.content||"",isLoading:C.value,copied:M.value,zoomIn:y,zoomOut:b,reset:B,fullscreen:x,toggleCode:z,copyCode:D,download:P,raw:k.raw}));return e.onMounted(async()=>{const e=await o.checkMermaidAvailable();g.value=!e}),(t,o)=>g.value?(e.openBlock(),e.createBlock(l.default,{key:0,code:k.raw?.content||"",language:"mermaid","is-dark":k.isDark,"light-theme":k.shikiTheme[0],"dark-theme":k.shikiTheme[1]},null,8,["code","is-dark","light-theme","dark-theme"])):(e.openBlock(),e.createElementBlock("div",{key:k.raw.key,class:e.normalizeClass(["markdown-mermaid",{"markdown-mermaid--dark":k.isDark}])},[e.createVNode(e.Transition,{name:"toolbar",appear:""},{default:e.withCtx(()=>[e.createElementVNode("div",n,[e.renderSlot(t.$slots,"mermaidHeader",e.normalizeProps(e.guardReactiveProps(q.value)),()=>[e.createElementVNode("div",r,[e.createElementVNode("div",i,[e.createElementVNode("div",c,[e.createElementVNode("div",{class:e.normalizeClass(["segmented-slider",{"slide-right":"code"===N.value}])},null,2),e.createElementVNode("div",{class:e.normalizeClass(["segment-item",{active:"diagram"===N.value}]),onClick:o[0]||(o[0]=e=>j("diagram"))},[...o[6]||(o[6]=[e.createElementVNode("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("path",{d:"M12 2L2 7L12 12L22 7L12 2Z",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),e.createElementVNode("path",{d:"M2 17L12 22L22 17",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),e.createElementVNode("path",{d:"M2 12L12 17L22 12",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})],-1),e.createElementVNode("span",null,"预览",-1)])],2),e.createElementVNode("div",{class:e.normalizeClass(["segment-item",{active:"code"===N.value}]),onClick:o[1]||(o[1]=e=>j("code"))},[...o[7]||(o[7]=[e.createElementVNode("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("path",{d:"M16 18L22 12L16 6",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),e.createElementVNode("path",{d:"M8 6L2 12L8 18",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})],-1),e.createElementVNode("span",null,"代码",-1)])],2)])]),e.createElementVNode("div",d,[e.renderSlot(t.$slots,"mermaidActions",e.normalizeProps(e.guardReactiveProps(q.value)),()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(_.value,t=>(e.openBlock(),e.createElementBlock("div",{key:t.key,class:e.normalizeClass(["toolbar-action-btn",[t.class,{"toolbar-action-btn--disabled":t.disabled}]]),style:e.normalizeStyle(t.style),title:t.title,onClick:e=>function(e){e.disabled||e.onClick?.(H.value)}(t)},[t.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(T(t)),{key:0})):e.createCommentVNode("",!0)],14,s))),128)),p.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["toolbar-action-btn",{"copy-success":e.unref(M)}]),title:"复制代码",onClick:o[2]||(o[2]=e=>D(e))},[e.unref(M)?(e.openBlock(),e.createElementBlock("svg",u,[...o[8]||(o[8]=[e.createElementVNode("path",{fill:"currentColor",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"},null,-1)])])):(e.openBlock(),e.createElementBlock("svg",m,[...o[9]||(o[9]=[e.createElementVNode("path",{fill:"currentColor",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"},null,-1),e.createElementVNode("path",{fill:"currentColor",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"},null,-1)])]))],2)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("div",{class:"toolbar-action-btn",title:"缩小",onClick:o[3]||(o[3]=e=>b(e))},[...o[10]||(o[10]=[e.createElementVNode("svg",{width:"16",height:"16",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[e.createElementVNode("path",{fill:"currentColor",d:"m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704M352 448h256a32 32 0 0 1 0 64H352a32 32 0 0 1 0-64"})],-1)])]),e.createElementVNode("div",{class:"toolbar-action-btn",title:"放大",onClick:o[4]||(o[4]=e=>y(e))},[...o[11]||(o[11]=[e.createElementVNode("svg",{width:"16",height:"16",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[e.createElementVNode("path",{fill:"currentColor",d:"m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704m-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64z"})],-1)])]),e.createElementVNode("div",{class:"toolbar-action-btn",title:"重置",onClick:o[5]||(o[5]=e=>B(e))},[...o[12]||(o[12]=[e.createElementVNode("svg",{width:"16",height:"16",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[e.createElementVNode("path",{fill:"currentColor",d:"M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768m0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896"}),e.createElementVNode("path",{fill:"currentColor",d:"M512 96a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V128a32 32 0 0 1 32-32m0 576a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V704a32 32 0 0 1 32-32M96 512a32 32 0 0 1 32-32h192a32 32 0 0 1 0 64H128a32 32 0 0 1-32-32m576 0a32 32 0 0 1 32-32h192a32 32 0 1 1 0 64H704a32 32 0 0 1-32-32"})],-1)])]),e.createElementVNode("div",{class:"toolbar-action-btn",title:"下载",onClick:P},[...o[13]||(o[13]=[e.createElementVNode("svg",{width:"16",height:"16",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[e.createElementVNode("path",{fill:"currentColor",d:"M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64z"})],-1)])])],64))])])])])])]),_:3}),e.withDirectives(e.createElementVNode("div",v,[e.createVNode(l.default,{code:k.raw?.content||"",language:"mermaid","is-dark":k.isDark,"light-theme":k.shikiTheme[0],"dark-theme":k.shikiTheme[1],"show-code-block-header":!1,"sticky-code-block-header":!1},null,8,["code","is-dark","light-theme","dark-theme"])],512),[[e.vShow,p.value]]),e.withDirectives(e.createVNode(a.default,{ref_key:"syntaxMermaidRef",ref:w,content:f.value,id:V.value,"is-dark":k.isDark,config:k.config},null,8,["content","id","is-dark","config"]),[[e.vShow,!p.value]])],2))}});exports.default=h;
|
|
2
2
|
//# sourceMappingURL=x-markdown.cjs24.js.map
|
package/dist/x-markdown.cjs27.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./x-markdown.
|
|
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
2
|
//# sourceMappingURL=x-markdown.cjs27.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"x-markdown.cjs27.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"x-markdown.cjs27.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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./x-markdown.cjs32.js");;/* empty css */const r=require("./x-markdown.cjs21.js").default(e.default,[["__scopeId","data-v-ddb364e9"]]);exports.default=r;
|
|
2
|
+
//# sourceMappingURL=x-markdown.cjs29.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"x-markdown.cjs29.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/dist/x-markdown.cjs31.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./x-markdown.cjs27.js");,/* empty css */exports.default=e.default;
|
|
2
2
|
//# sourceMappingURL=x-markdown.cjs31.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"x-markdown.cjs31.js","sources":[
|
|
1
|
+
{"version":3,"file":"x-markdown.cjs31.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,2 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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\"> </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"}
|
package/dist/x-markdown.cjs7.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.create,Object.defineProperty,Object.getOwnPropertyDescriptor,Object.getOwnPropertyNames,Object.getPrototypeOf,Object.prototype.hasOwnProperty,Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue");let t=null,l=null,n=!1;const
|
|
1
|
+
"use strict";Object.create,Object.defineProperty,Object.getOwnPropertyDescriptor,Object.getOwnPropertyNames,Object.getPrototypeOf,Object.prototype.hasOwnProperty,Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue");let t=null,l=null,o=!1,n=!1;const a=e=>{if(!e.length)return[[]];const t=[[]];let l=t[0];const o=()=>{l=[],t.push(l)};return e.forEach(e=>{const t=e.content??"";if("\n"===t)return void o();if(!t.includes("\n"))return void l.push(e);const n=t.split("\n");n.forEach((t,a)=>{t&&l.push({...e,content:t}),a<n.length-1&&o()})}),0===t.length?[[]]:t};exports.useHighlight=function(c,r){const i=e.ref(),s=e.ref(!1),u=e.ref(null);let p=null,h="",g=null,m="",v="";const y=e.computed(()=>(e.isRef(r.theme)?r.theme.value:r.theme)||"slack-dark"),d=e.computed(()=>e.toValue(r.language)||"text"),f=e.computed(()=>i.value?.lines||[[]]),w=e.computed(()=>i.value?.preStyle),S=async(e,t=!1)=>{if(p){t&&(p.clear(),h="");const o=!t&&e.startsWith(h);let n=e;if(o?n=e.slice(h.length):t||p.clear(),h=e,!n){const e=[...p.tokensStable,...p.tokensUnstable];return void(i.value={colorReplacements:r.colorReplacements,lines:e.length?a(e):[[]],preStyle:i.value?.preStyle})}try{await p.enqueue(n);const e=[...p.tokensStable,...p.tokensUnstable];i.value={colorReplacements:r.colorReplacements,lines:a(e),preStyle:i.value?.preStyle}}catch(l){console.error("[x-markdown] Streaming highlighting failed:",l),u.value=l}}else if(g)try{const t=m||"plaintext",l=y.value,o=g.codeToTokens(e,{lang:t,theme:l});i.value={colorReplacements:r.colorReplacements,lines:a(o),preStyle:i.value?.preStyle}}catch(l){console.error("[x-markdown] Direct highlighting failed:",l),i.value={colorReplacements:r.colorReplacements,lines:[[{content:e}]],preStyle:i.value?.preStyle}}},k=async()=>{s.value=!0,u.value=null;let e=d.value;const a=y.value;try{const s=await(async()=>(t||(t=(async()=>{try{return await import("shiki")}catch{return null}})()),t))();if(!s)return i.value={colorReplacements:r.colorReplacements,lines:[[{content:c.value}]],preStyle:void 0},void(o||(o=!0,console.log("%c[x-markdown]%c Shiki 代码高亮库未安装，已降级为纯文本模式","font-weight: bold; color: #0066cc;","color: #666;"),console.log("%c如需语法高亮功能，请安装：","color: #666; font-weight: bold;"),console.log("%c pnpm add shiki","color: #00aa00; font-family: monospace;"),console.log("%c安装后请重启开发服务器","color: #999; font-size: 12px;")));g=await s.createHighlighter({themes:[a],langs:[]}),v=e;try{await g.loadLanguage(e),m=e}catch{e="plaintext",m="plaintext"}const u=await(async()=>(l||(l=(async()=>{try{return await import("shiki-stream")}catch{return null}})()),l))();u?p=new u.ShikiStreamTokenizer({highlighter:g,lang:e,theme:a}):n||(n=!0,console.log("%c[x-markdown]%c shiki-stream 未安装，已降级为非流式高亮","font-weight: bold; color: #0066cc;","color: #666;"),console.log("%c如需流式代码高亮功能（推荐用于 AI 场景），请安装：","color: #666; font-weight: bold;"),console.log("%c pnpm add shiki-stream","color: #00aa00; font-family: monospace;"),console.log("%c安装后请重启开发服务器","color: #999; font-size: 12px;")),h="";const y=g.getTheme(a),d=((e,t)=>{if(e||t)return{backgroundColor:e,color:t}})(y?.bg,y?.fg);c.value?(await S(c.value,!0),i.value&&(i.value.preStyle=d)):i.value={colorReplacements:r.colorReplacements,lines:[[]],preStyle:d}}catch(f){i.value={colorReplacements:r.colorReplacements,lines:[[{content:c.value}]],preStyle:void 0}}finally{s.value=!1}};return e.watch(()=>[d.value,y.value],async([e])=>{const t=e;if(g&&"plaintext"===m&&t!==v&&"plaintext"!==t)try{return await g.loadLanguage(t),void k()}catch{return void(v=t)}k()},{immediate:!0}),e.watch(c,async e=>{const t=d.value;if(g&&"plaintext"===m&&t!==v&&"plaintext"!==t)try{return await g.loadLanguage(t),void(await k())}catch{v=t}p||g?S(e):i.value={colorReplacements:r.colorReplacements,lines:[[{content:e}]],preStyle:i.value?.preStyle}}),e.onUnmounted(()=>{p?.clear(),p=null,h=""}),{streaming:i,lines:f,preStyle:w,isLoading:s,error:u}};
|
|
2
2
|
//# sourceMappingURL=x-markdown.cjs7.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"x-markdown.cjs7.js","sources":["../src/hooks/useHighlight.ts"],"sourcesContent":["import { ref, watch, onUnmounted, computed, isRef, toValue, type Ref, type MaybeRef, type CSSProperties } from 'vue'\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\ninterface StreamingHighlightResult {\r\n colorReplacements?: Record<string, string>\r\n lines: HighlightToken[][]\r\n preStyle?: CSSProperties\r\n}\r\n\r\ninterface UseHighlightOptions {\r\n language: MaybeRef<string>\r\n theme?: string | Ref<string>\r\n colorReplacements?: Record<string, string>\r\n}\r\n\r\nlet shikiModulePromise: Promise<any | null> | null = null\r\nlet shikiStreamModulePromise: Promise<any | null> | null = null\r\nlet hasShownDependencyHint = false\r\n\r\n\r\nconst showDependencyHint = () => {\r\n if (hasShownDependencyHint) return\r\n hasShownDependencyHint = true\r\n\r\n console.log(\r\n '%c[x-markdown]%c 代码高亮功能已降级为纯文本模式',\r\n 'font-weight: bold; color: #0066cc;',\r\n 'color: #666;'\r\n )\r\n console.log(\r\n '%c如需语法高亮功能，请安装以下依赖：',\r\n 'color: #666; font-weight: bold;'\r\n )\r\n console.log(\r\n '%c pnpm add shiki shiki-stream',\r\n 'color: #00aa00; font-family: monospace;'\r\n )\r\n console.log(\r\n '%c安装后请重启开发服务器',\r\n 'color: #999; font-size: 12px;'\r\n )\r\n}\r\n\r\nconst loadShiki = async () => {\r\n if (!shikiModulePromise) {\r\n shikiModulePromise = (async () => {\r\n try {\r\n const mod = await import('shiki')\r\n return mod\r\n } catch {\r\n // 静默失败，返回 null\r\n return null\r\n }\r\n })()\r\n }\r\n return shikiModulePromise\r\n}\r\n\r\nconst loadShikiStream = async () => {\r\n if (!shikiStreamModulePromise) {\r\n shikiStreamModulePromise = (async () => {\r\n try {\r\n const mod = await import('shiki-stream')\r\n return mod\r\n } catch {\r\n // 静默失败，返回 null\r\n return null\r\n }\r\n })()\r\n }\r\n return shikiStreamModulePromise\r\n}\r\n\r\nconst tokensToLineTokens = (tokens: HighlightToken[]): HighlightToken[][] => {\r\n if (!tokens.length) return [[]]\r\n\r\n const lines: HighlightToken[][] = [[]]\r\n let currentLine = lines[0]\r\n\r\n const startNewLine = () => {\r\n currentLine = []\r\n lines.push(currentLine)\r\n }\r\n\r\n tokens.forEach((token) => {\r\n const content = token.content ?? ''\r\n\r\n if (content === '\\n') {\r\n startNewLine()\r\n return\r\n }\r\n\r\n if (!content.includes('\\n')) {\r\n currentLine.push(token)\r\n return\r\n }\r\n\r\n const segments = content.split('\\n')\r\n segments.forEach((segment, index) => {\r\n if (segment) {\r\n currentLine.push({\r\n ...token,\r\n content: segment,\r\n })\r\n }\r\n\r\n if (index < segments.length - 1) {\r\n startNewLine()\r\n }\r\n })\r\n })\r\n\r\n return lines.length === 0 ? [[]] : lines\r\n}\r\n\r\nconst createPreStyle = (bg?: string, fg?: string): CSSProperties | undefined => {\r\n if (!bg && !fg) return undefined\r\n return {\r\n backgroundColor: bg,\r\n color: fg,\r\n }\r\n}\r\n\r\nexport function useHighlight(text: Ref<string>, options: UseHighlightOptions) {\r\n const streaming = ref<StreamingHighlightResult>()\r\n const isLoading = ref(false)\r\n const error = ref<Error | null>(null)\r\n\r\n let tokenizer: any | null = null\r\n let previousText = ''\r\n let highlighter: any | null = null\r\n let currentUsedLang = ''\r\n let lastRequestedLang = ''\r\n\r\n const effectiveTheme = computed(() => {\r\n const theme = isRef(options.theme) ? options.theme.value : options.theme\r\n return theme || 'slack-dark'\r\n })\r\n\r\n const effectiveLanguage = computed(() => {\r\n return toValue(options.language) || 'text'\r\n })\r\n\r\n const lines = computed(() => streaming.value?.lines || [[]])\r\n const preStyle = computed(() => streaming.value?.preStyle)\r\n\r\n const updateTokens = async (nextText: string, forceReset = false) => {\r\n // 当有 tokenizer 时使用流式处理\r\n if (tokenizer) {\r\n if (forceReset) {\r\n tokenizer.clear()\r\n previousText = ''\r\n }\r\n\r\n const canAppend = !forceReset && nextText.startsWith(previousText)\r\n let chunk = nextText\r\n\r\n if (canAppend) {\r\n chunk = nextText.slice(previousText.length)\r\n } else if (!forceReset) {\r\n tokenizer.clear()\r\n }\r\n\r\n previousText = nextText\r\n\r\n if (!chunk) {\r\n const mergedTokens = [...tokenizer.tokensStable, ...tokenizer.tokensUnstable]\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: mergedTokens.length ? tokensToLineTokens(mergedTokens) : [[]],\r\n preStyle: streaming.value?.preStyle,\r\n }\r\n return\r\n }\r\n\r\n try {\r\n await tokenizer.enqueue(chunk)\r\n\r\n const mergedTokens = [...tokenizer.tokensStable, ...tokenizer.tokensUnstable]\r\n\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: tokensToLineTokens(mergedTokens),\r\n preStyle: streaming.value?.preStyle,\r\n }\r\n } catch (err) {\r\n console.error('[x-markdown] Streaming highlighting failed:', err)\r\n error.value = err as Error\r\n }\r\n } else if (highlighter) {\r\n // 当没有 tokenizer 但有 highlighter 时，使用非流式方式高亮\r\n // 这发生在 shiki 可用但 shiki-stream 不可用时\r\n try {\r\n const currentLang = currentUsedLang || 'plaintext'\r\n const currentTheme = effectiveTheme.value\r\n const tokens = highlighter.codeToTokens(nextText, {\r\n lang: currentLang,\r\n theme: currentTheme,\r\n })\r\n\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: tokensToLineTokens(tokens),\r\n preStyle: streaming.value?.preStyle,\r\n }\r\n } catch (err) {\r\n console.error('[x-markdown] Direct highlighting failed:', err)\r\n // 降级为纯文本\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: [[{ content: nextText }]],\r\n preStyle: streaming.value?.preStyle,\r\n }\r\n }\r\n }\r\n }\r\n\r\n const initHighlighter = async () => {\r\n isLoading.value = true\r\n error.value = null\r\n\r\n let currentLang = effectiveLanguage.value\r\n const currentTheme = effectiveTheme.value\r\n\r\n try {\r\n const mod = await loadShiki()\r\n if (!mod) {\r\n // 静默降级为纯文本\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: [[{ content: text.value }]],\r\n preStyle: undefined,\r\n }\r\n showDependencyHint()\r\n return\r\n }\r\n\r\n // shiki 3.x API\r\n highlighter = await mod.createHighlighter({\r\n themes: [currentTheme],\r\n langs: [], // 将动态加载语言\r\n })\r\n\r\n lastRequestedLang = currentLang\r\n\r\n try {\r\n await highlighter.loadLanguage(currentLang as any)\r\n currentUsedLang = currentLang\r\n } catch {\r\n currentLang = 'plaintext'\r\n currentUsedLang = 'plaintext'\r\n }\r\n\r\n // 动态加载 shiki-stream\r\n const shikiStreamMod = await loadShikiStream()\r\n if (shikiStreamMod) {\r\n tokenizer = new shikiStreamMod.ShikiStreamTokenizer({\r\n highlighter: highlighter,\r\n lang: currentLang,\r\n theme: currentTheme,\r\n })\r\n }\r\n\r\n previousText = ''\r\n\r\n const themeInfo = highlighter.getTheme(currentTheme)\r\n const preStyleValue = createPreStyle(themeInfo?.bg, themeInfo?.fg)\r\n\r\n if (text.value) {\r\n await updateTokens(text.value, true)\r\n if (streaming.value) {\r\n streaming.value.preStyle = preStyleValue\r\n }\r\n } else {\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: [[]],\r\n preStyle: preStyleValue,\r\n }\r\n }\r\n } catch (err) {\r\n // 静默降级\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: [[{ content: text.value }]],\r\n preStyle: undefined,\r\n }\r\n } finally {\r\n isLoading.value = false\r\n }\r\n }\r\n\r\n watch(\r\n () => [effectiveLanguage.value, effectiveTheme.value],\r\n async ([newLang]) => {\r\n const requestedLang = newLang as string\r\n\r\n if (\r\n highlighter &&\r\n currentUsedLang === 'plaintext' &&\r\n requestedLang !== lastRequestedLang &&\r\n requestedLang !== 'plaintext'\r\n ) {\r\n try {\r\n await highlighter.loadLanguage(requestedLang as any)\r\n initHighlighter()\r\n return\r\n } catch {\r\n lastRequestedLang = requestedLang\r\n return\r\n }\r\n }\r\n\r\n initHighlighter()\r\n },\r\n { immediate: true },\r\n )\r\n\r\n watch(text, async (newText) => {\r\n const requestedLang = effectiveLanguage.value\r\n if (\r\n highlighter &&\r\n currentUsedLang === 'plaintext' &&\r\n requestedLang !== lastRequestedLang &&\r\n requestedLang !== 'plaintext'\r\n ) {\r\n try {\r\n await highlighter.loadLanguage(requestedLang as any)\r\n await initHighlighter()\r\n return\r\n } catch {\r\n lastRequestedLang = requestedLang\r\n }\r\n }\r\n\r\n if (tokenizer || highlighter) {\r\n // 当有 tokenizer 或 highlighter 时都调用 updateTokens\r\n // updateTokens 内部会处理两种情况\r\n updateTokens(newText)\r\n } else {\r\n // 两者都没有时降级为纯文本\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: [[{ content: newText }]],\r\n preStyle: streaming.value?.preStyle,\r\n }\r\n }\r\n })\r\n\r\n onUnmounted(() => {\r\n tokenizer?.clear()\r\n tokenizer = null\r\n previousText = ''\r\n })\r\n\r\n return {\r\n streaming,\r\n lines,\r\n preStyle,\r\n isLoading,\r\n error,\r\n }\r\n}\r\n"],"names":["shikiModulePromise","shikiStreamModulePromise","hasShownDependencyHint","tokensToLineTokens","tokens","length","lines","currentLine","startNewLine","push","forEach","token","content","includes","segments","split","segment","index","text","options","streaming","ref","isLoading","error","tokenizer","previousText","highlighter","currentUsedLang","lastRequestedLang","effectiveTheme","computed","isRef","theme","value","effectiveLanguage","toValue","language","preStyle","updateTokens","async","nextText","forceReset","clear","canAppend","startsWith","chunk","slice","mergedTokens","tokensStable","tokensUnstable","colorReplacements","enqueue","err","console","currentLang","currentTheme","codeToTokens","lang","initHighlighter","mod","import","loadShiki","log","createHighlighter","themes","langs","loadLanguage","shikiStreamMod","loadShikiStream","ShikiStreamTokenizer","themeInfo","getTheme","preStyleValue","bg","fg","backgroundColor","color","createPreStyle","watch","newLang","requestedLang","immediate","newText","onUnmounted"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"x-markdown.cjs7.js","sources":["../src/hooks/useHighlight.ts"],"sourcesContent":["import { ref, watch, onUnmounted, computed, isRef, toValue, type Ref, type MaybeRef, type CSSProperties } from 'vue'\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\ninterface StreamingHighlightResult {\r\n colorReplacements?: Record<string, string>\r\n lines: HighlightToken[][]\r\n preStyle?: CSSProperties\r\n}\r\n\r\ninterface UseHighlightOptions {\r\n language: MaybeRef<string>\r\n theme?: string | Ref<string>\r\n colorReplacements?: Record<string, string>\r\n}\r\n\r\nlet shikiModulePromise: Promise<any | null> | null = null\r\nlet shikiStreamModulePromise: Promise<any | null> | null = null\r\nlet hasShownShikiHint = false\r\nlet hasShownShikiStreamHint = false\r\n\r\n\r\nconst showShikiHint = () => {\r\n if (hasShownShikiHint) return\r\n hasShownShikiHint = true\r\n\r\n console.log(\r\n '%c[x-markdown]%c Shiki 代码高亮库未安装，已降级为纯文本模式',\r\n 'font-weight: bold; color: #0066cc;',\r\n 'color: #666;'\r\n )\r\n console.log(\r\n '%c如需语法高亮功能，请安装：',\r\n 'color: #666; font-weight: bold;'\r\n )\r\n console.log(\r\n '%c pnpm add shiki',\r\n 'color: #00aa00; font-family: monospace;'\r\n )\r\n console.log(\r\n '%c安装后请重启开发服务器',\r\n 'color: #999; font-size: 12px;'\r\n )\r\n}\r\n\r\nconst showShikiStreamHint = () => {\r\n if (hasShownShikiStreamHint) return\r\n hasShownShikiStreamHint = true\r\n\r\n console.log(\r\n '%c[x-markdown]%c shiki-stream 未安装，已降级为非流式高亮',\r\n 'font-weight: bold; color: #0066cc;',\r\n 'color: #666;'\r\n )\r\n console.log(\r\n '%c如需流式代码高亮功能（推荐用于 AI 场景），请安装：',\r\n 'color: #666; font-weight: bold;'\r\n )\r\n console.log(\r\n '%c pnpm add shiki-stream',\r\n 'color: #00aa00; font-family: monospace;'\r\n )\r\n console.log(\r\n '%c安装后请重启开发服务器',\r\n 'color: #999; font-size: 12px;'\r\n )\r\n}\r\n\r\nconst loadShiki = async () => {\r\n if (!shikiModulePromise) {\r\n shikiModulePromise = (async () => {\r\n try {\r\n const mod = await import('shiki')\r\n return mod\r\n } catch {\r\n // 静默失败，返回 null\r\n return null\r\n }\r\n })()\r\n }\r\n return shikiModulePromise\r\n}\r\n\r\nconst loadShikiStream = async () => {\r\n if (!shikiStreamModulePromise) {\r\n shikiStreamModulePromise = (async () => {\r\n try {\r\n const mod = await import('shiki-stream')\r\n return mod\r\n } catch {\r\n // 静默失败，返回 null\r\n return null\r\n }\r\n })()\r\n }\r\n return shikiStreamModulePromise\r\n}\r\n\r\nconst tokensToLineTokens = (tokens: HighlightToken[]): HighlightToken[][] => {\r\n if (!tokens.length) return [[]]\r\n\r\n const lines: HighlightToken[][] = [[]]\r\n let currentLine = lines[0]\r\n\r\n const startNewLine = () => {\r\n currentLine = []\r\n lines.push(currentLine)\r\n }\r\n\r\n tokens.forEach((token) => {\r\n const content = token.content ?? ''\r\n\r\n if (content === '\\n') {\r\n startNewLine()\r\n return\r\n }\r\n\r\n if (!content.includes('\\n')) {\r\n currentLine.push(token)\r\n return\r\n }\r\n\r\n const segments = content.split('\\n')\r\n segments.forEach((segment, index) => {\r\n if (segment) {\r\n currentLine.push({\r\n ...token,\r\n content: segment,\r\n })\r\n }\r\n\r\n if (index < segments.length - 1) {\r\n startNewLine()\r\n }\r\n })\r\n })\r\n\r\n return lines.length === 0 ? [[]] : lines\r\n}\r\n\r\nconst createPreStyle = (bg?: string, fg?: string): CSSProperties | undefined => {\r\n if (!bg && !fg) return undefined\r\n return {\r\n backgroundColor: bg,\r\n color: fg,\r\n }\r\n}\r\n\r\nexport function useHighlight(text: Ref<string>, options: UseHighlightOptions) {\r\n const streaming = ref<StreamingHighlightResult>()\r\n const isLoading = ref(false)\r\n const error = ref<Error | null>(null)\r\n\r\n let tokenizer: any | null = null\r\n let previousText = ''\r\n let highlighter: any | null = null\r\n let currentUsedLang = ''\r\n let lastRequestedLang = ''\r\n\r\n const effectiveTheme = computed(() => {\r\n const theme = isRef(options.theme) ? options.theme.value : options.theme\r\n return theme || 'slack-dark'\r\n })\r\n\r\n const effectiveLanguage = computed(() => {\r\n return toValue(options.language) || 'text'\r\n })\r\n\r\n const lines = computed(() => streaming.value?.lines || [[]])\r\n const preStyle = computed(() => streaming.value?.preStyle)\r\n\r\n const updateTokens = async (nextText: string, forceReset = false) => {\r\n // 当有 tokenizer 时使用流式处理\r\n if (tokenizer) {\r\n if (forceReset) {\r\n tokenizer.clear()\r\n previousText = ''\r\n }\r\n\r\n const canAppend = !forceReset && nextText.startsWith(previousText)\r\n let chunk = nextText\r\n\r\n if (canAppend) {\r\n chunk = nextText.slice(previousText.length)\r\n } else if (!forceReset) {\r\n tokenizer.clear()\r\n }\r\n\r\n previousText = nextText\r\n\r\n if (!chunk) {\r\n const mergedTokens = [...tokenizer.tokensStable, ...tokenizer.tokensUnstable]\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: mergedTokens.length ? tokensToLineTokens(mergedTokens) : [[]],\r\n preStyle: streaming.value?.preStyle,\r\n }\r\n return\r\n }\r\n\r\n try {\r\n await tokenizer.enqueue(chunk)\r\n\r\n const mergedTokens = [...tokenizer.tokensStable, ...tokenizer.tokensUnstable]\r\n\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: tokensToLineTokens(mergedTokens),\r\n preStyle: streaming.value?.preStyle,\r\n }\r\n } catch (err) {\r\n console.error('[x-markdown] Streaming highlighting failed:', err)\r\n error.value = err as Error\r\n }\r\n } else if (highlighter) {\r\n // 当没有 tokenizer 但有 highlighter 时，使用非流式方式高亮\r\n // 这发生在 shiki 可用但 shiki-stream 不可用时\r\n try {\r\n const currentLang = currentUsedLang || 'plaintext'\r\n const currentTheme = effectiveTheme.value\r\n const tokens = highlighter.codeToTokens(nextText, {\r\n lang: currentLang,\r\n theme: currentTheme,\r\n })\r\n\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: tokensToLineTokens(tokens),\r\n preStyle: streaming.value?.preStyle,\r\n }\r\n } catch (err) {\r\n console.error('[x-markdown] Direct highlighting failed:', err)\r\n // 降级为纯文本\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: [[{ content: nextText }]],\r\n preStyle: streaming.value?.preStyle,\r\n }\r\n }\r\n }\r\n }\r\n\r\n const initHighlighter = async () => {\r\n isLoading.value = true\r\n error.value = null\r\n\r\n let currentLang = effectiveLanguage.value\r\n const currentTheme = effectiveTheme.value\r\n\r\n try {\r\n const mod = await loadShiki()\r\n if (!mod) {\r\n // shiki 完全不可用\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: [[{ content: text.value }]],\r\n preStyle: undefined,\r\n }\r\n showShikiHint()\r\n return\r\n }\r\n\r\n // shiki 3.x API\r\n highlighter = await mod.createHighlighter({\r\n themes: [currentTheme],\r\n langs: [], // 将动态加载语言\r\n })\r\n\r\n lastRequestedLang = currentLang\r\n\r\n try {\r\n await highlighter.loadLanguage(currentLang as any)\r\n currentUsedLang = currentLang\r\n } catch {\r\n currentLang = 'plaintext'\r\n currentUsedLang = 'plaintext'\r\n }\r\n\r\n // 动态加载 shiki-stream\r\n const shikiStreamMod = await loadShikiStream()\r\n if (shikiStreamMod) {\r\n tokenizer = new shikiStreamMod.ShikiStreamTokenizer({\r\n highlighter: highlighter,\r\n lang: currentLang,\r\n theme: currentTheme,\r\n })\r\n } else {\r\n // shiki 可用但 shiki-stream 不可用\r\n showShikiStreamHint()\r\n }\r\n\r\n previousText = ''\r\n\r\n const themeInfo = highlighter.getTheme(currentTheme)\r\n const preStyleValue = createPreStyle(themeInfo?.bg, themeInfo?.fg)\r\n\r\n if (text.value) {\r\n await updateTokens(text.value, true)\r\n if (streaming.value) {\r\n streaming.value.preStyle = preStyleValue\r\n }\r\n } else {\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: [[]],\r\n preStyle: preStyleValue,\r\n }\r\n }\r\n } catch (err) {\r\n // 静默降级\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: [[{ content: text.value }]],\r\n preStyle: undefined,\r\n }\r\n } finally {\r\n isLoading.value = false\r\n }\r\n }\r\n\r\n watch(\r\n () => [effectiveLanguage.value, effectiveTheme.value],\r\n async ([newLang]) => {\r\n const requestedLang = newLang as string\r\n\r\n if (\r\n highlighter &&\r\n currentUsedLang === 'plaintext' &&\r\n requestedLang !== lastRequestedLang &&\r\n requestedLang !== 'plaintext'\r\n ) {\r\n try {\r\n await highlighter.loadLanguage(requestedLang as any)\r\n initHighlighter()\r\n return\r\n } catch {\r\n lastRequestedLang = requestedLang\r\n return\r\n }\r\n }\r\n\r\n initHighlighter()\r\n },\r\n { immediate: true },\r\n )\r\n\r\n watch(text, async (newText) => {\r\n const requestedLang = effectiveLanguage.value\r\n if (\r\n highlighter &&\r\n currentUsedLang === 'plaintext' &&\r\n requestedLang !== lastRequestedLang &&\r\n requestedLang !== 'plaintext'\r\n ) {\r\n try {\r\n await highlighter.loadLanguage(requestedLang as any)\r\n await initHighlighter()\r\n return\r\n } catch {\r\n lastRequestedLang = requestedLang\r\n }\r\n }\r\n\r\n if (tokenizer || highlighter) {\r\n // 当有 tokenizer 或 highlighter 时都调用 updateTokens\r\n // updateTokens 内部会处理两种情况\r\n updateTokens(newText)\r\n } else {\r\n // 两者都没有时降级为纯文本\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: [[{ content: newText }]],\r\n preStyle: streaming.value?.preStyle,\r\n }\r\n }\r\n })\r\n\r\n onUnmounted(() => {\r\n tokenizer?.clear()\r\n tokenizer = null\r\n previousText = ''\r\n })\r\n\r\n return {\r\n streaming,\r\n lines,\r\n preStyle,\r\n isLoading,\r\n error,\r\n }\r\n}\r\n"],"names":["shikiModulePromise","shikiStreamModulePromise","hasShownShikiHint","hasShownShikiStreamHint","tokensToLineTokens","tokens","length","lines","currentLine","startNewLine","push","forEach","token","content","includes","segments","split","segment","index","text","options","streaming","ref","isLoading","error","tokenizer","previousText","highlighter","currentUsedLang","lastRequestedLang","effectiveTheme","computed","isRef","theme","value","effectiveLanguage","toValue","language","preStyle","updateTokens","async","nextText","forceReset","clear","canAppend","startsWith","chunk","slice","mergedTokens","tokensStable","tokensUnstable","colorReplacements","enqueue","err","console","currentLang","currentTheme","codeToTokens","lang","initHighlighter","mod","import","loadShiki","log","createHighlighter","themes","langs","loadLanguage","shikiStreamMod","loadShikiStream","ShikiStreamTokenizer","themeInfo","getTheme","preStyleValue","bg","fg","backgroundColor","color","createPreStyle","watch","newLang","requestedLang","immediate","newText","onUnmounted"],"mappings":"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"}
|
package/dist/x-markdown.es19.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent, ref, computed, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, renderSlot, unref, toDisplayString, Fragment, renderList, normalizeStyle, createBlock, resolveDynamicComponent, createVNode, h } from "vue";
|
|
2
2
|
import { useClipboard } from "./x-markdown.es26.js";
|
|
3
|
-
import SyntaxCodeBlock from "./x-markdown.
|
|
3
|
+
import SyntaxCodeBlock from "./x-markdown.es29.js";
|
|
4
4
|
const _hoisted_1 = { class: "x-md-code-header" };
|
|
5
5
|
const _hoisted_2 = { class: "x-md-code-header__left" };
|
|
6
6
|
const _hoisted_3 = ["title"];
|
package/dist/x-markdown.es24.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { defineComponent, ref, computed, onMounted, createBlock, createElementBlock, openBlock, normalizeClass, createVNode, withDirectives, Transition, withCtx, createElementVNode, renderSlot, normalizeProps, guardReactiveProps, Fragment, renderList, normalizeStyle, createCommentVNode, resolveDynamicComponent, unref, vShow, h } from "vue";
|
|
2
2
|
import { useClipboard } from "./x-markdown.es26.js";
|
|
3
3
|
import { checkMermaidAvailable } from "./x-markdown.es9.js";
|
|
4
|
-
import _sfc_main$1 from "./x-markdown.
|
|
4
|
+
import _sfc_main$1 from "./x-markdown.es27.js";
|
|
5
5
|
/* empty css */
|
|
6
6
|
import CodeBlock from "./x-markdown.es17.js";
|
|
7
7
|
const _hoisted_1 = { class: "toolbar-container" };
|
package/dist/x-markdown.es27.js
CHANGED
|
@@ -1,8 +1,142 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
import
|
|
4
|
-
const
|
|
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
|
+
});
|
|
5
139
|
export {
|
|
6
|
-
|
|
140
|
+
_sfc_main as default
|
|
7
141
|
};
|
|
8
142
|
//# sourceMappingURL=x-markdown.es27.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"x-markdown.es27.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"x-markdown.es27.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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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import _sfc_main from "./x-markdown.es32.js";
|
|
2
|
+
/* empty css */
|
|
3
|
+
import _export_sfc from "./x-markdown.es21.js";
|
|
4
|
+
const SyntaxCodeBlock = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ddb364e9"]]);
|
|
5
|
+
export {
|
|
6
|
+
SyntaxCodeBlock as default
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=x-markdown.es29.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"x-markdown.es29.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
package/dist/x-markdown.es31.js
CHANGED
|
@@ -1,124 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
const _hoisted_1 = { class: "x-md-syntax-code-block" };
|
|
4
|
-
const _hoisted_2 = { class: "x-md-code-content" };
|
|
5
|
-
const _hoisted_3 = { key: 0 };
|
|
6
|
-
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
7
|
-
...{
|
|
8
|
-
name: "SyntaxCodeBlock"
|
|
9
|
-
},
|
|
10
|
-
__name: "SyntaxCodeBlock",
|
|
11
|
-
props: {
|
|
12
|
-
code: {},
|
|
13
|
-
language: {},
|
|
14
|
-
lightTheme: { default: "vitesse-light" },
|
|
15
|
-
darkTheme: { default: "vitesse-dark" },
|
|
16
|
-
isDark: { type: Boolean, default: false },
|
|
17
|
-
colorReplacements: {},
|
|
18
|
-
codeMaxHeight: {},
|
|
19
|
-
enableAnimate: { type: Boolean, default: false }
|
|
20
|
-
},
|
|
21
|
-
setup(__props, { expose: __expose }) {
|
|
22
|
-
const props = __props;
|
|
23
|
-
const code = computed(() => props.code.trim());
|
|
24
|
-
const language = computed(() => props.language || "text");
|
|
25
|
-
const actualTheme = computed(() => props.isDark ? props.darkTheme : props.lightTheme);
|
|
26
|
-
const { lines, preStyle } = useHighlight(code, {
|
|
27
|
-
language,
|
|
28
|
-
theme: actualTheme,
|
|
29
|
-
colorReplacements: props.colorReplacements
|
|
30
|
-
});
|
|
31
|
-
const applyColorReplacement = (color, replacements) => {
|
|
32
|
-
if (!replacements) return color;
|
|
33
|
-
return replacements[color.toLowerCase()] || color;
|
|
34
|
-
};
|
|
35
|
-
const normalizeStyleKeys = (style) => {
|
|
36
|
-
const normalized = {};
|
|
37
|
-
Object.entries(style).forEach(([key, value]) => {
|
|
38
|
-
const camelKey = key.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
|
|
39
|
-
normalized[camelKey] = value;
|
|
40
|
-
});
|
|
41
|
-
return normalized;
|
|
42
|
-
};
|
|
43
|
-
const getTokenStyle = (token) => {
|
|
44
|
-
if (!token) {
|
|
45
|
-
return {};
|
|
46
|
-
}
|
|
47
|
-
if (token.htmlStyle) {
|
|
48
|
-
const baseStyle = normalizeStyleKeys(token.htmlStyle);
|
|
49
|
-
if (!props.colorReplacements) return baseStyle;
|
|
50
|
-
const style2 = { ...baseStyle };
|
|
51
|
-
if (style2.color && typeof style2.color === "string") {
|
|
52
|
-
style2.color = applyColorReplacement(style2.color, props.colorReplacements);
|
|
53
|
-
}
|
|
54
|
-
if (style2.backgroundColor && typeof style2.backgroundColor === "string") {
|
|
55
|
-
style2.backgroundColor = applyColorReplacement(style2.backgroundColor, props.colorReplacements);
|
|
56
|
-
}
|
|
57
|
-
return style2;
|
|
58
|
-
}
|
|
59
|
-
const style = {};
|
|
60
|
-
if (token.color) {
|
|
61
|
-
style.color = props.colorReplacements ? applyColorReplacement(token.color, props.colorReplacements) : token.color;
|
|
62
|
-
}
|
|
63
|
-
if (token.fontStyle === "italic") {
|
|
64
|
-
style.fontStyle = "italic";
|
|
65
|
-
}
|
|
66
|
-
if (token.fontWeight) {
|
|
67
|
-
style.fontWeight = token.fontWeight;
|
|
68
|
-
}
|
|
69
|
-
return style;
|
|
70
|
-
};
|
|
71
|
-
const showFallback = computed(() => !lines.value?.length);
|
|
72
|
-
const codeContainerStyle = computed(() => ({
|
|
73
|
-
...preStyle.value,
|
|
74
|
-
maxHeight: props.codeMaxHeight
|
|
75
|
-
}));
|
|
76
|
-
__expose({
|
|
77
|
-
lines,
|
|
78
|
-
code,
|
|
79
|
-
language,
|
|
80
|
-
actualTheme
|
|
81
|
-
});
|
|
82
|
-
return (_ctx, _cache) => {
|
|
83
|
-
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
84
|
-
showFallback.value ? (openBlock(), createElementBlock("pre", {
|
|
85
|
-
key: 0,
|
|
86
|
-
style: normalizeStyle(codeContainerStyle.value)
|
|
87
|
-
}, [
|
|
88
|
-
createElementVNode("code", null, toDisplayString(code.value), 1)
|
|
89
|
-
], 4)) : (openBlock(), createElementBlock("pre", {
|
|
90
|
-
key: 1,
|
|
91
|
-
class: normalizeClass(["shiki", actualTheme.value]),
|
|
92
|
-
style: normalizeStyle(codeContainerStyle.value),
|
|
93
|
-
tabindex: "0"
|
|
94
|
-
}, [
|
|
95
|
-
_cache[4] || (_cache[4] = createTextVNode(" ", -1)),
|
|
96
|
-
createElementVNode("code", _hoisted_2, [
|
|
97
|
-
_cache[2] || (_cache[2] = createTextVNode("\n ", -1)),
|
|
98
|
-
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(lines), (line, i) => {
|
|
99
|
-
return openBlock(), createElementBlock("span", {
|
|
100
|
-
key: i,
|
|
101
|
-
class: "x-md-code-line"
|
|
102
|
-
}, [
|
|
103
|
-
_cache[0] || (_cache[0] = createTextVNode("\n ", -1)),
|
|
104
|
-
!line.length ? (openBlock(), createElementBlock("span", _hoisted_3, " ")) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(line, (token, j) => {
|
|
105
|
-
return openBlock(), createElementBlock("span", {
|
|
106
|
-
key: j,
|
|
107
|
-
style: normalizeStyle(getTokenStyle(token)),
|
|
108
|
-
class: normalizeClass({ "x-md-animated-word": props.enableAnimate })
|
|
109
|
-
}, toDisplayString(token.content), 7);
|
|
110
|
-
}), 128)),
|
|
111
|
-
_cache[1] || (_cache[1] = createTextVNode("\n ", -1))
|
|
112
|
-
]);
|
|
113
|
-
}), 128)),
|
|
114
|
-
_cache[3] || (_cache[3] = createTextVNode("\n ", -1))
|
|
115
|
-
]),
|
|
116
|
-
_cache[5] || (_cache[5] = createTextVNode("\n ", -1))
|
|
117
|
-
], 6))
|
|
118
|
-
]);
|
|
119
|
-
};
|
|
120
|
-
}
|
|
121
|
-
});
|
|
1
|
+
import _sfc_main from "./x-markdown.es27.js";
|
|
2
|
+
/* empty css */
|
|
122
3
|
export {
|
|
123
4
|
_sfc_main as default
|
|
124
5
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"x-markdown.es31.js","sources":[
|
|
1
|
+
{"version":3,"file":"x-markdown.es31.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import { defineComponent, computed, createElementBlock, openBlock, normalizeStyle, createElementVNode, toDisplayString, normalizeClass, createTextVNode, Fragment, renderList, unref } from "vue";
|
|
2
|
+
import { useHighlight } from "./x-markdown.es7.js";
|
|
3
|
+
const _hoisted_1 = { class: "x-md-syntax-code-block" };
|
|
4
|
+
const _hoisted_2 = { class: "x-md-code-content" };
|
|
5
|
+
const _hoisted_3 = { key: 0 };
|
|
6
|
+
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
7
|
+
...{
|
|
8
|
+
name: "SyntaxCodeBlock"
|
|
9
|
+
},
|
|
10
|
+
__name: "SyntaxCodeBlock",
|
|
11
|
+
props: {
|
|
12
|
+
code: {},
|
|
13
|
+
language: {},
|
|
14
|
+
lightTheme: { default: "vitesse-light" },
|
|
15
|
+
darkTheme: { default: "vitesse-dark" },
|
|
16
|
+
isDark: { type: Boolean, default: false },
|
|
17
|
+
colorReplacements: {},
|
|
18
|
+
codeMaxHeight: {},
|
|
19
|
+
enableAnimate: { type: Boolean, default: false }
|
|
20
|
+
},
|
|
21
|
+
setup(__props, { expose: __expose }) {
|
|
22
|
+
const props = __props;
|
|
23
|
+
const code = computed(() => props.code.trim());
|
|
24
|
+
const language = computed(() => props.language || "text");
|
|
25
|
+
const actualTheme = computed(() => props.isDark ? props.darkTheme : props.lightTheme);
|
|
26
|
+
const { lines, preStyle } = useHighlight(code, {
|
|
27
|
+
language,
|
|
28
|
+
theme: actualTheme,
|
|
29
|
+
colorReplacements: props.colorReplacements
|
|
30
|
+
});
|
|
31
|
+
const applyColorReplacement = (color, replacements) => {
|
|
32
|
+
if (!replacements) return color;
|
|
33
|
+
return replacements[color.toLowerCase()] || color;
|
|
34
|
+
};
|
|
35
|
+
const normalizeStyleKeys = (style) => {
|
|
36
|
+
const normalized = {};
|
|
37
|
+
Object.entries(style).forEach(([key, value]) => {
|
|
38
|
+
const camelKey = key.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
|
|
39
|
+
normalized[camelKey] = value;
|
|
40
|
+
});
|
|
41
|
+
return normalized;
|
|
42
|
+
};
|
|
43
|
+
const getTokenStyle = (token) => {
|
|
44
|
+
if (!token) {
|
|
45
|
+
return {};
|
|
46
|
+
}
|
|
47
|
+
if (token.htmlStyle) {
|
|
48
|
+
const baseStyle = normalizeStyleKeys(token.htmlStyle);
|
|
49
|
+
if (!props.colorReplacements) return baseStyle;
|
|
50
|
+
const style2 = { ...baseStyle };
|
|
51
|
+
if (style2.color && typeof style2.color === "string") {
|
|
52
|
+
style2.color = applyColorReplacement(style2.color, props.colorReplacements);
|
|
53
|
+
}
|
|
54
|
+
if (style2.backgroundColor && typeof style2.backgroundColor === "string") {
|
|
55
|
+
style2.backgroundColor = applyColorReplacement(style2.backgroundColor, props.colorReplacements);
|
|
56
|
+
}
|
|
57
|
+
return style2;
|
|
58
|
+
}
|
|
59
|
+
const style = {};
|
|
60
|
+
if (token.color) {
|
|
61
|
+
style.color = props.colorReplacements ? applyColorReplacement(token.color, props.colorReplacements) : token.color;
|
|
62
|
+
}
|
|
63
|
+
if (token.fontStyle === "italic") {
|
|
64
|
+
style.fontStyle = "italic";
|
|
65
|
+
}
|
|
66
|
+
if (token.fontWeight) {
|
|
67
|
+
style.fontWeight = token.fontWeight;
|
|
68
|
+
}
|
|
69
|
+
return style;
|
|
70
|
+
};
|
|
71
|
+
const showFallback = computed(() => !lines.value?.length);
|
|
72
|
+
const codeContainerStyle = computed(() => ({
|
|
73
|
+
...preStyle.value,
|
|
74
|
+
maxHeight: props.codeMaxHeight
|
|
75
|
+
}));
|
|
76
|
+
__expose({
|
|
77
|
+
lines,
|
|
78
|
+
code,
|
|
79
|
+
language,
|
|
80
|
+
actualTheme
|
|
81
|
+
});
|
|
82
|
+
return (_ctx, _cache) => {
|
|
83
|
+
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
84
|
+
showFallback.value ? (openBlock(), createElementBlock("pre", {
|
|
85
|
+
key: 0,
|
|
86
|
+
style: normalizeStyle(codeContainerStyle.value)
|
|
87
|
+
}, [
|
|
88
|
+
createElementVNode("code", null, toDisplayString(code.value), 1)
|
|
89
|
+
], 4)) : (openBlock(), createElementBlock("pre", {
|
|
90
|
+
key: 1,
|
|
91
|
+
class: normalizeClass(["shiki", actualTheme.value]),
|
|
92
|
+
style: normalizeStyle(codeContainerStyle.value),
|
|
93
|
+
tabindex: "0"
|
|
94
|
+
}, [
|
|
95
|
+
_cache[4] || (_cache[4] = createTextVNode(" ", -1)),
|
|
96
|
+
createElementVNode("code", _hoisted_2, [
|
|
97
|
+
_cache[2] || (_cache[2] = createTextVNode("\n ", -1)),
|
|
98
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(lines), (line, i) => {
|
|
99
|
+
return openBlock(), createElementBlock("span", {
|
|
100
|
+
key: i,
|
|
101
|
+
class: "x-md-code-line"
|
|
102
|
+
}, [
|
|
103
|
+
_cache[0] || (_cache[0] = createTextVNode("\n ", -1)),
|
|
104
|
+
!line.length ? (openBlock(), createElementBlock("span", _hoisted_3, " ")) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(line, (token, j) => {
|
|
105
|
+
return openBlock(), createElementBlock("span", {
|
|
106
|
+
key: j,
|
|
107
|
+
style: normalizeStyle(getTokenStyle(token)),
|
|
108
|
+
class: normalizeClass({ "x-md-animated-word": props.enableAnimate })
|
|
109
|
+
}, toDisplayString(token.content), 7);
|
|
110
|
+
}), 128)),
|
|
111
|
+
_cache[1] || (_cache[1] = createTextVNode("\n ", -1))
|
|
112
|
+
]);
|
|
113
|
+
}), 128)),
|
|
114
|
+
_cache[3] || (_cache[3] = createTextVNode("\n ", -1))
|
|
115
|
+
]),
|
|
116
|
+
_cache[5] || (_cache[5] = createTextVNode("\n ", -1))
|
|
117
|
+
], 6))
|
|
118
|
+
]);
|
|
119
|
+
};
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
export {
|
|
123
|
+
_sfc_main as default
|
|
124
|
+
};
|
|
125
|
+
//# sourceMappingURL=x-markdown.es32.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"x-markdown.es32.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\"> </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":["style","_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","_unref","_normalizeStyle","_normalizeClass","_toDisplayString"],"mappings":"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"}
|
package/dist/x-markdown.es7.js
CHANGED
|
@@ -1,21 +1,43 @@
|
|
|
1
1
|
import { ref, computed, isRef, toValue, watch, onUnmounted } from "vue";
|
|
2
2
|
let shikiModulePromise = null;
|
|
3
3
|
let shikiStreamModulePromise = null;
|
|
4
|
-
let
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
let hasShownShikiHint = false;
|
|
5
|
+
let hasShownShikiStreamHint = false;
|
|
6
|
+
const showShikiHint = () => {
|
|
7
|
+
if (hasShownShikiHint) return;
|
|
8
|
+
hasShownShikiHint = true;
|
|
8
9
|
console.log(
|
|
9
|
-
"%c[x-markdown]%c
|
|
10
|
+
"%c[x-markdown]%c Shiki 代码高亮库未安装，已降级为纯文本模式",
|
|
10
11
|
"font-weight: bold; color: #0066cc;",
|
|
11
12
|
"color: #666;"
|
|
12
13
|
);
|
|
13
14
|
console.log(
|
|
14
|
-
"%c
|
|
15
|
+
"%c如需语法高亮功能，请安装：",
|
|
15
16
|
"color: #666; font-weight: bold;"
|
|
16
17
|
);
|
|
17
18
|
console.log(
|
|
18
|
-
"%c pnpm add shiki
|
|
19
|
+
"%c pnpm add shiki",
|
|
20
|
+
"color: #00aa00; font-family: monospace;"
|
|
21
|
+
);
|
|
22
|
+
console.log(
|
|
23
|
+
"%c安装后请重启开发服务器",
|
|
24
|
+
"color: #999; font-size: 12px;"
|
|
25
|
+
);
|
|
26
|
+
};
|
|
27
|
+
const showShikiStreamHint = () => {
|
|
28
|
+
if (hasShownShikiStreamHint) return;
|
|
29
|
+
hasShownShikiStreamHint = true;
|
|
30
|
+
console.log(
|
|
31
|
+
"%c[x-markdown]%c shiki-stream 未安装，已降级为非流式高亮",
|
|
32
|
+
"font-weight: bold; color: #0066cc;",
|
|
33
|
+
"color: #666;"
|
|
34
|
+
);
|
|
35
|
+
console.log(
|
|
36
|
+
"%c如需流式代码高亮功能（推荐用于 AI 场景），请安装：",
|
|
37
|
+
"color: #666; font-weight: bold;"
|
|
38
|
+
);
|
|
39
|
+
console.log(
|
|
40
|
+
"%c pnpm add shiki-stream",
|
|
19
41
|
"color: #00aa00; font-family: monospace;"
|
|
20
42
|
);
|
|
21
43
|
console.log(
|
|
@@ -178,7 +200,7 @@ function useHighlight(text, options) {
|
|
|
178
200
|
lines: [[{ content: text.value }]],
|
|
179
201
|
preStyle: void 0
|
|
180
202
|
};
|
|
181
|
-
|
|
203
|
+
showShikiHint();
|
|
182
204
|
return;
|
|
183
205
|
}
|
|
184
206
|
highlighter = await mod.createHighlighter({
|
|
@@ -201,6 +223,8 @@ function useHighlight(text, options) {
|
|
|
201
223
|
lang: currentLang,
|
|
202
224
|
theme: currentTheme
|
|
203
225
|
});
|
|
226
|
+
} else {
|
|
227
|
+
showShikiStreamHint();
|
|
204
228
|
}
|
|
205
229
|
previousText = "";
|
|
206
230
|
const themeInfo = highlighter.getTheme(currentTheme);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"x-markdown.es7.js","sources":["../src/hooks/useHighlight.ts"],"sourcesContent":["import { ref, watch, onUnmounted, computed, isRef, toValue, type Ref, type MaybeRef, type CSSProperties } from 'vue'\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\ninterface StreamingHighlightResult {\r\n colorReplacements?: Record<string, string>\r\n lines: HighlightToken[][]\r\n preStyle?: CSSProperties\r\n}\r\n\r\ninterface UseHighlightOptions {\r\n language: MaybeRef<string>\r\n theme?: string | Ref<string>\r\n colorReplacements?: Record<string, string>\r\n}\r\n\r\nlet shikiModulePromise: Promise<any | null> | null = null\r\nlet shikiStreamModulePromise: Promise<any | null> | null = null\r\nlet hasShownDependencyHint = false\r\n\r\n\r\nconst showDependencyHint = () => {\r\n if (hasShownDependencyHint) return\r\n hasShownDependencyHint = true\r\n\r\n console.log(\r\n '%c[x-markdown]%c 代码高亮功能已降级为纯文本模式',\r\n 'font-weight: bold; color: #0066cc;',\r\n 'color: #666;'\r\n )\r\n console.log(\r\n '%c如需语法高亮功能，请安装以下依赖：',\r\n 'color: #666; font-weight: bold;'\r\n )\r\n console.log(\r\n '%c pnpm add shiki shiki-stream',\r\n 'color: #00aa00; font-family: monospace;'\r\n )\r\n console.log(\r\n '%c安装后请重启开发服务器',\r\n 'color: #999; font-size: 12px;'\r\n )\r\n}\r\n\r\nconst loadShiki = async () => {\r\n if (!shikiModulePromise) {\r\n shikiModulePromise = (async () => {\r\n try {\r\n const mod = await import('shiki')\r\n return mod\r\n } catch {\r\n // 静默失败，返回 null\r\n return null\r\n }\r\n })()\r\n }\r\n return shikiModulePromise\r\n}\r\n\r\nconst loadShikiStream = async () => {\r\n if (!shikiStreamModulePromise) {\r\n shikiStreamModulePromise = (async () => {\r\n try {\r\n const mod = await import('shiki-stream')\r\n return mod\r\n } catch {\r\n // 静默失败，返回 null\r\n return null\r\n }\r\n })()\r\n }\r\n return shikiStreamModulePromise\r\n}\r\n\r\nconst tokensToLineTokens = (tokens: HighlightToken[]): HighlightToken[][] => {\r\n if (!tokens.length) return [[]]\r\n\r\n const lines: HighlightToken[][] = [[]]\r\n let currentLine = lines[0]\r\n\r\n const startNewLine = () => {\r\n currentLine = []\r\n lines.push(currentLine)\r\n }\r\n\r\n tokens.forEach((token) => {\r\n const content = token.content ?? ''\r\n\r\n if (content === '\\n') {\r\n startNewLine()\r\n return\r\n }\r\n\r\n if (!content.includes('\\n')) {\r\n currentLine.push(token)\r\n return\r\n }\r\n\r\n const segments = content.split('\\n')\r\n segments.forEach((segment, index) => {\r\n if (segment) {\r\n currentLine.push({\r\n ...token,\r\n content: segment,\r\n })\r\n }\r\n\r\n if (index < segments.length - 1) {\r\n startNewLine()\r\n }\r\n })\r\n })\r\n\r\n return lines.length === 0 ? [[]] : lines\r\n}\r\n\r\nconst createPreStyle = (bg?: string, fg?: string): CSSProperties | undefined => {\r\n if (!bg && !fg) return undefined\r\n return {\r\n backgroundColor: bg,\r\n color: fg,\r\n }\r\n}\r\n\r\nexport function useHighlight(text: Ref<string>, options: UseHighlightOptions) {\r\n const streaming = ref<StreamingHighlightResult>()\r\n const isLoading = ref(false)\r\n const error = ref<Error | null>(null)\r\n\r\n let tokenizer: any | null = null\r\n let previousText = ''\r\n let highlighter: any | null = null\r\n let currentUsedLang = ''\r\n let lastRequestedLang = ''\r\n\r\n const effectiveTheme = computed(() => {\r\n const theme = isRef(options.theme) ? options.theme.value : options.theme\r\n return theme || 'slack-dark'\r\n })\r\n\r\n const effectiveLanguage = computed(() => {\r\n return toValue(options.language) || 'text'\r\n })\r\n\r\n const lines = computed(() => streaming.value?.lines || [[]])\r\n const preStyle = computed(() => streaming.value?.preStyle)\r\n\r\n const updateTokens = async (nextText: string, forceReset = false) => {\r\n // 当有 tokenizer 时使用流式处理\r\n if (tokenizer) {\r\n if (forceReset) {\r\n tokenizer.clear()\r\n previousText = ''\r\n }\r\n\r\n const canAppend = !forceReset && nextText.startsWith(previousText)\r\n let chunk = nextText\r\n\r\n if (canAppend) {\r\n chunk = nextText.slice(previousText.length)\r\n } else if (!forceReset) {\r\n tokenizer.clear()\r\n }\r\n\r\n previousText = nextText\r\n\r\n if (!chunk) {\r\n const mergedTokens = [...tokenizer.tokensStable, ...tokenizer.tokensUnstable]\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: mergedTokens.length ? tokensToLineTokens(mergedTokens) : [[]],\r\n preStyle: streaming.value?.preStyle,\r\n }\r\n return\r\n }\r\n\r\n try {\r\n await tokenizer.enqueue(chunk)\r\n\r\n const mergedTokens = [...tokenizer.tokensStable, ...tokenizer.tokensUnstable]\r\n\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: tokensToLineTokens(mergedTokens),\r\n preStyle: streaming.value?.preStyle,\r\n }\r\n } catch (err) {\r\n console.error('[x-markdown] Streaming highlighting failed:', err)\r\n error.value = err as Error\r\n }\r\n } else if (highlighter) {\r\n // 当没有 tokenizer 但有 highlighter 时，使用非流式方式高亮\r\n // 这发生在 shiki 可用但 shiki-stream 不可用时\r\n try {\r\n const currentLang = currentUsedLang || 'plaintext'\r\n const currentTheme = effectiveTheme.value\r\n const tokens = highlighter.codeToTokens(nextText, {\r\n lang: currentLang,\r\n theme: currentTheme,\r\n })\r\n\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: tokensToLineTokens(tokens),\r\n preStyle: streaming.value?.preStyle,\r\n }\r\n } catch (err) {\r\n console.error('[x-markdown] Direct highlighting failed:', err)\r\n // 降级为纯文本\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: [[{ content: nextText }]],\r\n preStyle: streaming.value?.preStyle,\r\n }\r\n }\r\n }\r\n }\r\n\r\n const initHighlighter = async () => {\r\n isLoading.value = true\r\n error.value = null\r\n\r\n let currentLang = effectiveLanguage.value\r\n const currentTheme = effectiveTheme.value\r\n\r\n try {\r\n const mod = await loadShiki()\r\n if (!mod) {\r\n // 静默降级为纯文本\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: [[{ content: text.value }]],\r\n preStyle: undefined,\r\n }\r\n showDependencyHint()\r\n return\r\n }\r\n\r\n // shiki 3.x API\r\n highlighter = await mod.createHighlighter({\r\n themes: [currentTheme],\r\n langs: [], // 将动态加载语言\r\n })\r\n\r\n lastRequestedLang = currentLang\r\n\r\n try {\r\n await highlighter.loadLanguage(currentLang as any)\r\n currentUsedLang = currentLang\r\n } catch {\r\n currentLang = 'plaintext'\r\n currentUsedLang = 'plaintext'\r\n }\r\n\r\n // 动态加载 shiki-stream\r\n const shikiStreamMod = await loadShikiStream()\r\n if (shikiStreamMod) {\r\n tokenizer = new shikiStreamMod.ShikiStreamTokenizer({\r\n highlighter: highlighter,\r\n lang: currentLang,\r\n theme: currentTheme,\r\n })\r\n }\r\n\r\n previousText = ''\r\n\r\n const themeInfo = highlighter.getTheme(currentTheme)\r\n const preStyleValue = createPreStyle(themeInfo?.bg, themeInfo?.fg)\r\n\r\n if (text.value) {\r\n await updateTokens(text.value, true)\r\n if (streaming.value) {\r\n streaming.value.preStyle = preStyleValue\r\n }\r\n } else {\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: [[]],\r\n preStyle: preStyleValue,\r\n }\r\n }\r\n } catch (err) {\r\n // 静默降级\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: [[{ content: text.value }]],\r\n preStyle: undefined,\r\n }\r\n } finally {\r\n isLoading.value = false\r\n }\r\n }\r\n\r\n watch(\r\n () => [effectiveLanguage.value, effectiveTheme.value],\r\n async ([newLang]) => {\r\n const requestedLang = newLang as string\r\n\r\n if (\r\n highlighter &&\r\n currentUsedLang === 'plaintext' &&\r\n requestedLang !== lastRequestedLang &&\r\n requestedLang !== 'plaintext'\r\n ) {\r\n try {\r\n await highlighter.loadLanguage(requestedLang as any)\r\n initHighlighter()\r\n return\r\n } catch {\r\n lastRequestedLang = requestedLang\r\n return\r\n }\r\n }\r\n\r\n initHighlighter()\r\n },\r\n { immediate: true },\r\n )\r\n\r\n watch(text, async (newText) => {\r\n const requestedLang = effectiveLanguage.value\r\n if (\r\n highlighter &&\r\n currentUsedLang === 'plaintext' &&\r\n requestedLang !== lastRequestedLang &&\r\n requestedLang !== 'plaintext'\r\n ) {\r\n try {\r\n await highlighter.loadLanguage(requestedLang as any)\r\n await initHighlighter()\r\n return\r\n } catch {\r\n lastRequestedLang = requestedLang\r\n }\r\n }\r\n\r\n if (tokenizer || highlighter) {\r\n // 当有 tokenizer 或 highlighter 时都调用 updateTokens\r\n // updateTokens 内部会处理两种情况\r\n updateTokens(newText)\r\n } else {\r\n // 两者都没有时降级为纯文本\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: [[{ content: newText }]],\r\n preStyle: streaming.value?.preStyle,\r\n }\r\n }\r\n })\r\n\r\n onUnmounted(() => {\r\n tokenizer?.clear()\r\n tokenizer = null\r\n previousText = ''\r\n })\r\n\r\n return {\r\n streaming,\r\n lines,\r\n preStyle,\r\n isLoading,\r\n error,\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"x-markdown.es7.js","sources":["../src/hooks/useHighlight.ts"],"sourcesContent":["import { ref, watch, onUnmounted, computed, isRef, toValue, type Ref, type MaybeRef, type CSSProperties } from 'vue'\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\ninterface StreamingHighlightResult {\r\n colorReplacements?: Record<string, string>\r\n lines: HighlightToken[][]\r\n preStyle?: CSSProperties\r\n}\r\n\r\ninterface UseHighlightOptions {\r\n language: MaybeRef<string>\r\n theme?: string | Ref<string>\r\n colorReplacements?: Record<string, string>\r\n}\r\n\r\nlet shikiModulePromise: Promise<any | null> | null = null\r\nlet shikiStreamModulePromise: Promise<any | null> | null = null\r\nlet hasShownShikiHint = false\r\nlet hasShownShikiStreamHint = false\r\n\r\n\r\nconst showShikiHint = () => {\r\n if (hasShownShikiHint) return\r\n hasShownShikiHint = true\r\n\r\n console.log(\r\n '%c[x-markdown]%c Shiki 代码高亮库未安装，已降级为纯文本模式',\r\n 'font-weight: bold; color: #0066cc;',\r\n 'color: #666;'\r\n )\r\n console.log(\r\n '%c如需语法高亮功能，请安装：',\r\n 'color: #666; font-weight: bold;'\r\n )\r\n console.log(\r\n '%c pnpm add shiki',\r\n 'color: #00aa00; font-family: monospace;'\r\n )\r\n console.log(\r\n '%c安装后请重启开发服务器',\r\n 'color: #999; font-size: 12px;'\r\n )\r\n}\r\n\r\nconst showShikiStreamHint = () => {\r\n if (hasShownShikiStreamHint) return\r\n hasShownShikiStreamHint = true\r\n\r\n console.log(\r\n '%c[x-markdown]%c shiki-stream 未安装，已降级为非流式高亮',\r\n 'font-weight: bold; color: #0066cc;',\r\n 'color: #666;'\r\n )\r\n console.log(\r\n '%c如需流式代码高亮功能（推荐用于 AI 场景），请安装：',\r\n 'color: #666; font-weight: bold;'\r\n )\r\n console.log(\r\n '%c pnpm add shiki-stream',\r\n 'color: #00aa00; font-family: monospace;'\r\n )\r\n console.log(\r\n '%c安装后请重启开发服务器',\r\n 'color: #999; font-size: 12px;'\r\n )\r\n}\r\n\r\nconst loadShiki = async () => {\r\n if (!shikiModulePromise) {\r\n shikiModulePromise = (async () => {\r\n try {\r\n const mod = await import('shiki')\r\n return mod\r\n } catch {\r\n // 静默失败，返回 null\r\n return null\r\n }\r\n })()\r\n }\r\n return shikiModulePromise\r\n}\r\n\r\nconst loadShikiStream = async () => {\r\n if (!shikiStreamModulePromise) {\r\n shikiStreamModulePromise = (async () => {\r\n try {\r\n const mod = await import('shiki-stream')\r\n return mod\r\n } catch {\r\n // 静默失败，返回 null\r\n return null\r\n }\r\n })()\r\n }\r\n return shikiStreamModulePromise\r\n}\r\n\r\nconst tokensToLineTokens = (tokens: HighlightToken[]): HighlightToken[][] => {\r\n if (!tokens.length) return [[]]\r\n\r\n const lines: HighlightToken[][] = [[]]\r\n let currentLine = lines[0]\r\n\r\n const startNewLine = () => {\r\n currentLine = []\r\n lines.push(currentLine)\r\n }\r\n\r\n tokens.forEach((token) => {\r\n const content = token.content ?? ''\r\n\r\n if (content === '\\n') {\r\n startNewLine()\r\n return\r\n }\r\n\r\n if (!content.includes('\\n')) {\r\n currentLine.push(token)\r\n return\r\n }\r\n\r\n const segments = content.split('\\n')\r\n segments.forEach((segment, index) => {\r\n if (segment) {\r\n currentLine.push({\r\n ...token,\r\n content: segment,\r\n })\r\n }\r\n\r\n if (index < segments.length - 1) {\r\n startNewLine()\r\n }\r\n })\r\n })\r\n\r\n return lines.length === 0 ? [[]] : lines\r\n}\r\n\r\nconst createPreStyle = (bg?: string, fg?: string): CSSProperties | undefined => {\r\n if (!bg && !fg) return undefined\r\n return {\r\n backgroundColor: bg,\r\n color: fg,\r\n }\r\n}\r\n\r\nexport function useHighlight(text: Ref<string>, options: UseHighlightOptions) {\r\n const streaming = ref<StreamingHighlightResult>()\r\n const isLoading = ref(false)\r\n const error = ref<Error | null>(null)\r\n\r\n let tokenizer: any | null = null\r\n let previousText = ''\r\n let highlighter: any | null = null\r\n let currentUsedLang = ''\r\n let lastRequestedLang = ''\r\n\r\n const effectiveTheme = computed(() => {\r\n const theme = isRef(options.theme) ? options.theme.value : options.theme\r\n return theme || 'slack-dark'\r\n })\r\n\r\n const effectiveLanguage = computed(() => {\r\n return toValue(options.language) || 'text'\r\n })\r\n\r\n const lines = computed(() => streaming.value?.lines || [[]])\r\n const preStyle = computed(() => streaming.value?.preStyle)\r\n\r\n const updateTokens = async (nextText: string, forceReset = false) => {\r\n // 当有 tokenizer 时使用流式处理\r\n if (tokenizer) {\r\n if (forceReset) {\r\n tokenizer.clear()\r\n previousText = ''\r\n }\r\n\r\n const canAppend = !forceReset && nextText.startsWith(previousText)\r\n let chunk = nextText\r\n\r\n if (canAppend) {\r\n chunk = nextText.slice(previousText.length)\r\n } else if (!forceReset) {\r\n tokenizer.clear()\r\n }\r\n\r\n previousText = nextText\r\n\r\n if (!chunk) {\r\n const mergedTokens = [...tokenizer.tokensStable, ...tokenizer.tokensUnstable]\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: mergedTokens.length ? tokensToLineTokens(mergedTokens) : [[]],\r\n preStyle: streaming.value?.preStyle,\r\n }\r\n return\r\n }\r\n\r\n try {\r\n await tokenizer.enqueue(chunk)\r\n\r\n const mergedTokens = [...tokenizer.tokensStable, ...tokenizer.tokensUnstable]\r\n\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: tokensToLineTokens(mergedTokens),\r\n preStyle: streaming.value?.preStyle,\r\n }\r\n } catch (err) {\r\n console.error('[x-markdown] Streaming highlighting failed:', err)\r\n error.value = err as Error\r\n }\r\n } else if (highlighter) {\r\n // 当没有 tokenizer 但有 highlighter 时，使用非流式方式高亮\r\n // 这发生在 shiki 可用但 shiki-stream 不可用时\r\n try {\r\n const currentLang = currentUsedLang || 'plaintext'\r\n const currentTheme = effectiveTheme.value\r\n const tokens = highlighter.codeToTokens(nextText, {\r\n lang: currentLang,\r\n theme: currentTheme,\r\n })\r\n\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: tokensToLineTokens(tokens),\r\n preStyle: streaming.value?.preStyle,\r\n }\r\n } catch (err) {\r\n console.error('[x-markdown] Direct highlighting failed:', err)\r\n // 降级为纯文本\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: [[{ content: nextText }]],\r\n preStyle: streaming.value?.preStyle,\r\n }\r\n }\r\n }\r\n }\r\n\r\n const initHighlighter = async () => {\r\n isLoading.value = true\r\n error.value = null\r\n\r\n let currentLang = effectiveLanguage.value\r\n const currentTheme = effectiveTheme.value\r\n\r\n try {\r\n const mod = await loadShiki()\r\n if (!mod) {\r\n // shiki 完全不可用\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: [[{ content: text.value }]],\r\n preStyle: undefined,\r\n }\r\n showShikiHint()\r\n return\r\n }\r\n\r\n // shiki 3.x API\r\n highlighter = await mod.createHighlighter({\r\n themes: [currentTheme],\r\n langs: [], // 将动态加载语言\r\n })\r\n\r\n lastRequestedLang = currentLang\r\n\r\n try {\r\n await highlighter.loadLanguage(currentLang as any)\r\n currentUsedLang = currentLang\r\n } catch {\r\n currentLang = 'plaintext'\r\n currentUsedLang = 'plaintext'\r\n }\r\n\r\n // 动态加载 shiki-stream\r\n const shikiStreamMod = await loadShikiStream()\r\n if (shikiStreamMod) {\r\n tokenizer = new shikiStreamMod.ShikiStreamTokenizer({\r\n highlighter: highlighter,\r\n lang: currentLang,\r\n theme: currentTheme,\r\n })\r\n } else {\r\n // shiki 可用但 shiki-stream 不可用\r\n showShikiStreamHint()\r\n }\r\n\r\n previousText = ''\r\n\r\n const themeInfo = highlighter.getTheme(currentTheme)\r\n const preStyleValue = createPreStyle(themeInfo?.bg, themeInfo?.fg)\r\n\r\n if (text.value) {\r\n await updateTokens(text.value, true)\r\n if (streaming.value) {\r\n streaming.value.preStyle = preStyleValue\r\n }\r\n } else {\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: [[]],\r\n preStyle: preStyleValue,\r\n }\r\n }\r\n } catch (err) {\r\n // 静默降级\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: [[{ content: text.value }]],\r\n preStyle: undefined,\r\n }\r\n } finally {\r\n isLoading.value = false\r\n }\r\n }\r\n\r\n watch(\r\n () => [effectiveLanguage.value, effectiveTheme.value],\r\n async ([newLang]) => {\r\n const requestedLang = newLang as string\r\n\r\n if (\r\n highlighter &&\r\n currentUsedLang === 'plaintext' &&\r\n requestedLang !== lastRequestedLang &&\r\n requestedLang !== 'plaintext'\r\n ) {\r\n try {\r\n await highlighter.loadLanguage(requestedLang as any)\r\n initHighlighter()\r\n return\r\n } catch {\r\n lastRequestedLang = requestedLang\r\n return\r\n }\r\n }\r\n\r\n initHighlighter()\r\n },\r\n { immediate: true },\r\n )\r\n\r\n watch(text, async (newText) => {\r\n const requestedLang = effectiveLanguage.value\r\n if (\r\n highlighter &&\r\n currentUsedLang === 'plaintext' &&\r\n requestedLang !== lastRequestedLang &&\r\n requestedLang !== 'plaintext'\r\n ) {\r\n try {\r\n await highlighter.loadLanguage(requestedLang as any)\r\n await initHighlighter()\r\n return\r\n } catch {\r\n lastRequestedLang = requestedLang\r\n }\r\n }\r\n\r\n if (tokenizer || highlighter) {\r\n // 当有 tokenizer 或 highlighter 时都调用 updateTokens\r\n // updateTokens 内部会处理两种情况\r\n updateTokens(newText)\r\n } else {\r\n // 两者都没有时降级为纯文本\r\n streaming.value = {\r\n colorReplacements: options.colorReplacements,\r\n lines: [[{ content: newText }]],\r\n preStyle: streaming.value?.preStyle,\r\n }\r\n }\r\n })\r\n\r\n onUnmounted(() => {\r\n tokenizer?.clear()\r\n tokenizer = null\r\n previousText = ''\r\n })\r\n\r\n return {\r\n streaming,\r\n lines,\r\n preStyle,\r\n isLoading,\r\n error,\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/vite-plugin.js
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
|
-
import { resolve } from 'node:path'
|
|
1
|
+
import { resolve, dirname } from 'node:path'
|
|
2
2
|
import { existsSync } from 'node:fs'
|
|
3
3
|
import { fileURLToPath } from 'node:url'
|
|
4
4
|
|
|
5
|
+
// 在 ES 模块中获取 __dirname
|
|
6
|
+
const __filename = fileURLToPath(import.meta.url)
|
|
7
|
+
const __dirname = dirname(__filename)
|
|
8
|
+
|
|
5
9
|
/**
|
|
6
10
|
* x-markdown Vite 插件
|
|
7
11
|
*
|
package/dist/x-markdown.cjs28.js
DELETED
|
@@ -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.cjs28.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"x-markdown.cjs28.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"}
|
package/dist/x-markdown.cjs33.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"x-markdown.cjs33.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/dist/x-markdown.es28.js
DELETED
|
@@ -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.es28.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"x-markdown.es28.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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"}
|
package/dist/x-markdown.es33.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"x-markdown.es33.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
|