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 = {