Content updates trigger overflowchanged, but we're mainly using it to
detect when the editor component has been resized. Pausing measurement
during content updates makes them faster.
This commit breaks the initial render of the editor component into two
stages.
The first stage just renders the shell of the editor so the height,
width, line height, and default character width can be measured. Nothing
that depends on these values is rendered on the first render pass.
Once the editor component is mounted, all these values are measured and
we force another update, which fills in the lines, line numbers,
selections, etc.
We also refrain from assigning an explicit height and width on the
model if these values aren't explicitly styled in the DOM, and just
assume the editor will stretch to accommodate its contents.
The react editor is wrapped in another div with the class of .editor for
backward compatibility. This prevents activation events registered on
the .editor selector from being triggered twice.
Emitting the event *before* update, rather than after. This is because
we read from the DOM after update to measure new characters, which
forces layout, so emitting the event after measuring forces another
layout when the position is updated.
When the target of a mousewheel event is removed, it breaks velocity
scrolling.
Previously, we were preserving the entire screen range when scrolling
with the mouse wheel, which caused a lot of DOM nodes to accumulate. Now
we only preserve the individual line and line number associated with the
target of the mousewheel event, moving them just off screen below all
the on-screen lines and line numbers. This keeps the number of DOM nodes
limited while retaining velocity effects.
We accumulate pending changes and pass them to the lines and the gutter
to help them determine whether to update. The lines only update if the
visible row range changed or if there was a change in the visible row
range.
It checks that the incoming scrollTop/Left and scrollHeight/Width differ
from their current values. The scrollTop/Left value are updated in
the component properties to always reflect the state of the DOM when
scrolling or when assigning a new value.