Ace: Editor text doesn't resize after being wedged by dev tools vertically (inspect element tool in generic sense)

[igauravsehrawat]

I feel this issue would make sense if i put some screenshots.

1. Normal text editor
   
2. Text editor wedged by inspect element aka dev tools
   
3. Problem/issue : Editor text doesn't resize/flow to original
   

As part of debugging I tried editor.renderer.updateFull()/editor.renderer.updateText() api on resize event and manually but they didn't helped much.

Thanks

[nightwing]

Did you try editor.resize()?
ace.edit calls that automatically when window is resized https://github.com/ajaxorg/ace/blob/master/lib/ace/ace.js#L107

[igauravsehrawat]

@nightwing Excellent!! That works. I thought it would be render's problem.

Quick question :
Where would one use editor.renderer.updateFull()/editor.renderer.updateText() api, any peculiar use case?

Thanks for lightspeed response.

[igauravsehrawat]

Also @nightwing

ace.edit calls that automatically when window is resized

automatically doesn't solve this, it works if i put editor.resize() in my resize event.

Thanks

[nightwing]

updateFull, and updateText are internal calls to schedule dom update on next animation frame.
When something changes, editor calls one of these functions to schedule redraw https://github.com/ajaxorg/ace/blob/master/lib/ace/virtual_renderer.js#L789

[igauravsehrawat]

@nightwing
Do you think there is bug in ace since

ace.edit calls that automatically when window is resized

automatically doesn't solve this, it works if i put editor.resize() in my resize event

Thanks

[nightwing]

Automatic resizing works if the element for which editor was created is resized automatically, if it is resized with javascript after window resize event editor.resize() call is needed.

[igauravsehrawat]

Thanks. Learned slow way that resize doesn't work on div but on window element.

[eklingen88]

I'm using jQuery-ace to handle the interface between Ace and jQuery, so my solution is going to be slightly different and so is my context.

I'm trying to make the Ace editor resizable on a textarea and have had success with the following:

(function ($) {
    $(document).ready(function () {
        $('[type="code_editor"]').each(function () {
            let $this = $(this).ace({theme: 'chrome', lang: 'mysql'});
            let textareaEditor = $this.data('ace');
            let $container = $(textareaEditor.container);

            $container.resizable();
            $container.resize(function () {
                $this.ace('resize');
            });
        });
    });
})(jQuery);

Hope that helps!