Merge pull request #23 from NextStepWebs/development

Tooltips, Expanded icons, Guide, Bug fixes

README.md

@@ -54,7 +54,9 @@ simplemde.value();
 - **element**: The DOM element for the textarea to use. Defaults to the first textarea on the page.
 - **status**: If set to `false`, hide the status bar. Defaults to `true`.
   - Optionally, you can set an array of status bar elements to include, and in what order.
-- **toolbar**: If set to `false`, hide the toolbar. Defaults to `true`.
+- **toolbar**: If set to `false`, hide the toolbar. Defaults to the [array of icons](#toolbar-icons).
+- **toolbarTips**: If set to `false`, disable toolbar button tips. Defaults to `true`.
+- **toolbarGuideIcon**: If set to `false`, disable guide icon in the toolbar. Defaults to `true`.
 - **autofocus**: If set to `true`, autofocuses the editor. Defaults to `false`.
 - **lineWrapping**: If set to `false`, disable line wrapping. Defaults to `true`.
 - **indentWithTabs**: If set to `false`, indent using spaces instead of tabs. Defaults to `true`.
@@ -82,6 +84,41 @@ var simplemde = new SimpleMDE({
 });
 ```
 
+#### Toolbar icons
+
+Below are the available toolbar icons, which can be reorganized however you like. "Name" is just the friendly name for reference purposes. "Action" is either a function or a URL to open. "Class" is the class given to the icon. "Tooltip" is the small tooltip that appears via the `title=""` attribute. The `Ctrl` and `Alt` in the title tags will be changed automatically to their Mac equivalents when needed. Additionally, you can add a separator between any icons by adding `"|"` to the toolbar array.
+
+Name | Action | Class | Tooltip
+---- | ------ | ----- | -----
+Bold | toggleBold | fa fa-bold | Bold (Ctrl+B)
+Italic | toggleItalic | fa fa-italic | Italic (Ctrl+I)
+Code | toggleCodeBlock | fa fa-code | Code (Ctrl+Alt+C)
+Blockquote | toggleBlockquote | fa fa-quote-left | Quote (Ctrl+')
+Unordered List | toggleUnorderedList | fa fa-list-ul | Generic List (Ctrl+L)
+Numbered List | toggleOrderedList | fa fa-list-ol | Numbered List (Ctrl+Alt+L)
+Link | drawLink | fa fa-link | Create Link (Ctrl+K)
+Image | drawImage | fa fa-picture-o | Insert Image (Ctrl+Alt+I)
+Horizontal Rule | drawHorizontalRule | fa fa-minus | Insert Horizontal Line
+Preview | togglePreview | fa fa-eye | Toggle Preview (Ctrl+P)
+Markdown Guide | [This link](http://nextstepwebs.github.io/simplemde-markdown-editor/markdown-guide) | fa fa-question-circle | Markdown Guide
+
+Customize the toolbar using the `toolbar` option like:
+
+```JavaScript
+var simplemde = new SimpleMDE({
+	toolbar: [{
+			action: toggleBold,
+			className: "fa fa-bold",
+			title: "Bold (Ctrl+B)",
+		},
+		"|", // Separator
+		...
+	],
+});
+```
+
+#### Height
+
 To change the minimum height (before it starts auto-growing):
 
 ```CSS

source files/simplemde.js

@@ -7,7 +7,9 @@ var shortcuts = {
 	'Cmd-Alt-I': drawImage,
 	"Cmd-'": toggleBlockquote,
 	'Cmd-Alt-L': toggleOrderedList,
-	'Cmd-L': toggleUnOrderedList
+	'Cmd-L': toggleUnorderedList,
+	'Cmd-Alt-C': toggleCodeBlock,
+	'Cmd-P': togglePreview,
 };
 
 
@@ -27,21 +29,21 @@ function fixShortcut(name) {
 /**
  * Create icon element for toolbar.
  */
-function createIcon(name, options) {
+function createIcon(options, enableTooltips) {
 	options = options || {};
 	var el = document.createElement('a');
-
+	enableTooltips = (enableTooltips == undefined) ? true : enableTooltips;
-	var shortcut = options.shortcut || shortcuts[name];
+	
-	if (shortcut) {
+	if (options.title && enableTooltips) {
-		shortcut = fixShortcut(shortcut);
+		el.title = options.title;
-		el.title = shortcut;
+		
-		el.title = el.title.replace('Cmd', '⌘');
 		if (isMac) {
+			el.title = el.title.replace('Ctrl', '⌘');
 			el.title = el.title.replace('Alt', '⌥');
 		}
 	}
 
-	el.className = options.className || 'icon-' + name;
+	el.className = options.className;
 	return el;
 }
 
@@ -158,7 +160,7 @@ function toggleBlockquote(editor) {
 /**
  * Action for toggling ul.
  */
-function toggleUnOrderedList(editor) {
+function toggleUnorderedList(editor) {
 	var cm = editor.codemirror;
 	_toggleLine(cm, 'unordered-list');
 }
@@ -193,6 +195,16 @@ function drawImage(editor) {
 }
 
 
+/**
+ * Action for drawing a horizontal rule.
+ */
+function drawHorizontalRule(editor) {
+	var cm = editor.codemirror;
+	var stat = getState(cm);
+	_replaceSelection(cm, stat.image, '', '\n\n-----\n\n');
+}
+
+
 /**
  * Undo action.
  */
@@ -391,47 +403,62 @@ function wordCount(data) {
 
 
 var toolbar = [{
-		name: 'bold',
+		name: "bold",
 		action: toggleBold,
-		className: "fa fa-bold"
+		className: "fa fa-bold",
-	}, {
+		title: "Bold (Ctrl+B)",
-		name: 'italic',
+	},
+	{
+		name: "italic",
 		action: toggleItalic,
-		className: "fa fa-italic"
+		className: "fa fa-italic",
+		title: "Italic (Ctrl+I)",
 	},
-	'|',
+	"|",
-
 	{
-		name: 'quote',
+		name: "quote",
 		action: toggleBlockquote,
-		className: "fa fa-quote-left"
+		className: "fa fa-quote-left",
-	}, {
+		title: "Quote (Ctrl+')",
-		name: 'unordered-list',
+	},
-		action: toggleUnOrderedList,
+	{
-		className: "fa fa-list-ul"
+		name: "unordered-list",
-	}, {
+		action: toggleUnorderedList,
-		name: 'ordered-list',
+		className: "fa fa-list-ul",
+		title: "Generic List (Ctrl+L)",
+	},
+	{
+		name: "ordered-list",
 		action: toggleOrderedList,
-		className: "fa fa-list-ol"
+		className: "fa fa-list-ol",
+		title: "Numbered List (Ctrl+Alt+L)",
 	},
-	'|',
+	"|",
-
 	{
-		name: 'link',
+		name: "link",
 		action: drawLink,
-		className: "fa fa-link"
+		className: "fa fa-link",
-	}, {
+		title: "Create Link (Ctrl+K)",
-		name: 'image',
-		action: drawImage,
-		className: "fa fa-picture-o"
 	},
-	'|',
-
 	{
-		name: 'preview',
+		name: "quote",
-		action: togglePreview,
+		action: drawImage,
-		className: "fa fa-eye"
+		className: "fa fa-picture-o",
+		title: "Insert Image (Ctrl+Alt+I)",
 	},
+	"|",
+	{
+		name: "preview",
+		action: togglePreview,
+		className: "fa fa-eye",
+		title: "Toggle Preview (Ctrl+P)",
+	},
+	{
+		name: "guide",
+		action: "http://nextstepwebs.github.io/simplemde-markdown-editor/markdown-guide",
+		className: "fa fa-question-circle",
+		title: "Markdown Guide",
+	}
 ];
 
 /**
@@ -444,12 +471,8 @@ function SimpleMDE(options) {
 		this.element = options.element;
 	}
 	
-	if(options.toolbar === false)
+	if (options.toolbar !== false)
-		options.toolbar = false;
-	else
 		options.toolbar = options.toolbar || SimpleMDE.toolbar;
-		// you can customize toolbar with object
-		// [{name: 'bold', shortcut: 'Ctrl-B', className: 'icon-bold'}]
 
 	if (!options.hasOwnProperty('status')) {
 		options.status = ['autosave', 'lines', 'words', 'cursor'];
@@ -597,14 +620,15 @@ SimpleMDE.prototype.createToolbar = function(items) {
 	self.toolbar = {};
 
 	for (var i = 0; i < items.length; i++) {
+		if(items[i].name == "guide" && self.options.toolbarGuideIcon === false)
+			continue;
+		
 		(function(item) {
 			var el;
-			if (item.name) {
+			if (item === '|') {
-				el = createIcon(item.name, item);
-			} else if (item === '|') {
 				el = createSep();
 			} else {
-				el = createIcon(item);
+				el = createIcon(item, self.options.toolbarTips);
 			}
 
 			// bind events, special for info
@@ -707,10 +731,12 @@ SimpleMDE.prototype.value = function(val) {
 SimpleMDE.toggleBold = toggleBold;
 SimpleMDE.toggleItalic = toggleItalic;
 SimpleMDE.toggleBlockquote = toggleBlockquote;
-SimpleMDE.toggleUnOrderedList = toggleUnOrderedList;
+SimpleMDE.toggleCodeBlock = toggleCodeBlock;
+SimpleMDE.toggleUnorderedList = toggleUnorderedList;
 SimpleMDE.toggleOrderedList = toggleOrderedList;
 SimpleMDE.drawLink = drawLink;
 SimpleMDE.drawImage = drawImage;
+SimpleMDE.drawHorizontalRule = drawHorizontalRule;
 SimpleMDE.undo = undo;
 SimpleMDE.redo = redo;
 SimpleMDE.togglePreview = togglePreview;
@@ -728,8 +754,11 @@ SimpleMDE.prototype.toggleItalic = function() {
 SimpleMDE.prototype.toggleBlockquote = function() {
 	toggleBlockquote(this);
 };
-SimpleMDE.prototype.toggleUnOrderedList = function() {
+SimpleMDE.prototype.toggleCodeBlock = function() {
-	toggleUnOrderedList(this);
+	toggleCodeBlock(this);
+};
+SimpleMDE.prototype.toggleUnorderedList = function() {
+	toggleUnorderedList(this);
 };
 SimpleMDE.prototype.toggleOrderedList = function() {
 	toggleOrderedList(this);
@@ -740,6 +769,9 @@ SimpleMDE.prototype.drawLink = function() {
 SimpleMDE.prototype.drawImage = function() {
 	drawImage(this);
 };
+SimpleMDE.prototype.drawHorizontalRule = function() {
+	drawHorizontalRule(this);
+};
 SimpleMDE.prototype.undo = function() {
 	undo(this);
 };

source files/theme.css

@@ -470,6 +470,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 }
 
 .CodeMirror .CodeMirror-code .cm-comment {
-	background: #eee;
+	background: rgba(0, 0, 0, .05);
 	border-radius: 2px;
 }