/**
 * Wraps Froala Editor. [Froala Editor](https://www.froala.com/wysiwyg-editor).
 *
 * When the component is created, the Froala editor instance gets initialized, which
 * takes several milliseconds. Use the {@link #ready} event to know when it's
 * ready.
 *
 * To run native Froala methods, access the Froala editor instance via
 * {@link #method-getEditor}. For example,
 * `myFroalaComponent.getEditor().popups.show('froala.hello', 30, 60, 200);`
 *
 * Native Froala events are available by prefixing the event name with "froala.".
 * For example, you can listen to the Froala click event via
 * `myFroalaComponent.on('froala.click', function(){console.log('click');});`
 *
 * ## Example
 *
 *     @example
 *     Ext.define('Example.main.Main', {
 *         extend: 'Ext.Panel',
 *         requires: ['Ext.froala.Editor'],
 *         layout: 'fit',
 *         items: [{
 *             xtype: 'froalaeditor',
 *             value: 'Hello world!',
 *             listeners: {
 *                 change: function (froalaComponent) {
 *                     Ext.toast({
 *                         message: "Change!"
 *                     });
 *                 },
 *                 // Native Froala events are prefixed with 'froala.'
 *                 "froala.click": function (froalaComponent) {
 *                     Ext.toast({
 *                         message: "Click!"
 *                     });
 *                 }
 *             }
 *         }]
 *     });
 *
 *     Ext.application({
 *         name: 'Example',
 *         mainView: 'Example.main.Main'
 *     });
 *
 * If you have a Froala activation key, configure it in your application's `app.json`
 *
 *       {
 *          "name": "MyApp",
 *          "namespace": "MyApp",
 *          "framework": "ext",
 *          "requires": ["font-awesome", "froala-editor"],
 *          "froala" {
 *              "activation-key": "my-activation-key"
 *           }
 *          ...
 *       }
 *
 * For more information about activation keys, please visit [What is an Activation Key?](https://wysiwyg-editor.froala.help/hc/en-us/articles/115000394945-What-is-an-Activation-Key-).
 */
Ext.define('Ext.froala.Editor', {
    extend: 'Ext.Component',
    xtype: 'froalaeditor',
    mixins: {
        froalaeditor: 'Ext.froala.Mixin'
    },
 
    element: {
        reference: 'element',
        children: [
            {
                reference: 'editorElement',
                classList: [Ext.baseCSSPrefix + 'froala']
            }
        ]
    },
 
    twoWayBindable: ['value'],
    defaultBindProperty: 'value',
 
    /**
     * @event change
     * Fired when the html content changes
     * @param {Ext.froala.Editor} this This component.
     * @param {String} the html content.
     */
 
    /**
     * @event ready
     * Fired after the FroalaEditor instance is initialized.
     * @param {Ext.froala.Editor} this This component.
     * @param {Object} the FroalaEditor instance.
     */
 
    getFroalaEditorDomElement: function() {
        return this.editorElement.dom;
    },
 
    doDestroy: function() {
        var me = this;
 
        me.setEditor(null);
        me.callParent();
    },
 
    updateValue: function(value) {
        this.mixins.froalaeditor.updateValue.call(this, value);
    },
 
    updateDisabled: function(disabled) {
        this.mixins.froalaeditor.updateDisabled.call(this, disabled);
    },
 
    privates: {
        // Overrides a private method in Ext.mixin.Observable
        doAddListener: function(ename) {
            var me = this,
                result;
 
            result = me.callParent(arguments);
 
            this.mixins.froalaeditor.handleAddListener.call(this, ename);
 
            return result;
        },
 
        // Overrides a private method in Ext.mixin.Observable
        doRemoveListener: function(ename) {
            var me = this,
                result;
 
            result = me.callParent(arguments);
 
            this.mixins.froalaeditor.handleRemoveListener.call(this, ename);
 
            return result;
        }
    }
});