From b4cf87511c32329243910e176ba1056e555a7203 Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Tue, 23 Jan 2018 16:48:49 +0100
Subject: [PATCH] Fullscreen brought back.

---
 .../components/markdown-editor.component.html |  2 +-
 .../components/markdown-editor.component.scss |  7 +++++++
 .../components/markdown-editor.component.ts   | 19 ++++++++++++++++++-
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/Squidex/app/shared/components/markdown-editor.component.html b/src/Squidex/app/shared/components/markdown-editor.component.html
index ff6d9fe78..b3f735d5f 100644
--- a/src/Squidex/app/shared/components/markdown-editor.component.html
+++ b/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>
 
diff --git a/src/Squidex/app/shared/components/markdown-editor.component.scss b/src/Squidex/app/shared/components/markdown-editor.component.scss
index 7e3673c8a..935dcdcee 100644
--- a/src/Squidex/app/shared/components/markdown-editor.component.scss
+++ b/src/Squidex/app/shared/components/markdown-editor.component.scss
@@ -42,4 +42,11 @@ $background: #fff;
     .drop-text {
         background: $color-dark-foreground;
     }
+}
+
+.fullscreen {
+    @include fixed(0, 0, 0, 0);
+    border: 0;
+    background: $background;
+    z-index: 100000;
 }
\ No newline at end of file
diff --git a/src/Squidex/app/shared/components/markdown-editor.component.ts b/src/Squidex/app/shared/components/markdown-editor.component.ts
index b5013cc74..70c43d14d 100644
--- a/src/Squidex/app/shared/components/markdown-editor.component.ts
+++ b/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);
         }