Install prosemirror-dev-tools package from npm:
npm install --save-dev prosemirror-dev-toolsWrap EditorView instance in applyDevTools method:
import applyDevTools from "prosemirror-dev-tools";
const view = new EditorView /*...*/();
applyDevTools(view);Add script tag to your html file:
<script src="https://unpkg.com/prosemirror-dev-tools@1.4.0/dist/umd/prosemirror-dev-tools.min.js"></script>Wrap EditorView instance in applyDevTools method:
const view = new EditorView /*...*/();
// From version 1.3.1 it's required for UMD build to provide EditorState class (not instance).
// Previously it was causing different artifacts when working with state e.g. rolling back to some history checkpoint
// or when restoring from snapshot due to EditorState classes were different in UMD bundle and in actual client code.
ProseMirrorDevTools.applyDevTools(view, { EditorState: EditorState });- Inspect document – all nodes and marks
- Inspect selection – position, head, anchor and etc.
- Inspect active marks
- See document stats – size, child count
- Inspect document changes over time
- Time travel between states
- See selection content for particular state in time
- See selection diff
Inspect state of each plugin inside prosemirror.
Inspect current document schema with nodes and marks.
Visual representation of current document tree with positions at the beginning and the end of every node.
Snapshots allow you to save current editor state and restore it later. State is stored in local storage.
Contributions are highly welcome! This repo is commitizen friendly — please read about it here.