mentionSelect (format) can't return HTML

[kazzkiq]

This plugin is awesome and seems to work pretty well already with both <input> elements and also <div contenteditable="true">.

The problem is that even when using this plugin with a <div> (which accepts HTML), I can't format my selection with HTML, because it just writes the HTML as text instead:

mentionConfig: MentionConfig = {
  mentionSelect: this.format,
};
//...
format(item: any) {
  return `<span class="chip">${item['name'].split(' ')[0]}</span>`;
}

Is it possible to accept HTML formatting in mentionSelect when using this plugin in contenteditable elements?

[kewur]

any workarounds for this?

[ashish-chide]

Facing same issue.

mentionConfig = { items: ['Noah', 'Liam', 'Mason', 'Jacob'], triggerChar: '@', dropUp: true, maxItems: 10, mentionSelect: this.onMentionSelect, };

onMentionSelect(selection): string { return '<b>' + selection.label + '</b>'; }

I am using div with contenteditable but I am not able to style it

[pallaviMN]

@dmacfarlane @quadsquad1101 @kazzkiq , Did anyone resolve this?

[tenji73]

@dmacfarlane @quadsquad1101 @kazzkiq @pallaviMN

i was facing the same issue and landed here... i ended up with this little hack - its not pretty, but it works...

since the substring may already exist in the string i add some temporary marks to the string like this in the config on select - (no html):
mentionSelect: (e: any) => { return '##' + e.label + '##' }

...and in "itemSelected" after 100ms i search for that string and replace it with html...

itemSelected(event: any) {
		setTimeout(() => {
			this.htmlDoc.innerHTML = this.htmlDoc.innerHTML.replace('##' + event.label + '##', ' <b>' + event.label + '</b> ');
		}, 100);
	}

"this.htmlDoc" is my contenteditable element..

[ThamTran04]

@tenji73 Hello, do you have the link of Stackblitz for your solution? thanks

[tenji73]

@ThamTran04 sure - here we go:
https://stackblitz.com/edit/angular-ivy-kw3chj

[ThamTran04]

@ThamTran04 sure - here we go: https://stackblitz.com/edit/angular-ivy-kw3chj

Many thanks again

[iyyappanp786]

can any one help me that if we type @ or # the seperae dropdown has to be shown only in the div and in angular 15 version

[PierreKabeen]

Hey for those who are interested, you can also delete a whole mention by simply adding contenteditable="false" to the <b> element provided by @tenji73 :)