feat: example for code block

[JaeungJayJang]

Hello, This PR adds an example of creating custom code block.
The example is based on Custom Alert Block from the official site and also from blocknote-code by defensestation.

I am new to BlockNote and it was hard to find example on creating custom code block. I saw many people faced the same issue and I hope this can help many people. :)

Stackblitz example: https://stackblitz.com/edit/vitejs-vite-fnzdjj?file=index.html

[vercel]

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

Name	Status	Preview	Updated (UTC)
blocknote	❌ Failed (Inspect)		Oct 9, 2024 4:36am

[vercel]

@JaeungJayJang is attempting to deploy a commit to the TypeCell Team on Vercel.

A member of the Team first needs to authorize it.

[trancethehuman]

It'd be awesome to be able to choose from a drop down list of programming languages too. This looks awesome.

[JaeungJayJang]

@trancethehuman Thanks for the suggestion! Just added language selection using NativeSelect from Mantine/core.
it's applied on Stackblitz and I will push commit here as well

[trancethehuman]

@trancethehuman Thanks for the suggestion! Just added language selection using NativeSelect from Mantine/core. it's applied on Stackblitz and I will push commit here as well

wow that's a lot of options 🔥

Wondering if you can add bash and text (yep, just regular unhighlighted text) options. A search box would probably do well here as well.

[JaeungJayJang]

@trancethehuman I pulled entire language supports from CodeMirror XD
Bash is not provided from the CodeMirror's default language set yet, but you could try 'shell' as an alternative for now.
It seems that regular text does not exist; maybe it's because not passing anything into extension result unhighlighted text. I will play around to extend that feature.

You can try something like this for the serach box option:
https://stackblitz.com/edit/vitejs-vite-7pzgrg?file=Code.tsx
The search box uses useState and useState cannot be called inside render function. So I needed to create component and pass prop into it, but I am not sure how to set the type for this props 😅
this example uses component from mantine/core, but the style is not from mantine; the official doc for mantine require the app to be wrapped with MantineProvider, but then i had to modify main.tsx as well and I am not sure if that's okay for example purpose, so I added few style changes on styles.css file.

[trancethehuman]

this is super good.

@YousefED is this good for codeblock?

[lamtuanamc]

@JaeungJayJang Great work! Could you add a Copy button that keep the code's format when copied?

[JaeungJayJang]

@lamtuanamc Thanks for the suggestion. I will look into it.

I just realized that the codeblock styles.css is only applied on chrome browser. It is likely because I applied style changes to those classes with prefix .cm. Will fix this later as well.

after further testing, the issue is not related to styles.css.
the issue I faced was that the indent at the beginning of each raw is gone, and I could only replicate the issue for my specific use case for my personal project using this.
Because I could not replicate the same issue on this, I will disregard this issue for now until I face it again at different scenario or someone else bring this issue up.

turned out that the issue I faced occur when I set BlockNoteView's editable to be False. then the whole indent before each row is gone. I wonder if this is something I need to address by opening new issue or not.