Embed in Vue
Embed the shared Vue workbench with styles, a host-owned request and an explicit save lifecycle.
TextDiagramEditor owns draft editing, preview, downloads and save proposals. The application owns the current document, persistence and the decision to accept changes. The workbench never writes directly into your editor or server.
Styles and providers
Import the component from @quirekit/text-diagram-editor/vue and import @quirekit/text-diagram-editor/styles.css. Controls also need generated styles from @quirekit/unocss-preset plus the theme, locale and icon providers from @quirekit/ui/vue.
Follow the design system setup for defineQuireKitUnoConfig, the UnoCSS Vite plugin and virtual:uno.css. The local design preview uses fixed port 3200. At the application root, provide QuireThemeProvider, QuireLocaleProvider and QuireIconProvider, using quireIconRegistry from @quirekit/ui. This documentation site's shell already installs these providers.
Complete working integration
Start with workspace/editor.vue: after mounting, it supplies ownerDocument, obtains a host request and passes them to the workbench. The host decides whether to accept a save.
| File | Read when changing |
|---|---|
workspace/editor.vue | Mounting and page behavior after save or cancel |
recipes/session.ts | Current object, revision comparison and storage |
shared/locale.ts | Example labels |
shared/types.ts | Shared host types |
The example uses browser storage. Replace persist with your synchronous local transaction. Inspect one file at a time in Source.
Component contract
| Prop / event | Purpose |
|---|---|
request | Required: baseline document, synchronous commit and release |
ownerDocument | Required: the mounted browser Document |
locale | Controls and new template labels; Chinese by default, English supported |
languages | Optional installed language subset; all three when omitted |
titleEditable | Set explicitly to true for title input; Markdown hosts can set false |
saved | Emitted after the host returns saved; refresh the baseline or close |
cancel | User cancelled; the host releases the target and chooses the next action |
The component captures request.document when created. When switching objects or accepting a save, release the old request and mount with a fresh key. Merely replacing request does not reset the current draft.
Cleanup and SSR
An embedded component does not release the host target for you. Call request.release() on cancellation, replacement or unmount. The component cleans up its own preview and CodeMirror. Set ownerDocument after onMounted; in Nuxt, use ClientOnly or a .client.vue boundary so server rendering never reads document.
Commit source and preview together. See save and restore for the complete contract.