Multi triggerChar

[komxvl]

HI. Input [triggerChar] don't support string like this: '{{'. Any idea or workaround? Thnx.

[trickeyone]

Well, as the name suggests, it's a single character. It's not supposed to be multiple characters. The way it works is that the component listens for a single keystroke to trigger the mention dropdown. I can look into this, but I don't know when I'd be able to get around to it. Work is taking up most of my time. You could take a crack at branching and making a PR with tests, if you'd like.

[trickeyone]

@komxvl Out of curiosity, are you just wanting to have the outputted text to have the mention formatted by being surrounded by {{<mention name>}}? i.e. If the mentioned user/whatever's name is "John", did you just want the output from the component to be something like:

Hi {{John}}, how are you?

with the content displayed in the component being:

Hi John, how are you?

Supporting multiple characters for the trigger is more difficult than you'd think.

[komxvl]

Thank you for your interest in this question. It's will be great, if mention works like an attribute in chatfuel. https://docs.chatfuel.com/en/articles/852949-user-attributes , block Cards.

[trickeyone]

It's an okay example but this kind of checking falls apart when you're dealing with editing text that isn't at the end of the input value. I ran into this exact issue when I was first creating the component. The component has to watch on the keydown event and determine if the mention popup needs to be displayed, etc. Trying to track where the cursor currently is, then if the trigger is multi-character, and if the latest content matches it, is more work than you'd expect.

Since this would take a decent amount of effort on my part, I'd have to put this on the back-burner and work on it if/when I have time.

Also, if all you're wanting is the mention text/name to be wrapped in the double-curly brackets, that's more of the outputted value, not what's displayed or the trigger character.

From my above example, the trigger character to be "{" or "@". With that, you could have a markup of "{{(display)}}". The outputted text would then be:

Hi {{(John)}}, how are you?

while the displayed text would be:

Hi John, how are you?

I made a small Stackblitz that shows how to accomplish this. It doesn't work 100% the way you were requesting since the trigger is a singular {. https://stackblitz.com/edit/angular-lsutsf

[komxvl]

Oh no, the displayed text would be: Hi {{John}}, how are you?, I create jsfiddle with froala WYSIWYG and at.js(atwho) %) Look at this- https://jsfiddle.net/zf9u25y1/

[trickeyone]

@komxvl If you look at the stackblitz example I pasted in my last comment, you'll see how to achieve what you're wanting to do. You'll need to use version 2.0.4+ to achieve it.

This is not a full WYSIWYG editor and is not intended to be. Since this is an Angular component, it is made to be as compatible as possible with other components. A full WYSIWYG editor completely takes over the content being edited. I know ckeditor has an Angular version that might be closer to what you're looking for?

[komxvl]

Thnx for your support. When I use next model model: any = { value: '', markup: '{{__display__}}', triggerChar: '{', mentions: [ { display: '{{Dave}}', id: 1, type: 'contact' }, { display: 'Bob Ross', id: 2, type: 'contact' }, { display: 'Carl', id: 3, type: 'contact' }, { display: 'Sue', id: 4, type: 'contact' }, ] }; I get next value "value": "Hi {{{{Dave}}}}", but I want to get- Hi {{Dave}}. https://stackblitz.com/edit/angular-lsutsf-ewrjgj?file=app/mentions-basic.ts

[trickeyone]

That's because your first mention is {{Dave}} instead of Dave:

model: any = {
    value: '',
    markup: '{{__display__}}',
    triggerChar: '{',
    mentions: [
        {
            display: 'Dave',
            id: 1,
            type: 'contact'
        },
        {
            display: 'Bob Ross',
            id: 2,
            type: 'contact'
        },
        {
            display: 'Carl',
            id: 3,
            type: 'contact'
        },
        {
            display: 'Sue',
            id: 4,
            type: 'contact'
        },
    ]
};

[komxvl]

I want to get {{Dave}} in highlight and value also {{Dave}}

[trickeyone]

That kinda goes against the way that most mentions work. It really sounds you're looking for a typeahead component rather than a mentions component. I'd suggest looking at one of the various typeahead components that exist. There are ones that are made for Bootstrap and MaterialUI for Angular.

If I see more demand for this type of functionality, I may revisit this, but for now I'm going to have to pass or put this on the back-burner.

Bootstrap: https://ng-bootstrap.github.io/#/components/typeahead/examples Material UI: https://material.angular.io/components/autocomplete/overview

[komxvl]

At.js supported click on mention item & presents himself as a mentions library but anything doesn't exist to wrap the autocomplete At.js in Angular. I understand that is not your case and you don't have a lot of time to implement these features.

[no-response[bot]]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.