Skip to content

A fork of Developer Tools for ProseMirror with the positions bug patched.

Notifications You must be signed in to change notification settings

charmverse/prosemirror-dev-tools

 
 

Repository files navigation

prosemirror-dev-tools

This is a monkey patched fork of https://github.com/d4rkr00t/prosemirror-dev-tools which fixed the wrong indexing problem (see this discussion).

Table of Content

Quick Start

NPM Way

Install prosemirror-dev-tools package from npm:

npm install --save-dev kepta/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

About

A fork of Developer Tools for ProseMirror with the positions bug patched.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 92.0%
  • CSS 7.6%
  • HTML 0.4%