You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1258 lines
30 KiB
JavaScript
1258 lines
30 KiB
JavaScript
/*global require,module*/
|
|
"use strict";
|
|
var CodeMirror = require("codemirror");
|
|
require("codemirror/addon/edit/continuelist.js");
|
|
require("codemirror/addon/display/fullscreen.js");
|
|
require("codemirror/mode/gfm/gfm.js");
|
|
require("codemirror/mode/markdown/markdown.js");
|
|
require("codemirror/addon/mode/overlay.js");
|
|
require("codemirror/mode/xml/xml.js");
|
|
require("marked");
|
|
require("codemirror-spell-checker/src/js/spell-checker.js");
|
|
require("codemirror-spell-checker/src/js/typo.js");
|
|
|
|
var isMac = /Mac/.test(navigator.platform);
|
|
|
|
var shortcuts = {
|
|
"Cmd-B": toggleBold,
|
|
"Cmd-I": toggleItalic,
|
|
"Cmd-K": drawLink,
|
|
"Cmd-H": toggleHeadingSmaller,
|
|
"Shift-Cmd-H": toggleHeadingBigger,
|
|
"Cmd-Alt-I": drawImage,
|
|
"Cmd-'": toggleBlockquote,
|
|
"Cmd-Alt-L": toggleOrderedList,
|
|
"Cmd-L": toggleUnorderedList,
|
|
"Cmd-Alt-C": toggleCodeBlock,
|
|
"Cmd-P": togglePreview
|
|
};
|
|
|
|
|
|
/**
|
|
* 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) {
|
|
options = options || {};
|
|
var el = document.createElement("a");
|
|
enableTooltips = (enableTooltips == undefined) ? true : enableTooltips;
|
|
|
|
if(options.title && enableTooltips) {
|
|
el.title = options.title;
|
|
|
|
if(isMac) {
|
|
el.title = el.title.replace("Ctrl", "⌘");
|
|
el.title = el.title.replace("Alt", "⌥");
|
|
}
|
|
}
|
|
|
|
el.className = options.className;
|
|
return el;
|
|
}
|
|
|
|
function createSep() {
|
|
var el = document.createElement("i");
|
|
el.className = "separator";
|
|
el.innerHTML = "|";
|
|
return el;
|
|
}
|
|
|
|
|
|
/**
|
|
* 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;
|
|
}
|
|
}
|
|
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", "**");
|
|
}
|
|
|
|
|
|
/**
|
|
* Action for toggling italic.
|
|
*/
|
|
function toggleItalic(editor) {
|
|
_toggleBlock(editor, "italic", "*");
|
|
}
|
|
|
|
|
|
/**
|
|
* Action for toggling strikethrough.
|
|
*/
|
|
function toggleStrikethrough(editor) {
|
|
_toggleBlock(editor, "strikethrough", "~~");
|
|
}
|
|
|
|
/**
|
|
* Action for toggling code block.
|
|
*/
|
|
function toggleCodeBlock(editor) {
|
|
_toggleBlock(editor, "code", "```\r\n", "\r\n```");
|
|
}
|
|
|
|
/**
|
|
* 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 drawing a link.
|
|
*/
|
|
function drawLink(editor) {
|
|
var cm = editor.codemirror;
|
|
var stat = getState(cm);
|
|
_replaceSelection(cm, stat.link, "[", "](http://)");
|
|
}
|
|
|
|
|
|
/**
|
|
* Action for drawing an img.
|
|
*/
|
|
function drawImage(editor) {
|
|
var cm = editor.codemirror;
|
|
var stat = getState(cm);
|
|
_replaceSelection(cm, stat.image, "![](http://", ")");
|
|
}
|
|
|
|
|
|
/**
|
|
* Action for drawing a horizontal rule.
|
|
*/
|
|
function drawHorizontalRule(editor) {
|
|
var cm = editor.codemirror;
|
|
var stat = getState(cm);
|
|
_replaceSelection(cm, stat.image, "", "\n\n-----\n\n");
|
|
}
|
|
|
|
|
|
/**
|
|
* Undo action.
|
|
*/
|
|
function undo(editor) {
|
|
var cm = editor.codemirror;
|
|
cm.undo();
|
|
cm.focus();
|
|
}
|
|
|
|
|
|
/**
|
|
* Redo action.
|
|
*/
|
|
function redo(editor) {
|
|
var cm = editor.codemirror;
|
|
cm.redo();
|
|
cm.focus();
|
|
}
|
|
|
|
|
|
/**
|
|
* Toggle side by side preview
|
|
*/
|
|
function toggleSideBySide(editor) {
|
|
var cm = editor.codemirror;
|
|
var wrapper = cm.getWrapperElement();
|
|
var preview = wrapper.nextSibling;
|
|
var toolbarButton = editor.toolbarElements["side-by-side"];
|
|
|
|
if(/editor-preview-active-side/.test(preview.className)) {
|
|
preview.className = preview.className.replace(
|
|
/\s*editor-preview-active-side\s*/g, ""
|
|
);
|
|
toolbarButton.className = toolbarButton.className.replace(/\s*active\s*/g, "");
|
|
wrapper.className = wrapper.className.replace(/\s*CodeMirror-sided\s*/g, " ");
|
|
} else {
|
|
/* When the preview button is clicked for the first time,
|
|
* give some time for the transition from editor.css to fire and the view to slide from right to left,
|
|
* instead of just appearing.
|
|
*/
|
|
setTimeout(function() {
|
|
if(!cm.getOption("fullScreen"))
|
|
toggleFullScreen(editor);
|
|
preview.className += " editor-preview-active-side";
|
|
}, 1);
|
|
toolbarButton.className += " active";
|
|
wrapper.className += " CodeMirror-sided";
|
|
}
|
|
|
|
// Hide normal preview if active
|
|
var previewNormal = wrapper.lastChild;
|
|
if(/editor-preview-active/.test(previewNormal.className)) {
|
|
previewNormal.className = previewNormal.className.replace(
|
|
/\s*editor-preview-active\s*/g, ""
|
|
);
|
|
var toolbar = editor.toolbarElements.preview;
|
|
var toolbar_div = wrapper.previousSibling;
|
|
toolbar.className = toolbar.className.replace(/\s*active\s*/g, "");
|
|
toolbar_div.className = toolbar_div.className.replace(/\s*disabled-for-preview*/g, "");
|
|
}
|
|
|
|
// Start preview with the current text
|
|
preview.innerHTML = editor.options.previewRender(editor.value(), preview);
|
|
|
|
// Updates preview
|
|
cm.on("update", function() {
|
|
preview.innerHTML = editor.options.previewRender(editor.value(), preview);
|
|
});
|
|
}
|
|
|
|
|
|
/**
|
|
* Preview action.
|
|
*/
|
|
function togglePreview(editor) {
|
|
var cm = editor.codemirror;
|
|
var wrapper = cm.getWrapperElement();
|
|
var toolbar_div = wrapper.previousSibling;
|
|
var toolbar = editor.toolbarElements.preview;
|
|
var preview = wrapper.lastChild;
|
|
if(!preview || !/editor-preview/.test(preview.className)) {
|
|
preview = document.createElement("div");
|
|
preview.className = "editor-preview";
|
|
wrapper.appendChild(preview);
|
|
}
|
|
if(/editor-preview-active/.test(preview.className)) {
|
|
preview.className = preview.className.replace(
|
|
/\s*editor-preview-active\s*/g, ""
|
|
);
|
|
toolbar.className = toolbar.className.replace(/\s*active\s*/g, "");
|
|
toolbar_div.className = toolbar_div.className.replace(/\s*disabled-for-preview*/g, "");
|
|
} else {
|
|
/* When the preview button is clicked for the first time,
|
|
* give some time for the transition from editor.css to fire and the view to slide from right to left,
|
|
* instead of just appearing.
|
|
*/
|
|
setTimeout(function() {
|
|
preview.className += " editor-preview-active";
|
|
}, 1);
|
|
toolbar.className += " active";
|
|
toolbar_div.className += " disabled-for-preview";
|
|
}
|
|
preview.innerHTML = editor.options.previewRender(editor.value(), preview);
|
|
|
|
// Turn off side by side if needed
|
|
var sidebyside = cm.getWrapperElement().nextSibling;
|
|
if(/editor-preview-active-side/.test(sidebyside.className))
|
|
toggleSideBySide(editor);
|
|
}
|
|
|
|
function _replaceSelection(cm, active, start, end) {
|
|
if(/editor-preview-active/.test(cm.getWrapperElement().lastChild.className))
|
|
return;
|
|
|
|
var text;
|
|
var startPoint = cm.getCursor("start");
|
|
var endPoint = cm.getCursor("end");
|
|
if(active) {
|
|
text = cm.getLine(startPoint.line);
|
|
start = text.slice(0, startPoint.ch);
|
|
end = text.slice(startPoint.ch);
|
|
cm.replaceRange(start + end, {
|
|
line: startPoint.line,
|
|
ch: 0
|
|
});
|
|
} else {
|
|
text = cm.getSelection();
|
|
cm.replaceSelection(start + text + end);
|
|
|
|
startPoint.ch += start.length;
|
|
if(startPoint !== endPoint) {
|
|
endPoint.ch += start.length;
|
|
}
|
|
}
|
|
cm.setSelection(startPoint, endPoint);
|
|
cm.focus();
|
|
}
|
|
|
|
|
|
function _toggleHeading(cm, direction, size) {
|
|
if(/editor-preview-active/.test(cm.getWrapperElement().lastChild.className))
|
|
return;
|
|
|
|
var startPoint = cm.getCursor("start");
|
|
var endPoint = cm.getCursor("end");
|
|
for(var i = startPoint.line; i <= endPoint.line; i++) {
|
|
(function(i) {
|
|
var text = cm.getLine(i);
|
|
var currHeadingLevel = text.search(/[^#]/);
|
|
|
|
if(direction !== undefined) {
|
|
if(currHeadingLevel <= 0) {
|
|
if(direction == "bigger") {
|
|
text = "###### " + text;
|
|
} else {
|
|
text = "# " + text;
|
|
}
|
|
} else if(currHeadingLevel == 6 && direction == "smaller") {
|
|
text = text.substr(7);
|
|
} else if(currHeadingLevel == 1 && direction == "bigger") {
|
|
text = text.substr(2);
|
|
} else {
|
|
if(direction == "bigger") {
|
|
text = text.substr(1);
|
|
} else {
|
|
text = "#" + text;
|
|
}
|
|
}
|
|
} else {
|
|
if(size == 1) {
|
|
if(currHeadingLevel <= 0) {
|
|
text = "# " + text;
|
|
} else if(currHeadingLevel == size) {
|
|
text = text.substr(currHeadingLevel + 1);
|
|
} else {
|
|
text = "# " + text.substr(currHeadingLevel + 1);
|
|
}
|
|
} else if(size == 2) {
|
|
if(currHeadingLevel <= 0) {
|
|
text = "## " + text;
|
|
} else if(currHeadingLevel == size) {
|
|
text = text.substr(currHeadingLevel + 1);
|
|
} else {
|
|
text = "## " + text.substr(currHeadingLevel + 1);
|
|
}
|
|
} else {
|
|
if(currHeadingLevel <= 0) {
|
|
text = "### " + text;
|
|
} else if(currHeadingLevel == size) {
|
|
text = text.substr(currHeadingLevel + 1);
|
|
} else {
|
|
text = "### " + text.substr(currHeadingLevel + 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
cm.replaceRange(text, {
|
|
line: i,
|
|
ch: 0
|
|
}, {
|
|
line: i,
|
|
ch: 99999999999999
|
|
});
|
|
})(i);
|
|
}
|
|
cm.focus();
|
|
}
|
|
|
|
|
|
function _toggleLine(cm, name) {
|
|
if(/editor-preview-active/.test(cm.getWrapperElement().lastChild.className))
|
|
return;
|
|
|
|
var stat = getState(cm);
|
|
var startPoint = cm.getCursor("start");
|
|
var endPoint = cm.getCursor("end");
|
|
var repl = {
|
|
"quote": /^(\s*)\>\s+/,
|
|
"unordered-list": /^(\s*)(\*|\-|\+)\s+/,
|
|
"ordered-list": /^(\s*)\d+\.\s+/
|
|
};
|
|
var map = {
|
|
"quote": "> ",
|
|
"unordered-list": "* ",
|
|
"ordered-list": "1. "
|
|
};
|
|
for(var i = startPoint.line; i <= endPoint.line; i++) {
|
|
(function(i) {
|
|
var text = cm.getLine(i);
|
|
if(stat[name]) {
|
|
text = text.replace(repl[name], "$1");
|
|
} else {
|
|
text = map[name] + text;
|
|
}
|
|
cm.replaceRange(text, {
|
|
line: i,
|
|
ch: 0
|
|
}, {
|
|
line: i,
|
|
ch: 99999999999999
|
|
});
|
|
})(i);
|
|
}
|
|
cm.focus();
|
|
}
|
|
|
|
function _toggleBlock(editor, type, start_chars, end_chars) {
|
|
if(/editor-preview-active/.test(editor.codemirror.getWrapperElement().lastChild.className))
|
|
return;
|
|
|
|
end_chars = (typeof end_chars === "undefined") ? start_chars : end_chars;
|
|
var cm = editor.codemirror;
|
|
var stat = getState(cm);
|
|
|
|
var text;
|
|
var start = start_chars;
|
|
var end = end_chars;
|
|
|
|
var startPoint = cm.getCursor("start");
|
|
var endPoint = cm.getCursor("end");
|
|
|
|
if(stat[type]) {
|
|
text = cm.getLine(startPoint.line);
|
|
start = text.slice(0, startPoint.ch);
|
|
end = text.slice(startPoint.ch);
|
|
if(type == "bold") {
|
|
start = start.replace(/(\*\*|__)(?![\s\S]*(\*\*|__))/, "");
|
|
end = end.replace(/(\*\*|__)/, "");
|
|
} else if(type == "italic") {
|
|
start = start.replace(/(\*|_)(?![\s\S]*(\*|_))/, "");
|
|
end = end.replace(/(\*|_)/, "");
|
|
} else if(type == "strikethrough") {
|
|
start = start.replace(/(\*\*|~~)(?![\s\S]*(\*\*|~~))/, "");
|
|
end = end.replace(/(\*\*|~~)/, "");
|
|
}
|
|
cm.replaceRange(start + end, {
|
|
line: startPoint.line,
|
|
ch: 0
|
|
}, {
|
|
line: startPoint.line,
|
|
ch: 99999999999999
|
|
});
|
|
|
|
if(type == "bold" || type == "strikethrough") {
|
|
startPoint.ch -= 2;
|
|
if(startPoint !== endPoint) {
|
|
endPoint.ch -= 2;
|
|
}
|
|
} else if(type == "italic") {
|
|
startPoint.ch -= 1;
|
|
if(startPoint !== endPoint) {
|
|
endPoint.ch -= 1;
|
|
}
|
|
}
|
|
} else {
|
|
text = cm.getSelection();
|
|
if(type == "bold") {
|
|
text = text.split("**").join("");
|
|
text = text.split("__").join("");
|
|
} else if(type == "italic") {
|
|
text = text.split("*").join("");
|
|
text = text.split("_").join("");
|
|
} else if(type == "strikethrough") {
|
|
text = text.split("~~").join("");
|
|
}
|
|
cm.replaceSelection(start + text + end);
|
|
|
|
startPoint.ch += start_chars.length;
|
|
endPoint.ch = startPoint.ch + text.length;
|
|
}
|
|
|
|
cm.setSelection(startPoint, endPoint);
|
|
cm.focus();
|
|
}
|
|
|
|
|
|
/* The right word count in respect for CJK. */
|
|
function wordCount(data) {
|
|
var pattern = /[a-zA-Z0-9_\u0392-\u03c9]+|[\u4E00-\u9FFF\u3400-\u4dbf\uf900-\ufaff\u3040-\u309f\uac00-\ud7af]+/g;
|
|
var m = data.match(pattern);
|
|
var count = 0;
|
|
if(m === null) return count;
|
|
for(var i = 0; i < m.length; i++) {
|
|
if(m[i].charCodeAt(0) >= 0x4E00) {
|
|
count += m[i].length;
|
|
} else {
|
|
count += 1;
|
|
}
|
|
}
|
|
return count;
|
|
}
|
|
|
|
|
|
var toolbarBuiltInButtons = {
|
|
"bold": {
|
|
name: "bold",
|
|
action: toggleBold,
|
|
className: "fa fa-bold",
|
|
title: "Bold (Ctrl+B)"
|
|
},
|
|
"italic": {
|
|
name: "italic",
|
|
action: toggleItalic,
|
|
className: "fa fa-italic",
|
|
title: "Italic (Ctrl+I)"
|
|
},
|
|
"strikethrough": {
|
|
name: "strikethrough",
|
|
action: toggleStrikethrough,
|
|
className: "fa fa-strikethrough",
|
|
title: "Strikethrough"
|
|
},
|
|
"heading": {
|
|
name: "heading",
|
|
action: toggleHeadingSmaller,
|
|
className: "fa fa-header",
|
|
title: "Heading (Ctrl+H)"
|
|
},
|
|
"heading-smaller": {
|
|
name: "heading-smaller",
|
|
action: toggleHeadingSmaller,
|
|
className: "fa fa-header fa-header-x fa-header-smaller",
|
|
title: "Smaller Heading (Ctrl+H)"
|
|
},
|
|
"heading-bigger": {
|
|
name: "heading-bigger",
|
|
action: toggleHeadingBigger,
|
|
className: "fa fa-header fa-header-x fa-header-bigger",
|
|
title: "Bigger Heading (Shift+Ctrl+H)"
|
|
},
|
|
"heading-1": {
|
|
name: "heading-1",
|
|
action: toggleHeading1,
|
|
className: "fa fa-header fa-header-x fa-header-1",
|
|
title: "Big Heading"
|
|
},
|
|
"heading-2": {
|
|
name: "heading-2",
|
|
action: toggleHeading2,
|
|
className: "fa fa-header fa-header-x fa-header-2",
|
|
title: "Medium Heading"
|
|
},
|
|
"heading-3": {
|
|
name: "heading-3",
|
|
action: toggleHeading3,
|
|
className: "fa fa-header fa-header-x fa-header-3",
|
|
title: "Small Heading"
|
|
},
|
|
"code": {
|
|
name: "code",
|
|
action: toggleCodeBlock,
|
|
className: "fa fa-code",
|
|
title: "Code (Ctrl+Alt+C)"
|
|
},
|
|
"quote": {
|
|
name: "quote",
|
|
action: toggleBlockquote,
|
|
className: "fa fa-quote-left",
|
|
title: "Quote (Ctrl+')"
|
|
},
|
|
"unordered-list": {
|
|
name: "unordered-list",
|
|
action: toggleUnorderedList,
|
|
className: "fa fa-list-ul",
|
|
title: "Generic List (Ctrl+L)"
|
|
},
|
|
"ordered-list": {
|
|
name: "ordered-list",
|
|
action: toggleOrderedList,
|
|
className: "fa fa-list-ol",
|
|
title: "Numbered List (Ctrl+Alt+L)"
|
|
},
|
|
"link": {
|
|
name: "link",
|
|
action: drawLink,
|
|
className: "fa fa-link",
|
|
title: "Create Link (Ctrl+K)"
|
|
},
|
|
"image": {
|
|
name: "image",
|
|
action: drawImage,
|
|
className: "fa fa-picture-o",
|
|
title: "Insert Image (Ctrl+Alt+I)"
|
|
},
|
|
"horizontal-rule": {
|
|
name: "horizontal-rule",
|
|
action: drawHorizontalRule,
|
|
className: "fa fa-minus",
|
|
title: "Insert Horizontal Line"
|
|
},
|
|
"preview": {
|
|
name: "preview",
|
|
action: togglePreview,
|
|
className: "fa fa-eye no-disable",
|
|
title: "Toggle Preview (Ctrl+P)"
|
|
},
|
|
"side-by-side": {
|
|
name: "side-by-side",
|
|
action: toggleSideBySide,
|
|
className: "fa fa-columns no-disable no-mobile",
|
|
title: "Toggle Side by Side (F9)"
|
|
},
|
|
"fullscreen": {
|
|
name: "fullscreen",
|
|
action: toggleFullScreen,
|
|
className: "fa fa-arrows-alt no-disable no-mobile",
|
|
title: "Toggle Fullscreen (F11)"
|
|
},
|
|
"guide": {
|
|
name: "guide",
|
|
action: "http://nextstepwebs.github.io/simplemde-markdown-editor/markdown-guide",
|
|
className: "fa fa-question-circle",
|
|
title: "Markdown Guide"
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Interface of SimpleMDE.
|
|
*/
|
|
function SimpleMDE(options) {
|
|
// Handle options parameter
|
|
options = options || {};
|
|
|
|
|
|
// Used later to refer to it"s parent
|
|
options.parent = this;
|
|
|
|
|
|
// Check if Font Awesome needs to be auto downloaded
|
|
var autoDownloadFA = true;
|
|
|
|
if(options.autoDownloadFontAwesome === false) {
|
|
autoDownloadFA = false;
|
|
}
|
|
|
|
if(options.autoDownloadFontAwesome !== true) {
|
|
var styleSheets = document.styleSheets;
|
|
for(var i = 0; i < styleSheets.length; i++) {
|
|
if(!styleSheets[i].href)
|
|
continue;
|
|
|
|
if(styleSheets[i].href.indexOf("//maxcdn.bootstrapcdn.com/font-awesome/") > -1) {
|
|
autoDownloadFA = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
if(autoDownloadFA) {
|
|
var link = document.createElement("link");
|
|
link.rel = "stylesheet";
|
|
link.href = "https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css";
|
|
document.getElementsByTagName("head")[0].appendChild(link);
|
|
}
|
|
|
|
|
|
// Find the textarea to use
|
|
if(options.element) {
|
|
this.element = options.element;
|
|
} else if(options.element === null) {
|
|
// This means that the element option was specified, but no element was found
|
|
console.log("SimpleMDE: Error. No element was found.");
|
|
return;
|
|
}
|
|
|
|
|
|
// Handle toolbar and status bar
|
|
if(options.toolbar !== false)
|
|
options.toolbar = options.toolbar || SimpleMDE.toolbar;
|
|
|
|
if(!options.hasOwnProperty("status")) {
|
|
options.status = ["autosave", "lines", "words", "cursor"];
|
|
}
|
|
|
|
|
|
// Add default preview rendering function
|
|
if(!options.previewRender) {
|
|
options.previewRender = function(plainText) {
|
|
// Note: "this" refers to the options object
|
|
return this.parent.markdown(plainText);
|
|
};
|
|
}
|
|
|
|
|
|
// Set default options for parsing config
|
|
options.parsingConfig = options.parsingConfig || {};
|
|
|
|
|
|
// Update this options
|
|
this.options = options;
|
|
|
|
|
|
// Auto render
|
|
this.render();
|
|
|
|
|
|
// The codemirror component is only available after rendering
|
|
// so, the setter for the initialValue can only run after
|
|
// the element has been rendered
|
|
if(options.initialValue) {
|
|
this.value(options.initialValue);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Default toolbar elements.
|
|
*/
|
|
SimpleMDE.toolbar = ["bold", "italic", "heading", "|", "quote", "unordered-list", "ordered-list", "|", "link", "image", "|", "preview", "side-by-side", "fullscreen", "guide"];
|
|
|
|
/**
|
|
* Default markdown render.
|
|
*/
|
|
SimpleMDE.prototype.markdown = function(text) {
|
|
if(window.marked) {
|
|
// Initialize
|
|
var markedOptions = {};
|
|
|
|
|
|
// Update options
|
|
if(this.options && this.options.renderingConfig && this.options.renderingConfig.singleLineBreaks !== false) {
|
|
markedOptions.breaks = true;
|
|
}
|
|
|
|
if(this.options && this.options.renderingConfig && this.options.renderingConfig.codeSyntaxHighlighting === true && window.hljs) {
|
|
markedOptions.highlight = function(code) {
|
|
return window.hljs.highlightAuto(code).value;
|
|
};
|
|
}
|
|
|
|
|
|
// Set options
|
|
window.marked.setOptions(markedOptions);
|
|
|
|
|
|
// Return
|
|
return window.marked(text);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Render editor to the given element.
|
|
*/
|
|
SimpleMDE.prototype.render = function(el) {
|
|
if(!el) {
|
|
el = this.element || document.getElementsByTagName("textarea")[0];
|
|
}
|
|
|
|
if(this._rendered && this._rendered === el) {
|
|
// Already rendered.
|
|
return;
|
|
}
|
|
|
|
this.element = el;
|
|
var options = this.options;
|
|
|
|
var self = this;
|
|
var keyMaps = {};
|
|
|
|
for(var key in shortcuts) {
|
|
(function(key) {
|
|
keyMaps[fixShortcut(key)] = function() {
|
|
shortcuts[key](self);
|
|
};
|
|
})(key);
|
|
}
|
|
|
|
keyMaps["Enter"] = "newlineAndIndentContinueMarkdownList";
|
|
keyMaps["Tab"] = "tabAndIndentMarkdownList";
|
|
keyMaps["Shift-Tab"] = "shiftTabAndUnindentMarkdownList";
|
|
keyMaps["F11"] = function() {
|
|
toggleFullScreen(self);
|
|
};
|
|
keyMaps["F9"] = function() {
|
|
toggleSideBySide(self);
|
|
};
|
|
keyMaps["Esc"] = function(cm) {
|
|
if(cm.getOption("fullScreen")) toggleFullScreen(self);
|
|
};
|
|
|
|
var mode, backdrop;
|
|
if(options.spellChecker !== false) {
|
|
mode = "spell-checker";
|
|
backdrop = options.parsingConfig;
|
|
backdrop.name = "gfm";
|
|
backdrop.gitHubSpice = false;
|
|
} else {
|
|
mode = options.parsingConfig;
|
|
mode.name = "gfm";
|
|
mode.gitHubSpice = false;
|
|
}
|
|
|
|
this.codemirror = CodeMirror.fromTextArea(el, {
|
|
mode: mode,
|
|
backdrop: backdrop,
|
|
theme: "paper",
|
|
tabSize: (options.tabSize != undefined) ? options.tabSize : 2,
|
|
indentUnit: (options.tabSize != undefined) ? options.tabSize : 2,
|
|
indentWithTabs: (options.indentWithTabs === false) ? false : true,
|
|
lineNumbers: false,
|
|
autofocus: (options.autofocus === true) ? true : false,
|
|
extraKeys: keyMaps,
|
|
lineWrapping: (options.lineWrapping === false) ? false : true,
|
|
allowDropFileTypes: ["text/plain"]
|
|
});
|
|
|
|
if(options.toolbar !== false) {
|
|
this.createToolbar();
|
|
}
|
|
if(options.status !== false) {
|
|
this.createStatusbar();
|
|
}
|
|
if(options.autosave != undefined && options.autosave.enabled === true) {
|
|
this.autosave();
|
|
}
|
|
|
|
this.createSideBySide();
|
|
|
|
this._rendered = this.element;
|
|
};
|
|
|
|
SimpleMDE.prototype.autosave = function() {
|
|
var content = this.value();
|
|
var simplemde = this;
|
|
|
|
if(this.options.autosave.unique_id == undefined || this.options.autosave.unique_id == "") {
|
|
console.log("SimpleMDE: You must set a unique_id to use the autosave feature");
|
|
return;
|
|
}
|
|
|
|
if(simplemde.element.form != null && simplemde.element.form != undefined) {
|
|
simplemde.element.form.addEventListener("submit", function() {
|
|
localStorage.setItem(simplemde.options.autosave.unique_id, "");
|
|
});
|
|
}
|
|
|
|
if(this.options.autosave.loaded !== true) {
|
|
if(localStorage.getItem(this.options.autosave.unique_id) != null)
|
|
this.codemirror.setValue(localStorage.getItem(this.options.autosave.unique_id));
|
|
|
|
this.options.autosave.loaded = true;
|
|
}
|
|
|
|
if(localStorage) {
|
|
localStorage.setItem(this.options.autosave.unique_id, content);
|
|
}
|
|
|
|
var el = document.getElementById("autosaved");
|
|
if(el != null && el != undefined && el != "") {
|
|
var d = new Date();
|
|
var hh = d.getHours();
|
|
var m = d.getMinutes();
|
|
var dd = "am";
|
|
var h = hh;
|
|
if(h >= 12) {
|
|
h = hh - 12;
|
|
dd = "pm";
|
|
}
|
|
if(h == 0) {
|
|
h = 12;
|
|
}
|
|
m = m < 10 ? "0" + m : m;
|
|
|
|
el.innerHTML = "Autosaved: " + h + ":" + m + " " + dd;
|
|
}
|
|
|
|
setTimeout(function() {
|
|
simplemde.autosave();
|
|
}, this.options.autosave.delay || 10000);
|
|
};
|
|
|
|
SimpleMDE.prototype.createSideBySide = function() {
|
|
var cm = this.codemirror;
|
|
var wrapper = cm.getWrapperElement();
|
|
var preview = wrapper.nextSibling;
|
|
|
|
if(!preview || !/editor-preview-side/.test(preview.className)) {
|
|
preview = document.createElement("div");
|
|
preview.className = "editor-preview-side";
|
|
wrapper.parentNode.insertBefore(preview, wrapper.nextSibling);
|
|
}
|
|
|
|
// Syncs scroll editor -> preview
|
|
var cScroll = false;
|
|
var pScroll = false;
|
|
cm.on("scroll", function(v) {
|
|
if(cScroll) {
|
|
cScroll = false;
|
|
return;
|
|
}
|
|
pScroll = true;
|
|
var height = v.getScrollInfo().height - v.getScrollInfo().clientHeight;
|
|
var ratio = parseFloat(v.getScrollInfo().top) / height;
|
|
var move = (preview.scrollHeight - preview.clientHeight) * ratio;
|
|
preview.scrollTop = move;
|
|
});
|
|
|
|
// Syncs scroll preview -> editor
|
|
preview.onscroll = function() {
|
|
if(pScroll) {
|
|
pScroll = false;
|
|
return;
|
|
}
|
|
cScroll = true;
|
|
var height = preview.scrollHeight - preview.clientHeight;
|
|
var ratio = parseFloat(preview.scrollTop) / height;
|
|
var move = (cm.getScrollInfo().height - cm.getScrollInfo().clientHeight) * ratio;
|
|
cm.scrollTo(0, move);
|
|
};
|
|
return true;
|
|
};
|
|
|
|
SimpleMDE.prototype.createToolbar = function(items) {
|
|
items = items || this.options.toolbar;
|
|
|
|
if(!items || items.length === 0) {
|
|
return;
|
|
}
|
|
var i;
|
|
for(i = 0; i < items.length; i++) {
|
|
if(toolbarBuiltInButtons[items[i]] != undefined) {
|
|
items[i] = toolbarBuiltInButtons[items[i]];
|
|
}
|
|
}
|
|
|
|
var bar = document.createElement("div");
|
|
bar.className = "editor-toolbar";
|
|
|
|
var self = this;
|
|
|
|
var toolbar_data = {};
|
|
self.toolbar = items;
|
|
|
|
for(i = 0; i < items.length; i++) {
|
|
if(items[i].name == "guide" && self.options.toolbarGuideIcon === false)
|
|
continue;
|
|
|
|
if(self.options.hideIcons && self.options.hideIcons.indexOf(items[i].name) != -1)
|
|
continue;
|
|
|
|
(function(item) {
|
|
var el;
|
|
if(item === "|") {
|
|
el = createSep();
|
|
} else {
|
|
el = createIcon(item, self.options.toolbarTips);
|
|
}
|
|
|
|
// bind events, special for info
|
|
if(item.action) {
|
|
if(typeof item.action === "function") {
|
|
el.onclick = function() {
|
|
item.action(self);
|
|
};
|
|
} else if(typeof item.action === "string") {
|
|
el.href = item.action;
|
|
el.target = "_blank";
|
|
}
|
|
}
|
|
toolbar_data[item.name || item] = el;
|
|
bar.appendChild(el);
|
|
})(items[i]);
|
|
}
|
|
|
|
self.toolbarElements = toolbar_data;
|
|
|
|
var cm = this.codemirror;
|
|
cm.on("cursorActivity", function() {
|
|
var stat = getState(cm);
|
|
|
|
for(var key in toolbar_data) {
|
|
(function(key) {
|
|
var el = toolbar_data[key];
|
|
if(stat[key]) {
|
|
el.className += " active";
|
|
} else if(key != "fullscreen" && key != "side-by-side") {
|
|
el.className = el.className.replace(/\s*active\s*/g, "");
|
|
}
|
|
})(key);
|
|
}
|
|
});
|
|
|
|
var cmWrapper = cm.getWrapperElement();
|
|
cmWrapper.parentNode.insertBefore(bar, cmWrapper);
|
|
return bar;
|
|
};
|
|
|
|
SimpleMDE.prototype.createStatusbar = function(status) {
|
|
status = status || this.options.status;
|
|
var options = this.options;
|
|
|
|
if(!status || status.length === 0) return;
|
|
|
|
var bar = document.createElement("div");
|
|
bar.className = "editor-statusbar";
|
|
|
|
var pos, cm = this.codemirror;
|
|
for(var i = 0; i < status.length; i++) {
|
|
(function(name) {
|
|
var el = document.createElement("span");
|
|
el.className = name;
|
|
if(name === "words") {
|
|
el.innerHTML = "0";
|
|
cm.on("update", function() {
|
|
el.innerHTML = wordCount(cm.getValue());
|
|
});
|
|
} else if(name === "lines") {
|
|
el.innerHTML = "0";
|
|
cm.on("update", function() {
|
|
el.innerHTML = cm.lineCount();
|
|
});
|
|
} else if(name === "cursor") {
|
|
el.innerHTML = "0:0";
|
|
cm.on("cursorActivity", function() {
|
|
pos = cm.getCursor();
|
|
el.innerHTML = pos.line + ":" + pos.ch;
|
|
});
|
|
} else if(name === "autosave") {
|
|
if(options.autosave != undefined && options.autosave.enabled === true) {
|
|
el.setAttribute("id", "autosaved");
|
|
}
|
|
}
|
|
bar.appendChild(el);
|
|
})(status[i]);
|
|
}
|
|
|
|
var cmWrapper = this.codemirror.getWrapperElement();
|
|
cmWrapper.parentNode.insertBefore(bar, cmWrapper.nextSibling);
|
|
return bar;
|
|
};
|
|
|
|
/**
|
|
* Get or set the text content.
|
|
*/
|
|
SimpleMDE.prototype.value = function(val) {
|
|
if(val === undefined) {
|
|
return this.codemirror.getValue();
|
|
} else {
|
|
this.codemirror.getDoc().setValue(val);
|
|
return this;
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Bind static methods for exports.
|
|
*/
|
|
SimpleMDE.toggleBold = toggleBold;
|
|
SimpleMDE.toggleItalic = toggleItalic;
|
|
SimpleMDE.toggleStrikethrough = toggleStrikethrough;
|
|
SimpleMDE.toggleBlockquote = toggleBlockquote;
|
|
SimpleMDE.toggleHeadingSmaller = toggleHeadingSmaller;
|
|
SimpleMDE.toggleHeadingBigger = toggleHeadingBigger;
|
|
SimpleMDE.toggleHeading1 = toggleHeading1;
|
|
SimpleMDE.toggleHeading2 = toggleHeading2;
|
|
SimpleMDE.toggleHeading3 = toggleHeading3;
|
|
SimpleMDE.toggleCodeBlock = toggleCodeBlock;
|
|
SimpleMDE.toggleUnorderedList = toggleUnorderedList;
|
|
SimpleMDE.toggleOrderedList = toggleOrderedList;
|
|
SimpleMDE.drawLink = drawLink;
|
|
SimpleMDE.drawImage = drawImage;
|
|
SimpleMDE.drawHorizontalRule = drawHorizontalRule;
|
|
SimpleMDE.undo = undo;
|
|
SimpleMDE.redo = redo;
|
|
SimpleMDE.togglePreview = togglePreview;
|
|
SimpleMDE.toggleSideBySide = toggleSideBySide;
|
|
SimpleMDE.toggleFullScreen = toggleFullScreen;
|
|
|
|
/**
|
|
* Bind instance methods for exports.
|
|
*/
|
|
SimpleMDE.prototype.toggleBold = function() {
|
|
toggleBold(this);
|
|
};
|
|
SimpleMDE.prototype.toggleItalic = function() {
|
|
toggleItalic(this);
|
|
};
|
|
SimpleMDE.prototype.toggleStrikethrough = function() {
|
|
toggleStrikethrough(this);
|
|
};
|
|
SimpleMDE.prototype.toggleBlockquote = function() {
|
|
toggleBlockquote(this);
|
|
};
|
|
SimpleMDE.prototype.toggleHeadingSmaller = function() {
|
|
toggleHeadingSmaller(this);
|
|
};
|
|
SimpleMDE.prototype.toggleHeadingBigger = function() {
|
|
toggleHeadingBigger(this);
|
|
};
|
|
SimpleMDE.prototype.toggleHeading1 = function() {
|
|
toggleHeading1(this);
|
|
};
|
|
SimpleMDE.prototype.toggleHeading2 = function() {
|
|
toggleHeading2(this);
|
|
};
|
|
SimpleMDE.prototype.toggleHeading3 = function() {
|
|
toggleHeading3(this);
|
|
};
|
|
SimpleMDE.prototype.toggleCodeBlock = function() {
|
|
toggleCodeBlock(this);
|
|
};
|
|
SimpleMDE.prototype.toggleUnorderedList = function() {
|
|
toggleUnorderedList(this);
|
|
};
|
|
SimpleMDE.prototype.toggleOrderedList = function() {
|
|
toggleOrderedList(this);
|
|
};
|
|
SimpleMDE.prototype.drawLink = function() {
|
|
drawLink(this);
|
|
};
|
|
SimpleMDE.prototype.drawImage = function() {
|
|
drawImage(this);
|
|
};
|
|
SimpleMDE.prototype.drawHorizontalRule = function() {
|
|
drawHorizontalRule(this);
|
|
};
|
|
SimpleMDE.prototype.undo = function() {
|
|
undo(this);
|
|
};
|
|
SimpleMDE.prototype.redo = function() {
|
|
redo(this);
|
|
};
|
|
SimpleMDE.prototype.togglePreview = function() {
|
|
togglePreview(this);
|
|
};
|
|
SimpleMDE.prototype.toggleSideBySide = function() {
|
|
toggleSideBySide(this);
|
|
};
|
|
SimpleMDE.prototype.toggleFullScreen = function() {
|
|
toggleFullScreen(this);
|
|
};
|
|
module.exports = SimpleMDE;
|