Move initial state into a help block

www/slide/app-slide.less

@@ -221,6 +221,16 @@ div#cp-app-slide-modal {
     background-color: black;
     color: white;
 
+    .cp-app-slide-isempty {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+            max-width: 100%;
+            max-height: 100%;
+        }
+    }
+
     /* Navigation buttons */
     .cp-app-slide-modal-button {
         position: absolute;

www/slide/inner.js

@@ -9,6 +9,7 @@ define([
     '/common/common-util.js',
     '/common/common-hash.js',
     '/common/common-interface.js',
+    '/common/diffMarked.js',
     '/customize/messages.js',
     'cm/lib/codemirror',
 
@@ -53,6 +54,7 @@ define([
     Util,
     Hash,
     UI,
+    DiffMd,
     Messages,
     CMeditor)
 {
@@ -426,6 +428,16 @@ define([
         framework._.toolbar.$rightside.append(markdownTb.button);
     };
 
+    var mkHelpMenu = function (framework) {
+        var $codeMirrorContainer = $('#cp-app-slide-editor-container');
+        var helpMenu = framework._.sfCommon.createHelpMenu();
+        $codeMirrorContainer.prepend(helpMenu.menu);
+
+        $(helpMenu.text).html(DiffMd.render(Messages.slideInitialState));
+
+        framework._.toolbar.$rightside.append(helpMenu.button);
+    };
+
     var activateLinks = function ($content, framework) {
         $content.click(function (e) {
             if (!e.target) { return; }
@@ -465,6 +477,7 @@ define([
         mkFilePicker(framework, editor);
         mkSlidePreviewPane(framework, $contentContainer);
         mkMarkdownToolbar(framework, editor);
+        mkHelpMenu(framework);
 
         CodeMirror.configureTheme(common);
 
@@ -519,7 +532,7 @@ define([
         });
 
         framework.onDefaultContentNeeded(function () {
-            CodeMirror.contentUpdate({ content: Messages.slideInitialState });
+            CodeMirror.contentUpdate({ content: '' });
         });
 
         Slide.setTitle(framework._.title);

www/slide/slide.js

@@ -75,6 +75,20 @@ define([
         if (typeof(Slide.content) !== 'string') { return; }
 
         var c = Slide.content;
+
+        if (c === '') {
+            var $empty = $('<img>', {
+                src: '/customize/main-favicon.png',
+                alt: '',
+                class: 'cp-app-code-preview-empty'
+            });
+            $content.html('').append($empty);
+            $content.addClass('cp-app-slide-isempty');
+            return;
+            //c = $('<div>').append($empty).html();
+        }
+        $content.removeClass('cp-app-slide-isempty');
+
         var mediatagBg = '';
         if (options.background && options.background.mt) {
             mediatagBg = options.background.mt;