[ihordubas99]

Ticket

https://community.openproject.org/wp/COMMS-1058

Stacked on #26049 (COMMS-1057), please review that one first.

What are you trying to accomplish?

Code blocks in documents get syntax highlighting. Each code block has a language picker, and the code is highlighted in the chosen language. The language is kept in the stored markdown as the fence info (```ruby). The same extension also highlights the LaTeX source in the math popup from COMMS-1057.

Screenshots

What approach did you choose and why?

Highlighting. @blocknote/code-block (0.54.2, matching our BlockNote version) provides the syntaxHighlighter extension and a list of 48 common languages, which the code block spec in OpBlockNoteEditor now uses. Highlighting is done by Shiki with its JavaScript regex engine. Every grammar is a separate chunk that is only loaded once a block uses that language, so the main bundle barely grows. New code blocks start as plain text, the same default as before and as the server-side schema, so hocuspocus needs no change and already writes the language into the markdown.

Guarding unsupported languages. As soon as a language list is configured, BlockNote throws while rendering a code block whose language is not an exact id of that list. The throw happens while the editor mounts, so a single such block makes the whole document fail to open for everyone. Such blocks already exist, because without a list BlockNote stored whatever the user typed. The ```js input rule and pasted markdown store aliases like js or sh, or languages the list does not have, like go. This is still the case in BlockNote 0.56.

frontend/src/react/extensions/code-block.ts wraps the render of the code block spec. An alias is shown as its language (js as JavaScript) and an unknown language as plain text. The stored value is left untouched. Rebuilding the spec from BlockNote's helpers instead would lose the code block keyboard shortcuts (tab indentation and the ``` input rule), whose extension is not exported.

Language picker styling. The editor's shadow root loads the application stylesheet, and its global select rule (full width, fixed height, page background with an arrow, set with !important) turned BlockNote's language picker into a grey band across the top of every code block, with the language name invisible. The documents stylesheet now resets those properties for the picker, so it shows as BlockNote intends, a small label in the corner of the block on hover. Its options get the default foreground color, since BlockNote paints them black, which would be unreadable on the dark page background in dark mode.

Known gaps. The package's list lacks some widely used languages (Go, Dockerfile, diff, PowerShell, TOML, INI). Their grammars are already installed with Shiki and could be added in a follow-up. Blocks in those languages render as plain text for now.

AI involvement

Merge checklist

• Added/updated tests
• Added/updated documentation in Lookbook (patterns, previews, etc)
• Tested major browsers (Chrome, Firefox, Edge, ...)

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

An organization owner can choose the repository organization as the billing source for reviews requested by members with a paid Copilot license. Learn about Copilot code review billing. Review the Copilot code review billing settings.

[github-actions]

Caution

The provided work package version does not match the core version

Details:

• Work package URL: https://community.openproject.org/wp/COMMS-1058
• Work package version: not set
• Core version: 18.0.0

Please make sure that:

• The work package version OR your pull request target branch is correct

[github-actions]

Caution

The Enterprise plan field is not set on the work package

Details:

• Work package URL: https://community.openproject.org/wp/COMMS-1058

Please make sure that:

• The work package Enterprise plan field is set

[brunopagno]

Looks good 🎉
Holding off the approval until the base branch is approved

[github-actions]

Warning

Flaky specs

• rspec ./spec/features/work_packages/table/delete_work_packages_with_descendants_spec.rb[1:1:1]

🤖 Ask Copilot to investigate

Copy the prompt below into a new comment on this PR to delegate the investigation to GitHub Copilot. It will look into the flakiness and open a separate pull request with you as reviewer.

@copilot The following spec(s) are flaky in CI (first seen on PR #26126, linked for reference only):

- `rspec ./spec/features/work_packages/table/delete_work_packages_with_descendants_spec.rb[1:1:1]`

Treat this as a standalone task, unrelated to PR #26126. Create a new branch from origin/dev and open a new pull request targeting dev — do not stack it on PR #26126 or reuse that branch.

Follow the playbook in docs/development/testing/handling-flaky-tests/README.md to find the root cause and fix the underlying race — do not skip, delete, or weaken the spec to make it pass; disabling is a last resort per the playbook, and only with a bug ticket. Verify the fix by running the spec(s) repeatedly (e.g. `script/bulk_run_rspec --run-count 10`).

If you cannot reproduce the flake or are not confident in a fix after reasonable investigation, do not fabricate a change or skip the spec to force CI green. Instead, leave the pull request in draft and document what you tried, the suspected cause, and any leads in its description, then assign @ihordubas99 to take over.

Once the fix is verified, title the PR after the spec(s) it fixes, and use the PR description to explain the root cause, how the change resolves it, and the before/after results. Label the PR `flaky-spec`, assign @ihordubas99, and request a review from @ihordubas99.
On every commit, set @ihordubas99 as the sole co-author with a `Co-authored-by:` trailer (use their GitHub no-reply email so it links to their account), so it is traceable who dispatched the fix.