Adding variables within a text area

[elangager3]

Hello! I was wondering if there was anything currently in Paste that supported adding variables to a text area? Ex: typing @ and a dropdown will appear with names you can select.

Currently in Studio, you can add a liquid variable when you type "{{", but this is custom, and we are looking to see if there's anything like this in Paste. Studio example:

Thank you!

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Hi! For adding variables to a text area with a dropdown appearing when you type a specific character (like "@" for names), Paste recommends using the Combobox Primitive. This approach allows for more control and customization, which seems to align with your need for functionality similar to the Studio example of adding liquid variables with "{{".

The Combobox Primitive can be customized to trigger a dropdown with options based on the input. It's also important to ensure that the implementation is accessible, allowing screen reader users to understand that a list of options is being presented and to navigate through or between the options.

Here's a snippet from the documentation suggesting the use of the Combobox Primitive for similar use cases:

"With your desired functionality of needing to customize the text area and dropdown, we suggest that you try using the Combobox Primitive to have more control for what you need."

For more details on implementing the Combobox Primitive and ensuring accessibility, you can visit the Paste documentation: Combobox Primitive

Please give the Combobox Primitive a try, and if you have any questions or need further assistance, feel free to ask!

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Parity between paste features and existing codebase - Studio team - Answer (updated: 08/03/2022, similarity score: 85%)
• Is Paste available to use for non Twilio UX Designers? (updated: 09/18/2021, similarity score: 84%)
• Rich Text Editor for Textarea Component (updated: 05/17/2023, similarity score: 84%)

[krisantrobus]

Hi @elangager3, unfortunately we do not have that functionality available for TextArea. We do have another component, ChatComposer which has the ability to create custom plugins to format text. For example we have a plugin built in that checks for a URL format and provides link highlighting. You can also create you're own custom plugins to check for specific syntax. This would be the best option to experiment with. While we have not created many custom plugins our end I'm happy to help your engineers with anything they run into.

[nkrantz]

Hi @timparsons -

Thanks so much for sharing these findings and your POC!

1. Yes, new plugins can easily be exported from the Paste Lexical library here when needed. I'd be happy to get up a PR to add the LexicalTypeaheadMenuPlugin if you'd like.
2. Adding a new property to disable the Autolink plugin seems reasonable to me. I will circle back to both of these changes next week and I'll share the PR in this thread.

[timparsons]

Hi @nkrantz, that would be great! Thank you!

[nkrantz]

Feel free to follow along: #4327

[serifluous]

Hey @timparsons ! This is available now in our latest release.