IndentPlugin fails to indent selected blocks

[OmarSalouss]

Description

When selecting an entire block element (e.g., a code block, paragraph, quote) and pressing Tab, the expected indentation behavior from IndentPlugin does not occur.
Instead, the browser moves focus out of the editor, as if the Tab key is not being handled by Plate.

Inline indentation (cursor inside text) works correctly — the issue is specific to block-level selection.

This behavior appears inconsistent with the documentation:
https://platejs.org/docs/indent

Expected Behavior

• When a block is selected and the user presses Tab, Plate should:

  • Handle the key event
  • apply block indentation using IndentPlugin
  • prevent the browser from moving focus away

---

Actual Behavior

• When a block is selected:

  • Pressing Tab does nothing to the block
  • Focus leaves the editor
  • No indentation is applied
  • The plugin’s indent logic is not triggered

---

The screenshot below shows how I select the entire block element before pressing Tab to reproduce the issue.

Reproduction URL

No response

Reproduction steps

1. Enable `IndentPlugin` in a Plate editor.
2. Insert a block element (tested with: code block, paragraph, blockquote).
3. Select the entire block — **not** place the cursor inside it.
4. Press **Tab**.
5. Observe: focus moves out of the editor and no indentation occurs.

Plate version

49.2.21

Slate React version

0.117.4

Screenshots

Logs

Browsers

Chrome

[dosubot]

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

This is caused by the Tabbable plugin intercepting the Tab key before IndentPlugin can handle it, which makes focus leave the editor instead of indenting the block. You can fix this by customizing the Tabbable plugin’s query option to disable it when the selection is inside blocks that should be indented (like paragraphs, code blocks, blockquotes, etc). This lets IndentPlugin handle Tab as expected.

Example:

TabbablePlugin.configure({
  query: (event) => {
    const inList = editor.api.some({ match: { type: KEYS.li } });
    const inCodeBlock = editor.api.some({ match: { type: KEYS.codeBlock } });
    const inBlockquote = editor.api.some({ match: { type: KEYS.blockquote } });
    const inParagraph = editor.api.some({ match: { type: KEYS.p } });
    // Disable Tabbable when inside indentable blocks
    return !(inList || inCodeBlock || inBlockquote || inParagraph);
  },
})

This will allow IndentPlugin to handle Tab and prevent focus loss when a block is selected. You can adjust the block types as needed for your setup. See the Tabbable plugin docs for more details.

To reply, just mention @dosu.

---

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