Currently, the ACE Code Editor uses a horizontal scrollbar for lines that contain more characters than can be displayed to the user in one line.
Instead, it would be desirable to have an automatic text wrap for lines that are too "long", so that you can see the relevant text content at a glance, without any further user action.
Activating the wrap mode of the ACE editor does not quite solve the problem. ACE regristrates an EventHandler to the window resize event when creating the editor. If a resize event is triggered, e.g. by clicking the maximize or minimize icon, the ACE EventHandler is executed before the TL components are rendered. The DOM element containing the editor does not yet have the updated height and width, and thus the ACE editor creates line breaks in the wrong places.
In this situation the maximize icon was pressed. A breakpoint was set in the ACE resize EventHandler to visually illustrate the situation with this screenshot. The TL rendering of the components would increase the editor area significantly, since this was not yet executed, the editor inserts line breaks based on this size. You get accordingly
Implementation
First the ACE resize EventHandler must be removed. Then the TL layout resizing mechanics are extended so that user-defined functions can still be executed after the TL component rendering. These are stored like the render and compute functions at the layout property of the corresponding DOM element.
Test
Start the ScriptRecorder or the model based search. Write so many characters in a single line that it spans several lines. Then maximize or minimize the window and check if the text is displayed as expected.