Added Markdown syntax button

css/default.css

@@ -25,7 +25,8 @@ body {
 	cursor: progress;
 }
 
-.btn,.dropdown-menu {
+.btn,
+.dropdown-menu {
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
@@ -105,19 +106,25 @@ input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
 	background-color: #ddd;
 }
 
+#extension-preview-buttons .dropdown-menu,
+#extension-preview-buttons .btn-group.open .btn,
+#extension-preview-buttons .btn-group.open:hover .btn {
+    background-color: #e8e8e8;
+}
+
 .navbar-inner .btn:hover,
 .navbar-inner .btn:focus,
 .navbar-inner .btn:active,
 .navbar-inner .btn.active,
 .btn-group.open .btn.dropdown-toggle,
-#extension-preview-buttons .btn-group:hover .btn,
+#extension-preview-buttons .btn-group:hover .btn {
-#extension-preview-buttons .btn-group.open .btn {
 	color: #333333;
 	background-color: #eee;
 }
 
-.nav .dropdown-toggle .caret,.nav .dropdown-toggle:hover .caret,.nav .dropdown-toggle:focus .caret
+.nav .dropdown-toggle .caret,
-	{
+.nav .dropdown-toggle:hover .caret,
+.nav .dropdown-toggle:focus .caret {
 	border-top-color: #000;
 	border-bottom-color: #000;
 }
@@ -126,20 +133,27 @@ input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
 	display: none;
 }
 
-.navbar-inner .btn.disabled,.navbar-inner .btn[disabled] {
+.navbar-inner .btn.disabled,
+.navbar-inner .btn[disabled] {
 	color: #333333;
 	background-color: #ddd;
 	opacity: 0.3;
 	filter: alpha(opacity =   30);
 }
 
-.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-submenu:hover>a,.dropdown-submenu:focus>a,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus
+.dropdown-menu>li>a:hover,
-	{
+.dropdown-menu>li>a:focus,
+.dropdown-submenu:hover>a,
+.dropdown-submenu:focus>a,
+.dropdown-menu>.active>a,
+.dropdown-menu>.active>a:hover,
+.dropdown-menu>.active>a:focus {
 	background-color: #888;
 }
 
-.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus
+.dropdown-menu>.disabled>a,
-	{
+.dropdown-menu>.disabled>a:hover,
+.dropdown-menu>.disabled>a:focus {
 	color: #bbb;
 }
 
@@ -157,8 +171,13 @@ input[readonly],select[readonly],textarea[readonly] {
 	cursor: text;
 }
 
-.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled],.btn-group.open .btn.btn-primary.dropdown-toggle
+.btn-primary:hover,
-	{
+.btn-primary:focus,
+.btn-primary:active,
+.btn-primary.active,
+.btn-primary.disabled,
+.btn-primary[disabled],
+.btn-group.open .btn.btn-primary.dropdown-toggle {
 	color: #fff;
 	background-color: #888;
 }
@@ -176,10 +195,15 @@ input[readonly],select[readonly],textarea[readonly] {
 #extension-preview-buttons .dropdown-menu {
     position: fixed;
     right: 25px;
-    top: inherit;
+    top: auto;
     z-index: 1;
 }
 
+#extension-preview-buttons .dropdown-menu {
+    border: 0 !important;
+    margin-top: 1px;
+}
+
 #extension-preview-buttons .btn-group:hover .btn,
 #extension-preview-buttons .btn-group.open .btn {
     opacity: 1;
@@ -225,6 +249,16 @@ input[readonly],select[readonly],textarea[readonly] {
     border-bottom-right-radius: 4px;
 }
 
+#markdown-syntax {
+	max-height: 300px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 20px;
+    margin: 0 -20px 10px 0;
+    width: 300px;
+    white-space: normal;
+}
+
 .btn-group>.btn+.dropdown-toggle {
 	padding-right: 12px;
 	padding-left: 12px;
@@ -250,7 +284,9 @@ h1 {
 	list-style-type: none;
 }
 
-p,pre,blockquote {
+p,
+pre,
+blockquote {
 	margin: 0 0 20px;
 }
 
@@ -355,7 +391,8 @@ div.dropdown-menu {
 	padding: 5px 20px;
 }
 
-div.dropdown-menu p,div.dropdown-menu blockquote {
+div.dropdown-menu p,
+div.dropdown-menu blockquote {
 	margin: 10px 0;
 }
 
@@ -369,8 +406,8 @@ div.dropdown-menu i {
 
 div.dropdown-menu textarea {
 	width: 250px;
-	max-width: 250px;
 	height: 150px;
+	resize: none;
 }
 
 #link-container {

js/extensionMgr.js

@@ -10,6 +10,7 @@ define([
     "extensions/buttonShare",
     "extensions/buttonStat",
     "extensions/buttonHtmlCode",
+    "extensions/buttonMarkdownSyntax",
     "extensions/buttonViewer",
     "extensions/dialogAbout",
     "extensions/dialogManagePublication",
@@ -171,9 +172,21 @@ define([
 
         // Create extension preview buttons
         logger.log("onCreatePreviewButton");
+        function showDropdown(btnGroup) {
+            $("#extension-preview-buttons .open").removeClass("open").find(".dropdown-menu").addClass("hide");
+            if(btnGroup !== undefined) {
+                btnGroup.addClass("open").find(".dropdown-menu").removeClass("hide");
+            }
+        }
         var onCreatePreviewButtonCallbackList = getExtensionCallbackList("onCreatePreviewButton");
         _.each(onCreatePreviewButtonCallbackList, function(callback) {
-            $("#extension-preview-buttons").append($('<div class="btn-group">').append(callback()));
+            $("#extension-preview-buttons").append($('<div class="btn-group">').append(callback()).each(function() {
+                // Toggle dropdown manually
+                var btnGroup = $(this);
+                btnGroup.find(".dropdown-toggle").click(function() {
+                    showDropdown(btnGroup.is(".open") ? undefined : btnGroup);
+                });
+            }));
         });
 
         // Call extensions onReady callbacks

js/extensions/buttonHtmlCode.js

@@ -19,10 +19,6 @@ define([
     };
 
     buttonHtmlCode.onReady = function() {
-        $("#input-html-code").click(function(event) {
-            event.stopPropagation();
-        });
-        
         $(".action-html-code").click(function() {
             _.defer(function() {
                 $("#input-html-code").each(function() {

js/extensions/buttonMarkdownSyntax.js

@@ -0,0 +1,19 @@
+define([
+    "jquery",
+    "text!html/buttonMarkdownSyntax.html",
+], function($, buttonMarkdownSyntaxHTML) {
+
+    var buttonMarkdownSyntax = {
+        extensionId: "buttonMarkdownSyntax",
+        extensionName: 'Button "Markdown syntax"',
+        optional: true,
+        settingsBloc: '<p>Adds a "Markdown syntax" button over the preview.</p>'
+    };
+
+    buttonMarkdownSyntax.onCreatePreviewButton = function() {
+        return $(buttonMarkdownSyntaxHTML);
+    };
+
+    return buttonMarkdownSyntax;
+
+});

js/html/buttonHtmlCode.html

@@ -1,8 +1,7 @@
-<button class="btn dropdown-toggle action-html-code" data-toggle="dropdown"
+<button class="btn dropdown-toggle action-html-code" title="HTML code">
-	title="HTML code">
 	<i class="icon-code"></i>
 </button>
 <div class="dropdown-menu pull-right">
-	<h3 class="muted">HTML code</h3>
+	<h3>HTML code</h3>
 	<textarea id="input-html-code"></textarea>
 </div>

js/html/buttonMarkdownSyntax.html

@@ -0,0 +1,144 @@
+<button class="btn dropdown-toggle" title="Markdown syntax">
+	<i class="icon-question-sign"></i>
+</button>
+<div class="dropdown-menu pull-right">
+	<h3>Markdown syntax</h3>
+	<div id="markdown-syntax">
+<h4>Phrase Emphasis</h4>
+
+<pre><code>*italic*   **bold**
+_italic_   __bold__
+</code></pre>
+
+<h4>Links</h4>
+
+<p>Inline:</p>
+
+<pre><code>An [example](http://url.com/ "Title")
+</code></pre>
+
+<p>Reference-style labels (titles are optional):</p>
+
+<pre><code>An [example][id]. Then, anywhere
+else in the doc, define the link:
+
+  [id]: http://example.com/  "Title"
+</code></pre>
+
+<h4>Images</h4>
+
+<p>Inline (titles are optional):</p>
+
+<pre><code>![alt text](/path/img.jpg "Title")
+</code></pre>
+
+<p>Reference-style:</p>
+
+<pre><code>![alt text][id]
+
+[id]: /url/to/img.jpg "Title"
+</code></pre>
+
+<h4>Headers</h4>
+
+<p>Setext-style:</p>
+
+<pre><code>Header 1
+========
+
+Header 2
+--------
+</code></pre>
+
+<p>atx-style (closing #'s are optional):</p>
+
+<pre><code># Header 1 #
+
+## Header 2 ##
+
+###### Header 6
+</code></pre>
+
+<h4>Lists</h4>
+
+<p>Ordered, without paragraphs:</p>
+
+<pre><code>1.  Foo
+2.  Bar
+</code></pre>
+
+<p>Unordered, with paragraphs:</p>
+
+<pre><code>*   A list item.
+
+    With multiple paragraphs.
+
+*   Bar
+</code></pre>
+
+<p>You can nest them:</p>
+
+<pre><code>*   Abacus
+    * answer
+*   Bubbles
+    1.  bunk
+    2.  bupkis
+        * BELITTLER
+    3. burper
+*   Cunning
+</code></pre>
+
+<h4>Blockquotes</h4>
+
+<pre><code>&gt; Email-style angle brackets
+&gt; are used for blockquotes.
+
+&gt; &gt; And, they can be nested.
+
+&gt; #### Headers in blockquotes
+&gt; 
+&gt; * You can quote a list.
+&gt; * Etc.
+</code></pre>
+
+<h4>Code Spans</h4>
+
+<pre><code>`&lt;code&gt;` spans are delimited
+by backticks.
+
+You can include literal backticks
+like `` `this` ``.
+</code></pre>
+
+<h4>Preformatted Code Blocks</h4>
+
+<p>Indent every line of a code block by at least 4 spaces or 1 tab.</p>
+
+<pre><code>This is a normal paragraph.
+
+    This is a preformatted
+    code block.
+</code></pre>
+
+<h4>Horizontal Rules</h4>
+
+<p>Three or more dashes or asterisks:</p>
+
+<pre><code>---
+
+* * *
+
+- - - - 
+</code></pre>
+
+<h4>Manual Line Breaks</h4>
+
+<p>End a line with two or more spaces:</p>
+
+<pre><code>Roses are red,   
+Violets are blue.
+</code></pre>
+
+<p class="muted">Based on the <a target="_blank" href="https://github.com/fletcher/MultiMarkdown/blob/master/Documentation/Markdown%20Syntax.md">Markdown syntax guide</a>, by Fletcher T. Penney.</p>
+    </div>
+</div>

js/html/buttonStat.html

@@ -1,9 +1,8 @@
-<button class="btn dropdown-toggle" data-toggle="dropdown"
+<button class="btn dropdown-toggle" title="Document statistics">
-	title="Document statistics">
 	<i class="icon-stat"></i>
 </button>
 <div class="dropdown-menu pull-right">
-	<h3 class="muted">Statistics</h3>
+	<h3>Statistics</h3>
 	<div class="stat">
 		<div>
 			<%= name1 %>: <span id="span-stat-value1"></span>

themes/blue-gray/blue-gray.css

@@ -19,14 +19,19 @@ textarea[disabled],
     background-color: #ced5de;
 }
 
+#extension-preview-buttons .dropdown-menu,
+#extension-preview-buttons .btn-group.open .btn,
+#extension-preview-buttons .btn-group.open:hover .btn {
+    background-color: #e1e6ed;
+}
+
 .btn:hover,
 .navbar-inner .btn:hover,
 .navbar-inner .btn:focus,
 .navbar-inner .btn:active,
 .navbar-inner .btn.active,
 .btn-group.open .btn.dropdown-toggle,
-#extension-preview-buttons .btn-group:hover .btn,
+#extension-preview-buttons .btn-group:hover .btn {
-#extension-preview-buttons .btn-group.open .btn {
     background-color: #e1e6ed;
 }
 

themes/night/night.css

@@ -79,13 +79,18 @@ blockquote {
     background-color: #444;
 }
 
+#extension-preview-buttons .btn-group:hover .btn {
+	background-color: #333;
+}
+
 .navbar-inner .btn:hover,
 .navbar-inner .btn:focus,
 .navbar-inner .btn:active,
 .navbar-inner .btn.active,
 .btn-group.open .btn.dropdown-toggle,
-#extension-preview-buttons .btn-group:hover .btn,
+#extension-preview-buttons .dropdown-menu,
-#extension-preview-buttons .btn-group.open .btn {
+#extension-preview-buttons .btn-group.open .btn,
+#extension-preview-buttons .btn-group.open:hover .btn {
 	background-color: #555;
 }