/*global require,module*/ "use strict"; var CodeMirror = require("codemirror"); require("codemirror/addon/edit/continuelist.js"); require("./codemirror/tablist"); require("codemirror/addon/display/fullscreen.js"); require("codemirror/mode/markdown/markdown.js"); require("codemirror/addon/mode/overlay.js"); require("codemirror/addon/display/placeholder.js"); require("codemirror/addon/selection/mark-selection.js"); require("codemirror/mode/gfm/gfm.js"); require("codemirror/mode/xml/xml.js"); var CodeMirrorSpellChecker = require("codemirror-spell-checker"); var marked = require("marked"); // Some variables var isMac = /Mac/.test(navigator.platform); // Mapping of actions that can be bound to keyboard shortcuts or toolbar buttons var bindings = { "toggleBold": toggleBold, "toggleItalic": toggleItalic, "drawLink": drawLink, "toggleHeadingSmaller": toggleHeadingSmaller, "toggleHeadingBigger": toggleHeadingBigger, "drawImage": drawImage, "toggleBlockquote": toggleBlockquote, "toggleOrderedList": toggleOrderedList, "toggleUnorderedList": toggleUnorderedList, "toggleCodeBlock": toggleCodeBlock, "togglePreview": togglePreview, "toggleStrikethrough": toggleStrikethrough, "toggleHeading1": toggleHeading1, "toggleHeading2": toggleHeading2, "toggleHeading3": toggleHeading3, "cleanBlock": cleanBlock, "drawTable": drawTable, "drawHorizontalRule": drawHorizontalRule, "undo": undo, "redo": redo, "toggleSideBySide": toggleSideBySide, "toggleFullScreen": toggleFullScreen }; var shortcuts = { "toggleBold": "Cmd-B", "toggleItalic": "Cmd-I", "drawLink": "Cmd-K", "toggleHeadingSmaller": "Cmd-H", "toggleHeadingBigger": "Shift-Cmd-H", "cleanBlock": "Cmd-E", "drawImage": "Cmd-Alt-I", "toggleBlockquote": "Cmd-'", "toggleOrderedList": "Cmd-Alt-L", "toggleUnorderedList": "Cmd-L", "toggleCodeBlock": "Cmd-Alt-C", "togglePreview": "Cmd-P", "toggleSideBySide": "F9", "toggleFullScreen": "F11" }; var getBindingName = function(f) { for(var key in bindings) { if(bindings[key] === f) { return key; } } return null; }; var isMobile = function() { var check = false; (function(a) { if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true; })(navigator.userAgent || navigator.vendor || window.opera); return check; }; /** * Fix shortcut. Mac use Command, others use Ctrl. */ function fixShortcut(name) { if(isMac) { name = name.replace("Ctrl", "Cmd"); } else { name = name.replace("Cmd", "Ctrl"); } return name; } /** * Create icon element for toolbar. */ function createIcon(options, enableTooltips, shortcuts) { options = options || {}; var el = document.createElement("a"); enableTooltips = (enableTooltips == undefined) ? true : enableTooltips; if(options.title && enableTooltips) { el.title = createTootlip(options.title, options.action, shortcuts); if(isMac) { el.title = el.title.replace("Ctrl", "⌘"); el.title = el.title.replace("Alt", "⌥"); } } el.tabIndex = -1; el.className = options.className; return el; } function createSep() { var el = document.createElement("i"); el.className = "separator"; el.innerHTML = "|"; return el; } function createTootlip(title, action, shortcuts) { var actionName; var tooltip = title; if(action) { actionName = getBindingName(action); if(shortcuts[actionName]) { tooltip += " (" + fixShortcut(shortcuts[actionName]) + ")"; } } return tooltip; } /** * The state of CodeMirror at the given position. */ function getState(cm, pos) { pos = pos || cm.getCursor("start"); var stat = cm.getTokenAt(pos); if(!stat.type) return {}; var types = stat.type.split(" "); var ret = {}, data, text; for(var i = 0; i < types.length; i++) { data = types[i]; if(data === "strong") { ret.bold = true; } else if(data === "variable-2") { text = cm.getLine(pos.line); if(/^\s*\d+\.\s/.test(text)) { ret["ordered-list"] = true; } else { ret["unordered-list"] = true; } } else if(data === "atom") { ret.quote = true; } else if(data === "em") { ret.italic = true; } else if(data === "quote") { ret.quote = true; } else if(data === "strikethrough") { ret.strikethrough = true; } else if(data === "comment") { ret.code = true; } else if(data === "link") { ret.link = true; } else if(data === "tag") { ret.image = true; } else if(data.match(/^header(\-[1-6])?$/)) { ret[data.replace("header", "heading")] = true; } } return ret; } // Saved overflow setting var saved_overflow = ""; /** * Toggle full screen of the editor. */ function toggleFullScreen(editor) { // Set fullscreen var cm = editor.codemirror; cm.setOption("fullScreen", !cm.getOption("fullScreen")); // Prevent scrolling on body during fullscreen active if(cm.getOption("fullScreen")) { saved_overflow = document.body.style.overflow; document.body.style.overflow = "hidden"; } else { document.body.style.overflow = saved_overflow; } // Update toolbar class var wrap = cm.getWrapperElement(); if(!/fullscreen/.test(wrap.previousSibling.className)) { wrap.previousSibling.className += " fullscreen"; } else { wrap.previousSibling.className = wrap.previousSibling.className.replace(/\s*fullscreen\b/, ""); } // Update toolbar button var toolbarButton = editor.toolbarElements.fullscreen; if(!/active/.test(toolbarButton.className)) { toolbarButton.className += " active"; } else { toolbarButton.className = toolbarButton.className.replace(/\s*active\s*/g, ""); } // Hide side by side if needed var sidebyside = cm.getWrapperElement().nextSibling; if(/editor-preview-active-side/.test(sidebyside.className)) toggleSideBySide(editor); } /** * Action for toggling bold. */ function toggleBold(editor) { _toggleBlock(editor, "bold", editor.options.blockStyles.bold); } /** * Action for toggling italic. */ function toggleItalic(editor) { _toggleBlock(editor, "italic", editor.options.blockStyles.italic); } /** * Action for toggling strikethrough. */ function toggleStrikethrough(editor) { _toggleBlock(editor, "strikethrough", "~~"); } /** * Action for toggling code block. */ function toggleCodeBlock(editor) { var fenceCharsToInsert = editor.options.blockStyles.code; function fencing_line(line) { /* return true, if this is a ``` or ~~~ line */ if(typeof line !== "object") { throw "fencing_line() takes a 'line' object (not a line number, or line text). Got: " + typeof line + ": " + line; } return line.styles && line.styles[2] && line.styles[2].indexOf("formatting-code-block") !== -1; } function token_state(token) { // base goes an extra level deep when mode backdrops are used, e.g. spellchecker on return token.state.base.base || token.state.base; } function code_type(cm, line_num, line, firstTok, lastTok) { /* * Return "single", "indented", "fenced" or false * * cm and line_num are required. Others are optional for efficiency * To check in the middle of a line, pass in firstTok yourself. */ line = line || cm.getLineHandle(line_num); firstTok = firstTok || cm.getTokenAt({ line: line_num, ch: 1 }); lastTok = lastTok || (!!line.text && cm.getTokenAt({ line: line_num, ch: line.text.length - 1 })); var types = firstTok.type ? firstTok.type.split(" ") : []; if(lastTok && token_state(lastTok).indentedCode) { // have to check last char, since first chars of first line aren"t marked as indented return "indented"; } else if(types.indexOf("comment") === -1) { // has to be after "indented" check, since first chars of first indented line aren"t marked as such return false; } else if(token_state(firstTok).fencedChars || token_state(lastTok).fencedChars || fencing_line(line)) { return "fenced"; } else { return "single"; } } function insertFencingAtSelection(cm, cur_start, cur_end, fenceCharsToInsert) { var start_line_sel = cur_start.line + 1, end_line_sel = cur_end.line + 1, sel_multi = cur_start.line !== cur_end.line, repl_start = fenceCharsToInsert + "\n", repl_end = "\n" + fenceCharsToInsert; if(sel_multi) { end_line_sel++; } // handle last char including \n or not if(sel_multi && cur_end.ch === 0) { repl_end = fenceCharsToInsert + "\n"; end_line_sel--; } _replaceSelection(cm, false, [repl_start, repl_end]); cm.setSelection({ line: start_line_sel, ch: 0 }, { line: end_line_sel, ch: 0 }); } var cm = editor.codemirror, cur_start = cm.getCursor("start"), cur_end = cm.getCursor("end"), tok = cm.getTokenAt({ line: cur_start.line, ch: cur_start.ch || 1 }), // avoid ch 0 which is a cursor pos but not token line = cm.getLineHandle(cur_start.line), is_code = code_type(cm, cur_start.line, line, tok); var block_start, block_end, lineCount; if(is_code === "single") { // similar to some SimpleMDE _toggleBlock logic var start = line.text.slice(0, cur_start.ch).replace("`", ""), end = line.text.slice(cur_start.ch).replace("`", ""); cm.replaceRange(start + end, { line: cur_start.line, ch: 0 }, { line: cur_start.line, ch: 99999999999999 }); cur_start.ch--; if(cur_start !== cur_end) { cur_end.ch--; } cm.setSelection(cur_start, cur_end); cm.focus(); } else if(is_code === "fenced") { if(cur_start.line !== cur_end.line || cur_start.ch !== cur_end.ch) { // use selection // find the fenced line so we know what type it is (tilde, backticks, number of them) for(block_start = cur_start.line; block_start >= 0; block_start--) { line = cm.getLineHandle(block_start); if(fencing_line(line)) { break; } } var fencedTok = cm.getTokenAt({ line: block_start, ch: 1 }); var fence_chars = token_state(fencedTok).fencedChars; var start_text, start_line; var end_text, end_line; // check for selection going up against fenced lines, in which case we don't want to add more fencing if(fencing_line(cm.getLineHandle(cur_start.line))) { start_text = ""; start_line = cur_start.line; } else if(fencing_line(cm.getLineHandle(cur_start.line - 1))) { start_text = ""; start_line = cur_start.line - 1; } else { start_text = fence_chars + "\n"; start_line = cur_start.line; } if(fencing_line(cm.getLineHandle(cur_end.line))) { end_text = ""; end_line = cur_end.line; if(cur_end.ch === 0) { end_line += 1; } } else if(cur_end.ch !== 0 && fencing_line(cm.getLineHandle(cur_end.line + 1))) { end_text = ""; end_line = cur_end.line + 1; } else { end_text = fence_chars + "\n"; end_line = cur_end.line + 1; } if(cur_end.ch === 0) { // full last line selected, putting cursor at beginning of next end_line -= 1; } cm.operation(function() { // end line first, so that line numbers don't change cm.replaceRange(end_text, { line: end_line, ch: 0 }, { line: end_line + (end_text ? 0 : 1), ch: 0 }); cm.replaceRange(start_text, { line: start_line, ch: 0 }, { line: start_line + (start_text ? 0 : 1), ch: 0 }); }); cm.setSelection({ line: start_line + (start_text ? 1 : 0), ch: 0 }, { line: end_line + (start_text ? 1 : -1), ch: 0 }); cm.focus(); } else { // no selection, search for ends of this fenced block var search_from = cur_start.line; if(fencing_line(cm.getLineHandle(cur_start.line))) { // gets a little tricky if cursor is right on a fenced line if(code_type(cm, cur_start.line + 1) === "fenced") { block_start = cur_start.line; search_from = cur_start.line + 1; // for searching for "end" } else { block_end = cur_start.line; search_from = cur_start.line - 1; // for searching for "start" } } if(block_start === undefined) { for(block_start = search_from; block_start >= 0; block_start--) { line = cm.getLineHandle(block_start); if(fencing_line(line)) { break; } } } if(block_end === undefined) { lineCount = cm.lineCount(); for(block_end = search_from; block_end < lineCount; block_end++) { line = cm.getLineHandle(block_end); if(fencing_line(line)) { break; } } } cm.operation(function() { cm.replaceRange("", { line: block_start, ch: 0 }, { line: block_start + 1, ch: 0 }); cm.replaceRange("", { line: block_end - 1, ch: 0 }, { line: block_end, ch: 0 }); }); cm.focus(); } } else if(is_code === "indented") { if(cur_start.line !== cur_end.line || cur_start.ch !== cur_end.ch) { // use selection block_start = cur_start.line; block_end = cur_end.line; if(cur_end.ch === 0) { block_end--; } } else { // no selection, search for ends of this indented block for(block_start = cur_start.line; block_start >= 0; block_start--) { line = cm.getLineHandle(block_start); if(line.text.match(/^\s*$/)) { // empty or all whitespace - keep going continue; } else { if(code_type(cm, block_start, line) !== "indented") { block_start += 1; break; } } } lineCount = cm.lineCount(); for(block_end = cur_start.line; block_end < lineCount; block_end++) { line = cm.getLineHandle(block_end); if(line.text.match(/^\s*$/)) { // empty or all whitespace - keep going continue; } else { if(code_type(cm, block_end, line) !== "indented") { block_end -= 1; break; } } } } // if we are going to un-indent based on a selected set of lines, and the next line is indented too, we need to // insert a blank line so that the next line(s) continue to be indented code var next_line = cm.getLineHandle(block_end + 1), next_line_last_tok = next_line && cm.getTokenAt({ line: block_end + 1, ch: next_line.text.length - 1 }), next_line_indented = next_line_last_tok && token_state(next_line_last_tok).indentedCode; if(next_line_indented) { cm.replaceRange("\n", { line: block_end + 1, ch: 0 }); } for(var i = block_start; i <= block_end; i++) { cm.indentLine(i, "subtract"); // TODO: this doesn't get tracked in the history, so can't be undone :( } cm.focus(); } else { // insert code formatting var no_sel_and_starting_of_line = (cur_start.line === cur_end.line && cur_start.ch === cur_end.ch && cur_start.ch === 0); var sel_multi = cur_start.line !== cur_end.line; if(no_sel_and_starting_of_line || sel_multi) { insertFencingAtSelection(cm, cur_start, cur_end, fenceCharsToInsert); } else { _replaceSelection(cm, false, ["`", "`"]); } } } /** * Action for toggling blockquote. */ function toggleBlockquote(editor) { var cm = editor.codemirror; _toggleLine(cm, "quote"); } /** * Action for toggling heading size: normal -> h1 -> h2 -> h3 -> h4 -> h5 -> h6 -> normal */ function toggleHeadingSmaller(editor) { var cm = editor.codemirror; _toggleHeading(cm, "smaller"); } /** * Action for toggling heading size: normal -> h6 -> h5 -> h4 -> h3 -> h2 -> h1 -> normal */ function toggleHeadingBigger(editor) { var cm = editor.codemirror; _toggleHeading(cm, "bigger"); } /** * Action for toggling heading size 1 */ function toggleHeading1(editor) { var cm = editor.codemirror; _toggleHeading(cm, undefined, 1); } /** * Action for toggling heading size 2 */ function toggleHeading2(editor) { var cm = editor.codemirror; _toggleHeading(cm, undefined, 2); } /** * Action for toggling heading size 3 */ function toggleHeading3(editor) { var cm = editor.codemirror; _toggleHeading(cm, undefined, 3); } /** * Action for toggling ul. */ function toggleUnorderedList(editor) { var cm = editor.codemirror; _toggleLine(cm, "unordered-list"); } /** * Action for toggling ol. */ function toggleOrderedList(editor) { var cm = editor.codemirror; _toggleLine(cm, "ordered-list"); } /** * Action for clean block (remove headline, list, blockquote code, markers) */ function cleanBlock(editor) { var cm = editor.codemirror; _cleanBlock(cm); } /** * Action for drawing a link. */ 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; } } _replaceSelection(cm, stat.link, options.insertTexts.link, url); } /** * Action for drawing an img. */ function drawImage(editor) { var cm = editor.codemirror; var stat = getState(cm); var options = editor.options; var altText = cm.getSelection(); if(altText == ""){ altText="image"; } var imgDialog = $('