bug: styles not always applying correctly

[lgpage]

This is a bit of an unusual one. When using a form control to set the value for the CodemirrorComponent the styles don't always apply correctly w.r.t. element sizes resulting in what looks like nothing being shown in the text area.

Template (snippet)

<form [formGroup]="formGroup">
  <ngx-codemirror
    formControlName="code"
  ></ngx-codemirror>
</form>

Component (snippet)

ngAfterViewInit(): void {
  this.formGroup.get('code')?.setValue(code);
  this.formGroup.updateValueAndValidity();
}

It is evident that the code has been added to the DOM

However the element sizes have not computed correctly

[lgpage]

Relates to lgpage/rxtutor#212

[lgpage]

Initially, I tried waiting for CodeMirror to load (within the CodeMirrorComponent) and then call cm.refresh() in the AfterViewInit hook (as per https://codemirror.net/5/doc/manual.html#refresh). This worked to some degree if I added a delay in the mix.
However, I noticed that when there was a delay in loading the styles, the code still appeared missing (I.e. the left margin still did not calculate correctly).

Eventually, I found this article https://0xdbe.github.io/AngularSecurity-DisableInlineCriticalCSS about Angulars (12+) optimization involving first inlining critical CSS and then delaying the loading of non-critical CSS. CodeMirrors CSS was contained within the non-critical CSS.

My guess is that to fix this issue (for said optimization), the critical parts of the CodeMirror CSS would need to be inlined within the index.html somehow.

My workaround was to set inlineCritical to false in angular.json as per the article above.

[aceleghin]

Same error, my workaround is to call cm.refresh() when I do focus in the codemirror but I disable some options like line number because seems not to apply correctly before I refresh