Need support for Tagging users and to style it inside TextInput

[ridsashabbir]

so this is something like Instagram's comment section, where you can reply to other users' comments on a post, but it will use a different styling for it, also you can tag other users in that comment section using the @ sign and style it accordingly

[mehsaandev]

Proposed EDL for Mentionable Input:

 TagInput:
      id: inputId
      styles:
           mentionStyle: # text Style of default mention tag starting with @ sign
               color: red # for example if my input is "Hi, how are you @ehsaan" in this @ehsaan will be colored red 
      triggers:
        - character: '#'
           tagStyle: 
               color: blue # for example if my input is "This is a #beutiful place" in this @beutiful will be colored blue 
      tags:
        - id: 1
          key: ehsaan
          label: Muhammad Ehsaan
          image: # profile picture
          labelWidget: # custom widget for tags list item in case you want to add custom view for the list
        - id: 2
          key: ridsa
          label: Ridsa Shabbir
          image: # profile picture
          labelWidget: # custom widget for tags list item
        - id: 3
          key: nouman
          label: Nouman Butt
          image: # profile picture
          labelWidget: # custom widget for tags list item

If we don't use labelWidget and use our default tag label, it will be displayed like this:

Any suggestions
CC: @ridsashabbir @amin-nas @sharjeelyunus

[kmahmood74]

you are not mentioning, you are tagging, fix the name.

[mehsaandev]

you are not mentioning, you are tagging, fix the name.

Updated to TagInput

[sharjeelyunus]

tags should be here, and for each item defining a custom labelWidget will make it more complex
there should be a tagSheet or something like that, which accepts a widget, and users can define there own sheet and use any widget to item template the users. trigger should open that sheet

[amin-nas]

@mehsaandev we would need to be able to style the tag selection box. I also assume existing input styling can be set on this.

TagInput:
      styles:
           tegStyle: # text Style of default mention tag starting with @ sign
           tagSelectionStyle:

[mehsaandev]

@mehsaandev we would need to be able to style the tag selection box. I also assume existing input styling can be set on this.

TagInput:
styles:
tegStyle: # text Style of default mention tag starting with @ sign
tagSelectionStyle:

Got it
Yes we can do existing input styling to this as well

[mehsaandev]

tags should be here, and for each item defining a custom labelWidget will make it more complex there should be a tagSheet or something like that, which accepts a widget, and users can define there own sheet and use any widget to item template the users. trigger should open that sheet

I think we can directly support itemTemplate to this because in any case I am showing a sheet/modal which will have the list of all the items. If I support that tagSheet separately then it'll not necessarily enforce the user to provide a list because tagSheet can accept any widget but this requires a list.
What do you say? @sharjeelyunus

[sharjeelyunus]

yes, that works as well, also we need action as well in this input, e.g onTrigger so we can call an api to search the users.