Merge branch 'dmishunov-editor-fix-rendering' into 'master'

Reset editor's layout after StartupCSS

See merge request gitlab-org/gitlab!61426

app/assets/javascripts/editor/extensions/editor_lite_extension_base.js

 import { Range } from 'monaco-editor';
+import { waitForCSSLoaded } from '~/helpers/startup_css_helper';
 import { ERROR_INSTANCE_REQUIRED_FOR_EXTENSION, EDITOR_TYPE_CODE } from '../constants';
 
 const hashRegexp = new RegExp('#?L', 'g');
@@ -25,11 +26,18 @@ export class EditorLiteExtension {
       if (instance.getEditorType && instance.getEditorType() === EDITOR_TYPE_CODE) {
         EditorLiteExtension.setupLineLinking(instance);
       }
+      EditorLiteExtension.deferRerender(instance);
     } else if (Object.entries(options).length) {
       throw new Error(ERROR_INSTANCE_REQUIRED_FOR_EXTENSION);
     }
   }
 
+  static deferRerender(instance) {
+    waitForCSSLoaded(() => {
+      instance.layout();
+    });
+  }
+
   static highlightLines(instance) {
     const { hash } = window.location;
     if (!hash) {

changelogs/unreleased/dmishunov-editor-fix-rendering.yml

+---
+title: Reset Source Editor's layout after Startup CSS
+merge_request: 61426
+author:
+type: fixed

spec/frontend/editor/editor_lite_extension_base_spec.js

@@ -7,6 +7,21 @@ import {
 } from '~/editor/constants';
 import { EditorLiteExtension } from '~/editor/extensions/editor_lite_extension_base';
 
+jest.mock('~/helpers/startup_css_helper', () => {
+  return {
+    waitForCSSLoaded: jest.fn().mockImplementation((cb) => {
+      // We have to artificially put the callback's execution
+      // to the end of the current call stack to be able to
+      // test that the callback is called after waitForCSSLoaded.
+      // setTimeout with 0 delay does exactly that.
+      // Otherwise we might end up with false positive results
+      setTimeout(() => {
+        cb.apply();
+      }, 0);
+    }),
+  };
+});
+
 describe('The basis for an Editor Lite extension', () => {
   const defaultLine = 3;
   let ext;
@@ -44,6 +59,19 @@ describe('The basis for an Editor Lite extension', () => {
   });
 
   describe('constructor', () => {
+    it('resets the layout in waitForCSSLoaded callback', async () => {
+      const instance = {
+        layout: jest.fn(),
+      };
+      ext = new EditorLiteExtension({ instance });
+      expect(instance.layout).not.toHaveBeenCalled();
+
+      // We're waiting for the waitForCSSLoaded mock to kick in
+      await jest.runOnlyPendingTimers();
+
+      expect(instance.layout).toHaveBeenCalled();
+    });
+
     it.each`
       description                                                     | instance     | options
       ${'accepts configuration options and instance'}                 | ${{}}        | ${defaultOptions}
@@ -51,6 +79,7 @@ describe('The basis for an Editor Lite extension', () => {
       ${'does not fail if both instance and the options are omitted'} | ${undefined} | ${undefined}
       ${'throws if only options are passed'}                          | ${undefined} | ${defaultOptions}
     `('$description', ({ instance, options } = {}) => {
+      EditorLiteExtension.deferRerender = jest.fn();
       const originalInstance = { ...instance };
 
       if (instance) {
@@ -82,12 +111,14 @@ describe('The basis for an Editor Lite extension', () => {
     });
 
     it('initializes the line highlighting', () => {
+      EditorLiteExtension.deferRerender = jest.fn();
       const spy = jest.spyOn(EditorLiteExtension, 'highlightLines');
       ext = new EditorLiteExtension({ instance: {} });
       expect(spy).toHaveBeenCalled();
     });
 
     it('sets up the line linking for code instance', () => {
+      EditorLiteExtension.deferRerender = jest.fn();
       const spy = jest.spyOn(EditorLiteExtension, 'setupLineLinking');
       const instance = {
         getEditorType: jest.fn().mockReturnValue(EDITOR_TYPE_CODE),
@@ -99,6 +130,7 @@ describe('The basis for an Editor Lite extension', () => {
     });
 
     it('does not set up the line linking for diff instance', () => {
+      EditorLiteExtension.deferRerender = jest.fn();
       const spy = jest.spyOn(EditorLiteExtension, 'setupLineLinking');
       const instance = {
         getEditorType: jest.fn().mockReturnValue(EDITOR_TYPE_DIFF),

spec/frontend/pipeline_editor/components/editor/text_editor_spec.js

 import { shallowMount } from '@vue/test-utils';
 
 import { EDITOR_READY_EVENT } from '~/editor/constants';
+import { EditorLiteExtension } from '~/editor/extensions/editor_lite_extension_base';
 import TextEditor from '~/pipeline_editor/components/editor/text_editor.vue';
 import {
   mockCiConfigPath,
@@ -59,6 +60,10 @@ describe('Pipeline Editor | Text editor component', () => {
 
   const findEditor = () => wrapper.findComponent(MockEditorLite);
 
+  beforeEach(() => {
+    EditorLiteExtension.deferRerender = jest.fn();
+  });
+
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;