| 80 | } |
| 81 | |
| 82 | export function render(el: HTMLElement) { |
| 83 | const { Transformer, Markmap, deriveOptions, Toolbar } = window.markmap; |
| 84 | const lines = el.textContent?.split('\n') || []; |
| 85 | let indent = Infinity; |
| 86 | lines.forEach((line) => { |
| 87 | const spaces = line.match(/^\s*/)?.[0].length || 0; |
| 88 | if (spaces < line.length) indent = Math.min(indent, spaces); |
| 89 | }); |
| 90 | const content = lines |
| 91 | .map((line) => line.slice(indent)) |
| 92 | .join('\n') |
| 93 | .trim(); |
| 94 | const transformer = new Transformer(autoLoaderOptions.transformPlugins); |
| 95 | transformer.urlBuilder = urlBuilder; |
| 96 | el.innerHTML = '<svg></svg>'; |
| 97 | const svg = el.firstChild as SVGElement; |
| 98 | const mm = Markmap.create(svg, { embedGlobalCSS: false }); |
| 99 | if (autoLoaderOptions.toolbar) { |
| 100 | const { el: toolbar } = Toolbar.create(mm); |
| 101 | Object.assign(toolbar.style, { |
| 102 | position: 'absolute', |
| 103 | right: '20px', |
| 104 | bottom: '20px', |
| 105 | }); |
| 106 | el.append(toolbar); |
| 107 | } |
| 108 | const doRender = async () => { |
| 109 | const { root, frontmatter } = transform(transformer, content); |
| 110 | const markmapOptions = frontmatter?.markmap; |
| 111 | const frontmatterOptions = deriveOptions(markmapOptions); |
| 112 | await mm.setData(root, frontmatterOptions); |
| 113 | mm.fit(); |
| 114 | }; |
| 115 | transformer.hooks.retransform.tap(doRender); |
| 116 | doRender(); |
| 117 | } |
| 118 | |
| 119 | export async function renderAllUnder(container: ParentNode) { |
| 120 | await ready; |