Triggering Mentions with Dollar Sign ($)

[MarLapuz]

I would like to know if there is a way to trigger a mention using the dollar sign (⁠$). My goal is to mention various symbols like ⁠$AAPL, ⁠$NVDA, $⁠AMZN etc.

Is there a method or existing functionality that supports this format for mentions? Any guidance or examples would be greatly appreciated!

Thank you!

[dosubot[bot]]

Hi @MarLapuz! I'm Dosu and I’m helping the lexical-beautiful-mentions team.

Yes, you can trigger mentions using the dollar sign ($) in lexical-beautiful-mentions. The plugin supports custom triggers, so you just need to add '$' as a key in your mention items and (optionally) in the triggers array if you're using async search or utility functions. For example:

const mentionItems = {
  "$": [
    { value: "AAPL", uid: "AAPL" },
    { value: "NVDA", uid: "NVDA" },
    { value: "AMZN", uid: "AMZN" }
  ],
  "@": [ /* ...other items... */ ]
};

// If using async search:
<BeautifulMentionsPlugin
  items={mentionItems}
  triggers={["$", "@"]}
/>

You can also customize the mention style for '$' in your theme config:

const beautifulMentionsTheme = {
  "$": "bg-green-100 text-green-800 px-1 mx-px rounded",
  "$Focused": "outline-none shadow-md"
};

No code changes are needed—just list '$' as a trigger in your config and it will work for mentions like $AAPL, $NVDA, etc. For more details and examples, see the README.

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[MarLapuz]

@dosu this doesn't work for me. Nothing happens when I typed $.

[dosubot[bot]]

The plugin does support custom triggers like $, but there are a few things that can prevent it from working:

• Special characters like $ need to be escaped in the configuration because the plugin builds its regex directly from the triggers array. Try using "\\$" as the key in your mentionItems and in your triggers array instead of just "$" (reference).
• By default, the plugin only triggers mentions if the character is at the start of a line or after whitespace. To allow $ to trigger after any character, set preTriggerChars="[\\s\\S]" in your plugin props (reference).
• Make sure your mentionItems and triggers props are structured like:

  const mentionItems = {
    "\\$": [
      { value: "AAPL", uid: "AAPL" },
      { value: "NVDA", uid: "NVDA" },
      { value: "AMZN", uid: "AMZN" }
    ]
    // ...other triggers
  };
  <BeautifulMentionsPlugin
    items={mentionItems}
    triggers={["\\$"]}
    preTriggerChars="[\\s\\S]"
  />

If you still don't see the menu after these changes, there may be a limitation in the plugin's regex logic for non-alphabetic triggers. In that case, you would need to adjust the regex in the plugin code itself to treat $ as a literal character (reference). If you want, share your config and I can help review it!

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.