Home App Docs Blog Github

Enforcing Character Limit on Rich Text

I am trying to enforce a character limit for a custom richText component in the Editor. However, I’m noticing that using regex or onChange does not seem to work with richText. Is this intentional? They both seem to be working perfectly fine with strings, however. What would be the best way to enforce a character limit for richText?

Here is what I am trying to do

        {
            name: 'content',
            type: 'richText',
            defaultValue: 'I wanna hold \'em like they do in Texas, please' +
                'Fold \'em, let \'em hit me, raise it, baby, stay with me (I love it) ' +
                'Love game intuition, play the cards with spades to start' +
                'And after he\'s been hooked, I\'ll play the one that\'s on his heart',
            onChange: (options) => {
                if (options.get('content').length > CONTENT_CHAR_LIMIT) {
                    options.set('content', options.get('content').slice(0, CONTENT_CHAR_LIMIT));
                    alert(`Maximum number of characters is ${CONTENT_CHAR_LIMIT}. Please lessen number of characters..`);
                }
            },
        },

Try replacing the const CONTENT_CHAR_LIMIT with the actual value, the onchange function shouldn’t access any variable from the scope as it will be stringified and sent to the editor.

Thank you for the suggestion. I just tried replacing the constant value and received the same behavior. I think one of the main issues is that it doesn’t look like we’re even making it into the onChange block in the first place. I added an alert at the top of the block (see below), and whenever I change the richText in the editor, the ‘TESTING’ Alert isn’t firing at all.

onChange: (options) => {
    alert('TESTING' + options.get('content'));
    if (options.get('content').length > 320) {
        options.set('content', options.get('content').slice(0, 320));
        alert(`Maximum number of characters is 320. Please lessen number of characters..`);
    }
},

So my big question right now is, should richText be firing the onChange event? If it is, then I’m not sure why the ‘TESTING’ alert isn’t firing.