Feature Request: Support for Ignoring Aditional Directives in the Code Block Language Field

[tpougy]

Opening

First, I want to thank the Keystatic team for this incredible open-source project. It has been a valuable tool for the community, and I deeply appreciate the effort you put into building and maintaining it.

---

Context

I am using Keystatic CMS to manage the content of a blog built with Astro. The integration works well for editing .mdx files, but I’ve encountered a limitation when using the rich text editor to handle code blocks.

In Astro, there is a popular package called Expressive Code that enhances code blocks with directives, such as file titles or line highlighting. These directives must be added on the same line where the language of the code block is defined. For example (please ignore the # symbols, it was needed for proper rendering here in the github issue)

# ```python title="example.py" {2}
# from pathlib import Path
# print(Path.cwd())
# ```

In the above example:

• python is the language.
• title="example.py" specifies the file name.
• {2} highlights the second line of the code.

---

Problem

Currently, the Keystatic rich text editor does not handle this syntax correctly. When directives are added, the language combobox interprets the entire line (e.g., python title="example.py" {2}) as the language. I found the language combobox defined in packages/keystatic/src/form/fields/document/DocumentEditor/code-block/code-block-ui.tsx.

This issue only affects the live editor in Keystatic, breaking the syntax highlighting for users while editing the document. It does not impact the final rendering of the .mdx file but negatively affects the live editing experience.

---

Feature Request

I would like to request a feature that enables proper handling of directives in code block language fields. Specifically:

• Add a configuration flag in Keystatic to modify how the rich text editor parses the language field.
• When this flag is enabled, only the first word after the backticks (```) should be treated as the language, while the remaining content (after the first blank space) on the line (directives) should be ignored for syntax highlighting purposes.

---

Why This Matters

This feature would improve compatibility with widely used tools like Expressive Code, which relies on directives to provide enhanced functionality for code blocks. It would also enhance the editing experience for users working with .mdx files in Keystatic, ensuring the live editor displays the correct syntax highlighting.

---

Collaboration

I must admit that I do not have experience with React, so I cannot suggest a concrete implementation. However, I am happy to assist the team in any way I can—be it testing, providing further details, or discussing potential solutions.

Thank you for considering this request, and please let me know if I can provide any additional information.

[tpougy]

@emmatown thank you very much for your attention and speed with the Feature Request. I'm very happy to be able to contribute a good idea to the development of keystatic.