makeplane / makeplane/plane

[feature]: Add a language selector to code blocks in the editor

Open
#9,799 0 comments 0 reactions 0 assignees View on GitHub

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 language attribute, 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.