Prosemirror-dev-toolkit: Rewrite of prosemirror-dev-tools in Svelte

Show
1

Hey y’all

I have something exciting to show you. So we all know prosemirror-dev-tools, right? Well it has fallen a bit behind times so I rewrote it in Svelte. Basically the same old thing but smaller and with more features. And tests.

https://teemukoivisto.github.io/prosemirror-dev-toolkit/

There are still some improvements that I want to add but since it seems I never get around releasing this, I’ll just do it now before I start working on some new feature.

As a small summary, GitHub - d4rkr00t/prosemirror-dev-tools: Developer Tools for ProseMirror is a great tool for debugging ProseMirror editors. However, it seems it’s not being actively developed that much anymore and it’s written in React which isn’t that nice especially if you are using some other framework.

So my aim was to cut the fluff to minimum and make it work as a web-componenty type of library. This meant scrapping React for something else and I picked Svelte for the job. It’s quite close to web components as it compiles to pure JS but it also provides some pretty nice primitives that appear to make it easier to work with than say LitElement. Been really impressed by it!

Okay that was the main part but I also wanted to add some new features as well. At the moment these are improved logging of the tree-view nodes and snapshot export/import from JSON. Additionally, I have created a script to inject the dev-tools to a live editor which is experimental still. It’s hard to gain access to the editor view without messing things up. Then there are some basic things like Cypress tests and using TypeScript for everything.

Hopefully people find this useful. Finally I myself can too get rid of my local linkings and use the npm package. If you find any bugs or issues please let me know before I go for the first major release.

9 Likes
2

Very nice! Glad to see those tools being modernized. Also great to see the document node positions are reported more accurately in this version.

1 Like
3

So cool! Amazing work!

4

dev-toolkit
dev-toolkit1111×215 37.8 KB

Doesn’t seem to work for me. Did I miss something?

5

@pojo Hey and yeah, that jsondiffpatch is driving me nuts also. I thought about forking it and updating its deps and but then I feel I’d have to maintain yet another repo.

You are importing it in your local Vite project? There’s a quite hidden <details> section in the README about bundling it with more ‘smarter’ bundlers. With SvelteKit I used:

export default {
  kit: {
    vite: {
      build: {
        rollupOptions: {
          external: ['chalk']
        }
      },
      define: {
        'process.env': process.env,
      },
    }
  }
}

I guess though this is beyond what normal users would expect so forking might be the only option.

And thanks @marijn @hanspagel !

6

Yup - thanks for the pointer. This vite.config.js is working for me:

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
      rollupOptions: {
        external: ['chalk']
      }
  },
  define: {
    'process.env': import.meta.env,
  }
})
1 Like