Merge 3d7f0c42a3 into 547ddfd9d5

README.md

@@ -95,6 +95,9 @@ simplemde.value("This text will appear in the editor");
   - **underscoresBreakWords**: If set to `true`, let underscores be a delimiter for separating words. Defaults to `false`.
 - **placeholder**: If set, displays a custom placeholder message.
 - **previewRender**: Custom function for parsing the plaintext Markdown and returning HTML. Used when user previews.
+- **promptTexts**: Customize title of the prompt box when the `promptURLs` option is set to `true` and the `image` or `url` button is clicked.
+  - image
+  - link
 - **promptURLs**: If set to `true`, a JS alert window appears asking for the link or image URL. Defaults to `false`.
 - **renderingConfig**: Adjust settings for parsing the Markdown during previewing (not editing).
   - **codeSyntaxHighlighting**: If set to `true`, will highlight using [highlight.js](https://github.com/isagalaev/highlight.js). Defaults to `false`. To use this feature you must include highlight.js on your page or pass in using the `hljs` option. For example, include the script and the CSS files like:<br>`<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>`<br>`<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">`
@@ -154,6 +157,10 @@ var simplemde = new SimpleMDE({
 		return "Loading...";
 	},
 	promptURLs: true,
+	promptTexts: {
+		link: "URL for the link:",
+		image: "URL of the image:"
+	},
 	renderingConfig: {
 		singleLineBreaks: false,
 		codeSyntaxHighlighting: true,

debug/simplemde.css

@@ -212,9 +212,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   display: inline-block;
   vertical-align: top;
   margin-bottom: -30px;
-  /* Hack to make IE7 behave */
-  *zoom:1;
-  *display:inline;
 }
 .CodeMirror-gutter-wrapper {
   position: absolute;
@@ -232,11 +229,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   cursor: default;
   z-index: 4;
 }
-.CodeMirror-gutter-wrapper {
+.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
-  -webkit-user-select: none;
+.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
-  -moz-user-select: none;
-  user-select: none;
-}
 
 .CodeMirror-lines {
   cursor: text;
@@ -258,8 +252,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   position: relative;
   overflow: visible;
   -webkit-tap-highlight-color: transparent;
-  -webkit-font-variant-ligatures: none;
+  -webkit-font-variant-ligatures: contextual;
-  font-variant-ligatures: none;
+  font-variant-ligatures: contextual;
 }
 .CodeMirror-wrap pre {
   word-wrap: break-word;
@@ -281,6 +275,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 
 .CodeMirror-widget {}
 
+.CodeMirror-rtl pre { direction: rtl; }
+
 .CodeMirror-code {
   outline: none;
 }
@@ -333,9 +329,6 @@ div.CodeMirror-dragcursors {
   background: rgba(255, 255, 0, .4);
 }
 
-/* IE7 hack to prevent it from returning funny offsetTops on the spans */
-.CodeMirror span { *vertical-align: text-bottom; }
-
 /* Used to force a border model for a node */
 .cm-force-border { padding-right: .1px; }
 
@@ -353,6 +346,7 @@ div.CodeMirror-dragcursors {
 span.CodeMirror-selectedtext { background: none; }
 
 .CodeMirror {
+    box-sizing: border-box;
     height: auto;
     border: 1px solid #ddd;
     border-bottom-left-radius: 4px;
@@ -360,6 +354,7 @@ span.CodeMirror-selectedtext { background: none; }
     padding: 10px;
     font: inherit;
     z-index: 1;
+    word-wrap: break-word;
 }
 
 .CodeMirror-fullscreen {
@@ -466,7 +461,9 @@ span.CodeMirror-selectedtext { background: none; }
     padding: 0;
 }
 
-.editor-toolbar a {
+.editor-toolbar a,
+.editor-toolbar button {
+    background: transparent;
     display: inline-block;
     text-align: center;
     text-decoration: none!important;
@@ -474,18 +471,22 @@ span.CodeMirror-selectedtext { background: none; }
     width: 30px;
     height: 30px;
     margin: 0;
+    padding: 0;
     border: 1px solid transparent;
     border-radius: 3px;
     cursor: pointer;
 }
 
 .editor-toolbar a.active,
-.editor-toolbar a:hover {
+.editor-toolbar a:hover,
+.editor-toolbar button.active,
+.editor-toolbar button:hover {
     background: #fcfcfc;
     border-color: #95a5a6;
 }
 
-.editor-toolbar a:before {
+.editor-toolbar a:before,
+.editor-toolbar button:before {
     line-height: 30px
 }
 
@@ -592,6 +593,7 @@ span.CodeMirror-selectedtext { background: none; }
     display: none;
     box-sizing: border-box;
     border: 1px solid #ddd;
+    word-wrap: break-word;
 }
 
 .editor-preview-active-side {

src/js/simplemde.js

@@ -96,7 +96,7 @@ function fixShortcut(name) {
  */
 function createIcon(options, enableTooltips, shortcuts) {
 	options = options || {};
-	var el = document.createElement("button");
+	var el = document.createElement("a");
 	enableTooltips = (enableTooltips == undefined) ? true : enableTooltips;
 
 	if(options.title && enableTooltips) {
@@ -620,13 +620,29 @@ function drawLink(editor) {
 	var stat = getState(cm);
 	var options = editor.options;
 	var url = "http://";
-	if(options.promptURLs) {
+	if(options.drawLink) {
-		url = prompt(options.promptTexts.link);
+		options.drawLink();
-		if(!url) {
+	} else {
-			return false;
+		if(options.promptURLs) {
+			url = prompt(options.promptTexts.link);
+			if(!url) {
+				return false;
+			}
 		}
+		_replaceSelection(cm, stat.link, options.insertTexts.link, url);
 	}
-	_replaceSelection(cm, stat.link, options.insertTexts.link, url);
+}
+/**
+ * Custom Action for drawing a link
+ * by ucev
+ */
+function __drawLink(editor) {
+	var cm = editor.codemirror;
+	var stat = getState(cm);
+	var options = editor.options;
+	return function(url) {
+		_replaceSelection(cm, stat.link, options.insertTexts.link, url);
+	};
 }
 
 /**
@@ -636,14 +652,30 @@ function drawImage(editor) {
 	var cm = editor.codemirror;
 	var stat = getState(cm);
 	var options = editor.options;
-	var url = "http://";
+	if(options.drawImage) {
-	if(options.promptURLs) {
+		options.drawImage();
-		url = prompt(options.promptTexts.image);
+	} else {
-		if(!url) {
+		var url = "http://";
-			return false;
+		if(options.promptURLs) {
+			url = prompt(options.promptTexts.image);
+			if(!url) {
+				return false;
+			}
 		}
+		_replaceSelection(cm, stat.image, options.insertTexts.image, url);
 	}
-	_replaceSelection(cm, stat.image, options.insertTexts.image, url);
+}
+/**
+ * Custom Action for drawing am img.
+ * by ucev
+ */
+function __drawImage(editor) {
+	var cm = editor.codemirror;
+	var stat = getState(cm);
+	var options = editor.options;
+	return function(url) {
+		_replaceSelection(cm, stat.image, options.insertTexts.image, url);
+	};
 }
 
 /**
@@ -1277,7 +1309,7 @@ var toolbarBuiltInButtons = {
 
 var insertTexts = {
 	link: ["[", "](#url#)"],
-	image: ["![](", "#url#)"],
+	image: ["![", "](#url#)"],
 	table: ["", "\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text     | Text     | Text     |\n\n"],
 	horizontalRule: ["", "\n\n-----\n\n"]
 };
@@ -1389,7 +1421,7 @@ function SimpleMDE(options) {
 
 
 	// Merging the promptTexts, with the given options
-	options.promptTexts = promptTexts;
+	options.promptTexts = extend({}, promptTexts, options.promptTexts || {});
 
 
 	// Merging the blockStyles, with the given options
@@ -2003,9 +2035,15 @@ SimpleMDE.prototype.cleanBlock = function() {
 SimpleMDE.prototype.drawLink = function() {
 	drawLink(this);
 };
+SimpleMDE.prototype.__drawLink = function(url) {
+	__drawLink(this)(url);
+};
 SimpleMDE.prototype.drawImage = function() {
 	drawImage(this);
 };
+SimpleMDE.prototype.__drawImage = function(url) {
+	__drawImage(this)(url);
+};
 SimpleMDE.prototype.drawTable = function() {
 	drawTable(this);
 };