prosemirror-dev-tools

!prosemirror-dev-tools

Table of Content

- Table of Content
- Quick Start
- NPM Way
- Features
- State
- History
- Plugins
- Schema
- Structure
- Snapshots
- Demo
- Contributing
- License

Quick Start

$3

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);
``

Features

$3

- 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

$3

- 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

$3

Inspect state of each plugin inside prosemirror.

!prosemirror-dev-tools plugins tab

$3

Inspect current document schema with nodes and marks.

!prosemirror-dev-tools schema tab

$3

Visual representation of current document tree with positions at the beginning
and the end of every node.

!prosemirror-dev-tools structure tab

$3

Snapshots allow you to save current editor state and restore it later. State is
stored in local storage.

!prosemirror-dev-tools snapshots tab

Demo

- Demo & Example Setup

Contributing

Contributions are highly welcome! This repo is commitizen friendly — please read
about it here.

License

- MIT : http://opensource.org/licenses/MIT