Display content with Canvas/SVG
Replace DOM with Canvas and understand scrolling, zoom and pagination responsibilities.
View handles document display and input. Replace the native DOM view from chapter one with Canvas; Core still uses the same nodes, commands and history mechanisms.
Obtain a matching version of @quirekit/view. Its licensing differs from Core; see licensing.
1. Install the view
Replace DomViewExtension with the Canvas adapter and select mode: 'canvas'. This creation excerpt belongs inside the previous component's onMounted:
import { canvasViewExtension } from '@quirekit/view'
import '@quirekit/view/styles.css'
editor = new Editor({
element: element.value,
mode: 'canvas',
extensions: [
StarterKit,
canvasViewExtension({ runtime: { width: 720, height: 900 } }),
],
content: '<p>Content displayed by Canvas.</p>',
})
runtime configures the view; dimensions use CSS pixels. Structure styles position content, input and selection layers and must be imported with the adapter.
This single-file example uses its container width. Click to edit; its source includes all imports and Vue lifecycle hooks.
2. Switch to SVG while keeping content
Install svgViewExtension() too when creating the editor, then call:
editor.changeMode('svg')
editor.changeMode('canvas')
changeMode() replaces the primary view without creating new content. Another mount() adds a view instead. Destroy the owned Editor when the component exits.
3. Let the workspace manage scroll and zoom
For scrolling inside your container, pass it as scrollViewport with scrollSource: 'viewport'. View can then handle input and selection using the correct scroll position.
The complete example calculates display zoom in workspace.vue and reports page counts and content dimensions from runtime.ts. Display zoom must not rewrite paper dimensions in the document.
4. Pagination comes from the model
Canvas does not itself add Word pagination. Articles can use continuous layout; the Word model supplies page rules. pageStack: true displays resulting pages separately without inventing section, header or footer rules.
For pagination, inspect assembly/word.ts, runtime.ts and workspace.vue in the complete reference, alongside document models. Next: connect your toolbar. Detailed parameters are in View API.