Prosemirror Dev Toolkit

Overview:

The prosemirror-dev-toolkit is a rewrite of the prosemirror-dev-tools, designed to be smaller, more efficient, and with improved features. It is implemented using Svelte, which compiles directly to JavaScript without the need for a runtime, resulting in a smaller package size. This toolkit also functions as a Chrome extension, offering the convenience of inspecting live editors without the need to bundle it with project dependencies.

Features:

• Svelte Implementation: Rewritten in Svelte for improved performance and smaller package size.
• Chrome Extension: Functions as a Chrome extension for easy inspection of live editors.
• 6 Tabs Interface: Consists of 6 tabs to interact with the Prosemirror editor for various functionalities.
• Snapshot Persistence: Allows the persistence and hydration of snapshots, with added export/import from JSON.
• State Tab: Shows current state.doc, selection, active marks, and document summary.
• History Tab: Displays the last dispatched transaction, content diff, selection diff, toDOM’d document slice, and transaction details.

Installation:

To install the prosemirror-dev-toolkit, you can use the following steps:

npm install prosemirror-dev-toolkit

Then import the toolkit:

import 'prosemirror-dev-toolkit';

And initialize it in your code:

// Initialize the toolkit
const toolkit = new ProsemirrorDevToolkit();

Summary:

The prosemirror-dev-toolkit is a revamped version of the prosemirror-dev-tools, implemented in Svelte for better performance and reduced size. It functions as a Chrome extension, offering a user-friendly interface with tabs for interacting with Prosemirror editors. The toolkit allows for snapshot persistence, state monitoring, and history tracking, making it a valuable tool for developers working with Prosemirror editors.