[feature]: Add a language selector to code blocks in the editor
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 59.6k
- Forks
- 5.8k
- Avg merge
- 1d 22h
- Merged PRs (30d)
- 49
Description
Is there an existing issue for this?
- I have searched the existing issues
Summary
In the Community Edition editor, a code block's language can only be set at creation time via the ```lang input rule. There is no UI to view or change it afterwards:
- Code blocks inserted via the slash command, the bubble menu, paste, or markdown import are created with
language: null, so they get no syntax highlighting. - The only way to fix a wrong or missing language is to delete the block and retype the fence from scratch.
- Read-only surfaces (pages, comments) have no way to tell which language a block was intended to use.
(#9680 references a language dropdown with a search input, but that exists only in the cloud/commercial build — CE master has no language selector at all, only the copy button in code-block-node-view.tsx.)
Proposed behavior
Add a compact language dropdown to the code block node view (top-left, editable mode only):
- Lists every grammar registered in the extension's lowlight instance, plus a "Plain text" (null) option.
- Selecting a language writes through to the node's
languageattribute, so lowlight highlighting updates immediately. - An explicitly set but unregistered language stays selectable instead of blanking the picker.
I have a working implementation and would like to raise a PR if the team is interested.
Why should this be worked on?
Syntax highlighting is one of the main reasons to use code blocks, and today a large share of blocks (anything not created by typing the fence manually) silently end up unhighlighted with no recourse. A selector makes the existing lowlight integration actually reachable and matches the UX of the cloud version.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with code-block-node-view.tsx and trace the Community Edition code block node view, its lowlight instance, and the node's language attribute. Add an editable-mode selector covering registered grammars, Plain text, and explicitly selected unregistered languages; done means selection updates highlighting while read-only surfaces remain unchanged.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100