Fullscreen fix

src/Squidex/app/framework/angular/markdown-editor.component.html

@@ -1 +1,5 @@
-<textarea class="form-control" #editor></textarea>
+<div #container>
+    <div #inner [class.fullscreen]="isFullscreen">
+        <textarea class="form-control" #editor></textarea>
+    </div>
+</div>

src/Squidex/app/framework/angular/markdown-editor.component.scss

@@ -1,6 +1,15 @@
 @import '_mixins';
 @import '_vars';
 
+$background: #fff;
+
 .editor {
     height: 30rem;
+}
+
+.fullscreen {
+    @include fixed(0, 0, 0, 0);
+    border: 0;
+    background: $background;
+    z-index: 100000;
 }

src/Squidex/app/framework/angular/markdown-editor.component.ts

@@ -35,6 +35,14 @@ export class MarkdownEditorComponent implements ControlValueAccessor, AfterViewI
     @ViewChild('editor')
     public editor: ElementRef;
 
+    @ViewChild('container')
+    public container: ElementRef;
+
+    @ViewChild('inner')
+    public inner: ElementRef;
+
+    public isFullscreen = false;
+
     constructor(
         private readonly resourceLoader: ResourceLoaderService
     ) {
@@ -75,6 +83,16 @@ export class MarkdownEditorComponent implements ControlValueAccessor, AfterViewI
 
                 this.changeCallback(value);
             });
+
+            this.simplemde.codemirror.on('refresh', () => {
+                this.isFullscreen = this.simplemde.isFullscreenActive();
+
+                if (this.isFullscreen) {
+                    document.body.appendChild(this.inner.nativeElement);
+                } else {
+                    this.container.nativeElement.appendChild(this.inner.nativeElement);
+                }
+            });
         });
     }
 }