[BUGFIX] Observe GridEditor visibility to refresh codeMirror

In case a TCA field with renderType=belayoutwizard
is configured to be not in the initially visible tab, the
CodeMirror editor remains empty, when switching to
the tab, containing the editor. The reason is, CodeMirror
needs to be refreshed, after becoming visible.

Therefore, the GridEditor, holding the configuration,
is now observed, if not initially visible. As soon as it
becomes visible, the CodeMirror instance - if any -
is refreshed.

Can be tested with `tx_styleguide_elements_basic.text_20`.

Resolves: #96062
Releases: master, 11.5
Change-Id: Ic03c315e8f12bc2f3623fdb11a1782d5c1081a23
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/72265
Tested-by: core-ci <typo3@b13.com>
Tested-by: Oliver Bartsch <bo@cedev.de>
Reviewed-by: Oliver Bartsch <bo@cedev.de>

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/GridEditor.ts

@@ -95,6 +95,7 @@ export class GridEditor {
     this.targetElement = $(this.selectorEditor);
 
     this.initializeEvents();
+    this.addVisibilityObserver($element.get(0));
     this.drawTable();
     this.writeConfig(this.export2LayoutRecord());
   }
@@ -920,4 +921,24 @@ export class GridEditor {
     result += '\t}\n}\n';
     return result;
   }
+
+  /**
+   * Observe the editors' visibility, since codeMirror needs to be refreshed as soon as it becomes
+   * visible in the viewport. Otherwise, if this element is not in the first visible FormEngine tab,
+   * it will not display any value, unless the grid gets manually updated.
+   */
+  protected addVisibilityObserver(gridEditor: HTMLElement) {
+    if (gridEditor.offsetParent !== null) {
+      // In case the editor is already visible, we don't have to add the observer
+      return;
+    }
+    new IntersectionObserver((entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
+      entries.forEach(entry => {
+        const codemirror: any = document.querySelector(this.selectorCodeMirror);
+        if (entry.intersectionRatio > 0 && codemirror) {
+          codemirror.CodeMirror.refresh();
+        }
+      });
+    }).observe(gridEditor);
+  }
 }