ProseMirror Developer Tools Chrome extension

Hello!

To kick off 2023 I’ve got something exciting to show you. I finally had the time and motivation to turn my prosemirror-dev-toolkit library into a Chrome extension :tada:. I came to a realization it is really cumbersome to bundle toolkit with your app and do some kind of if-else magic to exclude it from your prod build. Especially when you might still want to use it from time to time.

https://chrome.google.com/webstore/detail/prosemirror-developer-too/gkgbmhfgcpfnogoeclbaiencdjkefonj

It has been an interesting journey to say the least. Chrome has its own idiosyncrasies and the docs can be a little confusing :sweat_smile:.

Anyway, hope you like it. Please report any bugs you find. I think it should work with most editor setups out there but can’t say I’ve tested it thoroughly. Sometimes the injection flakes a little as it’s not really a documented API I’m hooking into. Also I did intend to allow opening the toolkit in a separate window but that would require me to serialize EditorView properties and just in general, be a ton of effort. If someone is crazy enough to try to do it, feel free.

Cheers,
Teemu

7 Likes

Very impressive. I agree the opt in code path is a bit cumbersome, especially since it requires loading react into ones application dev bundle (and if one wants to activate on a staging or prod env, one must always include it).

Thank you very much for your work here.

One note on experimenting this morning - a minor issue with the css layout - likely with how you are simulating indents for nested objects. This might have been better to just call out as an issue on your github page.

image

No substantial error to report - everything else I tested worked fine. Anyway, thanks again :pray:

1 Like

Thanks! Yeah the site’s CSS can affect the dev-toolkit’s styles. Or that might be an actual style bug. This is probably one of the few cases where a web component might make sense to encapsulate the injected content. Hmm wonder if Svelte provides that as compilation target.

Ah that makes sense. Didnt look into the actual classes used (probably a conflict)

This looks awesome! Thanks for the great work! Is it possible to add an item for it in the actual dev tools tabs (similar to React and Redux dev tools)?

Bildschirm­foto 2023-01-25 um 13.14.22

Thanks! Yeah it’s possible but a PITA to build :sweat_smile: . Basically when the tools run in the same window with the inject script I can directly call EditorView / view its properties / whatever. When the tools is in a separate window / tab I have to make endpoints for every call to EditorView to pass state, trigger functions and so on.

I did some prototyping to launch it in a window but as I realized this, gave up. There’s no built-in way to serialize EditorView which is probably the biggest pain point. Also there’s the question of how to pass minimal amount of data between inject-script and service-worker but that’s not a huge deal. It’s possible but just very tedious.