diff --git a/README.md b/README.md
index 9eaf2a4..f635af0 100644
--- a/README.md
+++ b/README.md
@@ -95,7 +95,8 @@ 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.
-- **promptURLs**: If set to `true`, a JS alert window appears asking for the link or image URL. Defaults to `false`.
+- **promptTables**: If set to `true`, a nice window appears twice asking for the number of columns and rows to generate the table scheme. Defaults to `false`.
+- **promptURLs**: If set to `true`, a nice 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:
``
``
- **hljs**: An injectible instance of [highlight.js](https://github.com/isagalaev/highlight.js). If you don't want to rely on the global namespace (`window.hljs`), you can provide an instance here. Defaults to `undefined`.
diff --git a/gulpfile.js b/gulpfile.js
index 702a162..23f14e2 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -27,7 +27,7 @@ gulp.task("prettify-js", [], function() {
.pipe(prettify({js: {brace_style: "collapse", indent_char: "\t", indent_size: 1, max_preserve_newlines: 3, space_before_conditional: false}}))
.pipe(gulp.dest("./src/js"));
});
-
+
gulp.task("prettify-css", [], function() {
return gulp.src("./src/css/simplemde.css")
.pipe(prettify({css: {indentChar: "\t", indentSize: 1}}))
@@ -65,7 +65,7 @@ gulp.task("browserify", ["lint"], function() {
gulp.task("scripts", ["browserify:debug", "browserify", "lint"], function() {
var js_files = ["./debug/simplemde.js"];
-
+
return gulp.src(js_files)
.pipe(concat("simplemde.min.js"))
.pipe(uglify())
@@ -78,9 +78,10 @@ gulp.task("styles", ["prettify-css"], function() {
var css_files = [
"./node_modules/codemirror/lib/codemirror.css",
"./src/css/*.css",
- "./node_modules/codemirror-spell-checker/src/css/spell-checker.css"
+ "./node_modules/codemirror-spell-checker/src/css/spell-checker.css",
+ "./node_modules/sweetalert2/dist/sweetalert2.min.css"
];
-
+
return gulp.src(css_files)
.pipe(concat("simplemde.css"))
.pipe(buffer())
diff --git a/package.json b/package.json
index 2c3954b..9bf4592 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,9 @@
"dependencies": {
"codemirror": "*",
"codemirror-spell-checker": "*",
- "marked": "*"
+ "marked": "*",
+ "sweetalert2": "*",
+ "es6-promise": "*"
},
"devDependencies": {
"browserify": "*",
diff --git a/src/js/simplemde.js b/src/js/simplemde.js
index 72d0d8d..ea54f12 100644
--- a/src/js/simplemde.js
+++ b/src/js/simplemde.js
@@ -12,7 +12,8 @@ require("codemirror/mode/gfm/gfm.js");
require("codemirror/mode/xml/xml.js");
var CodeMirrorSpellChecker = require("codemirror-spell-checker");
var marked = require("marked");
-
+var sweetAlert = require("sweetalert2");
+var Promise = require("es6-promise").Promise;
// Some variables
var isMac = /Mac/.test(navigator.platform);
@@ -619,14 +620,17 @@ function drawLink(editor) {
var cm = editor.codemirror;
var stat = getState(cm);
var options = editor.options;
- var url = "http://";
if(options.promptURLs) {
- url = prompt(options.promptTexts.link);
- if(!url) {
- return false;
- }
+ sweetAlert({
+ title: options.promptTexts.link,
+ input: "text",
+ showCancelButton: true
+ }).then(function(enteredUrl) {
+ _replaceSelection(cm, stat.link, options.insertTexts.link, enteredUrl);
+ });
+ } else {
+ _replaceSelection(cm, stat.link, options.insertTexts.link, "http://");
}
- _replaceSelection(cm, stat.link, options.insertTexts.link, url);
}
/**
@@ -636,14 +640,17 @@ function drawImage(editor) {
var cm = editor.codemirror;
var stat = getState(cm);
var options = editor.options;
- var url = "http://";
if(options.promptURLs) {
- url = prompt(options.promptTexts.image);
- if(!url) {
- return false;
- }
+ sweetAlert({
+ title: options.promptTexts.image,
+ input: "text",
+ showCancelButton: true
+ }).then(function(enteredUrl) {
+ _replaceSelection(cm, stat.image, options.insertTexts.image, enteredUrl);
+ });
+ } else {
+ _replaceSelection(cm, stat.image, options.insertTexts.image, "http://");
}
- _replaceSelection(cm, stat.image, options.insertTexts.image, url);
}
/**
@@ -653,7 +660,49 @@ function drawTable(editor) {
var cm = editor.codemirror;
var stat = getState(cm);
var options = editor.options;
- _replaceSelection(cm, stat.table, options.insertTexts.table);
+ if(options.promptTables) {
+ var numberValidator = function(input) {
+ return new Promise(function(resolve, reject) {
+ if(isNaN(input)) {
+ reject("You must provide a positive number.");
+ } else if(input <= 0) {
+ reject("The number must be greater than zero.");
+ } else {
+ resolve();
+ }
+ });
+ };
+
+ sweetAlert({
+ title: options.promptTexts.tableColumns,
+ input: "text",
+ showCancelButton: true,
+ confirmButtonText: "Next ",
+ inputValidator: numberValidator
+ }).then(function(columns) {
+ sweetAlert({
+ title: options.promptTexts.tableRows,
+ input: "text",
+ showCancelButton: true,
+ inputValidator: numberValidator
+ }).then(function(rows) {
+ // Build the table.
+ var tableString = "\n\n|";
+ for(var i = 1; i <= columns; ++i) {
+ tableString += " Column " + i + " |";
+ }
+ tableString += "\n|" + " --------------- |".repeat(columns);
+ var rowString = "\n|" + " Text |".repeat(columns);
+ tableString += rowString.repeat(rows);
+ tableString += "\n\n";
+
+ _replaceSelection(cm, stat.table, ["", tableString]);
+ });
+ });
+
+ } else {
+ _replaceSelection(cm, stat.table, options.insertTexts.table);
+ }
}
/**
@@ -1283,8 +1332,10 @@ var insertTexts = {
};
var promptTexts = {
- link: "URL for the link:",
- image: "URL of the image:"
+ link: "URL for the link",
+ image: "URL of the image",
+ tableColumns: "The number of columns",
+ tableRows: "The number of rows"
};
var blockStyles = {