Skip to content

Improved the way Live Preview re-calculates width of Source Editor

Denys Mishunov requested to merge 398654-se-soft-wrap-layout into master

What does this MR do and why?

Before this MR, every time we would resize Source Editor with the Live Preview panel opened, the Live Preview extension would re-calculate the width the preview panel should occupy within the editor. The split is 50/50. The mechanism didn't consider whether the editor's width had changed. It was not a problem until recently since Live Preview was the only extension interested in the editor's width and toggling it.

However, with the soft-wrap button, the implementation became buggy (see the relevant video). The reason was that any update of the editor's settings (like soft wrap vs. unwrap) toggles the editor's recalculation of the layout (internal behavior of the Monaco editor). With Live Preview being open toggling soft-wrap/unwrap, fired the event listener in the Live Preview extension, and the editor's width was shrunk 2x again. And again, every time, the soft-wrap button would be clicked.

The MR updates this scenario and re-calculates the split between the editor and the Live Preview panel only in case the width of the editor is changed (which is not the case when soft-wrap button is toggled).

Screenshots or screen recordings

Before After
Screen_Recording_2023-03-22_at_15.35.52 Screen_Recording_2023-03-30_at_16.26.00

How to set up and validate locally

  1. Enable the Source Editor toolbar feature flag 
    Feature.enable(:source_editor_toolbar)
  2. In a project, open any Markdown file (README.md, for example)
  3. Click 'Edit' on the file to get to the Web Editor for that file
  4. Enable the Live Preview panel in the editor by either clicking Preview tab, or clicking the button on the toolbar. The Live Preview panel will open splitting the editor in half
  5. Click 'No wrap' button on the toolbar. The split between the editor and the preview panel should not change
  6. Click the same button again. Should be no changes in the split

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #398654 (closed)

Edited by Denys Mishunov

Merge request reports