Add the markdown toolbar to the slide and poll apps

customize.dist/src/less2/include/toolbar.less

@@ -173,6 +173,7 @@
         .cp-markdown-toolbar {
             height: @toolbar_line-height;
             background-color: lighten(@bg-color, 20%);
+            display: none;
             button {
                 outline: 0;
                 color: @color;

www/code/inner.js

@@ -144,13 +144,14 @@ define([
                     }
                 });
                 markdownTb.setState(true);
+                return;
             }
             $editorContainer.removeClass('cp-app-code-present');
             $previewButton.hide();
             $previewContainer.hide();
             $previewButton.removeClass('active');
             $codeMirrorContainer.addClass('cp-app-code-fullpage');
-            markdownTb.setState(true);
+            markdownTb.setState(false);
         };
 
         var isVisible = function () {

www/common/common-ui-elements.js

@@ -374,10 +374,13 @@ define([
                 if (e) { return void console.error(e); }
             });
         };
+
         var $toolbarButton = common.createButton('toggle', true, cfg, onClick);
+        var tbState = true;
         common.getAttribute(['general', 'markdown-help'], function (e, data) {
             if (e) { return void console.error(e); }
-            if (data === true && $toolbarButton) {
+            if (data === true && $toolbarButton.length && tbState) {
+                console.log($toolbar.is(':visible'));
                 $toolbarButton.click();
             }
         });
@@ -385,6 +388,7 @@ define([
         // setState provides the ability to disable the toolbar and the button in case we don't
         // have the markdown editor available (in code we can switch mode, in poll we can publish)
         var setState = function (state) {
+            tbState = state;
             if (!state) {
                 $toolbar.hide();
                 $toolbarButton.hide();
@@ -411,6 +415,7 @@ define([
             setState: setState
         };
     };
+
     // Avatars
 
     // Enable mediatags

www/common/sframe-app-framework.js

@@ -253,6 +253,7 @@ define([
                 newContent = normalize(newContent);
                 contentUpdate(newContent);
             } else {
+                console.log('updating title');
                 title.updateTitle(title.defaultTitle);
                 evOnDefaultContentNeeded.fire();
             }

www/poll/app-poll.less

@@ -139,6 +139,11 @@ table#cp-app-poll-table {
     width: auto;
     display: inline-block;
 }
+.cp-markdown-toolbar {
+    margin: auto;
+    min-width: 80%;
+    width: 80%;
+}
 #cp-app-poll-description {
     &~ .CodeMirror {
         margin: auto;

www/poll/inner.js

@@ -258,6 +258,7 @@ define([
     };
 
     var setTablePublished = function (bool) {
+        if (APP.markdownTb) { APP.markdownTb.setState(!bool); }
         if (bool) {
             if (APP.$publish) { APP.$publish.hide(); }
             if (APP.$admin) { APP.$admin.show(); }
@@ -993,6 +994,10 @@ define([
         updateDescription(null, APP.proxy.description || '');
         initThumbnails();
 
+        var markdownTb = APP.markdownTb = common.createMarkdownToolbar(APP.editor);
+        $('.CodeMirror').parent().prepend(markdownTb.toolbar);
+        APP.toolbar.$rightside.append(markdownTb.button);
+
         // Initialize author name for comments.
         // Disable name modification for logged in users
         var $cName = APP.$addComment.find('.cp-app-poll-comments-add-name')

www/slide/app-slide.less

@@ -33,9 +33,21 @@ h4 { font-size: 31px; }
 h5 { font-size: 27px; }
 h6 { font-size: 24px; }
 
-.CodeMirror {
+#cp-app-slide-editor-container {
+    display: inline-flex;
+    flex-flow: column;
     height: 100%;
     min-height: 100%;
+    width: 50%;
+    min-width: 20%;
+    max-width: 80%;
+    overflow: hidden;
+    max-width: 100%;
+    flex: 1;
+}
+.CodeMirror {
+    flex: 1;
+    width: 100%;
     font-size: initial;
 }
 .CodeMirror-focused .cm-matchhighlight {

www/slide/inner.html

@@ -12,7 +12,9 @@
 <body class="cp-app-slide">
     <div id="cme_toolbox" class="cp-toolbar-container"></div>
     <div id="cp-app-slide-editor">
-        <textarea id="editor1" name="editor1"></textarea>
+        <div id="cp-app-slide-editor-container">
+            <textarea id="editor1" name="editor1"></textarea>
+        </div>
         <div class="cp-app-slide-viewer" tabindex="2">
             <div id="cp-app-slide-modal">
                 <div id="cp-app-slide-modal-exit" class="cp-app-slide-modal-button">

www/slide/inner.js

@@ -358,6 +358,13 @@ define([
         });
     };
 
+    var mkMarkdownToolbar = function (framework, editor) {
+        var $codeMirrorContainer = $('#cp-app-slide-editor-container');
+        var markdownTb = framework._.sfCommon.createMarkdownToolbar(editor);
+        $codeMirrorContainer.prepend(markdownTb.toolbar);
+        framework._.toolbar.$rightside.append(markdownTb.button);
+    };
+
     var activateLinks = function ($content, framework) {
         $content.click(function (e) {
             if (!e.target) { return; }
@@ -396,6 +403,7 @@ define([
         mkColorConfiguration(framework, $modal);
         mkFilePicker(framework, editor);
         mkSlidePreviewPane(framework, $contentContainer);
+        mkMarkdownToolbar(framework, editor);
 
         CodeMirror.configureTheme();