                 ref: 'html',
                 contentEditable: true,
                 onKeyDown: @onKeyDown,
-                onInput: onHTMLChange,
+                onInput: @onHTMLChange,
                 onDragOver: @allowDrop,
                 onDragEnter: @onDragEnter,
                 onDragLeave: @onDragLeave,

                # when dropping an image, input is fired before the image has
                # really been added to the DOM, so we need to also listen to
                # blur event
                onBlur: onHTMLChange,
                dangerouslySetInnerHTML: {
                    __html: @state.html.value
                }

        return not(_.isEqual(nextState, @state)) or
            not (_.isEqual(nextProps, @props))

    # Update parent component when content has been updated
    onHTMLChange: (event) ->
        @props.html.requestChange @refs.html.getDOMNode().innerHTML

    # Update parent component when content has been updated
    onTextChange: (event) ->
        @props.text.requestChange @refs.content.getDOMNode().value

    render: ->

        if @props.settings.get 'composeOnTop'
            classFolded = 'folded'
