regression: slash commands render logic

[aaryan610]

Description

This PR fixes the render logic of the slash commands dropdown.

Type of Change

• Bug fix (non-breaking change which fixes an issue)

Summary by CodeRabbit

• Bug Fixes
  • Slash-command menu opens and closes more reliably, with proper cleanup to prevent lingering or duplicated dropdowns.
  • Dropdown now renders at the top level of the page to avoid clipping, z-index issues, and layout conflicts in embedded or complex containers.
  • Improved stability of the slash-command experience across different editor hosts and scrolling contexts.
  • Reduced visual glitches when the menu appears/disappears, resulting in smoother interactions.

[coderabbitai]

Walkthrough

Updates the slash-commands extension to track dropdown lifecycle with add/remove active dropbar calls, render the dropdown by appending directly to document.body, and ensure cleanup on exit by deregistering and destroying the component.

Changes

Cohort / File(s)	Summary of Changes
Slash commands lifecycle and rendering packages/editor/src/core/extensions/slash-commands/root.tsx	Added active dropbar tracking on open/close, switched dropdown mounting to document.body, and ensured deregistration plus component destruction on exit.

Sequence Diagram(s)

sequenceDiagram
    autonumber
    actor User
    participant Editor
    participant SlashCommands as SlashCommandsExtension
    participant DropbarRegistry as ActiveDropbarRegistry
    participant DOM as document.body

    User->>Editor: Type "/" to trigger
    Editor->>SlashCommands: initialize dropdown
    SlashCommands->>DropbarRegistry: addActiveDropbarExtension(self)
    SlashCommands->>DOM: append dropdown element (mount)

    alt user selects or cancels
        User->>SlashCommands: exit dropdown
        SlashCommands->>DropbarRegistry: removeActiveDropbarExtension(self)
        SlashCommands-->>DOM: destroy component (unmount)
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

I pop from the slash like a sprout in the snow,
A dropdown that dances where body tags go.
I hop in the registry—count me, don’t fuss—
Then thump out on exit, no leaks left with us.
Carrot-colored cleanup, ship it—let’s go! 🥕🐇

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description Check	⚠️ Warning	The description includes a brief summary and correctly marks the change type as a bug fix but is missing the required Screenshots and Media, Test Scenarios, and References sections specified in the repository’s pull request template.	Please add the Screenshots and Media, Test Scenarios, and References sections to align the PR description with the repository template.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title succinctly communicates that this PR addresses a regression in the render logic for slash commands, which aligns with the main change of fixing the dropdown rendering behavior.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/slash-commands

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ee68895 and b62992e.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (1)

• packages/editor/src/core/extensions/slash-commands/root.tsx (3 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Build and lint web apps
• GitHub Check: Analyze (javascript)

🔇 Additional comments (3)

packages/editor/src/core/extensions/slash-commands/root.tsx (3)

98-102: LGTM! Proper cleanup with active dropdown tracking.

The parameter destructuring is cleaner, and the call to removeActiveDropbarExtension properly mirrors the tracking added in onStart. The optional chaining on editor?.commands handles the edge case where the editor might be undefined during cleanup.

One minor observation: if editor is undefined, the dropdown won't be removed from tracking. This is likely acceptable since the editor being undefined typically means it's already destroyed, but ensure this doesn't lead to memory leaks in your dropdown tracking implementation.

---

70-70: Verify dropdown append consistency

This change always appends the slash-commands dropdown to document.body, removing the fallback to props.editor.options.element. Confirm that no other extensions rely on the original pattern.

Run:

#!/bin/bash
# Search for other appendChild calls of dropdown-like elements in .ts/.tsx
rg -n -C3 'appendChild.*element' -g '**/*.ts' -g '**/*.tsx'

---

56-57: addActiveDropbarExtension is properly defined and registered
The command is implemented in packages/editor/src/core/extensions/utility.ts with the correct signature and usage.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull Request Overview

This PR fixes a regression in the slash commands dropdown render logic by correcting the element attachment behavior and adding proper dropdown state tracking.

• Adds tracking of active dropdown state when slash commands are started and removed when exited
• Changes element attachment from editor element to document body for consistent positioning
• Updates onExit callback to accept editor parameter for proper cleanup

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}