stackblitz / tutorialkit

TutorialKit by StackBlitz - Create interactive tutorials powered by the WebContainer API
https://tutorialkit.dev
MIT License
503 stars 48 forks source link

Add a way to add Custom CodeMirror support for languages #400

Open NullVoxPopuli opened 2 weeks ago

NullVoxPopuli commented 2 weeks ago

Is your feature request related to a problem?

I would like to add codemirror support for Ember's gjs and gts filetypes.

I already saw similar issues:

but saw that an extensible API was not added, but Svelte support is now just built in to tutorial kit.

I already did the work to create codemirror plugins for https://share.glimdown.com/_uXZKpvFRx63MJp7lEhk6A, code here:

Describe the solution you'd like.

a way to pass a function or an array of mappings for filetypes -> plugins for codemirror to load

Describe alternatives you've considered.

I could PR direct support for gjs/gts to tutorial kit

Additional context

<3

AriPerkkio commented 2 weeks ago

Sounds good!

I didn't really like #212 and #256 as those added language specific features for all users. Some users may not be interested in Svelte at all, but they'll still need to download the dependencies during development. As far as I know, CodeMirror still lazy loads these so clients won't be downloading unnecessary files though.

I'm interested to see what kind of API this would open for end users. We do want to keep configuring TutorialKit as simple as possible - end users should not need to know much about CodeMirror itself.

NullVoxPopuli commented 2 weeks ago

The only way I've been able to come up with for how to do this (this being, userland, and not doing what svelte and vue did - even though that'd be easiest) involves exposing a runtime JavaScript config file that would have a codemirror.plugins array that folks could throw whatever in to