There is no “good” solution. The only two I’ve been able to find are ugly but many times you just have to go ugly.
- Check size periodically with setInterval. This is very simple and when used sparingly can work fine. Atom is constantly fighting for speed so special care is needed.
100 ms is usually a UI delay that the user can live with. If checking a div’s size takes under a a ms then a 1% hit might be ok.
If a size measurement occurs at the wrong time it can cause an immediate slow DOM layout in order to find the size. This is often a subtle problem and one reason React was invented. This can sometimes be fixed by very careful control of when you check versus what the rest of your code is doing.
- The other solution is to create artificial circumstances that create an event. The one I know of is to put an invisible larger div inside the one you are measuring and set up the outer so it looks like a scroll happens when the outer one changes sizes. Then an onScroll event will happen. If you look at these solutions on the web you will see long pieces of delicate code.
It is ironic that IE had resize events for all elements until they removed them in IE11.
My app only cares about the outer window expanding so I might be able to come up with a version of the #2 trick that is simpler.
At this moment I’m just going to put a note in the readme that says “I’m sorry but if you resize the editor a blank space will be visible until you scroll”. It actually doesn’t affect the functionality at all.