Dev Tools for ProseMirror
npm install prosemirror-dev-tools- Table of Content
- Quick Start
- NPM Way
- Features
- State
- History
- Plugins
- Schema
- Structure
- Snapshots
- Demo
- Contributing
- License
Install prosemirror-dev-tools package from npm:
``sh`
npm install --save-dev prosemirror-dev-tools
Wrap EditorView instance in applyDevTools method:
`js
import applyDevTools from "prosemirror-dev-tools";
const view = new EditorView /.../();
applyDevTools(view);
``
- Inspect document – all nodes and marks
- Inspect selection – position, head, anchor and etc.
- Inspect active marks
- See document stats – size, child count
!prosemirror-dev-tools state tab
- Inspect document changes over time
- Time travel between states
- See selection content for particular state in time
- See selection diff
!prosemirror-dev-tools history tab
Inspect state of each plugin inside prosemirror.
!prosemirror-dev-tools plugins tab
Inspect current document schema with nodes and marks.
!prosemirror-dev-tools schema tab
Visual representation of current document tree with positions at the beginning
and the end of every node.
!prosemirror-dev-tools structure tab
Snapshots allow you to save current editor state and restore it later. State is
stored in local storage.
!prosemirror-dev-tools snapshots tab
Contributions are highly welcome! This repo is commitizen friendly — please read
about it here.
- MIT : http://opensource.org/licenses/MIT