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 . 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.
It has been an interesting journey to say the least. Chrome has its own idiosyncrasies and the docs can be a little confusing .
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.
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.
No substantial error to report - everything else I tested worked fine. Anyway, thanks again
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.
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)?
Thanks! Yeah it’s possible but a PITA to build . 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.
Ah I see! Would have been nice since we use Prosemirror inside an Electron app where you only have the dev tools panel.
Btw, regarding the CSS issues: I had a situation the other day in which the Prosemirror DevTools styles broke the CSS of the Next.js site I was building. Maybe you can scope the CSS even more?
A small feature request @TeemuKoivisto - would it be easy to have it remember the on/off status between sessions? I often want to hide the little icon, and find myself having to turn it off repeatedly.
I guess I should not be lazy and submit a PR, but I have zero experience of Chrome extensions.
Hey, great to hear! Wait, it doesn’t? I am storing the dev-tools data in storage so it should persist. You mean between opening tabs or restarting Chrome sessions? Once you disable it, it should be turned off for all the tabs per that Chrome session. Could be there’s a bug also. And oh yeah, it doesn’t automatically uninject itself once you disable it.
Hey, just deployed a new version which should fix @konstantinmuenster and @tslocke issues. Wasn’t actually that bad to wrap the Svelte component into a web component. Surprised myself, even. And persistence should now work. Could’ve caught that bug earlier with tests but well, it’s pretty tedious work. Hopefully won’t have to make too many changes so it should stay stable.
. 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.
.
