@mention does not show user image on li list

[quill-mention]

@mention does not show user image on li list

Did you take a look at renderItem? Should be no problem to render what you want. It should look something like this:

renderItem: (item, searchTerm) => {
  return `
    <div class="cql-list-item-inner">
      <img src="${item.imageUrl}">
      ${item.value}
    </div>`;
}

[Eduser-vivo]

 import { renderToString } from 'react-dom/server'

 const renderMentionItem = (item) =>{

 return (
    <ListItem value = {item.id}> 
        <ListItemAvatar> 
            <Avatar
                src={item.avatar}
                alt={item.value}
                color={createAvatar(item.value).color}
                sx={{ width: 27, height: 27, fontSize: 12 }}
            >
                {createAvatar(item.value).name}
            </Avatar>
        </ListItemAvatar>
        <ListItemText primary = {item.value} />
    </ListItem> 
    );
}

   renderItem : function(item, searchTerm){ return renderToString(renderMentionItem(item)) },

[a-utkarsh]

can you write full example. I am not able to render custom HTML. I am using MUI Listitem

allowedChars : /^[A-Za-z\sÅÄÖåäö]*$/, mentionDenotationChars : ["@", "#"], isolateCharacter : true, renderItem : function (item, searchTerm) { return ( <ListItem value = {item.id}> <ListItemAvatar> <Avatar> UA </Avatar> </ListItemAvatar> <ListItemText primary = {item.value} /> </ListItem> ); }, source : function (searchTerm, renderItem, mentionChar) { let values; if (mentionChar === "@") { values = atValues; } if (searchTerm.length === 0) { renderItem(values, searchTerm); } else { const matches = []; for (let i = 0; i < values.length; i++) if ( ~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase()) ) matches.push(values[i]); renderItem(matches, searchTerm); } }

[Zayyarhein]

allowedChars : /^[A-Za-z\sÅÄÖåäö]*$/, mentionDenotationChars : ["@", "#"], isolateCharacter : true, renderItem : function (item, searchTerm) { return ( <ListItem value = {item.id}> <ListItemAvatar> <Avatar> UA </Avatar> </ListItemAvatar> <ListItemText primary = {item.value} /> </ListItem> ); }, source : function (searchTerm, renderItem, mentionChar) { let values; if (mentionChar === "@") { values = atValues; } if (searchTerm.length === 0) { renderItem(values, searchTerm); } else { const matches = []; for (let i = 0; i < values.length; i++) if ( ~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase()) ) matches.push(values[i]); renderItem(matches, searchTerm); } }
How about this problem? Can you show the user image in li list? If you found the any solution, please let me known your solution for this case. @a-utkarsh