vuepress-plugin-md-enhance/lib/client/components/MarkMap.js

Markdown enhancement plugin for vuepress

import{decodeData as v,LoadingIcon as g}from"@vuepress/helper/client";import{useEventListener as k,useDebounceFn as y}from"@vueuse/core";import{defineComponent as h,ref as w,shallowRef as s,h as r,onMounted as M,onUnmounted as b}from"vue";import"../styles/markmap.scss";var D=h({name:"MarkMap",props:{id:{type:String,required:!0},content:{type:String,required:!0}},setup(a){const o=w(!0),n=s(),i=s();let e=null;return k("resize",y(()=>{e?.fit()},100)),M(async()=>{const[{Transformer:m},{Markmap:l,deriveOptions:p},{Toolbar:u}]=await Promise.all([import("markmap-lib"),import("markmap-view"),import("markmap-toolbar")]),d=new m,{frontmatter:f,root:c}=d.transform(v(a.content));e=l.create(i.value,p({maxWidth:240,...f?.markmap}));const{el:t}=u.create(e);await e.setData(c),await e.fit(),t.style.position="absolute",t.style.bottom="0.5rem",t.style.right="0.5rem",n.value.append(t),o.value=!1}),b(()=>{e?.destroy(),e=null}),()=>r("div",{class:"markmap-wrapper",ref:n},[r("svg",{ref:i,class:"markmap-svg",id:a.id}),o.value?r(g,{class:"markmap-loading",height:360}):null])}});export{D as default};
//# sourceMappingURL=MarkMap.js.map