feat: add JSON control

[hugoattal]

#30

Description

I spent a fair amount of time trying different implementations, tell me what you think...

• A "real" code editor is reaaaally too big of a package. Ace editor is 50MB (https://www.npmjs.com/package/ace-builds) and I couldn't find a lite weight cool code editor.
• I tried to build an editor with a div contenteditable, but it was a real hassle. Caret manipulation is super hard (it gets reset at each keystroke since I triggered shiki to update the div). I could have done it, but with a loooot of effort and a ton of lines of code
• I ended up using a "simple" textarea with a code highlight on top of it (with no pointer event). This is super simple but work like a charm. Still, there's no code editor features (like tab or auto-indent)

Anyway, I believe that we really just need color highlight, no-one's going to use Histoire as a real code editor.
Also, I auto indent only on load, but not after (because it can mess up the content during edition if I do it at each update).

Note: The lite/dark mode is not reactive, you must refresh the page. I'm not quite sure how to do that, if you have any idea.

Additional context

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

[netlify]

✅ Deploy Preview for histoire-examples-vue3 ready!

Name	Link
🔨 Latest commit	ffaa2f8
🔍 Latest deploy log	https://app.netlify.com/sites/histoire-examples-vue3/deploys/63431f49053cc90007bcb205
😎 Deploy Preview	https://deploy-preview-319--histoire-examples-vue3.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for histoire-site ready!

Name	Link
🔨 Latest commit	ffaa2f8
🔍 Latest deploy log	https://app.netlify.com/sites/histoire-site/deploys/63431f49cfc5250008f1ccac
😎 Deploy Preview	https://deploy-preview-319--histoire-site.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for histoire-examples-svelte3 ready!

Name	Link
🔨 Latest commit	ffaa2f8
🔍 Latest deploy log	https://app.netlify.com/sites/histoire-examples-svelte3/deploys/63431f49fcafb000083f3768
😎 Deploy Preview	https://deploy-preview-319--histoire-examples-svelte3.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for histoire-controls ready!

Name	Link
🔨 Latest commit	ffaa2f8
🔍 Latest deploy log	https://app.netlify.com/sites/histoire-controls/deploys/63431f4955ba1c0008356792
😎 Deploy Preview	https://deploy-preview-319--histoire-controls.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[Akryum]

A "real" code editor is reaaaally too big of a package. Ace editor is 50MB (npmjs.com/package/ace-builds) and I couldn't find a lite weight cool code editor.

You sure? Bundling Ace editor looks to be less than 400kB(minified)/106kB.gzip.

For the Vue Repl, we use codemirror which is lighter, weighting around 170kB/57kB.gzip for the usage we have in the Repl.

Anyway the code editor lib should be code-split with a dynamic import.

[hugoattal]

You're right, I looked at the unpacked size 😅...

Still, I think that those packages were quite heavy only to write JSON, but I can still use it if you prefer (be it ace or codemirror)

Anyway the code editor lib should be code-split with a dynamic import.

It will likely be loaded for a lot of stories with a somewhat complex props (with the auto-detect props)

So, what do you want me to do? I have no preference, it's really up to you 🙂 !

• Continue with this lite solution using shiki
• Use the ace editor
• Use the codemirror editor (didn't know this one, but might be a good choice!)

[Akryum]

It will likely be loaded for a lot of stories with a somewhat complex props (with the auto-detect props)

A dynamic import will ensure it's only loaded when necessary, having it multiple times it not a problem.

So, what do you want me to do?

I think codemirror would be a good choice.

[hugoattal]

Pfew, code mirror hasn't the best documentation, but I got it working 🥳!

Wdyt?