🎨 disable buttons in preview, fix preview overlap (#689)

no issue

- when entering preview mode (not split-screen preview) the toolbar buttons are now disabled. This is usually built in to SimpleMDE but that wasn't working because we've moved the location of the toolbar in the DOM
- hides the markdown editor when entering preview mode to prevent the markdown code appearing at the bottom of the preview when the markdown length is longer than the preview length

ghost/admin/app/components/gh-editor.js

@@ -11,7 +11,8 @@ export default Component.extend({
 
     classNameBindings: [
         'isDraggedOver:-drag-over',
-        'isFullScreen:gh-editor-fullscreen'
+        'isFullScreen:gh-editor-fullscreen',
+        'isPreview:gh-editor-preview'
     ],
 
     // Public attributes
@@ -137,13 +138,17 @@ export default Component.extend({
     },
 
     actions: {
-        toggleFullScreen() {
-            this.toggleProperty('isFullScreen');
+        toggleFullScreen(isFullScreen) {
+            this.set('isFullScreen', isFullScreen);
             run.scheduleOnce('afterRender', this, this._setHeaderClass);
         },
 
-        toggleSplitScreen() {
-            this.toggleProperty('isSplitScreen');
+        togglePreview(isPreview) {
+            this.set('isPreview', isPreview);
+        },
+
+        toggleSplitScreen(isSplitScreen) {
+            this.set('isSplitScreen', isSplitScreen);
             run.scheduleOnce('afterRender', this, this._setHeaderClass);
         },
 

ghost/admin/app/components/gh-markdown-editor.js

@@ -39,9 +39,10 @@ export default Component.extend({
 
     // Closure actions
     onChange() {},
-    onFullScreen() {},
+    onFullScreenToggle() {},
     onImageFilesSelected() {},
-    onSplitScreen() {},
+    onPreviewToggle() {},
+    onSplitScreenToggle() {},
     showMarkdownHelp() {},
 
     // Internal attributes
@@ -74,7 +75,14 @@ export default Component.extend({
                     title: 'Upload Image(s)'
                 },
                 '|',
-                'preview',
+                {
+                    name: 'preview',
+                    action: () => {
+                        this._togglePreview();
+                    },
+                    className: 'fa fa-eye no-disable',
+                    title: 'Toggle Preview (Cmd-P)'
+                },
                 {
                     name: 'side-by-side',
                     action: () => {
@@ -102,8 +110,9 @@ export default Component.extend({
                 }
             ],
             shortcuts: {
-                toggleSideBySide: null,
-                toggleFullScreen: null
+                toggleFullScreen: null,
+                togglePreview: null,
+                toggleSideBySide: null
             },
             status: ['words']
         };
@@ -277,6 +286,13 @@ export default Component.extend({
         this.$('input[type="file"]').click();
     },
 
+    // wrap SimpleMDE's built-in preview toggle so that we can trigger a closure
+    // action that can apply our own classes higher up in the DOM
+    _togglePreview() {
+        this.onPreviewToggle(!this._editor.isPreviewActive());
+        this._editor.togglePreview();
+    },
+
     willDestroyElement() {
         if (this.get('_isSplitScreen')) {
             this._disconnectSplitPreview();
@@ -331,7 +347,7 @@ export default Component.extend({
 
             this.set('_isFullScreen', isFullScreen);
             this._updateButtonState();
-            this.onFullScreen(isFullScreen);
+            this.onFullScreenToggle(isFullScreen);
 
             // leave split screen when exiting full screen mode
             if (!isFullScreen && this.get('_isSplitScreen')) {
@@ -366,7 +382,7 @@ export default Component.extend({
                 run.scheduleOnce('afterRender', this, this._disconnectSplitPreview);
             }
 
-            this.onSplitScreen(isSplitScreen);
+            this.onSplitScreenToggle(isSplitScreen);
 
             // go fullscreen when entering split screen mode
             if (isSplitScreen && !this.get('_isFullScreen')) {

ghost/admin/app/styles/layouts/editor.css

@@ -303,6 +303,11 @@
     overflow: visible !important;
 }
 
+/* prevent markdown content showing after the preview if the preview is shorter */
+.gh-editor-preview .CodeMirror-scroll {
+    display: none;
+}
+
 .gh-editor .gh-editor-title,
 .gh-editor .CodeMirror-wrap {
     max-width: 760px;
@@ -367,7 +372,8 @@
     stroke: color(var(--darkgrey) l(+15%));
 }
 
-.editor-toolbar a.disabled {
+.editor-toolbar a.disabled,
+.gh-editor-preview .editor-toolbar a:not(.no-disable) {
     pointer-events: none;
     color: lightgray !important;
 }

ghost/admin/app/templates/components/gh-editor.hbs

@@ -7,6 +7,7 @@
     imageMimeTypes=imageMimeTypes
     imageExtensions=imageExtensions
     toggleFullScreen=(action "toggleFullScreen")
+    togglePreview=(action "togglePreview")
     toggleSplitScreen=(action "toggleSplitScreen")
     uploadComplete=(action "uploadComplete")
     uploadCancelled=(action "uploadCancelled")

ghost/admin/app/templates/editor/edit.hbs

@@ -41,8 +41,9 @@
         mobiledoc=(readonly model.scratch)
         isFullScreen=editor.isFullScreen
         onChange=(action "updateScratch")
-        onFullScreen=(action editor.toggleFullScreen)
-        onSplitScreen=(action editor.toggleSplitScreen)
+        onFullScreenToggle=(action editor.toggleFullScreen)
+        onPreviewToggle=(action editor.togglePreview)
+        onSplitScreenToggle=(action editor.toggleSplitScreen)
         onImageFilesSelected=(action editor.uploadImages)
         showMarkdownHelp=(route-action "toggleMarkdownHelpModal")
         imageMimeTypes=editor.imageMimeTypes