Developer Tools for ProseMirror
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

prosemirror-dev-tools

NPM Version License Github Issues Travis Status Commitizen Friendly

Table of Content

Quick Start

NPM Way

Install prosemirror-dev-tools package from npm:

npm install --save-dev prosemirror-dev-tools

Wrap EditorView instance in applyDevTools method:

import applyDevTools from "prosemirror-dev-tools";

const view = new EditorView /*...*/();

applyDevTools(view);

CDN way

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

Features

State

  • 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

History

  • 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

Plugins

Inspect state of each plugin inside prosemirror.

prosemirror-dev-tools plugins tab

Schema

Inspect current document schema with nodes and marks.

prosemirror-dev-tools schema tab

Structure

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

prosemirror-dev-tools structure tab

Snapshots

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

prosemirror-dev-tools snapshots tab

Demo

Contributing

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

License