HTML Editor Validation in ExtJS 6.5.0 - Mimicking Text Field Behavior When allowBlank is false

Question

I'm currently working on an ExtJS 6.5.0 application where I've implemented an HTML editor component. The goal is to make the HTML editor behave like a text field when the allowBlank property is set to false. However, the current implementation of the validation logic doesn't seem to be working as expected.

Expected Behavior:

When allowBlank is set to false, I want the HTML editor to display an error message if it's empty, just like a text field would. The validation should trigger appropriately to indicate that the field is required.

Current Issues:

Despite attempting to modify the change event listener to check for empty values when allowBlank is false, the validation doesn't behave as intended. The HTML editor does not consistently show the error message when the field is left empty.

I'm working with an ExtJS application and using an HTML editor component. I want the HTML editor to behave like a text field when the allowBlank property is set to false.

Here's my current code snippet:

xtype: 'htmleditor',
fieldLabel: 'HTML Editor',
name: 'htmlEditor',
allowBlank: false, // Set to true if you want it to be optional
listeners: {
    change: function(editor, newValue) {
        var isEmpty = Ext.isEmpty(newValue) || newValue.trim().length === 0;

        if (!editor.allowBlank && isEmpty) {
            editor.markInvalid('This field is required.');
        } else {
            editor.clearInvalid();
        }
    }
}
I've tried to adapt the validation logic, but I'm encountering some issues. The current implementation doesn't seem to be working as expected. I want the HTML editor to show an error message when it's empty and allowBlank is set to false, similar to how a text field behaves.

Any suggestions or improvements on how I can achieve this behavior would be greatly appreciated!