code_block is split into separate nodes on return or enter key

[calebpitan]

Description

Using the CodeBlockKit, anytime return or enter is pressed on the keyboard the node doesn't go to a new line but splits the code block into two individual nodes.

Using shift + return inserts a newline but syntax highlighting is gone, meanwhile on the documentation examples return key works without shift and does not split into separate nodes.

Reproduction URL

No response

Reproduction steps

• Insert a code block in the editor
• Optionally enter some text and hit return

Plate version

49.0.6

Slate React version

0.117.1

Screenshots

Logs

Browsers

No response

[dosubot[bot]]

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

The expected behavior is: pressing Enter inside a code block should insert a new line and keep syntax highlighting. Plate handles this by overriding the editor’s insertBreak method in the code block plugin—so Enter never splits the block, and Shift+Enter isn’t treated specially by default. If you’re seeing node splits on Enter and losing highlighting on Shift+Enter, it’s likely due to a plugin misconfiguration, plugin order, or a custom keyboard handler interfering with Plate’s logic.

Check that your code block plugin setup matches the docs and includes the withCodeBlock override, and that you’re using the lowlight option for syntax highlighting. Also, make sure you don’t have any custom onKeyDown handlers or external keyboard event listeners that might override Plate’s default behavior. If possible, try isolating the code block plugin in a minimal setup to see if the issue persists—this can help pinpoint if another plugin or handler is causing the conflict.

Reference:

• Code block plugin handles Enter with insertBreak override, not splitting nodes
• Recent changes in code block plugin and syntax highlighting

To reply, just mention @dosu.

---

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

[calebpitan]

None of the suggestions above did anything differently

[calebpitan]

I've set break rules in the code block kit to default to line break as the JSDoc comment claims it splits the node by default (which I don't think anyone would consider a sensible default).

export const CodeBlockKit = [
  CodeBlockPlugin.configure({
    node: { component: CodeBlockElement },
    rules: {
      break: { default: 'lineBreak' },
    },
    options: { lowlight },
    shortcuts: {
      toggle: { keys: 'mod+alt+8' },
    },
  }),
  CodeLinePlugin.withComponent(CodeLineElement),
  CodeSyntaxPlugin.withComponent(CodeSyntaxLeaf),
]

Yet after achieving this, I can't get syntax highlighting to work past the first line. I think this is because only a line break is inserted, all still in the same code_line node (if it's expected that each individual line within a code_block node should be a distinct code_line node).

I've tried to override the return/enter key in shortcuts using editor.tf to insert a code line node as a child of the current code_block node, even the plugin's insertCodeLine API—NO LUCK!

[dosubot[bot]]

Syntax highlighting in Plate only works on the first line when you use break: { default: 'lineBreak' } because the highlighting system expects each line of code to be a separate code_line node inside the code_block. When you use a plain line break, all text—including newlines—stays in a single code_line node, so only the first line gets highlighted.

The intended structure is: each time you press Enter, Plate splits the current code_line and creates a new code_line node. This is how syntax highlighting is applied per line and why the default Enter behavior is required for multi-line highlighting to work as shown in the docs and tests (see code, see test).

To fix this, remove the break: { default: 'lineBreak' } override from your CodeBlockKit config. Let Plate handle Enter as it does by default—this will split into new code_line nodes and syntax highlighting will work across all lines.

There isn’t a user-facing doc that spells this out, but the code and tests are clear: multi-line code blocks with highlighting require each line to be its own node. Customizing the break rule breaks this model and the highlighting logic.

To reply, just mention @dosu.

---

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

[zbeyens]

Could you reproduce it from https://github.com/udecode/plate-template? It seems to work fine in the docs.

[calebpitan]

Here https://github.com/calebpitan/code-block-issue-repro @zbeyens

[zbeyens]

Actual:
{ text: "const name = 'caleb';", type: 'code_line' },

Expected:
{ children: [{ text: "const name = 'caleb';" }], type: 'code_line' },

[calebpitan]

Hi @zbeyens, thanks for pointing that out. That was the data structure I found when I inspected the slate node of the editor itself, so maybe that's just one of the issues that need looking into.

I don't think that's the main issue here and that was just caught by the side. The main issue is that the block is split into two different code_block node on return key, rather than to be split into a new code_line node. Maybe this is related to the issue you pointed out which I don't think is an issue from my end since "actual" is the same data structure the editor has in its state (without manually writing out the DS).

[12joan]

I saw something similar to this recently in my own app. The code is different to Plate's code block, but it's probably a similar cause. In my case, the logic that was supposed to reset a block when pressing backspace at the start was unwrapping the code_line but not the code_block, resulting in:

• Code block
  • Text

Instead of:

• Code block
  • Code line
    • Text

In addition, my schema enforcement logic was trying to turn the text node into a code line, resulting in { text: '...', type: 'code_line' } just like you're seeing.

Hope this helps!

[calebpitan]

I just tested. Its seems "actual" not being "expected" is the root cause of the initial issue I reported. When I manually converted to the expected structure, return key started functioning as one would expect. Maybe you could help to track it down further. But I believe it's an issue with how code_line node is being inserted from the package source, because it was the behaviour of the editor to output the invalid node structures.

[calebpitan]

@12joan I don't have any custom logic that could or would have interfered with the nodes. All the plugins and logic are as derived from the kits, no customizations. Plan was to build it out completely before building customizations on top of it. But I'll dig further and let you know what I find.