fix: correctly format suggestions by mentions when submitted

[cuserox]

Why does this PR exist?

Closes #2902

A previous fix to prevent trailing whitespace being added, had made the Mentions component misbehave. Inserting extra curly brackets at random spots when searching.

What does this pull request do?

• Removes the trim prop in favour of trimming the raw value
• Adds a small utility to properly calculate the style for the swatch colours in search options

Testing this change

Before	After
https://github.com/tokens-studio/figma-plugin/assets/114073780/c1bde474-834c-4b70-b6a7-171d04ebd27c	https://github.com/tokens-studio/figma-plugin/assets/114073780/893fae55-d55c-4add-ace7-56ddb4ceced1

Additional Notes (if any)

✨ 👀 Extra improvement: when typing in a search, ensure that if there is a full match, it is highlighted. Perhaps adding a custom filterOption prop to the Mentions component?

At the moment, even if there is a full match (i.e. colors.blue.500), the first one on the list is highlighted and submitted when pressing Enter:

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: e381c95dbff4f72f30870b4a64ccee2dcfbc8ffb

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR