Strange Looking focus ring style on @mention element

[electroluxcode]

Description

I noticed that the @ mention style looks a bit off. After doing some quick debugging, I found that the issue is caused by the focus-within:ring-2 style in the following code segment:

In both:

• templates/plate-playground-template/src/components/ui/mention-node.tsx
• apps/www/src/registry/ui/mention-node.tsx

→ MentionInputElement →

<span className="inline-block rounded-md bg-muted px-1.5 py-0.5 align-baseline text-sm ring-ring focus-within:ring-2">
  <InlineComboboxInput />
</span>

I'm not sure if this is the intended styling behavior. and may be it should show the @ where user trigger

Reproduction URL

No response

Reproduction steps

1. Go to `https://platejs.org/`
2. Tap "@"

Plate version

latest

Slate React version

latest

Screenshots

Logs

Browsers

No response

[dosubot[bot]]

The focus ring you see comes from the focus-within:ring-2 Tailwind class, which is included by default in the mention input styling to give visual feedback when the input or its children are focused. This is intentional for accessibility and consistency, but it's not strictly required—there's no documentation or code comment saying it must be there. If the ring looks off or doesn't fit your design, you can safely remove or adjust focus-within:ring-2 in your component without breaking core functionality. The mention element itself only shows a ring when selected and focused, so you can match that pattern if you prefer a subtler look reference.

To reply, just mention @dosu.

---

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