Added custom link dialog

css/main.css

@@ -42,13 +42,10 @@ div, span, a, ul, li, textarea, input, button {
 .input-prepend .add-on
  {
     border: 1px solid #ebebeb !important;
-<<<<<<< HEAD
 }
 
 input.error {
-    border-color: #ee5f5b !important; 
+    border-color: #ff6661 !important; 
-=======
->>>>>>> branch 'gh-pages' of https://github.com/benweet/stackedit.git
 }
 
 .navbar-inner .btn {
@@ -184,7 +181,7 @@ hr {
 }
 
 .wmd-prompt-background {
-	background-color: Black;
+	display: none;
 }
 
 .wmd-prompt-dialog {

index.html

@@ -86,6 +86,44 @@
 	<div class="ui-layout-east hide"></div>
 	<div class="ui-layout-south hide"></div>
 
+    <div id="modal-insert-link" class="modal hide">
+        <div class="modal-header">
+            <button type="button" class="close action-close-insert-link" data-dismiss="modal"
+                aria-hidden="true">&times;</button>
+            <h3>Hyperlink</h3>
+        </div>
+        <div class="modal-body">
+            <p>Please provide the link URL and an optional title:</p>
+            <div class="input-prepend">
+                <span class="add-on"><i class="icon-globe"></i></span><input
+                    id="input-insert-link" type="text" class="span5" placeholder='http://example.com/ "optional title"'></input>
+            </div>
+        </div>
+        <div class="modal-footer">
+            <a href="#" class="btn action-close-insert-link" data-dismiss="modal">Cancel</a> <a href="#"
+                class="btn btn-primary action-insert-link" data-dismiss="modal">OK</a>
+        </div>
+    </div>
+
+    <div id="modal-insert-image" class="modal hide">
+        <div class="modal-header">
+            <button type="button" class="close action-close-insert-link" data-dismiss="modal"
+                aria-hidden="true">&times;</button>
+            <h3>Image</h3>
+        </div>
+        <div class="modal-body">
+            <p>Please provide the image URL and an optional title:</p>
+            <div class="input-prepend">
+                <span class="add-on"><i class="icon-picture"></i></span><input
+                    id="input-insert-image" type="text" class="span5" placeholder='http://example.com/image.jpg "optional title"'></input>
+            </div>
+        </div>
+        <div class="modal-footer">
+            <a href="#" class="btn action-close-insert-link" data-dismiss="modal">Cancel</a> <a href="#"
+                class="btn btn-primary action-insert-image" data-dismiss="modal">OK</a>
+        </div>
+    </div>
+
 	<div id="modal-remove-file-confirm" class="modal hide">
 		<div class="modal-header">
 			<button type="button" class="close" data-dismiss="modal"

js/Markdown.Editor.js

@@ -111,6 +111,7 @@
                                                   * its own image insertion dialog, this hook should return true, and the callback should be called with the chosen
                                                   * image url (or null if the user cancelled). If this hook returns false, the default dialog will be used.
                                                   */
+        hooks.addFalse("insertLinkDialog");
 
         this.getConverter = function () { return markdownConverter; }
 
@@ -1782,6 +1783,7 @@
                     ui.prompt(this.getString("imagedialog"), imageDefaultText, linkEnteredCallback);
             }
             else {
+                if (!this.hooks.insertLinkDialog(linkEnteredCallback))
                 	ui.prompt(this.getString("linkdialog"), linkDefaultText, linkEnteredCallback);
             }
             return true;

js/core.js

@@ -22,7 +22,9 @@ define(["jquery", "bootstrap", "jgrowl", "layout", "Markdown.Editor"], function(
 		if (value === undefined || value.length === 0) {
 			element.stop(true, true).addClass("error").delay(400)
 				.switchClass("error");
+			if(event !== undefined) {
 				event.stopPropagation();
+			}
 			return undefined;
 		}
 		return value;
@@ -171,6 +173,7 @@ define(["jquery", "bootstrap", "jgrowl", "layout", "Markdown.Editor"], function(
 	};
 
 	// Create the PageDown editor
+	var insertLinkCallback = undefined;
 	core.createEditor = function(onTextChange) {
 		$("#wmd-button-bar").empty();
 		var converter = Markdown.getSanitizingConverter();
@@ -182,6 +185,17 @@ define(["jquery", "bootstrap", "jgrowl", "layout", "Markdown.Editor"], function(
 			return text;
 		});
 		var editor = new Markdown.Editor(converter);
+		editor.hooks.set("insertLinkDialog", function (callback) {
+			insertLinkCallback = callback;
+			$("#modal-insert-link").modal('show');
+			return true;
+	    });
+		editor.hooks.set("insertImageDialog", function (callback) {
+			insertLinkCallback = callback;
+			$("#modal-insert-image").modal('show');
+			return true;
+		});
+		
 		editor.run();
 		firstChange = false;
 
@@ -277,6 +291,23 @@ define(["jquery", "bootstrap", "jgrowl", "layout", "Markdown.Editor"], function(
 			e.stopPropagation();
 		});
 		
+		// Click events on "insert link" and "insert image" dialog buttons
+		$(".action-insert-link").click(function(e) {
+			var value = core.getInputValue($("#input-insert-link"), e);
+			if(value !== undefined) {
+				insertLinkCallback(value);
+			}
+		});
+		$(".action-insert-image").click(function(e) {
+			var value = core.getInputValue($("#input-insert-image"), e);
+			if(value !== undefined) {
+				insertLinkCallback(value);
+			}
+		});
+		$(".action-close-insert-link").click(function(e) {
+			insertLinkCallback(null);
+		});
+		
 		$("#menu-bar, .ui-layout-center, .ui-layout-east, .ui-layout-south").removeClass("hide");
 		this.loadSettings();
 		this.createLayout();

js/main.js

@@ -18,7 +18,8 @@ require(["jquery", "core", "file-manager", "config", "custo"], function($, core,
 	$(function() {
 		
 		// If browser downloaded a new app cache.
-	    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
+	    if (window.applicationCache
+				&& window.applicationCache.status == window.applicationCache.UPDATEREADY) {
 			window.applicationCache.swapCache();
 			window.location.reload();
 			return;