mirror of
https://github.com/sparksuite/simplemde-markdown-editor.git
synced 2024-06-28 18:30:14 +02:00
Merge pull request #237 from NextStepWebs/development
Placeholder, Character counter, New icons, Customizable keyboard shortcuts, Custom status items, Bug fixes
This commit is contained in:
commit
6318fc1b19
94
README.md
94
README.md
|
@ -90,14 +90,16 @@ simplemde.value("This text will appear in the editor");
|
||||||
- **allowAtxHeaderWithoutSpace**: If set to `true`, will render headers without a space after the `#`. Defaults to `false`.
|
- **allowAtxHeaderWithoutSpace**: If set to `true`, will render headers without a space after the `#`. Defaults to `false`.
|
||||||
- **strikethrough**: If set to `false`, will not process GFM strikethrough syntax. Defaults to `true`.
|
- **strikethrough**: If set to `false`, will not process GFM strikethrough syntax. Defaults to `true`.
|
||||||
- **underscoresBreakWords**: If set to `true`, let underscores be a delimiter for separating words. Defaults to `false`.
|
- **underscoresBreakWords**: If set to `true`, let underscores be a delimiter for separating words. Defaults to `false`.
|
||||||
|
- **placeholder**: Custom placeholder that should be displayed
|
||||||
- **previewRender**: Custom function for parsing the plaintext Markdown and returning HTML. Used when user previews.
|
- **previewRender**: Custom function for parsing the plaintext Markdown and returning HTML. Used when user previews.
|
||||||
- **renderingConfig**: Adjust settings for parsing the Markdown during previewing (not editing).
|
- **renderingConfig**: Adjust settings for parsing the Markdown during previewing (not editing).
|
||||||
- **singleLineBreaks**: If set to `false`, disable parsing GFM single line breaks. Defaults to `true`.
|
- **singleLineBreaks**: If set to `false`, disable parsing GFM single line breaks. Defaults to `true`.
|
||||||
- **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. For example, include the script and the CSS files like:<br>`<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>`<br>`<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">`
|
- **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. For example, include the script and the CSS files like:<br>`<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>`<br>`<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">`
|
||||||
|
- **shortcuts**: Keyboard shortcuts associated with this instance. Defaults to the [array of shortcuts](#keyboard-shortcuts).
|
||||||
- **showIcons**: An array of icon names to show. Can be used to show specific icons hidden by default without completely customizing the toolbar.
|
- **showIcons**: An array of icon names to show. Can be used to show specific icons hidden by default without completely customizing the toolbar.
|
||||||
- **spellChecker**: If set to `false`, disable the spell checker. Defaults to `true`.
|
- **spellChecker**: If set to `false`, disable the spell checker. Defaults to `true`.
|
||||||
- **status**: If set to `false`, hide the status bar. Defaults to `true`.
|
- **status**: If set to `false`, hide the status bar. Defaults to the array of built-in status bar items.
|
||||||
- Optionally, you can set an array of status bar elements to include, and in what order.
|
- Optionally, you can set an array of status bar items to include, and in what order. You can even define your own custom status bar items.
|
||||||
- **tabSize**: If set, customize the tab size. Defaults to `2`.
|
- **tabSize**: If set, customize the tab size. Defaults to `2`.
|
||||||
- **toolbar**: If set to `false`, hide the toolbar. Defaults to the [array of icons](#toolbar-icons).
|
- **toolbar**: If set to `false`, hide the toolbar. Defaults to the [array of icons](#toolbar-icons).
|
||||||
- **toolbarTips**: If set to `false`, disable toolbar button tips. Defaults to `true`.
|
- **toolbarTips**: If set to `false`, disable toolbar button tips. Defaults to `true`.
|
||||||
|
@ -131,6 +133,7 @@ var simplemde = new SimpleMDE({
|
||||||
strikethrough: false,
|
strikethrough: false,
|
||||||
underscoresBreakWords: true,
|
underscoresBreakWords: true,
|
||||||
},
|
},
|
||||||
|
placeholder: "Type here...",
|
||||||
previewRender: function(plainText) {
|
previewRender: function(plainText) {
|
||||||
return customMarkdownParser(plainText); // Returns HTML from a custom parser
|
return customMarkdownParser(plainText); // Returns HTML from a custom parser
|
||||||
},
|
},
|
||||||
|
@ -138,17 +141,30 @@ var simplemde = new SimpleMDE({
|
||||||
setTimeout(function(){
|
setTimeout(function(){
|
||||||
preview.innerHTML = customMarkdownParser(plainText);
|
preview.innerHTML = customMarkdownParser(plainText);
|
||||||
}, 250);
|
}, 250);
|
||||||
|
|
||||||
return "Loading...";
|
return "Loading...";
|
||||||
},
|
},
|
||||||
renderingConfig: {
|
renderingConfig: {
|
||||||
singleLineBreaks: false,
|
singleLineBreaks: false,
|
||||||
codeSyntaxHighlighting: true,
|
codeSyntaxHighlighting: true,
|
||||||
},
|
},
|
||||||
|
shortcuts: {
|
||||||
|
drawTable: "Cmd-Alt-T"
|
||||||
|
},
|
||||||
showIcons: ["code", "table"],
|
showIcons: ["code", "table"],
|
||||||
spellChecker: false,
|
spellChecker: false,
|
||||||
status: false,
|
status: false,
|
||||||
status: ["autosave", "lines", "words", "cursor"], // Optional usage
|
status: ["autosave", "lines", "words", "cursor"], // Optional usage
|
||||||
|
status: ["autosave", "lines", "words", "cursor", {
|
||||||
|
className: "keystrokes",
|
||||||
|
defaultValue: function(el) {
|
||||||
|
this.keystrokes = 0;
|
||||||
|
el.innerHTML = "0 Keystrokes";
|
||||||
|
},
|
||||||
|
onUpdate: function(el) {
|
||||||
|
el.innerHTML = ++this.keystrokes + " Keystrokes";
|
||||||
|
}
|
||||||
|
}], // Another optional usage, with a custom status bar item that counts keystrokes
|
||||||
tabSize: 4,
|
tabSize: 4,
|
||||||
toolbar: false,
|
toolbar: false,
|
||||||
toolbarTips: false,
|
toolbarTips: false,
|
||||||
|
@ -157,30 +173,33 @@ var simplemde = new SimpleMDE({
|
||||||
|
|
||||||
#### Toolbar icons
|
#### Toolbar icons
|
||||||
|
|
||||||
Below are the built-in toolbar icons (only some of which are enabled by default), which can be reorganized however you like. "Name" is the name of the icon, referenced in the JS. "Action" is either a function or a URL to open. "Class" is the class given to the icon. "Tooltip" is the small tooltip that appears via the `title=""` attribute. Any `Ctrl` or `Alt` in the title tags will be converted automatically to their Mac equivalents when needed. Additionally, you can add a separator between any icons by adding `"|"` to the toolbar array.
|
Below are the built-in toolbar icons (only some of which are enabled by default), which can be reorganized however you like. "Name" is the name of the icon, referenced in the JS. "Action" is either a function or a URL to open. "Class" is the class given to the icon. "Tooltip" is the small tooltip that appears via the `title=""` attribute. Note that shortcut hints are added automatically and reflect the specified action if it has a keybind assigned to it (i.e. with the value of `action` set to `bold` and that of `tooltip` set to `Bold`, the final text the user will see would be "Bold (Ctrl-B)").
|
||||||
|
|
||||||
|
Additionally, you can add a separator between any icons by adding `"|"` to the toolbar array.
|
||||||
|
|
||||||
Name | Action | Tooltip<br>Class
|
Name | Action | Tooltip<br>Class
|
||||||
:--- | :----- | :--------------
|
:--- | :----- | :--------------
|
||||||
bold | toggleBold | Bold (Ctrl+B)<br>fa fa-bold
|
bold | toggleBold | Bold<br>fa fa-bold
|
||||||
italic | toggleItalic | Italic (Ctrl+I)<br>fa fa-italic
|
italic | toggleItalic | Italic<br>fa fa-italic
|
||||||
strikethrough | toggleStrikethrough | Strikethrough<br>fa fa-strikethrough
|
strikethrough | toggleStrikethrough | Strikethrough<br>fa fa-strikethrough
|
||||||
heading | toggleHeadingSmaller | Heading (Ctrl+H)<br>fa fa-header
|
heading | toggleHeadingSmaller | Heading<br>fa fa-header
|
||||||
heading-smaller | toggleHeadingSmaller | Smaller Heading (Ctrl+H)<br>fa fa-header
|
heading-smaller | toggleHeadingSmaller | Smaller Heading<br>fa fa-header
|
||||||
heading-bigger | toggleHeadingBigger | Bigger Heading (Shift+Ctrl+H)<br>fa fa-lg fa-header
|
heading-bigger | toggleHeadingBigger | Bigger Heading<br>fa fa-lg fa-header
|
||||||
heading-1 | toggleHeading1 | Big Heading<br>fa fa-header fa-header-x fa-header-1
|
heading-1 | toggleHeading1 | Big Heading<br>fa fa-header fa-header-x fa-header-1
|
||||||
heading-2 | toggleHeading2 | Medium Heading<br>fa fa-header fa-header-x fa-header-2
|
heading-2 | toggleHeading2 | Medium Heading<br>fa fa-header fa-header-x fa-header-2
|
||||||
heading-3 | toggleHeading3 | Small Heading<br>fa fa-header fa-header-x fa-header-3
|
heading-3 | toggleHeading3 | Small Heading<br>fa fa-header fa-header-x fa-header-3
|
||||||
code | toggleCodeBlock | Code (Ctrl+Alt+C)<br>fa fa-code
|
code | toggleCodeBlock | Code<br>fa fa-code
|
||||||
quote | toggleBlockquote | Quote (Ctrl+')<br>fa fa-quote-left
|
quote | toggleBlockquote | Quote<br>fa fa-quote-left
|
||||||
unordered-list | toggleUnorderedList | Generic List (Ctrl+L)<br>fa fa-list-ul
|
unordered-list | toggleUnorderedList | Generic List<br>fa fa-list-ul
|
||||||
ordered-list | toggleOrderedList | Numbered List (Ctrl+Alt+L)<br>fa fa-list-ol
|
ordered-list | toggleOrderedList | Numbered List<br>fa fa-list-ol
|
||||||
link | drawLink | Create Link (Ctrl+K)<br>fa fa-link
|
clean-block | cleanBlock | Clean block<br>fa fa-eraser fa-clean-block
|
||||||
image | drawImage | Insert Image (Ctrl+Alt+I)<br>fa fa-picture-o
|
link | drawLink | Create Link<br>fa fa-link
|
||||||
|
image | drawImage | Insert Image<br>fa fa-picture-o
|
||||||
table | drawTable | Insert Table<br>fa fa-table
|
table | drawTable | Insert Table<br>fa fa-table
|
||||||
horizontal-rule | drawHorizontalRule | Insert Horizontal Line<br>fa fa-minus
|
horizontal-rule | drawHorizontalRule | Insert Horizontal Line<br>fa fa-minus
|
||||||
preview | togglePreview | Toggle Preview (Ctrl+P)<br>fa fa-eye no-disable
|
preview | togglePreview | Toggle Preview<br>fa fa-eye no-disable
|
||||||
side-by-side | toggleSideBySide | Toggle Side by Side (F9)<br>fa fa-columns no-disable no-mobile
|
side-by-side | toggleSideBySide | Toggle Side by Side<br>fa fa-columns no-disable no-mobile
|
||||||
fullscreen | toggleFullScreen | Toggle Fullscreen (F11)<br>fa fa-arrows-alt no-disable no-mobile
|
fullscreen | toggleFullScreen | Toggle Fullscreen<br>fa fa-arrows-alt no-disable no-mobile
|
||||||
guide | [This link](http://nextstepwebs.github.io/simplemde-markdown-editor/markdown-guide) | Markdown Guide<br>fa fa-question-circle
|
guide | [This link](http://nextstepwebs.github.io/simplemde-markdown-editor/markdown-guide) | Markdown Guide<br>fa fa-question-circle
|
||||||
|
|
||||||
Customize the toolbar using the `toolbar` option like:
|
Customize the toolbar using the `toolbar` option like:
|
||||||
|
@ -197,7 +216,7 @@ var simplemde = new SimpleMDE({
|
||||||
name: "bold",
|
name: "bold",
|
||||||
action: SimpleMDE.toggleBold,
|
action: SimpleMDE.toggleBold,
|
||||||
className: "fa fa-bold",
|
className: "fa fa-bold",
|
||||||
title: "Bold (Ctrl+B)",
|
title: "Bold",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "custom",
|
name: "custom",
|
||||||
|
@ -213,6 +232,43 @@ var simplemde = new SimpleMDE({
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
#### Keyboard shortcuts
|
||||||
|
|
||||||
|
SimpleMDE comes with an array of predefined keyboard shortcuts, but they can be altered with a configuration option. The list of default ones is as follows:
|
||||||
|
|
||||||
|
Shortcut | Action
|
||||||
|
:------- | :-----
|
||||||
|
*Cmd-'* | "toggleBlockquote"
|
||||||
|
*Cmd-B* | "toggleBold"
|
||||||
|
*Cmd-E* | "cleanBlock"
|
||||||
|
*Cmd-H* | "toggleHeadingSmaller"
|
||||||
|
*Cmd-I* | "toggleItalic"
|
||||||
|
*Cmd-K* | "drawLink"
|
||||||
|
*Cmd-L* | "toggleUnorderedList"
|
||||||
|
*Cmd-P* | "togglePreview"
|
||||||
|
*Cmd-Alt-C* | "toggleCodeBlock"
|
||||||
|
*Cmd-Alt-I* | "drawImage"
|
||||||
|
*Cmd-Alt-L* | "toggleOrderedList"
|
||||||
|
*Shift-Cmd-H* | "toggleHeadingBigger"
|
||||||
|
*F9* | "toggleSideBySide"
|
||||||
|
*F11* | "toggleFullScreen"
|
||||||
|
|
||||||
|
Here is how you can change a few, while leaving others untouched:
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
var simplemde = new SimpleMDE({
|
||||||
|
shortcuts: {
|
||||||
|
"toggleOrderedList": "Ctrl-Alt-K", // alter the shortcut for toggleOrderedList
|
||||||
|
"toggleCodeBlock": null, // unbind Ctrl-Alt-C
|
||||||
|
"drawTable": "Cmd-Alt-T" // bind Cmd-Alt-T to drawTable action, which doesn't come with a default shortcut
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
Shortcuts are automatically converted between platforms. If you define a shortcut as "Cmd-B", on PC that shortcut will be changed to "Ctrl-B". Conversely, a shortcut defined as "Ctrl-B" will become "Cmd-B" for Mac users.
|
||||||
|
|
||||||
|
The list of actions that can be bound is the same as the list of built-in actions available for [toolbar buttons](#toolbar-icons).
|
||||||
|
|
||||||
#### Height
|
#### Height
|
||||||
|
|
||||||
To change the minimum height (before it starts auto-growing):
|
To change the minimum height (before it starts auto-growing):
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "simplemde",
|
"name": "simplemde",
|
||||||
"version": "1.9.0",
|
"version": "1.10.0",
|
||||||
"homepage": "https://github.com/NextStepWebs/simplemde-markdown-editor",
|
"homepage": "https://github.com/NextStepWebs/simplemde-markdown-editor",
|
||||||
"authors": [
|
"authors": [
|
||||||
"Wes Cossick"
|
"Wes Cossick"
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
/**
|
/**
|
||||||
* simplemde v1.9.0
|
* simplemde v1.10.0
|
||||||
* Copyright Next Step Webs, Inc.
|
* Copyright Next Step Webs, Inc.
|
||||||
* @link https://github.com/NextStepWebs/simplemde-markdown-editor
|
* @link https://github.com/NextStepWebs/simplemde-markdown-editor
|
||||||
* @license MIT
|
* @license MIT
|
||||||
|
@ -551,6 +551,10 @@ span.CodeMirror-selectedtext { background: none; }
|
||||||
content: 'words: '
|
content: 'words: '
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.editor-statusbar .characters:before {
|
||||||
|
content: 'characters: '
|
||||||
|
}
|
||||||
|
|
||||||
.editor-preview {
|
.editor-preview {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -659,6 +663,10 @@ span.CodeMirror-selectedtext { background: none; }
|
||||||
.CodeMirror .CodeMirror-code .cm-strikethrough {
|
.CodeMirror .CodeMirror-code .cm-strikethrough {
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.CodeMirror .CodeMirror-placeholder {
|
||||||
|
opacity: .5;
|
||||||
|
}
|
||||||
.CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
|
.CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
|
||||||
background: rgba(255, 0, 0, .15);
|
background: rgba(255, 0, 0, .15);
|
||||||
}
|
}
|
File diff suppressed because one or more lines are too long
|
@ -1,5 +1,5 @@
|
||||||
/**
|
/**
|
||||||
* simplemde v1.9.0
|
* simplemde v1.10.0
|
||||||
* Copyright Next Step Webs, Inc.
|
* Copyright Next Step Webs, Inc.
|
||||||
* @link https://github.com/NextStepWebs/simplemde-markdown-editor
|
* @link https://github.com/NextStepWebs/simplemde-markdown-editor
|
||||||
* @license MIT
|
* @license MIT
|
||||||
|
@ -105,7 +105,7 @@ if(!String.prototype.includes) {
|
||||||
}).call(global, module, undefined, undefined);
|
}).call(global, module, undefined, undefined);
|
||||||
|
|
||||||
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
|
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
|
||||||
},{"D:\\My Web Sites\\simplemde-markdown-editor\\node_modules\\codemirror-spell-checker\\src\\js\\typo.js":2,"codemirror":6}],2:[function(require,module,exports){
|
},{"D:\\My Web Sites\\simplemde-markdown-editor\\node_modules\\codemirror-spell-checker\\src\\js\\typo.js":2,"codemirror":7}],2:[function(require,module,exports){
|
||||||
(function (global){
|
(function (global){
|
||||||
; var __browserify_shim_require__=require;(function browserifyShim(module, exports, require, define, browserify_shim__define__module__export__) {
|
; var __browserify_shim_require__=require;(function browserifyShim(module, exports, require, define, browserify_shim__define__module__export__) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
@ -922,7 +922,69 @@ Typo.prototype = {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
},{"../../lib/codemirror":6}],4:[function(require,module,exports){
|
},{"../../lib/codemirror":7}],4:[function(require,module,exports){
|
||||||
|
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||||
|
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||||
|
|
||||||
|
(function(mod) {
|
||||||
|
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||||
|
mod(require("../../lib/codemirror"));
|
||||||
|
else if (typeof define == "function" && define.amd) // AMD
|
||||||
|
define(["../../lib/codemirror"], mod);
|
||||||
|
else // Plain browser env
|
||||||
|
mod(CodeMirror);
|
||||||
|
})(function(CodeMirror) {
|
||||||
|
CodeMirror.defineOption("placeholder", "", function(cm, val, old) {
|
||||||
|
var prev = old && old != CodeMirror.Init;
|
||||||
|
if (val && !prev) {
|
||||||
|
cm.on("blur", onBlur);
|
||||||
|
cm.on("change", onChange);
|
||||||
|
onChange(cm);
|
||||||
|
} else if (!val && prev) {
|
||||||
|
cm.off("blur", onBlur);
|
||||||
|
cm.off("change", onChange);
|
||||||
|
clearPlaceholder(cm);
|
||||||
|
var wrapper = cm.getWrapperElement();
|
||||||
|
wrapper.className = wrapper.className.replace(" CodeMirror-empty", "");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (val && !cm.hasFocus()) onBlur(cm);
|
||||||
|
});
|
||||||
|
|
||||||
|
function clearPlaceholder(cm) {
|
||||||
|
if (cm.state.placeholder) {
|
||||||
|
cm.state.placeholder.parentNode.removeChild(cm.state.placeholder);
|
||||||
|
cm.state.placeholder = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function setPlaceholder(cm) {
|
||||||
|
clearPlaceholder(cm);
|
||||||
|
var elt = cm.state.placeholder = document.createElement("pre");
|
||||||
|
elt.style.cssText = "height: 0; overflow: visible";
|
||||||
|
elt.className = "CodeMirror-placeholder";
|
||||||
|
var placeHolder = cm.getOption("placeholder")
|
||||||
|
if (typeof placeHolder == "string") placeHolder = document.createTextNode(placeHolder)
|
||||||
|
elt.appendChild(placeHolder)
|
||||||
|
cm.display.lineSpace.insertBefore(elt, cm.display.lineSpace.firstChild);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onBlur(cm) {
|
||||||
|
if (isEmpty(cm)) setPlaceholder(cm);
|
||||||
|
}
|
||||||
|
function onChange(cm) {
|
||||||
|
var wrapper = cm.getWrapperElement(), empty = isEmpty(cm);
|
||||||
|
wrapper.className = wrapper.className.replace(" CodeMirror-empty", "") + (empty ? " CodeMirror-empty" : "");
|
||||||
|
|
||||||
|
if (empty) setPlaceholder(cm);
|
||||||
|
else clearPlaceholder(cm);
|
||||||
|
}
|
||||||
|
|
||||||
|
function isEmpty(cm) {
|
||||||
|
return (cm.lineCount() === 1) && (cm.getLine(0) === "");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
},{"../../lib/codemirror":7}],5:[function(require,module,exports){
|
||||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||||
|
|
||||||
|
@ -975,7 +1037,7 @@ Typo.prototype = {
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
},{"../../lib/codemirror":6}],5:[function(require,module,exports){
|
},{"../../lib/codemirror":7}],6:[function(require,module,exports){
|
||||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||||
|
|
||||||
|
@ -1062,7 +1124,7 @@ CodeMirror.overlayMode = function(base, overlay, combine) {
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
},{"../../lib/codemirror":6}],6:[function(require,module,exports){
|
},{"../../lib/codemirror":7}],7:[function(require,module,exports){
|
||||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||||
|
|
||||||
|
@ -9942,7 +10004,7 @@ CodeMirror.overlayMode = function(base, overlay, combine) {
|
||||||
return CodeMirror;
|
return CodeMirror;
|
||||||
});
|
});
|
||||||
|
|
||||||
},{}],7:[function(require,module,exports){
|
},{}],8:[function(require,module,exports){
|
||||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||||
|
|
||||||
|
@ -10074,7 +10136,7 @@ CodeMirror.defineMode("gfm", function(config, modeConfig) {
|
||||||
CodeMirror.defineMIME("text/x-gfm", "gfm");
|
CodeMirror.defineMIME("text/x-gfm", "gfm");
|
||||||
});
|
});
|
||||||
|
|
||||||
},{"../../addon/mode/overlay":5,"../../lib/codemirror":6,"../markdown/markdown":8}],8:[function(require,module,exports){
|
},{"../../addon/mode/overlay":6,"../../lib/codemirror":7,"../markdown/markdown":9}],9:[function(require,module,exports){
|
||||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||||
|
|
||||||
|
@ -10879,7 +10941,7 @@ CodeMirror.defineMIME("text/x-markdown", "markdown");
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
},{"../../lib/codemirror":6,"../meta":9,"../xml/xml":10}],9:[function(require,module,exports){
|
},{"../../lib/codemirror":7,"../meta":10,"../xml/xml":11}],10:[function(require,module,exports){
|
||||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||||
|
|
||||||
|
@ -11078,7 +11140,7 @@ CodeMirror.defineMIME("text/x-markdown", "markdown");
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
},{"../lib/codemirror":6}],10:[function(require,module,exports){
|
},{"../lib/codemirror":7}],11:[function(require,module,exports){
|
||||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||||
|
|
||||||
|
@ -11465,7 +11527,7 @@ if (!CodeMirror.mimeModes.hasOwnProperty("text/html"))
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
},{"../../lib/codemirror":6}],11:[function(require,module,exports){
|
},{"../../lib/codemirror":7}],12:[function(require,module,exports){
|
||||||
(function (global){
|
(function (global){
|
||||||
/**
|
/**
|
||||||
* marked - a markdown parser
|
* marked - a markdown parser
|
||||||
|
@ -12754,7 +12816,7 @@ if (typeof module !== 'undefined' && typeof exports === 'object') {
|
||||||
}());
|
}());
|
||||||
|
|
||||||
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
|
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
|
||||||
},{}],12:[function(require,module,exports){
|
},{}],13:[function(require,module,exports){
|
||||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||||
|
|
||||||
|
@ -12800,7 +12862,7 @@ CodeMirror.commands.shiftTabAndUnindentMarkdownList = function (cm) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
},{"codemirror":6}],13:[function(require,module,exports){
|
},{"codemirror":7}],14:[function(require,module,exports){
|
||||||
/*global require,module*/
|
/*global require,module*/
|
||||||
"use strict";
|
"use strict";
|
||||||
var CodeMirror = require("codemirror");
|
var CodeMirror = require("codemirror");
|
||||||
|
@ -12809,6 +12871,7 @@ require("./codemirror/tablist");
|
||||||
require("codemirror/addon/display/fullscreen.js");
|
require("codemirror/addon/display/fullscreen.js");
|
||||||
require("codemirror/mode/markdown/markdown.js");
|
require("codemirror/mode/markdown/markdown.js");
|
||||||
require("codemirror/addon/mode/overlay.js");
|
require("codemirror/addon/mode/overlay.js");
|
||||||
|
require("codemirror/addon/display/placeholder.js");
|
||||||
require("codemirror/mode/gfm/gfm.js");
|
require("codemirror/mode/gfm/gfm.js");
|
||||||
require("codemirror/mode/xml/xml.js");
|
require("codemirror/mode/xml/xml.js");
|
||||||
require("spell-checker");
|
require("spell-checker");
|
||||||
|
@ -12818,18 +12881,56 @@ var marked = require("marked");
|
||||||
// Some variables
|
// Some variables
|
||||||
var isMac = /Mac/.test(navigator.platform);
|
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 = {
|
var shortcuts = {
|
||||||
"Cmd-B": toggleBold,
|
"toggleBold": "Cmd-B",
|
||||||
"Cmd-I": toggleItalic,
|
"toggleItalic": "Cmd-I",
|
||||||
"Cmd-K": drawLink,
|
"drawLink": "Cmd-K",
|
||||||
"Cmd-H": toggleHeadingSmaller,
|
"toggleHeadingSmaller": "Cmd-H",
|
||||||
"Shift-Cmd-H": toggleHeadingBigger,
|
"toggleHeadingBigger": "Shift-Cmd-H",
|
||||||
"Cmd-Alt-I": drawImage,
|
"cleanBlock": "Cmd-E",
|
||||||
"Cmd-'": toggleBlockquote,
|
"drawImage": "Cmd-Alt-I",
|
||||||
"Cmd-Alt-L": toggleOrderedList,
|
"toggleBlockquote": "Cmd-'",
|
||||||
"Cmd-L": toggleUnorderedList,
|
"toggleOrderedList": "Cmd-Alt-L",
|
||||||
"Cmd-Alt-C": toggleCodeBlock,
|
"toggleUnorderedList": "Cmd-L",
|
||||||
"Cmd-P": togglePreview
|
"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 isMobile = function() {
|
||||||
|
@ -12857,13 +12958,13 @@ function fixShortcut(name) {
|
||||||
/**
|
/**
|
||||||
* Create icon element for toolbar.
|
* Create icon element for toolbar.
|
||||||
*/
|
*/
|
||||||
function createIcon(options, enableTooltips) {
|
function createIcon(options, enableTooltips, shortcuts) {
|
||||||
options = options || {};
|
options = options || {};
|
||||||
var el = document.createElement("a");
|
var el = document.createElement("a");
|
||||||
enableTooltips = (enableTooltips == undefined) ? true : enableTooltips;
|
enableTooltips = (enableTooltips == undefined) ? true : enableTooltips;
|
||||||
|
|
||||||
if(options.title && enableTooltips) {
|
if(options.title && enableTooltips) {
|
||||||
el.title = options.title;
|
el.title = createTootlip(options.title, options.action, shortcuts);
|
||||||
|
|
||||||
if(isMac) {
|
if(isMac) {
|
||||||
el.title = el.title.replace("Ctrl", "⌘");
|
el.title = el.title.replace("Ctrl", "⌘");
|
||||||
|
@ -12883,6 +12984,19 @@ function createSep() {
|
||||||
return el;
|
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.
|
* The state of CodeMirror at the given position.
|
||||||
|
@ -12917,6 +13031,12 @@ function getState(cm, pos) {
|
||||||
ret.strikethrough = true;
|
ret.strikethrough = true;
|
||||||
} else if(data === "comment") {
|
} else if(data === "comment") {
|
||||||
ret.code = true;
|
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;
|
return ret;
|
||||||
|
@ -13067,6 +13187,14 @@ function toggleOrderedList(editor) {
|
||||||
_toggleLine(cm, "ordered-list");
|
_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.
|
* Action for drawing a link.
|
||||||
*/
|
*/
|
||||||
|
@ -13136,7 +13264,7 @@ function toggleSideBySide(editor) {
|
||||||
var wrapper = cm.getWrapperElement();
|
var wrapper = cm.getWrapperElement();
|
||||||
var preview = wrapper.nextSibling;
|
var preview = wrapper.nextSibling;
|
||||||
var toolbarButton = editor.toolbarElements["side-by-side"];
|
var toolbarButton = editor.toolbarElements["side-by-side"];
|
||||||
|
var useSideBySideListener = false;
|
||||||
if(/editor-preview-active-side/.test(preview.className)) {
|
if(/editor-preview-active-side/.test(preview.className)) {
|
||||||
preview.className = preview.className.replace(
|
preview.className = preview.className.replace(
|
||||||
/\s*editor-preview-active-side\s*/g, ""
|
/\s*editor-preview-active-side\s*/g, ""
|
||||||
|
@ -13154,6 +13282,7 @@ function toggleSideBySide(editor) {
|
||||||
}, 1);
|
}, 1);
|
||||||
toolbarButton.className += " active";
|
toolbarButton.className += " active";
|
||||||
wrapper.className += " CodeMirror-sided";
|
wrapper.className += " CodeMirror-sided";
|
||||||
|
useSideBySideListener = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hide normal preview if active
|
// Hide normal preview if active
|
||||||
|
@ -13168,13 +13297,20 @@ function toggleSideBySide(editor) {
|
||||||
toolbar_div.className = toolbar_div.className.replace(/\s*disabled-for-preview*/g, "");
|
toolbar_div.className = toolbar_div.className.replace(/\s*disabled-for-preview*/g, "");
|
||||||
}
|
}
|
||||||
|
|
||||||
// Start preview with the current text
|
var sideBySideRenderingFunction = function() {
|
||||||
preview.innerHTML = editor.options.previewRender(editor.value(), preview);
|
|
||||||
|
|
||||||
// Updates preview
|
|
||||||
cm.on("update", function() {
|
|
||||||
preview.innerHTML = editor.options.previewRender(editor.value(), preview);
|
preview.innerHTML = editor.options.previewRender(editor.value(), preview);
|
||||||
});
|
};
|
||||||
|
|
||||||
|
if(!cm.sideBySideRenderingFunction) {
|
||||||
|
cm.sideBySideRenderingFunction = sideBySideRenderingFunction;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(useSideBySideListener) {
|
||||||
|
preview.innerHTML = editor.options.previewRender(editor.value(), preview);
|
||||||
|
cm.on("update", cm.sideBySideRenderingFunction);
|
||||||
|
} else {
|
||||||
|
cm.off("update", cm.sideBySideRenderingFunction);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -13423,6 +13559,28 @@ function _toggleBlock(editor, type, start_chars, end_chars) {
|
||||||
cm.focus();
|
cm.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function _cleanBlock(cm) {
|
||||||
|
if(/editor-preview-active/.test(cm.getWrapperElement().lastChild.className))
|
||||||
|
return;
|
||||||
|
|
||||||
|
var startPoint = cm.getCursor("start");
|
||||||
|
var endPoint = cm.getCursor("end");
|
||||||
|
var text;
|
||||||
|
|
||||||
|
for(var line = startPoint.line; line <= endPoint.line; line++) {
|
||||||
|
text = cm.getLine(line);
|
||||||
|
text = text.replace(/^[ ]*([# ]+|\*|\-|[> ]+|[0-9]+(.|\)))[ ]*/, "");
|
||||||
|
|
||||||
|
cm.replaceRange(text, {
|
||||||
|
line: line,
|
||||||
|
ch: 0
|
||||||
|
}, {
|
||||||
|
line: line,
|
||||||
|
ch: 99999999999999
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Merge the properties of one object into another.
|
// Merge the properties of one object into another.
|
||||||
function _mergeProperties(target, source) {
|
function _mergeProperties(target, source) {
|
||||||
for(var property in source) {
|
for(var property in source) {
|
||||||
|
@ -13474,14 +13632,14 @@ var toolbarBuiltInButtons = {
|
||||||
name: "bold",
|
name: "bold",
|
||||||
action: toggleBold,
|
action: toggleBold,
|
||||||
className: "fa fa-bold",
|
className: "fa fa-bold",
|
||||||
title: "Bold (Ctrl+B)",
|
title: "Bold",
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
"italic": {
|
"italic": {
|
||||||
name: "italic",
|
name: "italic",
|
||||||
action: toggleItalic,
|
action: toggleItalic,
|
||||||
className: "fa fa-italic",
|
className: "fa fa-italic",
|
||||||
title: "Italic (Ctrl+I)",
|
title: "Italic",
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
"strikethrough": {
|
"strikethrough": {
|
||||||
|
@ -13494,20 +13652,20 @@ var toolbarBuiltInButtons = {
|
||||||
name: "heading",
|
name: "heading",
|
||||||
action: toggleHeadingSmaller,
|
action: toggleHeadingSmaller,
|
||||||
className: "fa fa-header",
|
className: "fa fa-header",
|
||||||
title: "Heading (Ctrl+H)",
|
title: "Heading",
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
"heading-smaller": {
|
"heading-smaller": {
|
||||||
name: "heading-smaller",
|
name: "heading-smaller",
|
||||||
action: toggleHeadingSmaller,
|
action: toggleHeadingSmaller,
|
||||||
className: "fa fa-header fa-header-x fa-header-smaller",
|
className: "fa fa-header fa-header-x fa-header-smaller",
|
||||||
title: "Smaller Heading (Ctrl+H)"
|
title: "Smaller Heading"
|
||||||
},
|
},
|
||||||
"heading-bigger": {
|
"heading-bigger": {
|
||||||
name: "heading-bigger",
|
name: "heading-bigger",
|
||||||
action: toggleHeadingBigger,
|
action: toggleHeadingBigger,
|
||||||
className: "fa fa-header fa-header-x fa-header-bigger",
|
className: "fa fa-header fa-header-x fa-header-bigger",
|
||||||
title: "Bigger Heading (Shift+Ctrl+H)"
|
title: "Bigger Heading"
|
||||||
},
|
},
|
||||||
"heading-1": {
|
"heading-1": {
|
||||||
name: "heading-1",
|
name: "heading-1",
|
||||||
|
@ -13534,29 +13692,35 @@ var toolbarBuiltInButtons = {
|
||||||
name: "code",
|
name: "code",
|
||||||
action: toggleCodeBlock,
|
action: toggleCodeBlock,
|
||||||
className: "fa fa-code",
|
className: "fa fa-code",
|
||||||
title: "Code (Ctrl+Alt+C)"
|
title: "Code"
|
||||||
},
|
},
|
||||||
"quote": {
|
"quote": {
|
||||||
name: "quote",
|
name: "quote",
|
||||||
action: toggleBlockquote,
|
action: toggleBlockquote,
|
||||||
className: "fa fa-quote-left",
|
className: "fa fa-quote-left",
|
||||||
title: "Quote (Ctrl+')",
|
title: "Quote",
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
"unordered-list": {
|
"unordered-list": {
|
||||||
name: "unordered-list",
|
name: "unordered-list",
|
||||||
action: toggleUnorderedList,
|
action: toggleUnorderedList,
|
||||||
className: "fa fa-list-ul",
|
className: "fa fa-list-ul",
|
||||||
title: "Generic List (Ctrl+L)",
|
title: "Generic List",
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
"ordered-list": {
|
"ordered-list": {
|
||||||
name: "ordered-list",
|
name: "ordered-list",
|
||||||
action: toggleOrderedList,
|
action: toggleOrderedList,
|
||||||
className: "fa fa-list-ol",
|
className: "fa fa-list-ol",
|
||||||
title: "Numbered List (Ctrl+Alt+L)",
|
title: "Numbered List",
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
|
"clean-block": {
|
||||||
|
name: "clean-block",
|
||||||
|
action: cleanBlock,
|
||||||
|
className: "fa fa-eraser fa-clean-block",
|
||||||
|
title: "Clean block"
|
||||||
|
},
|
||||||
"separator-2": {
|
"separator-2": {
|
||||||
name: "separator-2"
|
name: "separator-2"
|
||||||
},
|
},
|
||||||
|
@ -13564,14 +13728,14 @@ var toolbarBuiltInButtons = {
|
||||||
name: "link",
|
name: "link",
|
||||||
action: drawLink,
|
action: drawLink,
|
||||||
className: "fa fa-link",
|
className: "fa fa-link",
|
||||||
title: "Create Link (Ctrl+K)",
|
title: "Create Link",
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
"image": {
|
"image": {
|
||||||
name: "image",
|
name: "image",
|
||||||
action: drawImage,
|
action: drawImage,
|
||||||
className: "fa fa-picture-o",
|
className: "fa fa-picture-o",
|
||||||
title: "Insert Image (Ctrl+Alt+I)",
|
title: "Insert Image",
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
"table": {
|
"table": {
|
||||||
|
@ -13593,36 +13757,54 @@ var toolbarBuiltInButtons = {
|
||||||
name: "preview",
|
name: "preview",
|
||||||
action: togglePreview,
|
action: togglePreview,
|
||||||
className: "fa fa-eye no-disable",
|
className: "fa fa-eye no-disable",
|
||||||
title: "Toggle Preview (Ctrl+P)",
|
title: "Toggle Preview",
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
"side-by-side": {
|
"side-by-side": {
|
||||||
name: "side-by-side",
|
name: "side-by-side",
|
||||||
action: toggleSideBySide,
|
action: toggleSideBySide,
|
||||||
className: "fa fa-columns no-disable no-mobile",
|
className: "fa fa-columns no-disable no-mobile",
|
||||||
title: "Toggle Side by Side (F9)",
|
title: "Toggle Side by Side",
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
"fullscreen": {
|
"fullscreen": {
|
||||||
name: "fullscreen",
|
name: "fullscreen",
|
||||||
action: toggleFullScreen,
|
action: toggleFullScreen,
|
||||||
className: "fa fa-arrows-alt no-disable no-mobile",
|
className: "fa fa-arrows-alt no-disable no-mobile",
|
||||||
title: "Toggle Fullscreen (F11)",
|
title: "Toggle Fullscreen",
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
|
"separator-4": {
|
||||||
|
name: "separator-4"
|
||||||
|
},
|
||||||
"guide": {
|
"guide": {
|
||||||
name: "guide",
|
name: "guide",
|
||||||
action: "http://nextstepwebs.github.io/simplemde-markdown-editor/markdown-guide",
|
action: "http://nextstepwebs.github.io/simplemde-markdown-editor/markdown-guide",
|
||||||
className: "fa fa-question-circle",
|
className: "fa fa-question-circle",
|
||||||
title: "Markdown Guide",
|
title: "Markdown Guide",
|
||||||
default: true
|
default: true
|
||||||
|
},
|
||||||
|
"separator-5": {
|
||||||
|
name: "separator-5"
|
||||||
|
},
|
||||||
|
"undo": {
|
||||||
|
name: "undo",
|
||||||
|
action: undo,
|
||||||
|
className: "fa fa-undo no-disable",
|
||||||
|
title: "Undo"
|
||||||
|
},
|
||||||
|
"redo": {
|
||||||
|
name: "redo",
|
||||||
|
action: redo,
|
||||||
|
className: "fa fa-repeat no-disable",
|
||||||
|
title: "Redo"
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
var insertTexts = {
|
var insertTexts = {
|
||||||
link: ["[", "](http://)"],
|
link: ["[", "](http://)"],
|
||||||
image: ["![](http://", ")"],
|
image: ["![](http://", ")"],
|
||||||
table: ["", "\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text | Text | Text |\n\n"],
|
table: ["", "\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text | Text | Text |\n\n"],
|
||||||
horizontalRule: ["", "\n\n-----\n\n"]
|
horizontalRule: ["", "\n\n-----\n\n"]
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -13728,6 +13910,10 @@ function SimpleMDE(options) {
|
||||||
options.blockStyles = extend({}, blockStyles, options.blockStyles || {});
|
options.blockStyles = extend({}, blockStyles, options.blockStyles || {});
|
||||||
|
|
||||||
|
|
||||||
|
// Merging the shortcuts, with the given options
|
||||||
|
options.shortcuts = extend({}, shortcuts, options.shortcuts || {});
|
||||||
|
|
||||||
|
|
||||||
// Change unique_id to uniqueId for backwards compatibility
|
// Change unique_id to uniqueId for backwards compatibility
|
||||||
if(options.autosave != undefined && options.autosave.unique_id != undefined && options.autosave.unique_id != "")
|
if(options.autosave != undefined && options.autosave.unique_id != undefined && options.autosave.unique_id != "")
|
||||||
options.autosave.uniqueId = options.autosave.unique_id;
|
options.autosave.uniqueId = options.autosave.unique_id;
|
||||||
|
@ -13798,23 +13984,20 @@ SimpleMDE.prototype.render = function(el) {
|
||||||
var self = this;
|
var self = this;
|
||||||
var keyMaps = {};
|
var keyMaps = {};
|
||||||
|
|
||||||
for(var key in shortcuts) {
|
for(var key in options.shortcuts) {
|
||||||
(function(key) {
|
// null stands for "do not bind this command"
|
||||||
keyMaps[fixShortcut(key)] = function() {
|
if(options.shortcuts[key] !== null && bindings[key] !== null) {
|
||||||
shortcuts[key](self);
|
(function(key) {
|
||||||
};
|
keyMaps[fixShortcut(options.shortcuts[key])] = function() {
|
||||||
})(key);
|
bindings[key](self);
|
||||||
|
};
|
||||||
|
})(key);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
keyMaps["Enter"] = "newlineAndIndentContinueMarkdownList";
|
keyMaps["Enter"] = "newlineAndIndentContinueMarkdownList";
|
||||||
keyMaps["Tab"] = "tabAndIndentMarkdownList";
|
keyMaps["Tab"] = "tabAndIndentMarkdownList";
|
||||||
keyMaps["Shift-Tab"] = "shiftTabAndUnindentMarkdownList";
|
keyMaps["Shift-Tab"] = "shiftTabAndUnindentMarkdownList";
|
||||||
keyMaps["F11"] = function() {
|
|
||||||
toggleFullScreen(self);
|
|
||||||
};
|
|
||||||
keyMaps["F9"] = function() {
|
|
||||||
toggleSideBySide(self);
|
|
||||||
};
|
|
||||||
keyMaps["Esc"] = function(cm) {
|
keyMaps["Esc"] = function(cm) {
|
||||||
if(cm.getOption("fullScreen")) toggleFullScreen(self);
|
if(cm.getOption("fullScreen")) toggleFullScreen(self);
|
||||||
};
|
};
|
||||||
|
@ -13850,7 +14033,8 @@ SimpleMDE.prototype.render = function(el) {
|
||||||
autofocus: (options.autofocus === true) ? true : false,
|
autofocus: (options.autofocus === true) ? true : false,
|
||||||
extraKeys: keyMaps,
|
extraKeys: keyMaps,
|
||||||
lineWrapping: (options.lineWrapping === false) ? false : true,
|
lineWrapping: (options.lineWrapping === false) ? false : true,
|
||||||
allowDropFileTypes: ["text/plain"]
|
allowDropFileTypes: ["text/plain"],
|
||||||
|
placeholder: options.placeholder || el.getAttribute("placeholder") || ""
|
||||||
});
|
});
|
||||||
|
|
||||||
if(options.toolbar !== false) {
|
if(options.toolbar !== false) {
|
||||||
|
@ -13923,8 +14107,8 @@ SimpleMDE.prototype.autosave = function() {
|
||||||
|
|
||||||
SimpleMDE.prototype.clearAutosavedValue = function() {
|
SimpleMDE.prototype.clearAutosavedValue = function() {
|
||||||
if(localStorage) {
|
if(localStorage) {
|
||||||
if(this.options.autosave.uniqueId == undefined || this.options.autosave.uniqueId == "") {
|
if(this.options.autosave == undefined || this.options.autosave.uniqueId == undefined || this.options.autosave.uniqueId == "") {
|
||||||
console.log("SimpleMDE: You must set a uniqueId to use the autosave feature");
|
console.log("SimpleMDE: You must set a uniqueId to clear the autosave value");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -13993,7 +14177,7 @@ SimpleMDE.prototype.createToolbar = function(items) {
|
||||||
|
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
var toolbar_data = {};
|
var toolbarData = {};
|
||||||
self.toolbar = items;
|
self.toolbar = items;
|
||||||
|
|
||||||
for(i = 0; i < items.length; i++) {
|
for(i = 0; i < items.length; i++) {
|
||||||
|
@ -14008,12 +14192,29 @@ SimpleMDE.prototype.createToolbar = function(items) {
|
||||||
if((items[i].name == "fullscreen" || items[i].name == "side-by-side") && isMobile())
|
if((items[i].name == "fullscreen" || items[i].name == "side-by-side") && isMobile())
|
||||||
continue;
|
continue;
|
||||||
|
|
||||||
|
|
||||||
|
// Don't include trailing separators
|
||||||
|
if(items[i] === "|") {
|
||||||
|
var nonSeparatorIconsFollow = false;
|
||||||
|
|
||||||
|
for(var x = (i + 1); x < items.length; x++) {
|
||||||
|
if(items[x] !== "|") {
|
||||||
|
nonSeparatorIconsFollow = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!nonSeparatorIconsFollow)
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Create the icon and append to the toolbar
|
||||||
(function(item) {
|
(function(item) {
|
||||||
var el;
|
var el;
|
||||||
if(item === "|") {
|
if(item === "|") {
|
||||||
el = createSep();
|
el = createSep();
|
||||||
} else {
|
} else {
|
||||||
el = createIcon(item, self.options.toolbarTips);
|
el = createIcon(item, self.options.toolbarTips, self.options.shortcuts);
|
||||||
}
|
}
|
||||||
|
|
||||||
// bind events, special for info
|
// bind events, special for info
|
||||||
|
@ -14027,20 +14228,21 @@ SimpleMDE.prototype.createToolbar = function(items) {
|
||||||
el.target = "_blank";
|
el.target = "_blank";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
toolbar_data[item.name || item] = el;
|
|
||||||
|
toolbarData[item.name || item] = el;
|
||||||
bar.appendChild(el);
|
bar.appendChild(el);
|
||||||
})(items[i]);
|
})(items[i]);
|
||||||
}
|
}
|
||||||
|
|
||||||
self.toolbarElements = toolbar_data;
|
self.toolbarElements = toolbarData;
|
||||||
|
|
||||||
var cm = this.codemirror;
|
var cm = this.codemirror;
|
||||||
cm.on("cursorActivity", function() {
|
cm.on("cursorActivity", function() {
|
||||||
var stat = getState(cm);
|
var stat = getState(cm);
|
||||||
|
|
||||||
for(var key in toolbar_data) {
|
for(var key in toolbarData) {
|
||||||
(function(key) {
|
(function(key) {
|
||||||
var el = toolbar_data[key];
|
var el = toolbarData[key];
|
||||||
if(stat[key]) {
|
if(stat[key]) {
|
||||||
el.className += " active";
|
el.className += " active";
|
||||||
} else if(key != "fullscreen" && key != "side-by-side") {
|
} else if(key != "fullscreen" && key != "side-by-side") {
|
||||||
|
@ -14056,44 +14258,115 @@ SimpleMDE.prototype.createToolbar = function(items) {
|
||||||
};
|
};
|
||||||
|
|
||||||
SimpleMDE.prototype.createStatusbar = function(status) {
|
SimpleMDE.prototype.createStatusbar = function(status) {
|
||||||
|
// Initialize
|
||||||
status = status || this.options.status;
|
status = status || this.options.status;
|
||||||
var options = this.options;
|
var options = this.options;
|
||||||
|
var cm = this.codemirror;
|
||||||
|
|
||||||
if(!status || status.length === 0) return;
|
|
||||||
|
|
||||||
|
// Make sure the status variable is valid
|
||||||
|
if(!status || status.length === 0)
|
||||||
|
return;
|
||||||
|
|
||||||
|
|
||||||
|
// Set up the built-in items
|
||||||
|
var items = [];
|
||||||
|
var i, onUpdate, defaultValue;
|
||||||
|
|
||||||
|
for(i = 0; i < status.length; i++) {
|
||||||
|
// Reset some values
|
||||||
|
onUpdate = undefined;
|
||||||
|
defaultValue = undefined;
|
||||||
|
|
||||||
|
|
||||||
|
// Handle if custom or not
|
||||||
|
if(typeof status[i] === "object") {
|
||||||
|
items.push({
|
||||||
|
className: status[i].className,
|
||||||
|
defaultValue: status[i].defaultValue,
|
||||||
|
onUpdate: status[i].onUpdate
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
var name = status[i];
|
||||||
|
|
||||||
|
if(name === "words") {
|
||||||
|
defaultValue = function(el) {
|
||||||
|
el.innerHTML = "0";
|
||||||
|
};
|
||||||
|
onUpdate = function(el) {
|
||||||
|
el.innerHTML = wordCount(cm.getValue());
|
||||||
|
};
|
||||||
|
} else if(name === "lines") {
|
||||||
|
defaultValue = function(el) {
|
||||||
|
el.innerHTML = "0";
|
||||||
|
};
|
||||||
|
onUpdate = function(el) {
|
||||||
|
el.innerHTML = cm.lineCount();
|
||||||
|
};
|
||||||
|
} else if(name === "cursor") {
|
||||||
|
defaultValue = function(el) {
|
||||||
|
el.innerHTML = "0:0";
|
||||||
|
};
|
||||||
|
onUpdate = function(el) {
|
||||||
|
var pos = cm.getCursor();
|
||||||
|
el.innerHTML = pos.line + ":" + pos.ch;
|
||||||
|
};
|
||||||
|
} else if(name === "autosave") {
|
||||||
|
defaultValue = function(el) {
|
||||||
|
if(options.autosave != undefined && options.autosave.enabled === true) {
|
||||||
|
el.setAttribute("id", "autosaved");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
items.push({
|
||||||
|
className: name,
|
||||||
|
defaultValue: defaultValue,
|
||||||
|
onUpdate: onUpdate
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Create element for the status bar
|
||||||
var bar = document.createElement("div");
|
var bar = document.createElement("div");
|
||||||
bar.className = "editor-statusbar";
|
bar.className = "editor-statusbar";
|
||||||
|
|
||||||
var pos, cm = this.codemirror;
|
|
||||||
for(var i = 0; i < status.length; i++) {
|
// Create a new span for each item
|
||||||
(function(name) {
|
for(i = 0; i < items.length; i++) {
|
||||||
var el = document.createElement("span");
|
// Store in temporary variable
|
||||||
el.className = name;
|
var item = items[i];
|
||||||
if(name === "words") {
|
|
||||||
el.innerHTML = "0";
|
|
||||||
cm.on("update", function() {
|
// Create span element
|
||||||
el.innerHTML = wordCount(cm.getValue());
|
var el = document.createElement("span");
|
||||||
});
|
el.className = item.className;
|
||||||
} else if(name === "lines") {
|
|
||||||
el.innerHTML = "0";
|
|
||||||
cm.on("update", function() {
|
// Ensure the defaultValue is a function
|
||||||
el.innerHTML = cm.lineCount();
|
if(typeof item.defaultValue === "function") {
|
||||||
});
|
item.defaultValue(el);
|
||||||
} else if(name === "cursor") {
|
}
|
||||||
el.innerHTML = "0:0";
|
|
||||||
cm.on("cursorActivity", function() {
|
|
||||||
pos = cm.getCursor();
|
// Ensure the onUpdate is a function
|
||||||
el.innerHTML = pos.line + ":" + pos.ch;
|
if(typeof item.onUpdate === "function") {
|
||||||
});
|
// Create a closure around the span of the current action, then execute the onUpdate handler
|
||||||
} else if(name === "autosave") {
|
this.codemirror.on("update", (function(el, item) {
|
||||||
if(options.autosave != undefined && options.autosave.enabled === true) {
|
return function() {
|
||||||
el.setAttribute("id", "autosaved");
|
item.onUpdate(el);
|
||||||
}
|
};
|
||||||
}
|
}(el, item)));
|
||||||
bar.appendChild(el);
|
}
|
||||||
})(status[i]);
|
|
||||||
|
|
||||||
|
// Append the item to the status bar
|
||||||
|
bar.appendChild(el);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Insert the status bar into the DOM
|
||||||
var cmWrapper = this.codemirror.getWrapperElement();
|
var cmWrapper = this.codemirror.getWrapperElement();
|
||||||
cmWrapper.parentNode.insertBefore(bar, cmWrapper.nextSibling);
|
cmWrapper.parentNode.insertBefore(bar, cmWrapper.nextSibling);
|
||||||
return bar;
|
return bar;
|
||||||
|
@ -14127,6 +14400,7 @@ SimpleMDE.toggleHeading3 = toggleHeading3;
|
||||||
SimpleMDE.toggleCodeBlock = toggleCodeBlock;
|
SimpleMDE.toggleCodeBlock = toggleCodeBlock;
|
||||||
SimpleMDE.toggleUnorderedList = toggleUnorderedList;
|
SimpleMDE.toggleUnorderedList = toggleUnorderedList;
|
||||||
SimpleMDE.toggleOrderedList = toggleOrderedList;
|
SimpleMDE.toggleOrderedList = toggleOrderedList;
|
||||||
|
SimpleMDE.cleanBlock = cleanBlock;
|
||||||
SimpleMDE.drawLink = drawLink;
|
SimpleMDE.drawLink = drawLink;
|
||||||
SimpleMDE.drawImage = drawImage;
|
SimpleMDE.drawImage = drawImage;
|
||||||
SimpleMDE.drawTable = drawTable;
|
SimpleMDE.drawTable = drawTable;
|
||||||
|
@ -14176,6 +14450,9 @@ SimpleMDE.prototype.toggleUnorderedList = function() {
|
||||||
SimpleMDE.prototype.toggleOrderedList = function() {
|
SimpleMDE.prototype.toggleOrderedList = function() {
|
||||||
toggleOrderedList(this);
|
toggleOrderedList(this);
|
||||||
};
|
};
|
||||||
|
SimpleMDE.prototype.cleanBlock = function() {
|
||||||
|
cleanBlock(this);
|
||||||
|
};
|
||||||
SimpleMDE.prototype.drawLink = function() {
|
SimpleMDE.prototype.drawLink = function() {
|
||||||
drawLink(this);
|
drawLink(this);
|
||||||
};
|
};
|
||||||
|
@ -14226,7 +14503,13 @@ SimpleMDE.prototype.isFullscreenActive = function() {
|
||||||
return cm.getOption("fullScreen");
|
return cm.getOption("fullScreen");
|
||||||
};
|
};
|
||||||
|
|
||||||
|
SimpleMDE.prototype.getState = function() {
|
||||||
|
var cm = this.codemirror;
|
||||||
|
|
||||||
|
return getState(cm);
|
||||||
|
};
|
||||||
|
|
||||||
module.exports = SimpleMDE;
|
module.exports = SimpleMDE;
|
||||||
|
|
||||||
},{"./codemirror/tablist":12,"codemirror":6,"codemirror/addon/display/fullscreen.js":3,"codemirror/addon/edit/continuelist.js":4,"codemirror/addon/mode/overlay.js":5,"codemirror/mode/gfm/gfm.js":7,"codemirror/mode/markdown/markdown.js":8,"codemirror/mode/xml/xml.js":10,"marked":11,"spell-checker":1}]},{},[13])(13)
|
},{"./codemirror/tablist":13,"codemirror":7,"codemirror/addon/display/fullscreen.js":3,"codemirror/addon/display/placeholder.js":4,"codemirror/addon/edit/continuelist.js":5,"codemirror/addon/mode/overlay.js":6,"codemirror/mode/gfm/gfm.js":8,"codemirror/mode/markdown/markdown.js":9,"codemirror/mode/xml/xml.js":11,"marked":12,"spell-checker":1}]},{},[14])(14)
|
||||||
});
|
});
|
4
dist/simplemde.min.css
vendored
4
dist/simplemde.min.css
vendored
File diff suppressed because one or more lines are too long
18
dist/simplemde.min.js
vendored
18
dist/simplemde.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "simplemde",
|
"name": "simplemde",
|
||||||
"version": "1.9.0",
|
"version": "1.10.0",
|
||||||
"description": "A simple, beautiful, and embeddable JavaScript Markdown editor. Features autosaving and spell checking.",
|
"description": "A simple, beautiful, and embeddable JavaScript Markdown editor. Features autosaving and spell checking.",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"embeddable",
|
"embeddable",
|
||||||
|
@ -66,4 +66,4 @@
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://github.com/NextStepWebs/simplemde-markdown-editor"
|
"url": "https://github.com/NextStepWebs/simplemde-markdown-editor"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -210,6 +210,10 @@
|
||||||
content: 'words: '
|
content: 'words: '
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.editor-statusbar .characters:before {
|
||||||
|
content: 'characters: '
|
||||||
|
}
|
||||||
|
|
||||||
.editor-preview {
|
.editor-preview {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -317,4 +321,8 @@
|
||||||
|
|
||||||
.CodeMirror .CodeMirror-code .cm-strikethrough {
|
.CodeMirror .CodeMirror-code .cm-strikethrough {
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CodeMirror .CodeMirror-placeholder {
|
||||||
|
opacity: .5;
|
||||||
}
|
}
|
|
@ -6,6 +6,7 @@ require("./codemirror/tablist");
|
||||||
require("codemirror/addon/display/fullscreen.js");
|
require("codemirror/addon/display/fullscreen.js");
|
||||||
require("codemirror/mode/markdown/markdown.js");
|
require("codemirror/mode/markdown/markdown.js");
|
||||||
require("codemirror/addon/mode/overlay.js");
|
require("codemirror/addon/mode/overlay.js");
|
||||||
|
require("codemirror/addon/display/placeholder.js");
|
||||||
require("codemirror/mode/gfm/gfm.js");
|
require("codemirror/mode/gfm/gfm.js");
|
||||||
require("codemirror/mode/xml/xml.js");
|
require("codemirror/mode/xml/xml.js");
|
||||||
require("spell-checker");
|
require("spell-checker");
|
||||||
|
@ -15,18 +16,56 @@ var marked = require("marked");
|
||||||
// Some variables
|
// Some variables
|
||||||
var isMac = /Mac/.test(navigator.platform);
|
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 = {
|
var shortcuts = {
|
||||||
"Cmd-B": toggleBold,
|
"toggleBold": "Cmd-B",
|
||||||
"Cmd-I": toggleItalic,
|
"toggleItalic": "Cmd-I",
|
||||||
"Cmd-K": drawLink,
|
"drawLink": "Cmd-K",
|
||||||
"Cmd-H": toggleHeadingSmaller,
|
"toggleHeadingSmaller": "Cmd-H",
|
||||||
"Shift-Cmd-H": toggleHeadingBigger,
|
"toggleHeadingBigger": "Shift-Cmd-H",
|
||||||
"Cmd-Alt-I": drawImage,
|
"cleanBlock": "Cmd-E",
|
||||||
"Cmd-'": toggleBlockquote,
|
"drawImage": "Cmd-Alt-I",
|
||||||
"Cmd-Alt-L": toggleOrderedList,
|
"toggleBlockquote": "Cmd-'",
|
||||||
"Cmd-L": toggleUnorderedList,
|
"toggleOrderedList": "Cmd-Alt-L",
|
||||||
"Cmd-Alt-C": toggleCodeBlock,
|
"toggleUnorderedList": "Cmd-L",
|
||||||
"Cmd-P": togglePreview
|
"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 isMobile = function() {
|
||||||
|
@ -54,13 +93,13 @@ function fixShortcut(name) {
|
||||||
/**
|
/**
|
||||||
* Create icon element for toolbar.
|
* Create icon element for toolbar.
|
||||||
*/
|
*/
|
||||||
function createIcon(options, enableTooltips) {
|
function createIcon(options, enableTooltips, shortcuts) {
|
||||||
options = options || {};
|
options = options || {};
|
||||||
var el = document.createElement("a");
|
var el = document.createElement("a");
|
||||||
enableTooltips = (enableTooltips == undefined) ? true : enableTooltips;
|
enableTooltips = (enableTooltips == undefined) ? true : enableTooltips;
|
||||||
|
|
||||||
if(options.title && enableTooltips) {
|
if(options.title && enableTooltips) {
|
||||||
el.title = options.title;
|
el.title = createTootlip(options.title, options.action, shortcuts);
|
||||||
|
|
||||||
if(isMac) {
|
if(isMac) {
|
||||||
el.title = el.title.replace("Ctrl", "⌘");
|
el.title = el.title.replace("Ctrl", "⌘");
|
||||||
|
@ -80,6 +119,19 @@ function createSep() {
|
||||||
return el;
|
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.
|
* The state of CodeMirror at the given position.
|
||||||
|
@ -114,6 +166,12 @@ function getState(cm, pos) {
|
||||||
ret.strikethrough = true;
|
ret.strikethrough = true;
|
||||||
} else if(data === "comment") {
|
} else if(data === "comment") {
|
||||||
ret.code = true;
|
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;
|
return ret;
|
||||||
|
@ -264,6 +322,14 @@ function toggleOrderedList(editor) {
|
||||||
_toggleLine(cm, "ordered-list");
|
_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.
|
* Action for drawing a link.
|
||||||
*/
|
*/
|
||||||
|
@ -333,7 +399,7 @@ function toggleSideBySide(editor) {
|
||||||
var wrapper = cm.getWrapperElement();
|
var wrapper = cm.getWrapperElement();
|
||||||
var preview = wrapper.nextSibling;
|
var preview = wrapper.nextSibling;
|
||||||
var toolbarButton = editor.toolbarElements["side-by-side"];
|
var toolbarButton = editor.toolbarElements["side-by-side"];
|
||||||
|
var useSideBySideListener = false;
|
||||||
if(/editor-preview-active-side/.test(preview.className)) {
|
if(/editor-preview-active-side/.test(preview.className)) {
|
||||||
preview.className = preview.className.replace(
|
preview.className = preview.className.replace(
|
||||||
/\s*editor-preview-active-side\s*/g, ""
|
/\s*editor-preview-active-side\s*/g, ""
|
||||||
|
@ -351,6 +417,7 @@ function toggleSideBySide(editor) {
|
||||||
}, 1);
|
}, 1);
|
||||||
toolbarButton.className += " active";
|
toolbarButton.className += " active";
|
||||||
wrapper.className += " CodeMirror-sided";
|
wrapper.className += " CodeMirror-sided";
|
||||||
|
useSideBySideListener = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hide normal preview if active
|
// Hide normal preview if active
|
||||||
|
@ -365,13 +432,20 @@ function toggleSideBySide(editor) {
|
||||||
toolbar_div.className = toolbar_div.className.replace(/\s*disabled-for-preview*/g, "");
|
toolbar_div.className = toolbar_div.className.replace(/\s*disabled-for-preview*/g, "");
|
||||||
}
|
}
|
||||||
|
|
||||||
// Start preview with the current text
|
var sideBySideRenderingFunction = function() {
|
||||||
preview.innerHTML = editor.options.previewRender(editor.value(), preview);
|
|
||||||
|
|
||||||
// Updates preview
|
|
||||||
cm.on("update", function() {
|
|
||||||
preview.innerHTML = editor.options.previewRender(editor.value(), preview);
|
preview.innerHTML = editor.options.previewRender(editor.value(), preview);
|
||||||
});
|
};
|
||||||
|
|
||||||
|
if(!cm.sideBySideRenderingFunction) {
|
||||||
|
cm.sideBySideRenderingFunction = sideBySideRenderingFunction;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(useSideBySideListener) {
|
||||||
|
preview.innerHTML = editor.options.previewRender(editor.value(), preview);
|
||||||
|
cm.on("update", cm.sideBySideRenderingFunction);
|
||||||
|
} else {
|
||||||
|
cm.off("update", cm.sideBySideRenderingFunction);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -620,6 +694,28 @@ function _toggleBlock(editor, type, start_chars, end_chars) {
|
||||||
cm.focus();
|
cm.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function _cleanBlock(cm) {
|
||||||
|
if(/editor-preview-active/.test(cm.getWrapperElement().lastChild.className))
|
||||||
|
return;
|
||||||
|
|
||||||
|
var startPoint = cm.getCursor("start");
|
||||||
|
var endPoint = cm.getCursor("end");
|
||||||
|
var text;
|
||||||
|
|
||||||
|
for(var line = startPoint.line; line <= endPoint.line; line++) {
|
||||||
|
text = cm.getLine(line);
|
||||||
|
text = text.replace(/^[ ]*([# ]+|\*|\-|[> ]+|[0-9]+(.|\)))[ ]*/, "");
|
||||||
|
|
||||||
|
cm.replaceRange(text, {
|
||||||
|
line: line,
|
||||||
|
ch: 0
|
||||||
|
}, {
|
||||||
|
line: line,
|
||||||
|
ch: 99999999999999
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Merge the properties of one object into another.
|
// Merge the properties of one object into another.
|
||||||
function _mergeProperties(target, source) {
|
function _mergeProperties(target, source) {
|
||||||
for(var property in source) {
|
for(var property in source) {
|
||||||
|
@ -671,14 +767,14 @@ var toolbarBuiltInButtons = {
|
||||||
name: "bold",
|
name: "bold",
|
||||||
action: toggleBold,
|
action: toggleBold,
|
||||||
className: "fa fa-bold",
|
className: "fa fa-bold",
|
||||||
title: "Bold (Ctrl+B)",
|
title: "Bold",
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
"italic": {
|
"italic": {
|
||||||
name: "italic",
|
name: "italic",
|
||||||
action: toggleItalic,
|
action: toggleItalic,
|
||||||
className: "fa fa-italic",
|
className: "fa fa-italic",
|
||||||
title: "Italic (Ctrl+I)",
|
title: "Italic",
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
"strikethrough": {
|
"strikethrough": {
|
||||||
|
@ -691,20 +787,20 @@ var toolbarBuiltInButtons = {
|
||||||
name: "heading",
|
name: "heading",
|
||||||
action: toggleHeadingSmaller,
|
action: toggleHeadingSmaller,
|
||||||
className: "fa fa-header",
|
className: "fa fa-header",
|
||||||
title: "Heading (Ctrl+H)",
|
title: "Heading",
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
"heading-smaller": {
|
"heading-smaller": {
|
||||||
name: "heading-smaller",
|
name: "heading-smaller",
|
||||||
action: toggleHeadingSmaller,
|
action: toggleHeadingSmaller,
|
||||||
className: "fa fa-header fa-header-x fa-header-smaller",
|
className: "fa fa-header fa-header-x fa-header-smaller",
|
||||||
title: "Smaller Heading (Ctrl+H)"
|
title: "Smaller Heading"
|
||||||
},
|
},
|
||||||
"heading-bigger": {
|
"heading-bigger": {
|
||||||
name: "heading-bigger",
|
name: "heading-bigger",
|
||||||
action: toggleHeadingBigger,
|
action: toggleHeadingBigger,
|
||||||
className: "fa fa-header fa-header-x fa-header-bigger",
|
className: "fa fa-header fa-header-x fa-header-bigger",
|
||||||
title: "Bigger Heading (Shift+Ctrl+H)"
|
title: "Bigger Heading"
|
||||||
},
|
},
|
||||||
"heading-1": {
|
"heading-1": {
|
||||||
name: "heading-1",
|
name: "heading-1",
|
||||||
|
@ -731,29 +827,35 @@ var toolbarBuiltInButtons = {
|
||||||
name: "code",
|
name: "code",
|
||||||
action: toggleCodeBlock,
|
action: toggleCodeBlock,
|
||||||
className: "fa fa-code",
|
className: "fa fa-code",
|
||||||
title: "Code (Ctrl+Alt+C)"
|
title: "Code"
|
||||||
},
|
},
|
||||||
"quote": {
|
"quote": {
|
||||||
name: "quote",
|
name: "quote",
|
||||||
action: toggleBlockquote,
|
action: toggleBlockquote,
|
||||||
className: "fa fa-quote-left",
|
className: "fa fa-quote-left",
|
||||||
title: "Quote (Ctrl+')",
|
title: "Quote",
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
"unordered-list": {
|
"unordered-list": {
|
||||||
name: "unordered-list",
|
name: "unordered-list",
|
||||||
action: toggleUnorderedList,
|
action: toggleUnorderedList,
|
||||||
className: "fa fa-list-ul",
|
className: "fa fa-list-ul",
|
||||||
title: "Generic List (Ctrl+L)",
|
title: "Generic List",
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
"ordered-list": {
|
"ordered-list": {
|
||||||
name: "ordered-list",
|
name: "ordered-list",
|
||||||
action: toggleOrderedList,
|
action: toggleOrderedList,
|
||||||
className: "fa fa-list-ol",
|
className: "fa fa-list-ol",
|
||||||
title: "Numbered List (Ctrl+Alt+L)",
|
title: "Numbered List",
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
|
"clean-block": {
|
||||||
|
name: "clean-block",
|
||||||
|
action: cleanBlock,
|
||||||
|
className: "fa fa-eraser fa-clean-block",
|
||||||
|
title: "Clean block"
|
||||||
|
},
|
||||||
"separator-2": {
|
"separator-2": {
|
||||||
name: "separator-2"
|
name: "separator-2"
|
||||||
},
|
},
|
||||||
|
@ -761,14 +863,14 @@ var toolbarBuiltInButtons = {
|
||||||
name: "link",
|
name: "link",
|
||||||
action: drawLink,
|
action: drawLink,
|
||||||
className: "fa fa-link",
|
className: "fa fa-link",
|
||||||
title: "Create Link (Ctrl+K)",
|
title: "Create Link",
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
"image": {
|
"image": {
|
||||||
name: "image",
|
name: "image",
|
||||||
action: drawImage,
|
action: drawImage,
|
||||||
className: "fa fa-picture-o",
|
className: "fa fa-picture-o",
|
||||||
title: "Insert Image (Ctrl+Alt+I)",
|
title: "Insert Image",
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
"table": {
|
"table": {
|
||||||
|
@ -790,36 +892,54 @@ var toolbarBuiltInButtons = {
|
||||||
name: "preview",
|
name: "preview",
|
||||||
action: togglePreview,
|
action: togglePreview,
|
||||||
className: "fa fa-eye no-disable",
|
className: "fa fa-eye no-disable",
|
||||||
title: "Toggle Preview (Ctrl+P)",
|
title: "Toggle Preview",
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
"side-by-side": {
|
"side-by-side": {
|
||||||
name: "side-by-side",
|
name: "side-by-side",
|
||||||
action: toggleSideBySide,
|
action: toggleSideBySide,
|
||||||
className: "fa fa-columns no-disable no-mobile",
|
className: "fa fa-columns no-disable no-mobile",
|
||||||
title: "Toggle Side by Side (F9)",
|
title: "Toggle Side by Side",
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
"fullscreen": {
|
"fullscreen": {
|
||||||
name: "fullscreen",
|
name: "fullscreen",
|
||||||
action: toggleFullScreen,
|
action: toggleFullScreen,
|
||||||
className: "fa fa-arrows-alt no-disable no-mobile",
|
className: "fa fa-arrows-alt no-disable no-mobile",
|
||||||
title: "Toggle Fullscreen (F11)",
|
title: "Toggle Fullscreen",
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
|
"separator-4": {
|
||||||
|
name: "separator-4"
|
||||||
|
},
|
||||||
"guide": {
|
"guide": {
|
||||||
name: "guide",
|
name: "guide",
|
||||||
action: "http://nextstepwebs.github.io/simplemde-markdown-editor/markdown-guide",
|
action: "http://nextstepwebs.github.io/simplemde-markdown-editor/markdown-guide",
|
||||||
className: "fa fa-question-circle",
|
className: "fa fa-question-circle",
|
||||||
title: "Markdown Guide",
|
title: "Markdown Guide",
|
||||||
default: true
|
default: true
|
||||||
|
},
|
||||||
|
"separator-5": {
|
||||||
|
name: "separator-5"
|
||||||
|
},
|
||||||
|
"undo": {
|
||||||
|
name: "undo",
|
||||||
|
action: undo,
|
||||||
|
className: "fa fa-undo no-disable",
|
||||||
|
title: "Undo"
|
||||||
|
},
|
||||||
|
"redo": {
|
||||||
|
name: "redo",
|
||||||
|
action: redo,
|
||||||
|
className: "fa fa-repeat no-disable",
|
||||||
|
title: "Redo"
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
var insertTexts = {
|
var insertTexts = {
|
||||||
link: ["[", "](http://)"],
|
link: ["[", "](http://)"],
|
||||||
image: ["![](http://", ")"],
|
image: ["![](http://", ")"],
|
||||||
table: ["", "\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text | Text | Text |\n\n"],
|
table: ["", "\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text | Text | Text |\n\n"],
|
||||||
horizontalRule: ["", "\n\n-----\n\n"]
|
horizontalRule: ["", "\n\n-----\n\n"]
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -925,6 +1045,10 @@ function SimpleMDE(options) {
|
||||||
options.blockStyles = extend({}, blockStyles, options.blockStyles || {});
|
options.blockStyles = extend({}, blockStyles, options.blockStyles || {});
|
||||||
|
|
||||||
|
|
||||||
|
// Merging the shortcuts, with the given options
|
||||||
|
options.shortcuts = extend({}, shortcuts, options.shortcuts || {});
|
||||||
|
|
||||||
|
|
||||||
// Change unique_id to uniqueId for backwards compatibility
|
// Change unique_id to uniqueId for backwards compatibility
|
||||||
if(options.autosave != undefined && options.autosave.unique_id != undefined && options.autosave.unique_id != "")
|
if(options.autosave != undefined && options.autosave.unique_id != undefined && options.autosave.unique_id != "")
|
||||||
options.autosave.uniqueId = options.autosave.unique_id;
|
options.autosave.uniqueId = options.autosave.unique_id;
|
||||||
|
@ -995,23 +1119,20 @@ SimpleMDE.prototype.render = function(el) {
|
||||||
var self = this;
|
var self = this;
|
||||||
var keyMaps = {};
|
var keyMaps = {};
|
||||||
|
|
||||||
for(var key in shortcuts) {
|
for(var key in options.shortcuts) {
|
||||||
(function(key) {
|
// null stands for "do not bind this command"
|
||||||
keyMaps[fixShortcut(key)] = function() {
|
if(options.shortcuts[key] !== null && bindings[key] !== null) {
|
||||||
shortcuts[key](self);
|
(function(key) {
|
||||||
};
|
keyMaps[fixShortcut(options.shortcuts[key])] = function() {
|
||||||
})(key);
|
bindings[key](self);
|
||||||
|
};
|
||||||
|
})(key);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
keyMaps["Enter"] = "newlineAndIndentContinueMarkdownList";
|
keyMaps["Enter"] = "newlineAndIndentContinueMarkdownList";
|
||||||
keyMaps["Tab"] = "tabAndIndentMarkdownList";
|
keyMaps["Tab"] = "tabAndIndentMarkdownList";
|
||||||
keyMaps["Shift-Tab"] = "shiftTabAndUnindentMarkdownList";
|
keyMaps["Shift-Tab"] = "shiftTabAndUnindentMarkdownList";
|
||||||
keyMaps["F11"] = function() {
|
|
||||||
toggleFullScreen(self);
|
|
||||||
};
|
|
||||||
keyMaps["F9"] = function() {
|
|
||||||
toggleSideBySide(self);
|
|
||||||
};
|
|
||||||
keyMaps["Esc"] = function(cm) {
|
keyMaps["Esc"] = function(cm) {
|
||||||
if(cm.getOption("fullScreen")) toggleFullScreen(self);
|
if(cm.getOption("fullScreen")) toggleFullScreen(self);
|
||||||
};
|
};
|
||||||
|
@ -1047,7 +1168,8 @@ SimpleMDE.prototype.render = function(el) {
|
||||||
autofocus: (options.autofocus === true) ? true : false,
|
autofocus: (options.autofocus === true) ? true : false,
|
||||||
extraKeys: keyMaps,
|
extraKeys: keyMaps,
|
||||||
lineWrapping: (options.lineWrapping === false) ? false : true,
|
lineWrapping: (options.lineWrapping === false) ? false : true,
|
||||||
allowDropFileTypes: ["text/plain"]
|
allowDropFileTypes: ["text/plain"],
|
||||||
|
placeholder: options.placeholder || el.getAttribute("placeholder") || ""
|
||||||
});
|
});
|
||||||
|
|
||||||
if(options.toolbar !== false) {
|
if(options.toolbar !== false) {
|
||||||
|
@ -1120,8 +1242,8 @@ SimpleMDE.prototype.autosave = function() {
|
||||||
|
|
||||||
SimpleMDE.prototype.clearAutosavedValue = function() {
|
SimpleMDE.prototype.clearAutosavedValue = function() {
|
||||||
if(localStorage) {
|
if(localStorage) {
|
||||||
if(this.options.autosave.uniqueId == undefined || this.options.autosave.uniqueId == "") {
|
if(this.options.autosave == undefined || this.options.autosave.uniqueId == undefined || this.options.autosave.uniqueId == "") {
|
||||||
console.log("SimpleMDE: You must set a uniqueId to use the autosave feature");
|
console.log("SimpleMDE: You must set a uniqueId to clear the autosave value");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1190,7 +1312,7 @@ SimpleMDE.prototype.createToolbar = function(items) {
|
||||||
|
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
var toolbar_data = {};
|
var toolbarData = {};
|
||||||
self.toolbar = items;
|
self.toolbar = items;
|
||||||
|
|
||||||
for(i = 0; i < items.length; i++) {
|
for(i = 0; i < items.length; i++) {
|
||||||
|
@ -1205,12 +1327,29 @@ SimpleMDE.prototype.createToolbar = function(items) {
|
||||||
if((items[i].name == "fullscreen" || items[i].name == "side-by-side") && isMobile())
|
if((items[i].name == "fullscreen" || items[i].name == "side-by-side") && isMobile())
|
||||||
continue;
|
continue;
|
||||||
|
|
||||||
|
|
||||||
|
// Don't include trailing separators
|
||||||
|
if(items[i] === "|") {
|
||||||
|
var nonSeparatorIconsFollow = false;
|
||||||
|
|
||||||
|
for(var x = (i + 1); x < items.length; x++) {
|
||||||
|
if(items[x] !== "|") {
|
||||||
|
nonSeparatorIconsFollow = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!nonSeparatorIconsFollow)
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Create the icon and append to the toolbar
|
||||||
(function(item) {
|
(function(item) {
|
||||||
var el;
|
var el;
|
||||||
if(item === "|") {
|
if(item === "|") {
|
||||||
el = createSep();
|
el = createSep();
|
||||||
} else {
|
} else {
|
||||||
el = createIcon(item, self.options.toolbarTips);
|
el = createIcon(item, self.options.toolbarTips, self.options.shortcuts);
|
||||||
}
|
}
|
||||||
|
|
||||||
// bind events, special for info
|
// bind events, special for info
|
||||||
|
@ -1224,20 +1363,21 @@ SimpleMDE.prototype.createToolbar = function(items) {
|
||||||
el.target = "_blank";
|
el.target = "_blank";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
toolbar_data[item.name || item] = el;
|
|
||||||
|
toolbarData[item.name || item] = el;
|
||||||
bar.appendChild(el);
|
bar.appendChild(el);
|
||||||
})(items[i]);
|
})(items[i]);
|
||||||
}
|
}
|
||||||
|
|
||||||
self.toolbarElements = toolbar_data;
|
self.toolbarElements = toolbarData;
|
||||||
|
|
||||||
var cm = this.codemirror;
|
var cm = this.codemirror;
|
||||||
cm.on("cursorActivity", function() {
|
cm.on("cursorActivity", function() {
|
||||||
var stat = getState(cm);
|
var stat = getState(cm);
|
||||||
|
|
||||||
for(var key in toolbar_data) {
|
for(var key in toolbarData) {
|
||||||
(function(key) {
|
(function(key) {
|
||||||
var el = toolbar_data[key];
|
var el = toolbarData[key];
|
||||||
if(stat[key]) {
|
if(stat[key]) {
|
||||||
el.className += " active";
|
el.className += " active";
|
||||||
} else if(key != "fullscreen" && key != "side-by-side") {
|
} else if(key != "fullscreen" && key != "side-by-side") {
|
||||||
|
@ -1253,44 +1393,115 @@ SimpleMDE.prototype.createToolbar = function(items) {
|
||||||
};
|
};
|
||||||
|
|
||||||
SimpleMDE.prototype.createStatusbar = function(status) {
|
SimpleMDE.prototype.createStatusbar = function(status) {
|
||||||
|
// Initialize
|
||||||
status = status || this.options.status;
|
status = status || this.options.status;
|
||||||
var options = this.options;
|
var options = this.options;
|
||||||
|
var cm = this.codemirror;
|
||||||
|
|
||||||
if(!status || status.length === 0) return;
|
|
||||||
|
|
||||||
|
// Make sure the status variable is valid
|
||||||
|
if(!status || status.length === 0)
|
||||||
|
return;
|
||||||
|
|
||||||
|
|
||||||
|
// Set up the built-in items
|
||||||
|
var items = [];
|
||||||
|
var i, onUpdate, defaultValue;
|
||||||
|
|
||||||
|
for(i = 0; i < status.length; i++) {
|
||||||
|
// Reset some values
|
||||||
|
onUpdate = undefined;
|
||||||
|
defaultValue = undefined;
|
||||||
|
|
||||||
|
|
||||||
|
// Handle if custom or not
|
||||||
|
if(typeof status[i] === "object") {
|
||||||
|
items.push({
|
||||||
|
className: status[i].className,
|
||||||
|
defaultValue: status[i].defaultValue,
|
||||||
|
onUpdate: status[i].onUpdate
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
var name = status[i];
|
||||||
|
|
||||||
|
if(name === "words") {
|
||||||
|
defaultValue = function(el) {
|
||||||
|
el.innerHTML = "0";
|
||||||
|
};
|
||||||
|
onUpdate = function(el) {
|
||||||
|
el.innerHTML = wordCount(cm.getValue());
|
||||||
|
};
|
||||||
|
} else if(name === "lines") {
|
||||||
|
defaultValue = function(el) {
|
||||||
|
el.innerHTML = "0";
|
||||||
|
};
|
||||||
|
onUpdate = function(el) {
|
||||||
|
el.innerHTML = cm.lineCount();
|
||||||
|
};
|
||||||
|
} else if(name === "cursor") {
|
||||||
|
defaultValue = function(el) {
|
||||||
|
el.innerHTML = "0:0";
|
||||||
|
};
|
||||||
|
onUpdate = function(el) {
|
||||||
|
var pos = cm.getCursor();
|
||||||
|
el.innerHTML = pos.line + ":" + pos.ch;
|
||||||
|
};
|
||||||
|
} else if(name === "autosave") {
|
||||||
|
defaultValue = function(el) {
|
||||||
|
if(options.autosave != undefined && options.autosave.enabled === true) {
|
||||||
|
el.setAttribute("id", "autosaved");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
items.push({
|
||||||
|
className: name,
|
||||||
|
defaultValue: defaultValue,
|
||||||
|
onUpdate: onUpdate
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Create element for the status bar
|
||||||
var bar = document.createElement("div");
|
var bar = document.createElement("div");
|
||||||
bar.className = "editor-statusbar";
|
bar.className = "editor-statusbar";
|
||||||
|
|
||||||
var pos, cm = this.codemirror;
|
|
||||||
for(var i = 0; i < status.length; i++) {
|
// Create a new span for each item
|
||||||
(function(name) {
|
for(i = 0; i < items.length; i++) {
|
||||||
var el = document.createElement("span");
|
// Store in temporary variable
|
||||||
el.className = name;
|
var item = items[i];
|
||||||
if(name === "words") {
|
|
||||||
el.innerHTML = "0";
|
|
||||||
cm.on("update", function() {
|
// Create span element
|
||||||
el.innerHTML = wordCount(cm.getValue());
|
var el = document.createElement("span");
|
||||||
});
|
el.className = item.className;
|
||||||
} else if(name === "lines") {
|
|
||||||
el.innerHTML = "0";
|
|
||||||
cm.on("update", function() {
|
// Ensure the defaultValue is a function
|
||||||
el.innerHTML = cm.lineCount();
|
if(typeof item.defaultValue === "function") {
|
||||||
});
|
item.defaultValue(el);
|
||||||
} else if(name === "cursor") {
|
}
|
||||||
el.innerHTML = "0:0";
|
|
||||||
cm.on("cursorActivity", function() {
|
|
||||||
pos = cm.getCursor();
|
// Ensure the onUpdate is a function
|
||||||
el.innerHTML = pos.line + ":" + pos.ch;
|
if(typeof item.onUpdate === "function") {
|
||||||
});
|
// Create a closure around the span of the current action, then execute the onUpdate handler
|
||||||
} else if(name === "autosave") {
|
this.codemirror.on("update", (function(el, item) {
|
||||||
if(options.autosave != undefined && options.autosave.enabled === true) {
|
return function() {
|
||||||
el.setAttribute("id", "autosaved");
|
item.onUpdate(el);
|
||||||
}
|
};
|
||||||
}
|
}(el, item)));
|
||||||
bar.appendChild(el);
|
}
|
||||||
})(status[i]);
|
|
||||||
|
|
||||||
|
// Append the item to the status bar
|
||||||
|
bar.appendChild(el);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Insert the status bar into the DOM
|
||||||
var cmWrapper = this.codemirror.getWrapperElement();
|
var cmWrapper = this.codemirror.getWrapperElement();
|
||||||
cmWrapper.parentNode.insertBefore(bar, cmWrapper.nextSibling);
|
cmWrapper.parentNode.insertBefore(bar, cmWrapper.nextSibling);
|
||||||
return bar;
|
return bar;
|
||||||
|
@ -1324,6 +1535,7 @@ SimpleMDE.toggleHeading3 = toggleHeading3;
|
||||||
SimpleMDE.toggleCodeBlock = toggleCodeBlock;
|
SimpleMDE.toggleCodeBlock = toggleCodeBlock;
|
||||||
SimpleMDE.toggleUnorderedList = toggleUnorderedList;
|
SimpleMDE.toggleUnorderedList = toggleUnorderedList;
|
||||||
SimpleMDE.toggleOrderedList = toggleOrderedList;
|
SimpleMDE.toggleOrderedList = toggleOrderedList;
|
||||||
|
SimpleMDE.cleanBlock = cleanBlock;
|
||||||
SimpleMDE.drawLink = drawLink;
|
SimpleMDE.drawLink = drawLink;
|
||||||
SimpleMDE.drawImage = drawImage;
|
SimpleMDE.drawImage = drawImage;
|
||||||
SimpleMDE.drawTable = drawTable;
|
SimpleMDE.drawTable = drawTable;
|
||||||
|
@ -1373,6 +1585,9 @@ SimpleMDE.prototype.toggleUnorderedList = function() {
|
||||||
SimpleMDE.prototype.toggleOrderedList = function() {
|
SimpleMDE.prototype.toggleOrderedList = function() {
|
||||||
toggleOrderedList(this);
|
toggleOrderedList(this);
|
||||||
};
|
};
|
||||||
|
SimpleMDE.prototype.cleanBlock = function() {
|
||||||
|
cleanBlock(this);
|
||||||
|
};
|
||||||
SimpleMDE.prototype.drawLink = function() {
|
SimpleMDE.prototype.drawLink = function() {
|
||||||
drawLink(this);
|
drawLink(this);
|
||||||
};
|
};
|
||||||
|
@ -1423,4 +1638,10 @@ SimpleMDE.prototype.isFullscreenActive = function() {
|
||||||
return cm.getOption("fullScreen");
|
return cm.getOption("fullScreen");
|
||||||
};
|
};
|
||||||
|
|
||||||
|
SimpleMDE.prototype.getState = function() {
|
||||||
|
var cm = this.codemirror;
|
||||||
|
|
||||||
|
return getState(cm);
|
||||||
|
};
|
||||||
|
|
||||||
module.exports = SimpleMDE;
|
module.exports = SimpleMDE;
|
||||||
|
|
Loading…
Reference in a new issue