+
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
();
+ 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 = ``;
+ const img = ``;
this.simplemde.codemirror.replaceSelection(img);
}