Save and open documents
Start with JSON, then add validation, asynchronous state and DOCX conversion.
Editor modifies content; your application decides where to store it. Start with JSON backups, then validate opened files and distinguish DOCX from your native backup format.
1. Read content when saving
const content = editor.getJSON()
Store the result in your database, API or browser storage. Include a version and model name, such as version: 1 and model: 'generic-v1', so future versions can recognize older files.
files/repository.ts uses localStorage for local drafts. Cross-device synchronization needs your own server.
2. Confirm which revision was saved
Users may keep typing while saving. Capture the starting document and clear the unsaved indicator only if the current content still matches that revision.
Keep content and unsaved state after failure, and show an error with retry. Browser storage can fail too. session.ts coordinates these states without creating a second editable document in Vue.
3. Validate before restoring
Check backup version and model, then validate nodes, marks, attributes and children against Schema. Only then replace the document:
editor.commands.replaceDocument(content)
replaceDocument() restores the complete document, including top-level attributes; setContent() is for ordinary content replacement. On rejection, preserve the original file and draft rather than dropping unknown nodes and overwriting the backup.
See files/backup.ts for validation. The example requires saving edits before opening another file.
4. Reject outdated loads
By the time asynchronous reading or conversion finishes, users may have edited, opened another file, switched to read-only or left the page.
Before committing, confirm the instance, operation and document still match the starting state. session.ts centralizes this check for all file actions.
5. Add DOCX
JSON preserves your product model. DOCX requires separate conversion rules. The Word workspace loads public @quirekit/classic-docx/docx APIs on demand; files/docx.ts handles bytes and conversion results, while session.ts decides whether to commit them.
A custom workspace can reuse those conversion APIs. Classic can install createClassicWordDocxPlugin() and use instance.importDocument() and exportDocument().
Keep and display conversion diagnostics. Images also require media storage: saving a JSON reference does not save the image bytes.
Inspect files by purpose in the reference. Next: images, fonts and product capabilities.