Code block formatting causing syntax highlight to be lost

[R2works]

Description

The code block applies the format but does not reapply the CodeSyntaxLeaf syntax highlighting.

Reproduction URL

https://platejs.org/docs/code-block

Reproduction steps

1. Navigate to code block
2. Select a language that uses the format button (JSON).
2. Click the format button.

Plate version

Latest?

Slate React version

Latest?

Screenshots

Logs

Browsers

Firefox

[dosubot[bot]]

Hi @R2works! I'm Dosu and I’m helping the plate team.

This is a known issue: after formatting a code block, syntax highlighting can disappear because the plugin responsible for highlighting (CodeSyntaxLeaf/CodeSyntaxPlugin) doesn't always re-run its decoration logic after the format action. The highlighting only updates if the plugin's decorate function is triggered again, which doesn't reliably happen after formatting—so the highlights may be lost until you make another edit that triggers re-highlighting. This matches your experience and is a limitation in the current codebase. For now, a quick workaround is to make a small edit (like adding and deleting a character) in the code block after formatting to force the highlighting to reapply.
More details on the underlying logic are discussed here.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[R2works]

For now, a quick workaround is to make a small edit (like adding and deleting a character) in the code block after formatting to force the highlighting to reapply.

@dosubot Editing the existing code block does not reapply the highlight. Based on my tests, the only workaround is to cut and paste the code into the code block again for it to apply the highlight.

[dosubot[bot]]

You're right—editing the code block after formatting doesn't reapply syntax highlighting. This happens because Plate caches highlights per code line element, and normal edits or formatting only change the text, not the element itself. Only structural changes, like pasting (which creates new code line elements), force the plugin to recompute and reapply highlights. That's why cut-and-paste works, but simple edits don't. There isn't a built-in way to force re-highlighting after formatting right now—this is a known limitation in the current design. More technical details are discussed here.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[zbeyens]

@claude can you find a fix?

[claude[bot]]

Claude finished @zbeyens's task —— View job • claude/issue-4520-20250726_192020 • Create PR ➔

---

Tasks

• [x] Read CLAUDE.md and understand project structure
• [x] Install dependencies and build affected packages
• [x] Investigate code block and syntax highlighting implementation
• [x] Find the format functionality
• [x] Implement fix to trigger re-highlighting after format
• [x] Test the fix
• [x] Commit changes and provide PR link

Summary

I've successfully fixed the issue where code block formatting was causing syntax highlighting to be lost.

The Problem

When formatting a code block, the syntax highlighting decorations were cached in a WeakMap and not refreshed after the text was updated.

The Solution

Modified formatCodeBlock in packages/code-block/src/lib/formatter/formatter.ts to:

1. Call resetCodeBlockDecorations(element) after formatting to clear the cached decorations
2. Trigger a re-render by setting the selection again with editor.tf.setSelection(selection)

This ensures that the decorate function runs again and reapplies the syntax highlighting after formatting.

Changes Made

• Updated the formatter to reset decorations and trigger re-render after formatting
• Added a changeset documenting the fix

|