boos
e0a5f57793
Vendor the rebranded BoosAPI Desktop client (Tauri + Vue) into metapi as a monorepo subdirectory under desktop/. Source only — node_modules, dist, Cargo target and the upstream .git history are excluded. desktop/ keeps its own independent Cargo workspace (desktop/src-tauri with crates/*); it is not part of the backend boosapi crate, so a `cargo check` at the metapi root still compiles only the backend. Build the desktop app from desktop/src-tauri per desktop/README.md. Note: app icons are still placeholder assets pending the final BoosAPI logo. The updater signing keys live outside the repo and are not included.
61 lines
2.5 KiB
Markdown
61 lines
2.5 KiB
Markdown
# Override MermaidBlockNode in MarkdownRender
|
|
|
|
If you want to completely replace the `mermaid` renderer used by `MarkdownRender` (for example in the `playground-demo`), you can use `setCustomComponents` and provide a programmatic renderer that mounts `MermaidBlockNode` with custom event handlers.
|
|
|
|
Example:
|
|
|
|
```ts twoslash
|
|
import type { MermaidBlockEvent } from 'markstream-vue'
|
|
import { MermaidBlockNode, setCustomComponents } from 'markstream-vue'
|
|
import { h } from 'vue'
|
|
|
|
declare function uploadSvgToServer(svg: string): void
|
|
|
|
setCustomComponents('playground-demo', {
|
|
mermaid: (props: any) => h(MermaidBlockNode, {
|
|
...props,
|
|
onCopy: async (ev: MermaidBlockEvent<{ type: 'copy', text: string }>) => {
|
|
// Optional: take over the copy behavior (clipboard + toast/analytics)
|
|
ev.preventDefault()
|
|
const text = ev.payload?.text ?? ''
|
|
if (typeof navigator !== 'undefined' && navigator.clipboard && typeof navigator.clipboard.writeText === 'function')
|
|
await navigator.clipboard.writeText(text)
|
|
},
|
|
onExport: (ev: MermaidBlockEvent) => {
|
|
// read the rendered svg from ev.svgElement and upload or save
|
|
const svgEl = ev.svgElement as SVGElement | null
|
|
if (svgEl) {
|
|
const svgString = new XMLSerializer().serializeToString(svgEl)
|
|
uploadSvgToServer(svgString)
|
|
}
|
|
ev.preventDefault()
|
|
},
|
|
}),
|
|
})
|
|
```
|
|
|
|
Key points:
|
|
- Use `onExport` / `onCopy` (camelCase) when passing listeners via `h()`.
|
|
- Call `ev.preventDefault()` to prevent the default behavior inside `MermaidBlockNode`.
|
|
- `ev.svgElement` (if present) gives direct access to the rendered SVG DOM node.
|
|
- `ev.svgString` (if present) contains a serialized string of the SVG (ready to upload or send to an API).
|
|
|
|
Quick try — test the override by mounting the custom renderer inside your app's client entry and interacting with onExport in the playground.
|
|
|
|
```ts twoslash
|
|
// .vitepress/clientAppEnhance.ts or playground client entry
|
|
import type { MermaidBlockEvent } from 'markstream-vue'
|
|
import { MermaidBlockNode, setCustomComponents } from 'markstream-vue'
|
|
import { h } from 'vue'
|
|
|
|
setCustomComponents('playground-demo', {
|
|
mermaid: (props: any) => h(MermaidBlockNode, { ...props, onExport: (ev: MermaidBlockEvent) => {
|
|
ev.preventDefault()
|
|
console.log('exported', ev.svgElement)
|
|
} })
|
|
})
|
|
```
|
|
|
|
Playground demo: the repo includes a runnable playground page demonstrating intercepting the export event and uploading the svg — open: /playground/src/pages/mermaid-export-demo.vue or run the playground and visit the route for the demo.
|
|
```
|