Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: example for code block #1099

Closed
wants to merge 7 commits into from

Conversation

JaeungJayJang
Copy link

@JaeungJayJang JaeungJayJang commented Sep 24, 2024

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

Copy link

vercel bot commented Sep 24, 2024

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

Copy link

vercel bot commented Sep 24, 2024

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

A member of the Team first needs to authorize it.

@trancethehuman
Copy link

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

@JaeungJayJang
Copy link
Author

@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
Copy link

@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
Copy link
Author

@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
Copy link

this is super good.

@YousefED is this good for codeblock?

@lamtuanamc
Copy link

lamtuanamc commented Sep 30, 2024

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

@JaeungJayJang
Copy link
Author

JaeungJayJang commented Sep 30, 2024

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants