Mounting and cleanup

Native DOM

createMsfeEditor() works directly on a regular web page. The example's mount.ts has no Vue dependency; its Vue component only supplies the documentation demo container.

Lifecycle boundaries

Create the editor when its DOM container is ready, and call destroy() before removing that container. Destruction releases editor plugins, listeners, and view resources. Do not recreate the instance on every framework render.

Each instance owns independent content, selection, and history. Instances may share extension definitions, but each instance owns its mutable state.

Switching documents

replaceDocument(markdown, documentId) explicitly switches documents and resets history and selection. To merge external changes to the same document, use version-checked applyChanges(). See Reading and saving.

Asynchronous work

A custom node's load(attrs, signal) may return a resource and release(). Respect cancellation after attributes change, views unmount, or the editor is destroyed; stale results will not become the current node's resource. Persistent business requests belong to the host application.

DOM and host responsibilities

The runtime owns its editor nodes inside parent. Do not overwrite that area's innerHTML during framework updates. Use separate parents and accessible labels for multiple editors. Share immutable definitions, not mutable business instances.

If you call createComponentHost() directly rather than using an adapter, you also own its disposal. End the editor and mounted views before disposing the host to avoid orphaned portals.

Route lifecycle

Save or preserve unsaved text, cancel document work, dispose the editor, then remove its container. Reopening creates an instance from saved Markdown. Mode changes that retain the same document and history should call setMode instead of recreating the editor.

Assign resources to the shortest suitable scope. See Resources for complete ownership and cancellation patterns.