prosemirror-dev-tools

Dev Tools for ProseMirror

Usage no npm install needed!

<script type="module">
  import prosemirrorDevTools from 'https://cdn.skypack.dev/prosemirror-dev-tools';
</script>

README

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

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