How do i add a code block to the lexical editor in version 3.0 of Payload?

[viscid arch]

I am currently exploring the Payload version 3 repository (payload-3.0-demo) on GitHub, and it's been a fantastic experience so far. The only issue I'm encountering is that the Lexical editor doesn't natively support a code block feature, and I'm struggling to integrate this functionality. My goal is to create a frontend blog that includes code blocks with syntax highlighting and a copy button in the top right corner.

also it would be really nice if i could specify the language, highlight specific lines in the code, add line count etc. Does anyone know of a solution to this?

[oak obsidian]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• What is Payload?
• Lexical Rich Text - Features overview
• Lexical Rich Text
• Lexical Rich Text - Coming Soon - Related Help Topics
• Lexical Rich Text - Extending the lexical editor with Features - Features: The Building Blocks

[tiny rover]

You can use the Blocks feature and add a code field for that. Using a custom code field component you can integrate a button that acts as a language picker.

You can find an example that does exactly that here: https://github.com/payloadcms/payload/blob/feat/lexical-mdx/test/lexical-mdx/collections/Posts/index.ts#L64