Retrieve character count for toggling message 'on-charCounter-exceeded'

[TheHomeRepo]

I'm currently able to show a message below the editor 'on-charCounter-exceeded', however, I would like to remove the message when the character count is less than the charCounterMax.

I tried retrieving the character count on the action so I could add some logic to the controller action:

Controller

charCountExceeded(component) {
      let controller = this;     
      let count = component.get('editor.charCounter.count.length');  // always equals 0 ??
      
      //if 'count' is less than 'charCounterMax' set boolean property equal to 'true' else 'false (show/hide on template)
}

I'm getting 0 as a result for 'editor.charCounter.count.length' no matter how many characters are typed in. Would like to achieve without using jquery if possible. Any guidance on this is much appreciated.

[Panman82]

I think you'll want to use the editor method for that: https://www.froala.com/wysiwyg-editor/docs/methods#charCounter.count and using the {{froala-editor}} way to call a method: http://www.emberwysiwygeditor.com/#/components/froala-editor?section=methods

charCountExceeded(component) {
    let count = await component.method('charCounter.count');
}

Note, await is needed because the method call will return a promise due to the unknown state of the editor.

[TheHomeRepo]

Thanks @Panman8201

I was confused on how to use that method within Ember... Thanks for the clarification. It worked great! If there's a better way to achieve the same result without having to call 'on-charCounter-update' every keypress, please share.

charCountExceeded: async function(component) {
    let controller = this;
    let maxChars = component.get('options.charCounterMax');
    let count = await component.method('charCounter.count');

    (count === maxChars) ? controller.set('maxCharactersReached', true) : controller.set('maxCharactersReached', false);
}

[Panman82]

Humm... is there a reason the charCounter.exceeded event doesn't work for your case?

{{froala-editor on-charCounter-exceeded=(action "openExceededWarning")}}

actions: {
    openExceededWarning(component) {
        // Do something here.?.
    }
}

Or, using that same event, change the maxCharactersReached directly. Ex:

{{froala-editor on-charCounter-exceeded=(action (mut maxCharactersReached true))}}

The trick with that approach would be getting it back to false once the user deletes some characters. But I'm wondering if you need to track that directly, which is why I'm wondering what else you're doing when that happens.

[TheHomeRepo]

I'm using the first approach, but when the user removes characters, 'on-charCounter-exceeded' is no longer called (unaware of count) so I was watching the char count with on-charCounter-update=(action 'charCountExceeded').

Tried using the second approach (action (mut maxCharactersReached true)), but I'm getting the same results. maxCharactersReached property stays true once the max char count is reached.

[Panman82]

Yeah, there isn't really an event for the other way. I'd suggest starting a feature request over on the "core" froala-editor repo: https://github.com/froala/wysiwyg-editor/issues

As for a better way with the ember integration, I don't think there really is. Any way you go about it, calling a function to grab the count and put it in an "ember land" property is required. I can think of a couple other ways of achieving it, but it would basically do the same thing.

[Panman82]

Closing this for now, can re-open for further discussion if needed, but I think a new event from the actual editor would be best here (something opposite to charCounter.exceeded). They really are open to new feature requests so it would be worth starting a case over there.