Add a markdown toolbar to help with the markdown syntax

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

@@ -23,5 +23,15 @@
     }
 }
 
+.markdown_main() {
+    blockquote {
+        background: #e5e5e5;
+        padding: 10px;
+        border-left: 3px solid #999;
+        padding-right: 0;
+        p { margin: 0; }
+        blockquote { margin: 0; }
+    }
+}
 // todo ul, ol
 

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

@@ -23,6 +23,33 @@
         display: flex;
     }
 
+    .toolbar_button {
+        height: @toolbar_line-height;
+        box-sizing: border-box;
+        padding: 3px 10px;
+        margin: 0;
+        transition: all 0.15s;
+        .tools_unselectable();
+        &.cp-toolbar-hidden {
+            display: none;
+        }
+        .cp-toolbar-drawer-element {
+            display: none;
+        }
+        // Bootstrap 4 colors (btn-secondary)
+        border: 1px solid transparent;
+        color: inherit;
+        font: @toolbar_button-font;
+        * {
+            color: inherit;
+            font: @toolbar_button-font;
+        }
+        background: transparent;
+        &:hover {
+            background-color: rgba(50,50,50,0.3);
+        }
+    }
+
     .cp-toolbar-userlist-drawer {
         background-color: @colortheme_default-bg;
         font: @colortheme_app-font-size @colortheme_font;
@@ -143,6 +170,20 @@
     }
 
     .addToolbarColors (@color, @bg-color, @barWidth: 600px) {
+        .cp-markdown-toolbar {
+            height: @toolbar_line-height;
+            background-color: lighten(@bg-color, 20%);
+            button {
+                outline: 0;
+                color: @color;
+                .toolbar_button;
+                font: normal normal normal 14px/1 FontAwesome;
+                &:hover {
+                    background-color: lighten(@bgcolor, 8%);
+                }
+                &.cp-markdown-help { float: right; }
+            }
+        }
         .cp-toolbar-userlist-drawer {
             background-color: @bgcolor;
             color: @color;
@@ -282,7 +323,6 @@
         .addToolbarColors(@color, @bgcolor);
     }
 
-
     .cp-toolbar {
         * {
             outline-width: 0;
@@ -328,28 +368,7 @@
         }
 
         button {
-            transition: all 0.15s;
-            .tools_unselectable();
-            &.cp-toolbar-hidden {
-                display: none;
-            }
-            .cp-toolbar-drawer-element {
-                display: none;
-            }
-            // Bootstrap 4 colors (btn-secondary)
-            border: 1px solid transparent;
-            color: inherit;
-            font: @toolbar_button-font;
-            * {
-                color: inherit;
-                font: @toolbar_button-font;
-            }
-        }
-        .cp-toolbar-rightside button, .cp-toolbar-leftside button {
-            background: transparent;
-            &:hover {
-                background-color: rgba(50,50,50,0.3);
-            }
+            .toolbar_button;
         }
 
         .cp-toolbar-limit {
@@ -373,13 +392,12 @@
             white-space: normal;
         }
 
-        button, select {
+        /*button, select {
             height: @toolbar_line-height;
             box-sizing: border-box;
             padding: 3px 10px;
             margin: 0;
-
-        }
+        }*/
 
         .cp-toolbar-rightside-button {
             float: right;

customize.dist/translations/messages.fr.js

@@ -559,6 +559,22 @@ define(function () {
     // general warnings
     out.warn_notPinned = "Ce pad n'est stocké dans aucun CryptDrive. Il va expirer après 3 mois d'inactivité. <a href='/about.html#pinning'>En savoir plus...</a>";
 
+    // markdown toolbar
+    out.mdToolbar_button = "Afficher ou cacher la barre d'outils Markdown";
+    out.mdToolbar_defaultText = "Votre texte ici";
+    out.mdToolbar_help = "Aide";
+    out.mdToolbar_tutorial = "https://blog.wax-o.com/2014/04/tutoriel-un-guide-pour-bien-commencer-avec-markdown/";
+    out.mdToolbar_bold = "Gras";
+    out.mdToolbar_italic = "Italique";
+    out.mdToolbar_strikethrough = "Barré";
+    out.mdToolbar_heading = "Titre";
+    out.mdToolbar_link = "Lien";
+    out.mdToolbar_quote = "Citation";
+    out.mdToolbar_nlist = "Liste ordonnée";
+    out.mdToolbar_list = "Liste à puces";
+    out.mdToolbar_check = "Liste de tâches";
+    out.mdToolbar_code = "Code";
+
     // index.html
 
     //about.html

customize.dist/translations/messages.js

@@ -564,6 +564,22 @@ define(function () {
     // general warnings
     out.warn_notPinned = "This pad is not in anyone's CryptDrive. It will expire after 3 months. <a href='/about.html#pinning'>Learn more...</a>";
 
+    // markdown toolbar
+    out.mdToolbar_button = "Show or hide the Markdown toolbar";
+    out.mdToolbar_defaultText = "Your text here";
+    out.mdToolbar_help = "Help";
+    out.mdToolbar_tutorial = "http://www.markdowntutorial.com/";
+    out.mdToolbar_bold = "Bold";
+    out.mdToolbar_italic = "Italic";
+    out.mdToolbar_strikethrough = "Strikethrough";
+    out.mdToolbar_heading = "Heading";
+    out.mdToolbar_link = "Link";
+    out.mdToolbar_quote = "Quote";
+    out.mdToolbar_nlist = "Ordered list";
+    out.mdToolbar_list = "Bullet list";
+    out.mdToolbar_check = "Task list";
+    out.mdToolbar_code = "Code";
+
     // index.html