Fullscreen brought back.

src/Squidex/app/shared/components/markdown-editor.component.html

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

src/Squidex/app/shared/components/markdown-editor.component.scss

@@ -43,3 +43,10 @@ $background: #fff;
         background: $color-dark-foreground;
     }
 }
+
+.fullscreen {
+    @include fixed(0, 0, 0, 0);
+    border: 0;
+    background: $background;
+    z-index: 100000;
+}

src/Squidex/app/shared/components/markdown-editor.component.ts

@@ -48,6 +48,8 @@ export class MarkdownEditorComponent implements ControlValueAccessor, AfterViewI
     @Output()
     public assetPluginClicked = new EventEmitter<any>();
 
+    public isFullscreen = false;
+
     public draggedOver = false;
 
     constructor(
@@ -153,6 +155,11 @@ export class MarkdownEditorComponent implements ControlValueAccessor, AfterViewI
                         action: SimpleMDE.togglePreview,
                         className: 'fa fa-eye no-disable',
                         title: 'Toggle Preview'
+                    }, {
+                        name: 'fullscreen',
+                        action: SimpleMDE.toggleFullScreen,
+                        className: 'fa fa-arrows-alt no-disable no-mobile',
+                        title: 'Toggle Fullscreen'
                     }, {
                         name: 'side-by-side',
                         action: SimpleMDE.toggleSideBySide,
@@ -191,6 +198,16 @@ export class MarkdownEditorComponent implements ControlValueAccessor, AfterViewI
                 }
             });
 
+            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);
+                }
+            });
+
             this.simplemde.codemirror.on('blur', () => {
                 this.callTouched();
             });
@@ -201,7 +218,7 @@ export class MarkdownEditorComponent implements ControlValueAccessor, AfterViewI
         const content = event.dragData;
 
         if (content instanceof AssetDto) {
-            const img = `![${content.fileName}](${content.url} "${content.fileName}")`;
+            const img = `![${content.fileName}](${content.url} '${content.fileName}')`;
 
             this.simplemde.codemirror.replaceSelection(img);
         }