HTML returned from `mentionSelect` function is being escaped

[agarbund]

Hey @dmacfarlane it's me again :) I'm continuing rewrite of app to Angular 4 and encountered following issue: I'm attaching [mention] to contenteditable div. A function which is formatting selected item returns HTML to style selected label nicely and disallow editing it:

onFieldSelect(item: Models.SourceField): string {
    return `<em data-id="${item.id}" contenteditable="false">${item.label}</em>`;
}

However, this HTML is being escaped when inserted to contenteditable element. Any idea how to bypass this?

[agarbund]

@dmacfarlane I've created PR resolving this issue: #50

[gurpreet2-kaur]

Can I apply CSS to element selected using mentionSelect

[agarbund]

@gurpreet2-kaur I don't see a reason why you couldn't

[gurpreet2-kaur]

I am using function [mentionConfig]="{maxItems:2,mentionSelect:modifyvalue} modifyvalue(input){ return 'input.label'; } This value is returned as is and the color is not applied . I want to apply color to the selected item/ Please suggest

[ghost]

@agarbund hi..

Is it formatting supposed to work like this:

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

Because the result in my textarea is just "\Text\" instead of "Text" .. any idea?

<textarea matInput [rows]="4" style="resize: none;"
          type="text" [mention]="mentions" 
          [mentionConfig]="{mentionSelect: onMentionSelect}">              
</textarea>   

[agarbund]

@silentsnooc you can't have a formatted text in textarea. You need to use [contenteditable] attribute if you need formatting.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content

[agarbund]

If anyone reaches here in search for @mentions for Angular 2+ with support for HTML in [contenteditable], I've created ngx-tribute, an Angular 2+ wrapper for @mentions library written in pure JS - Tribute

[ghost]

@agarbund Could you provide an example? This is not working for me:

<div [mention]="mentions" [mentionConfig]="mentionConfig" contenteditable 
     style="padding-bottom: 24px;">              
</div>

I am still getting " \Text\".

[agarbund]

@silentsnooc can I see the issue somewhere? jsbin or sth like that

[ghost]

@agarbund I created a stackblitz example: https://stackblitz.com/edit/angular-389kgl

[agarbund]

@silentsnooc an example you've attached is using a version of angular-mentions from npm. Feature of supporting formatted text was never merged, so it's not available in the npm package. If you want to use it, you'd need to install my fork directly from a git repo: npm i https://github.com/agarbund/angular2-mentions.

I couldn't import a package directly from git on stackblitz demo, but if you want to see a working example of formatting a selected item, then clone my fork, run npm i && npm start, and check example with contenteditable.

If you prefer to stick with packages from NPM you might also check a package I've published recently.

[tanmayrajani]

I am still getting "<b>Text</b>".

I know this issue is quite old but this happens to me as well in a tinymce using iframe..

@dmacfarlane any plans on this? or am I missing something?

thanks!

[vamulya]

@agarbund I created a stackblitz example: https://stackblitz.com/edit/angular-389kgl

hi @silentsnooc Is it working now?

[aeslinger0]

@tanmayrajani, my work-around for that is to return a blank string, wait a tick with setTimeout so the search term gets cleared out, then insert the html manually using tinymce's API.

[Manishpri]

@agarbund Could you provide an example? This is not working for me:

<div [mention]="mentions" [mentionConfig]="mentionConfig" contenteditable 
     style="padding-bottom: 24px;">              
</div>

I am still getting " Text".

Still, I am facing the same issue,

[dmacfarlane]

Closing in favor of #170.

[kartik8393]

@tanmayrajani, my work-around for that is to return a blank string, wait a tick with setTimeout so the search term gets cleared out, then insert the html manually using tinymce's API.

Can you please explain the exact solution or a stackblitz if possible.