BlockNote icon indicating copy to clipboard operation
BlockNote copied to clipboard

feat: use slim shiki build and pre-compiled languages

Open nperez0111 opened this issue 11 months ago • 3 comments

This significantly cuts down on the bundle size of the package by leveraging shiki's new slim builds and precompiled languages

Fixes #1487 #1213

This could probably be reduced further by completely separating the default languages, but for this would require a breaking change to the API for code blocks to properly work.

The ideal would be for the user to specifically pick which languages and themes for the code block feature, rather than us providing any defaults for this.

Perhaps we can have defaults built into a separate package? To make it easier for those already using us?

Either way, this would require some thought, while the current change would still be compatible with the current API

nperez0111 avatar Mar 11 '25 22:03 nperez0111

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
blocknote ✅ Ready (Inspect) Visit Preview Mar 26, 2025 9:23am
blocknote-website ✅ Ready (Inspect) Visit Preview Mar 26, 2025 9:23am

vercel[bot] avatar Mar 11 '25 22:03 vercel[bot]

Great news. My biased opinion would be to not add any and let the consumers decide to include one or multiple somehow. I would see the code block as a more 'advanced functionality' that will be used by consumers that should be fine with doing some config. If you throw in an example of that on your site, the first round of beers in de Biergarten are on me 🍻 😸.

flipvh avatar Mar 13 '25 12:03 flipvh

Alright, I've exposed the codeBlock configuration on the editor instance, and so this would let you configure the languages & themes that are supported by your app. By default, no languages or themes are bundled, to configure syntax highlighting, you can install the new package @blocknote/code-block which provides a decent set of languages and light & dark themes to use.

If you want more control than this, I'll write a guide on how easy it will be to integrate your list of languages, using the shiki-codegen tool.

This isn't completely ready yet, as I'll need to:

  • [x] made a PR into prosemirror-highlight: https://github.com/ocavue/prosemirror-highlight/pull/79
  • [x] add an example
  • [x] write a guide on how to configure with shiki-codegen
  • [ ] make sure the new package is being bundled appropriately & TS works within the repo

nperez0111 avatar Mar 14 '25 13:03 nperez0111