Merge pull request #189 from NextStepWebs/development

Autosave improvements, Build improvements, New icons, New options, Clearer README
pull/197/head 1.9.0
Wes Cossick 9 years ago
commit 5f3a67dae2

@ -1,5 +1,7 @@
language: node_js language: node_js
node_js: node_js:
- '5'
- '4'
- '0.12' - '0.12'
before_script: before_script:
- npm install -g gulp - npm install -g gulp

@ -67,20 +67,24 @@ simplemde.value("This text will appear in the editor");
## Configuration ## Configuration
- **autoDownloadFontAwesome**: If set to `true`, force downloads Font Awesome (used for icons). If set to false, prevents downloading. Defaults to `undefined`, which will intelligently check whether Font Awesome has already been included, then download accordingly. - **autoDownloadFontAwesome**: If set to `true`, force downloads Font Awesome (used for icons). If set to `false`, prevents downloading. Defaults to `undefined`, which will intelligently check whether Font Awesome has already been included, then download accordingly.
- **autofocus**: If set to `true`, autofocuses the editor. Defaults to `false`. - **autofocus**: If set to `true`, autofocuses the editor. Defaults to `false`.
- **autosave**: *Saves the text that's being written and will load it back in the future. It will forget the text when the form it's contained in is submitted.* - **autosave**: *Saves the text that's being written and will load it back in the future. It will forget the text when the form it's contained in is submitted.*
- **enabled**: If set to `true`, autosave the text. Defaults to `false`. - **enabled**: If set to `true`, autosave the text. Defaults to `false`.
- **delay**: Delay between saves, in milliseconds. Defaults to `10000` (10s). - **delay**: Delay between saves, in milliseconds. Defaults to `10000` (10s).
- **unique_id**: You must set a unique string identifier so that SimpleMDE can autosave. Something that separates this from other instances of SimpleMDE elsewhere on your website. - **uniqueId**: You must set a unique string identifier so that SimpleMDE can autosave. Something that separates this from other instances of SimpleMDE elsewhere on your website.
- **blockStyles**: Customize how certain buttons that style blocks of text behave.
- **bold** Can be set to `**` or `__`. Defaults to `**`.
- **italic** Can be set to `*` or `_`. Defaults to `*`.
- **element**: The DOM element for the textarea to use. Defaults to the first textarea on the page. - **element**: The DOM element for the textarea to use. Defaults to the first textarea on the page.
- **hideIcons**: An array of icon names to hide. Can be used to hide specific icons without completely customizing the toolbar. - **hideIcons**: An array of icon names to hide. Can be used to hide specific icons shown by default without completely customizing the toolbar.
- **indentWithTabs**: If set to `false`, indent using spaces instead of tabs. Defaults to `true`. - **indentWithTabs**: If set to `false`, indent using spaces instead of tabs. Defaults to `true`.
- **initialValue**: If set, will customize the initial value of the editor. - **initialValue**: If set, will customize the initial value of the editor.
- **insertTexts**: Customize how certain buttons that insert text behave. Takes an array with two elements. The first element will be the text inserted before the cursor or highlight, and the second element will be inserted after. For example, this is the default link value: `["[", "](http://)"]`. - **insertTexts**: Customize how certain buttons that insert text behave. Takes an array with two elements. The first element will be the text inserted before the cursor or highlight, and the second element will be inserted after. For example, this is the default link value: `["[", "](http://)"]`.
- horizontalRule - horizontalRule
- image - image
- link - link
- table
- **lineWrapping**: If set to `false`, disable line wrapping. Defaults to `true`. - **lineWrapping**: If set to `false`, disable line wrapping. Defaults to `true`.
- **parsingConfig**: Adjust settings for parsing the Markdown during editing (not previewing). - **parsingConfig**: Adjust settings for parsing the Markdown during editing (not previewing).
- **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`.
@ -90,6 +94,7 @@ simplemde.value("This text will appear in the editor");
- **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">`
- **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 `true`.
- 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 elements to include, and in what order.
@ -103,9 +108,13 @@ var simplemde = new SimpleMDE({
autofocus: true, autofocus: true,
autosave: { autosave: {
enabled: true, enabled: true,
unique_id: "MyUniqueID", uniqueId: "MyUniqueID",
delay: 1000, delay: 1000,
}, },
blockStyles: {
bold: "__",
italic: "_"
},
element: document.getElementById("MyID"), element: document.getElementById("MyID"),
hideIcons: ["guide", "heading"], hideIcons: ["guide", "heading"],
indentWithTabs: false, indentWithTabs: false,
@ -114,6 +123,7 @@ var simplemde = new SimpleMDE({
horizontalRule: ["", "\n\n-----\n\n"], horizontalRule: ["", "\n\n-----\n\n"],
image: ["![](http://", ")"], image: ["![](http://", ")"],
link: ["[", "](http://)"], link: ["[", "](http://)"],
table: ["", "\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text | Text | Text |\n\n"],
}, },
lineWrapping: false, lineWrapping: false,
parsingConfig: { parsingConfig: {
@ -135,6 +145,7 @@ var simplemde = new SimpleMDE({
singleLineBreaks: false, singleLineBreaks: false,
codeSyntaxHighlighting: true, codeSyntaxHighlighting: true,
}, },
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
@ -165,6 +176,7 @@ unordered-list | toggleUnorderedList | Generic List (Ctrl+L)<br>fa fa-list-ul
ordered-list | toggleOrderedList | Numbered List (Ctrl+Alt+L)<br>fa fa-list-ol ordered-list | toggleOrderedList | Numbered List (Ctrl+Alt+L)<br>fa fa-list-ol
link | drawLink | Create Link (Ctrl+K)<br>fa fa-link link | drawLink | Create Link (Ctrl+K)<br>fa fa-link
image | drawImage | Insert Image (Ctrl+Alt+I)<br>fa fa-picture-o image | drawImage | Insert Image (Ctrl+Alt+I)<br>fa fa-picture-o
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 (Ctrl+P)<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 (F9)<br>fa fa-columns no-disable no-mobile
@ -187,6 +199,14 @@ var simplemde = new SimpleMDE({
className: "fa fa-bold", className: "fa fa-bold",
title: "Bold (Ctrl+B)", title: "Bold (Ctrl+B)",
}, },
{
name: "custom",
action: customFunction(editor){
// Add your own code
},
className: "fa fa-star",
title: "Custom Button",
},
"|", // Separator "|", // Separator
... ...
], ],
@ -221,14 +241,15 @@ simplemde.codemirror.on("change", function(){
}); });
``` ```
## State methods ## Useful methods
The following methods will let you check on the state of the editor. The following self-explanatory methods may be of use while developing with SimpleMDE.
```js ```js
var simplemde = new SimpleMDE(); var simplemde = new SimpleMDE();
simplemde.isPreviewActive(); simplemde.isPreviewActive(); // returns boolean
simplemde.isSideBySideActive(); simplemde.isSideBySideActive(); // returns boolean
simplemde.isFullscreenActive(); simplemde.isFullscreenActive(); // returns boolean
simplemde.clearAutosavedValue(); // no returned value
``` ```
## How it works ## How it works

@ -1,6 +1,6 @@
{ {
"name": "simplemde", "name": "simplemde",
"version": "1.8.1", "version": "1.9.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.8.1 * simplemde v1.9.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
@ -559,7 +559,7 @@ span.CodeMirror-selectedtext { background: none; }
top: 0; top: 0;
left: 0; left: 0;
background: #fafafa; background: #fafafa;
z-index: 2; z-index: 7;
overflow: auto; overflow: auto;
display: none; display: none;
box-sizing: border-box; box-sizing: border-box;
@ -573,7 +573,7 @@ span.CodeMirror-selectedtext { background: none; }
top: 50px; top: 50px;
right: 0; right: 0;
background: #fafafa; background: #fafafa;
z-index: 9999; z-index: 9;
overflow: auto; overflow: auto;
display: none; display: none;
box-sizing: border-box; box-sizing: border-box;

File diff suppressed because one or more lines are too long

@ -1,5 +1,5 @@
/** /**
* simplemde v1.8.1 * simplemde v1.9.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
@ -7,7 +7,7 @@
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.SimpleMDE = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.SimpleMDE = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
(function (global){ (function (global){
; Typo = global.Typo = require("/Users/wescossick/Documents/Websites/simplemde-markdown-editor/node_modules/codemirror-spell-checker/src/js/typo.js"); ; Typo = global.Typo = require("D:\\My Web Sites\\simplemde-markdown-editor\\node_modules\\codemirror-spell-checker\\src\\js\\typo.js");
CodeMirror = global.CodeMirror = require("codemirror"); CodeMirror = global.CodeMirror = require("codemirror");
; var __browserify_shim_require__=require;(function browserifyShim(module, define, require) { ; var __browserify_shim_require__=require;(function browserifyShim(module, define, require) {
// Initialize data globally to reduce memory consumption // Initialize data globally to reduce memory consumption
@ -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 : {})
},{"/Users/wescossick/Documents/Websites/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":6}],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';
@ -1888,7 +1888,7 @@ CodeMirror.overlayMode = function(base, overlay, combine) {
// given line. // given line.
function updateWidgetHeight(line) { function updateWidgetHeight(line) {
if (line.widgets) for (var i = 0; i < line.widgets.length; ++i) if (line.widgets) for (var i = 0; i < line.widgets.length; ++i)
line.widgets[i].height = line.widgets[i].node.offsetHeight; line.widgets[i].height = line.widgets[i].node.parentNode.offsetHeight;
} }
// Do a bulk-read of the DOM positions and sizes needed to draw the // Do a bulk-read of the DOM positions and sizes needed to draw the
@ -3287,8 +3287,9 @@ CodeMirror.overlayMode = function(base, overlay, combine) {
var out; var out;
for (var i = 0; i < sel.ranges.length; i++) { for (var i = 0; i < sel.ranges.length; i++) {
var range = sel.ranges[i]; var range = sel.ranges[i];
var newAnchor = skipAtomic(doc, range.anchor, bias, mayClear); var old = sel.ranges.length == doc.sel.ranges.length && doc.sel.ranges[i];
var newHead = skipAtomic(doc, range.head, bias, mayClear); var newAnchor = skipAtomic(doc, range.anchor, old && old.anchor, bias, mayClear);
var newHead = skipAtomic(doc, range.head, old && old.head, bias, mayClear);
if (out || newAnchor != range.anchor || newHead != range.head) { if (out || newAnchor != range.anchor || newHead != range.head) {
if (!out) out = sel.ranges.slice(0, i); if (!out) out = sel.ranges.slice(0, i);
out[i] = new Range(newAnchor, newHead); out[i] = new Range(newAnchor, newHead);
@ -3297,54 +3298,59 @@ CodeMirror.overlayMode = function(base, overlay, combine) {
return out ? normalizeSelection(out, sel.primIndex) : sel; return out ? normalizeSelection(out, sel.primIndex) : sel;
} }
// Ensure a given position is not inside an atomic range. function skipAtomicInner(doc, pos, oldPos, dir, mayClear) {
function skipAtomic(doc, pos, bias, mayClear) { var line = getLine(doc, pos.line);
var flipped = false, curPos = pos; if (line.markedSpans) for (var i = 0; i < line.markedSpans.length; ++i) {
var dir = bias || 1; var sp = line.markedSpans[i], m = sp.marker;
doc.cantEdit = false; if ((sp.from == null || (m.inclusiveLeft ? sp.from <= pos.ch : sp.from < pos.ch)) &&
search: for (;;) { (sp.to == null || (m.inclusiveRight ? sp.to >= pos.ch : sp.to > pos.ch))) {
var line = getLine(doc, curPos.line); if (mayClear) {
if (line.markedSpans) { signal(m, "beforeCursorEnter");
for (var i = 0; i < line.markedSpans.length; ++i) { if (m.explicitlyCleared) {
var sp = line.markedSpans[i], m = sp.marker; if (!line.markedSpans) break;
if ((sp.from == null || (m.inclusiveLeft ? sp.from <= curPos.ch : sp.from < curPos.ch)) && else {--i; continue;}
(sp.to == null || (m.inclusiveRight ? sp.to >= curPos.ch : sp.to > curPos.ch))) {
if (mayClear) {
signal(m, "beforeCursorEnter");
if (m.explicitlyCleared) {
if (!line.markedSpans) break;
else {--i; continue;}
}
}
if (!m.atomic) continue;
var newPos = m.find(dir < 0 ? -1 : 1);
if (cmp(newPos, curPos) == 0) {
newPos.ch += dir;
if (newPos.ch < 0) {
if (newPos.line > doc.first) newPos = clipPos(doc, Pos(newPos.line - 1));
else newPos = null;
} else if (newPos.ch > line.text.length) {
if (newPos.line < doc.first + doc.size - 1) newPos = Pos(newPos.line + 1, 0);
else newPos = null;
}
if (!newPos) {
if (flipped) {
// Driven in a corner -- no valid cursor position found at all
// -- try again *with* clearing, if we didn't already
if (!mayClear) return skipAtomic(doc, pos, bias, true);
// Otherwise, turn off editing until further notice, and return the start of the doc
doc.cantEdit = true;
return Pos(doc.first, 0);
}
flipped = true; newPos = pos; dir = -dir;
}
}
curPos = newPos;
continue search;
} }
} }
if (!m.atomic) continue;
if (oldPos) {
var near = m.find(dir < 0 ? 1 : -1), diff;
if (dir < 0 ? m.inclusiveRight : m.inclusiveLeft) near = movePos(doc, near, -dir, line);
if (near && near.line == pos.line && (diff = cmp(near, oldPos)) && (dir < 0 ? diff < 0 : diff > 0))
return skipAtomicInner(doc, near, pos, dir, mayClear);
}
var far = m.find(dir < 0 ? -1 : 1);
if (dir < 0 ? m.inclusiveLeft : m.inclusiveRight) far = movePos(doc, far, dir, line);
return far ? skipAtomicInner(doc, far, pos, dir, mayClear) : null;
} }
return curPos; }
return pos;
}
// Ensure a given position is not inside an atomic range.
function skipAtomic(doc, pos, oldPos, bias, mayClear) {
var dir = bias || 1;
var found = skipAtomicInner(doc, pos, oldPos, dir, mayClear) ||
(!mayClear && skipAtomicInner(doc, pos, oldPos, dir, true)) ||
skipAtomicInner(doc, pos, oldPos, -dir, mayClear) ||
(!mayClear && skipAtomicInner(doc, pos, oldPos, -dir, true));
if (!found) {
doc.cantEdit = true;
return Pos(doc.first, 0);
}
return found;
}
function movePos(doc, pos, dir, line) {
if (dir < 0 && pos.ch == 0) {
if (pos.line > doc.first) return clipPos(doc, Pos(pos.line - 1));
else return null;
} else if (dir > 0 && pos.ch == (line || getLine(doc, pos.line)).text.length) {
if (pos.line < doc.first + doc.size - 1) return Pos(pos.line + 1, 0);
else return null;
} else {
return new Pos(pos.line, pos.ch + dir);
} }
} }
@ -5909,7 +5915,7 @@ CodeMirror.overlayMode = function(base, overlay, combine) {
if (dir > 0 && !moveOnce(!first)) break; if (dir > 0 && !moveOnce(!first)) break;
} }
} }
var result = skipAtomic(doc, Pos(line, ch), origDir, true); var result = skipAtomic(doc, Pos(line, ch), pos, origDir, true);
if (!possible) result.hitSide = true; if (!possible) result.hitSide = true;
return result; return result;
} }
@ -7733,7 +7739,7 @@ CodeMirror.overlayMode = function(base, overlay, combine) {
parentStyle += "width: " + cm.display.wrapper.clientWidth + "px;"; parentStyle += "width: " + cm.display.wrapper.clientWidth + "px;";
removeChildrenAndAdd(cm.display.measure, elt("div", [widget.node], null, parentStyle)); removeChildrenAndAdd(cm.display.measure, elt("div", [widget.node], null, parentStyle));
} }
return widget.height = widget.node.offsetHeight; return widget.height = widget.node.parentNode.offsetHeight;
} }
function addLineWidget(doc, handle, node, options) { function addLineWidget(doc, handle, node, options) {
@ -8154,7 +8160,7 @@ CodeMirror.overlayMode = function(base, overlay, combine) {
spanEndStyle = ""; spanEndStyle = "";
} }
if (m.className) spanStyle += " " + m.className; if (m.className) spanStyle += " " + m.className;
if (m.css) css = m.css; if (m.css) css = (css ? css + ";" : "") + m.css;
if (m.startStyle && sp.from == pos) spanStartStyle += " " + m.startStyle; if (m.startStyle && sp.from == pos) spanStartStyle += " " + m.startStyle;
if (m.endStyle && sp.to == nextChange) spanEndStyle += " " + m.endStyle; if (m.endStyle && sp.to == nextChange) spanEndStyle += " " + m.endStyle;
if (m.title && !title) title = m.title; if (m.title && !title) title = m.title;
@ -8423,6 +8429,7 @@ CodeMirror.overlayMode = function(base, overlay, combine) {
this.id = ++nextDocId; this.id = ++nextDocId;
this.modeOption = mode; this.modeOption = mode;
this.lineSep = lineSep; this.lineSep = lineSep;
this.extend = false;
if (typeof text == "string") text = this.splitLines(text); if (typeof text == "string") text = this.splitLines(text);
updateDoc(this, {from: start, to: start, text: text}); updateDoc(this, {from: start, to: start, text: text});
@ -9930,7 +9937,7 @@ CodeMirror.overlayMode = function(base, overlay, combine) {
// THE END // THE END
CodeMirror.version = "5.8.1"; CodeMirror.version = "5.9.1";
return CodeMirror; return CodeMirror;
}); });
@ -10782,7 +10789,7 @@ CodeMirror.defineMode("markdown", function(cmCfg, modeCfg) {
f: s.f, f: s.f,
prevLine: s.prevLine, prevLine: s.prevLine,
thisLine: s.this, thisLine: s.thisLine,
block: s.block, block: s.block,
htmlState: s.htmlState && CodeMirror.copyState(htmlMode, s.htmlState), htmlState: s.htmlState && CodeMirror.copyState(htmlMode, s.htmlState),
@ -12808,6 +12815,7 @@ require("spell-checker");
var marked = require("marked"); var marked = require("marked");
// Some variables
var isMac = /Mac/.test(navigator.platform); var isMac = /Mac/.test(navigator.platform);
var shortcuts = { var shortcuts = {
@ -12863,6 +12871,7 @@ function createIcon(options, enableTooltips) {
} }
} }
el.tabIndex = -1;
el.className = options.className; el.className = options.className;
return el; return el;
} }
@ -12966,7 +12975,7 @@ function toggleFullScreen(editor) {
* Action for toggling bold. * Action for toggling bold.
*/ */
function toggleBold(editor) { function toggleBold(editor) {
_toggleBlock(editor, "bold", "**"); _toggleBlock(editor, "bold", editor.options.blockStyles.bold);
} }
@ -12974,7 +12983,7 @@ function toggleBold(editor) {
* Action for toggling italic. * Action for toggling italic.
*/ */
function toggleItalic(editor) { function toggleItalic(editor) {
_toggleBlock(editor, "italic", "*"); _toggleBlock(editor, "italic", editor.options.blockStyles.italic);
} }
@ -13078,6 +13087,16 @@ function drawImage(editor) {
_replaceSelection(cm, stat.image, options.insertTexts.image); _replaceSelection(cm, stat.image, options.insertTexts.image);
} }
/**
* Action for drawing a table.
*/
function drawTable(editor) {
var cm = editor.codemirror;
var stat = getState(cm);
var options = editor.options;
_replaceSelection(cm, stat.table, options.insertTexts.table);
}
/** /**
* Action for drawing a horizontal rule. * Action for drawing a horizontal rule.
*/ */
@ -13450,19 +13469,20 @@ function wordCount(data) {
return count; return count;
} }
var toolbarBuiltInButtons = { var toolbarBuiltInButtons = {
"bold": { "bold": {
name: "bold", name: "bold",
action: toggleBold, action: toggleBold,
className: "fa fa-bold", className: "fa fa-bold",
title: "Bold (Ctrl+B)" title: "Bold (Ctrl+B)",
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 (Ctrl+I)",
default: true
}, },
"strikethrough": { "strikethrough": {
name: "strikethrough", name: "strikethrough",
@ -13474,7 +13494,8 @@ var toolbarBuiltInButtons = {
name: "heading", name: "heading",
action: toggleHeadingSmaller, action: toggleHeadingSmaller,
className: "fa fa-header", className: "fa fa-header",
title: "Heading (Ctrl+H)" title: "Heading (Ctrl+H)",
default: true
}, },
"heading-smaller": { "heading-smaller": {
name: "heading-smaller", name: "heading-smaller",
@ -13506,6 +13527,9 @@ var toolbarBuiltInButtons = {
className: "fa fa-header fa-header-x fa-header-3", className: "fa fa-header fa-header-x fa-header-3",
title: "Small Heading" title: "Small Heading"
}, },
"separator-1": {
name: "separator-1"
},
"code": { "code": {
name: "code", name: "code",
action: toggleCodeBlock, action: toggleCodeBlock,
@ -13516,31 +13540,45 @@ var toolbarBuiltInButtons = {
name: "quote", name: "quote",
action: toggleBlockquote, action: toggleBlockquote,
className: "fa fa-quote-left", className: "fa fa-quote-left",
title: "Quote (Ctrl+')" title: "Quote (Ctrl+')",
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 (Ctrl+L)",
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 (Ctrl+Alt+L)",
default: true
},
"separator-2": {
name: "separator-2"
}, },
"link": { "link": {
name: "link", name: "link",
action: drawLink, action: drawLink,
className: "fa fa-link", className: "fa fa-link",
title: "Create Link (Ctrl+K)" title: "Create Link (Ctrl+K)",
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 (Ctrl+Alt+I)",
default: true
},
"table": {
name: "table",
action: drawTable,
className: "fa fa-table",
title: "Insert Table"
}, },
"horizontal-rule": { "horizontal-rule": {
name: "horizontal-rule", name: "horizontal-rule",
@ -13548,38 +13586,50 @@ var toolbarBuiltInButtons = {
className: "fa fa-minus", className: "fa fa-minus",
title: "Insert Horizontal Line" title: "Insert Horizontal Line"
}, },
"separator-3": {
name: "separator-3"
},
"preview": { "preview": {
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 (Ctrl+P)",
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 (F9)",
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 (F11)",
default: true
}, },
"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
} }
}; };
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"],
horizontalRule: ["", "\n\n-----\n\n"] horizontalRule: ["", "\n\n-----\n\n"]
}; };
var blockStyles = {
"bold": "**",
"italic": "*"
};
/** /**
* Interface of SimpleMDE. * Interface of SimpleMDE.
@ -13630,10 +13680,28 @@ function SimpleMDE(options) {
} }
// Handle toolbar and status bar // Handle toolbar
if(options.toolbar !== false) if(options.toolbar === undefined) {
options.toolbar = options.toolbar || SimpleMDE.toolbar; // Initialize
options.toolbar = [];
// Loop over the built in buttons, to get the preferred order
for(var key in toolbarBuiltInButtons) {
if(toolbarBuiltInButtons.hasOwnProperty(key)) {
if(key.indexOf("separator-") != -1) {
options.toolbar.push("|");
}
if(toolbarBuiltInButtons[key].default === true || (options.showIcons && options.showIcons.constructor === Array && options.showIcons.indexOf(key) != -1)) {
options.toolbar.push(key);
}
}
}
}
// Handle status bar
if(!options.hasOwnProperty("status")) { if(!options.hasOwnProperty("status")) {
options.status = ["autosave", "lines", "words", "cursor"]; options.status = ["autosave", "lines", "words", "cursor"];
} }
@ -13656,6 +13724,15 @@ function SimpleMDE(options) {
options.insertTexts = extend({}, insertTexts, options.insertTexts || {}); options.insertTexts = extend({}, insertTexts, options.insertTexts || {});
// Merging the blockStyles, with the given options
options.blockStyles = extend({}, blockStyles, options.blockStyles || {});
// Change unique_id to uniqueId for backwards compatibility
if(options.autosave != undefined && options.autosave.unique_id != undefined && options.autosave.unique_id != "")
options.autosave.uniqueId = options.autosave.unique_id;
// Update this options // Update this options
this.options = options; this.options = options;
@ -13667,16 +13744,11 @@ function SimpleMDE(options) {
// The codemirror component is only available after rendering // The codemirror component is only available after rendering
// so, the setter for the initialValue can only run after // so, the setter for the initialValue can only run after
// the element has been rendered // the element has been rendered
if(options.initialValue) { if(options.initialValue && (!this.options.autosave || this.options.autosave.foundSavedValue !== true)) {
this.value(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. * Default markdown render.
*/ */
@ -13747,6 +13819,14 @@ SimpleMDE.prototype.render = function(el) {
if(cm.getOption("fullScreen")) toggleFullScreen(self); if(cm.getOption("fullScreen")) toggleFullScreen(self);
}; };
document.addEventListener("keydown", function(e) {
e = e || window.event;
if(e.keyCode == 27) {
if(self.codemirror.getOption("fullScreen")) toggleFullScreen(self);
}
}, false);
var mode, backdrop; var mode, backdrop;
if(options.spellChecker !== false) { if(options.spellChecker !== false) {
mode = "spell-checker"; mode = "spell-checker";
@ -13789,53 +13869,69 @@ SimpleMDE.prototype.render = function(el) {
}; };
SimpleMDE.prototype.autosave = function() { SimpleMDE.prototype.autosave = function() {
var content = this.value(); if(localStorage) {
var simplemde = this; var simplemde = this;
if(this.options.autosave.unique_id == undefined || this.options.autosave.unique_id == "") { if(this.options.autosave.uniqueId == undefined || this.options.autosave.uniqueId == "") {
console.log("SimpleMDE: You must set a unique_id to use the autosave feature"); console.log("SimpleMDE: You must set a uniqueId to use the autosave feature");
return; return;
} }
if(simplemde.element.form != null && simplemde.element.form != undefined) { if(simplemde.element.form != null && simplemde.element.form != undefined) {
simplemde.element.form.addEventListener("submit", function() { simplemde.element.form.addEventListener("submit", function() {
localStorage.setItem(simplemde.options.autosave.unique_id, ""); localStorage.removeItem("smde_" + simplemde.options.autosave.uniqueId);
}); });
} }
if(this.options.autosave.loaded !== true) { if(this.options.autosave.loaded !== true) {
if(localStorage.getItem(this.options.autosave.unique_id) != null) if(typeof localStorage.getItem("smde_" + this.options.autosave.uniqueId) == "string" && localStorage.getItem("smde_" + this.options.autosave.uniqueId) != "") {
this.codemirror.setValue(localStorage.getItem(this.options.autosave.unique_id)); this.codemirror.setValue(localStorage.getItem("smde_" + this.options.autosave.uniqueId));
this.options.autosave.foundSavedValue = true;
}
this.options.autosave.loaded = true; this.options.autosave.loaded = true;
} }
if(localStorage) { localStorage.setItem("smde_" + this.options.autosave.uniqueId, simplemde.value());
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;
var el = document.getElementById("autosaved"); el.innerHTML = "Autosaved: " + h + ":" + m + " " + dd;
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);
} else {
console.log("SimpleMDE: localStorage not available, cannot autosave");
} }
};
setTimeout(function() { SimpleMDE.prototype.clearAutosavedValue = function() {
simplemde.autosave(); if(localStorage) {
}, this.options.autosave.delay || 10000); if(this.options.autosave.uniqueId == undefined || this.options.autosave.uniqueId == "") {
console.log("SimpleMDE: You must set a uniqueId to use the autosave feature");
return;
}
localStorage.removeItem("smde_" + this.options.autosave.uniqueId);
} else {
console.log("SimpleMDE: localStorage not available, cannot autosave");
}
}; };
SimpleMDE.prototype.createSideBySide = function() { SimpleMDE.prototype.createSideBySide = function() {
@ -14033,6 +14129,7 @@ SimpleMDE.toggleUnorderedList = toggleUnorderedList;
SimpleMDE.toggleOrderedList = toggleOrderedList; SimpleMDE.toggleOrderedList = toggleOrderedList;
SimpleMDE.drawLink = drawLink; SimpleMDE.drawLink = drawLink;
SimpleMDE.drawImage = drawImage; SimpleMDE.drawImage = drawImage;
SimpleMDE.drawTable = drawTable;
SimpleMDE.drawHorizontalRule = drawHorizontalRule; SimpleMDE.drawHorizontalRule = drawHorizontalRule;
SimpleMDE.undo = undo; SimpleMDE.undo = undo;
SimpleMDE.redo = redo; SimpleMDE.redo = redo;
@ -14085,6 +14182,9 @@ SimpleMDE.prototype.drawLink = function() {
SimpleMDE.prototype.drawImage = function() { SimpleMDE.prototype.drawImage = function() {
drawImage(this); drawImage(this);
}; };
SimpleMDE.prototype.drawTable = function() {
drawTable(this);
};
SimpleMDE.prototype.drawHorizontalRule = function() { SimpleMDE.prototype.drawHorizontalRule = function() {
drawHorizontalRule(this); drawHorizontalRule(this);
}; };

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -4,6 +4,7 @@ var gulp = require("gulp"),
uglify = require("gulp-uglify"), uglify = require("gulp-uglify"),
concat = require("gulp-concat"), concat = require("gulp-concat"),
header = require("gulp-header"), header = require("gulp-header"),
buffer = require("vinyl-buffer"),
pkg = require("./package.json"), pkg = require("./package.json"),
debug = require("gulp-debug"), debug = require("gulp-debug"),
eslint = require("gulp-eslint"), eslint = require("gulp-eslint"),
@ -50,6 +51,7 @@ function taskBrowserify(opts) {
gulp.task("browserify:dev", ["lint"], function() { gulp.task("browserify:dev", ["lint"], function() {
return taskBrowserify({debug:true, standalone:"SimpleMDE"}) return taskBrowserify({debug:true, standalone:"SimpleMDE"})
.pipe(source("simplemde.debug.js")) .pipe(source("simplemde.debug.js"))
.pipe(buffer())
.pipe(header(banner, {pkg: pkg})) .pipe(header(banner, {pkg: pkg}))
.pipe(gulp.dest("./debug/")); .pipe(gulp.dest("./debug/"));
}); });
@ -57,6 +59,7 @@ gulp.task("browserify:dev", ["lint"], function() {
gulp.task("browserify:min", ["lint"], function() { gulp.task("browserify:min", ["lint"], function() {
return taskBrowserify({standalone:"SimpleMDE"}) return taskBrowserify({standalone:"SimpleMDE"})
.pipe(source("simplemde.js")) .pipe(source("simplemde.js"))
.pipe(buffer())
.pipe(header(banner, {pkg: pkg})) .pipe(header(banner, {pkg: pkg}))
.pipe(gulp.dest("./debug/")); .pipe(gulp.dest("./debug/"));
}); });
@ -67,6 +70,7 @@ gulp.task("scripts", ["browserify:dev", "browserify:min", "lint"], function() {
return gulp.src(js_files) return gulp.src(js_files)
.pipe(concat("simplemde.min.js")) .pipe(concat("simplemde.min.js"))
.pipe(uglify()) .pipe(uglify())
.pipe(buffer())
.pipe(header(banner, {pkg: pkg})) .pipe(header(banner, {pkg: pkg}))
.pipe(gulp.dest("./dist/")); .pipe(gulp.dest("./dist/"));
}); });
@ -80,10 +84,12 @@ gulp.task("styles", ["prettify-css"], function() {
return gulp.src(css_files) return gulp.src(css_files)
.pipe(concat("simplemde.css")) .pipe(concat("simplemde.css"))
.pipe(buffer())
.pipe(header(banner, {pkg: pkg})) .pipe(header(banner, {pkg: pkg}))
.pipe(gulp.dest("./debug/")) .pipe(gulp.dest("./debug/"))
.pipe(minifycss()) .pipe(minifycss())
.pipe(rename("simplemde.min.css")) .pipe(rename("simplemde.min.css"))
.pipe(buffer())
.pipe(header(banner, {pkg: pkg})) .pipe(header(banner, {pkg: pkg}))
.pipe(gulp.dest("./dist/")); .pipe(gulp.dest("./dist/"));
}); });

@ -1,6 +1,6 @@
{ {
"name": "simplemde", "name": "simplemde",
"version": "1.8.1", "version": "1.9.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",
@ -23,7 +23,7 @@
"dependencies": { "dependencies": {
"codemirror": "codemirror/CodeMirror", "codemirror": "codemirror/CodeMirror",
"codemirror-spell-checker": "nextstepwebs/codemirror-spell-checker", "codemirror-spell-checker": "nextstepwebs/codemirror-spell-checker",
"marked": "chjj/marked" "marked": "0.3.5"
}, },
"devDependencies": { "devDependencies": {
"browserify": "^11.2.0", "browserify": "^11.2.0",
@ -39,7 +39,8 @@
"gulp-minify-css": "^1.2.1", "gulp-minify-css": "^1.2.1",
"gulp-rename": "^1.2.2", "gulp-rename": "^1.2.2",
"gulp-uglify": "*", "gulp-uglify": "*",
"vinyl-source-stream": "^1.1.0" "vinyl-source-stream": "^1.1.0",
"vinyl-buffer": "*"
}, },
"browserify": { "browserify": {
"transform": [ "transform": [
@ -65,4 +66,4 @@
"type": "git", "type": "git",
"url": "https://github.com/NextStepWebs/simplemde-markdown-editor" "url": "https://github.com/NextStepWebs/simplemde-markdown-editor"
} }
} }

@ -218,7 +218,7 @@
top: 0; top: 0;
left: 0; left: 0;
background: #fafafa; background: #fafafa;
z-index: 2; z-index: 7;
overflow: auto; overflow: auto;
display: none; display: none;
box-sizing: border-box; box-sizing: border-box;
@ -232,7 +232,7 @@
top: 50px; top: 50px;
right: 0; right: 0;
background: #fafafa; background: #fafafa;
z-index: 9999; z-index: 9;
overflow: auto; overflow: auto;
display: none; display: none;
box-sizing: border-box; box-sizing: border-box;

@ -68,6 +68,7 @@ function createIcon(options, enableTooltips) {
} }
} }
el.tabIndex = -1;
el.className = options.className; el.className = options.className;
return el; return el;
} }
@ -171,7 +172,7 @@ function toggleFullScreen(editor) {
* Action for toggling bold. * Action for toggling bold.
*/ */
function toggleBold(editor) { function toggleBold(editor) {
_toggleBlock(editor, "bold", "**"); _toggleBlock(editor, "bold", editor.options.blockStyles.bold);
} }
@ -179,7 +180,7 @@ function toggleBold(editor) {
* Action for toggling italic. * Action for toggling italic.
*/ */
function toggleItalic(editor) { function toggleItalic(editor) {
_toggleBlock(editor, "italic", "*"); _toggleBlock(editor, "italic", editor.options.blockStyles.italic);
} }
@ -283,6 +284,16 @@ function drawImage(editor) {
_replaceSelection(cm, stat.image, options.insertTexts.image); _replaceSelection(cm, stat.image, options.insertTexts.image);
} }
/**
* Action for drawing a table.
*/
function drawTable(editor) {
var cm = editor.codemirror;
var stat = getState(cm);
var options = editor.options;
_replaceSelection(cm, stat.table, options.insertTexts.table);
}
/** /**
* Action for drawing a horizontal rule. * Action for drawing a horizontal rule.
*/ */
@ -655,19 +666,20 @@ function wordCount(data) {
return count; return count;
} }
var toolbarBuiltInButtons = { var toolbarBuiltInButtons = {
"bold": { "bold": {
name: "bold", name: "bold",
action: toggleBold, action: toggleBold,
className: "fa fa-bold", className: "fa fa-bold",
title: "Bold (Ctrl+B)" title: "Bold (Ctrl+B)",
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 (Ctrl+I)",
default: true
}, },
"strikethrough": { "strikethrough": {
name: "strikethrough", name: "strikethrough",
@ -679,7 +691,8 @@ var toolbarBuiltInButtons = {
name: "heading", name: "heading",
action: toggleHeadingSmaller, action: toggleHeadingSmaller,
className: "fa fa-header", className: "fa fa-header",
title: "Heading (Ctrl+H)" title: "Heading (Ctrl+H)",
default: true
}, },
"heading-smaller": { "heading-smaller": {
name: "heading-smaller", name: "heading-smaller",
@ -711,6 +724,9 @@ var toolbarBuiltInButtons = {
className: "fa fa-header fa-header-x fa-header-3", className: "fa fa-header fa-header-x fa-header-3",
title: "Small Heading" title: "Small Heading"
}, },
"separator-1": {
name: "separator-1"
},
"code": { "code": {
name: "code", name: "code",
action: toggleCodeBlock, action: toggleCodeBlock,
@ -721,31 +737,45 @@ var toolbarBuiltInButtons = {
name: "quote", name: "quote",
action: toggleBlockquote, action: toggleBlockquote,
className: "fa fa-quote-left", className: "fa fa-quote-left",
title: "Quote (Ctrl+')" title: "Quote (Ctrl+')",
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 (Ctrl+L)",
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 (Ctrl+Alt+L)",
default: true
},
"separator-2": {
name: "separator-2"
}, },
"link": { "link": {
name: "link", name: "link",
action: drawLink, action: drawLink,
className: "fa fa-link", className: "fa fa-link",
title: "Create Link (Ctrl+K)" title: "Create Link (Ctrl+K)",
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 (Ctrl+Alt+I)",
default: true
},
"table": {
name: "table",
action: drawTable,
className: "fa fa-table",
title: "Insert Table"
}, },
"horizontal-rule": { "horizontal-rule": {
name: "horizontal-rule", name: "horizontal-rule",
@ -753,38 +783,50 @@ var toolbarBuiltInButtons = {
className: "fa fa-minus", className: "fa fa-minus",
title: "Insert Horizontal Line" title: "Insert Horizontal Line"
}, },
"separator-3": {
name: "separator-3"
},
"preview": { "preview": {
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 (Ctrl+P)",
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 (F9)",
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 (F11)",
default: true
}, },
"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
} }
}; };
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"],
horizontalRule: ["", "\n\n-----\n\n"] horizontalRule: ["", "\n\n-----\n\n"]
}; };
var blockStyles = {
"bold": "**",
"italic": "*"
};
/** /**
* Interface of SimpleMDE. * Interface of SimpleMDE.
@ -835,10 +877,28 @@ function SimpleMDE(options) {
} }
// Handle toolbar and status bar // Handle toolbar
if(options.toolbar !== false) if(options.toolbar === undefined) {
options.toolbar = options.toolbar || SimpleMDE.toolbar; // Initialize
options.toolbar = [];
// Loop over the built in buttons, to get the preferred order
for(var key in toolbarBuiltInButtons) {
if(toolbarBuiltInButtons.hasOwnProperty(key)) {
if(key.indexOf("separator-") != -1) {
options.toolbar.push("|");
}
if(toolbarBuiltInButtons[key].default === true || (options.showIcons && options.showIcons.constructor === Array && options.showIcons.indexOf(key) != -1)) {
options.toolbar.push(key);
}
}
}
}
// Handle status bar
if(!options.hasOwnProperty("status")) { if(!options.hasOwnProperty("status")) {
options.status = ["autosave", "lines", "words", "cursor"]; options.status = ["autosave", "lines", "words", "cursor"];
} }
@ -861,6 +921,15 @@ function SimpleMDE(options) {
options.insertTexts = extend({}, insertTexts, options.insertTexts || {}); options.insertTexts = extend({}, insertTexts, options.insertTexts || {});
// Merging the blockStyles, with the given options
options.blockStyles = extend({}, blockStyles, options.blockStyles || {});
// Change unique_id to uniqueId for backwards compatibility
if(options.autosave != undefined && options.autosave.unique_id != undefined && options.autosave.unique_id != "")
options.autosave.uniqueId = options.autosave.unique_id;
// Update this options // Update this options
this.options = options; this.options = options;
@ -872,16 +941,11 @@ function SimpleMDE(options) {
// The codemirror component is only available after rendering // The codemirror component is only available after rendering
// so, the setter for the initialValue can only run after // so, the setter for the initialValue can only run after
// the element has been rendered // the element has been rendered
if(options.initialValue) { if(options.initialValue && (!this.options.autosave || this.options.autosave.foundSavedValue !== true)) {
this.value(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. * Default markdown render.
*/ */
@ -952,6 +1016,14 @@ SimpleMDE.prototype.render = function(el) {
if(cm.getOption("fullScreen")) toggleFullScreen(self); if(cm.getOption("fullScreen")) toggleFullScreen(self);
}; };
document.addEventListener("keydown", function(e) {
e = e || window.event;
if(e.keyCode == 27) {
if(self.codemirror.getOption("fullScreen")) toggleFullScreen(self);
}
}, false);
var mode, backdrop; var mode, backdrop;
if(options.spellChecker !== false) { if(options.spellChecker !== false) {
mode = "spell-checker"; mode = "spell-checker";
@ -994,53 +1066,69 @@ SimpleMDE.prototype.render = function(el) {
}; };
SimpleMDE.prototype.autosave = function() { SimpleMDE.prototype.autosave = function() {
var content = this.value(); if(localStorage) {
var simplemde = this; var simplemde = this;
if(this.options.autosave.unique_id == undefined || this.options.autosave.unique_id == "") { if(this.options.autosave.uniqueId == undefined || this.options.autosave.uniqueId == "") {
console.log("SimpleMDE: You must set a unique_id to use the autosave feature"); console.log("SimpleMDE: You must set a uniqueId to use the autosave feature");
return; return;
} }
if(simplemde.element.form != null && simplemde.element.form != undefined) { if(simplemde.element.form != null && simplemde.element.form != undefined) {
simplemde.element.form.addEventListener("submit", function() { simplemde.element.form.addEventListener("submit", function() {
localStorage.setItem(simplemde.options.autosave.unique_id, ""); localStorage.removeItem("smde_" + simplemde.options.autosave.uniqueId);
}); });
} }
if(this.options.autosave.loaded !== true) { if(this.options.autosave.loaded !== true) {
if(typeof localStorage.getItem(this.options.autosave.unique_id) == "string" && localStorage.getItem(this.options.autosave.unique_id) != "") if(typeof localStorage.getItem("smde_" + this.options.autosave.uniqueId) == "string" && localStorage.getItem("smde_" + this.options.autosave.uniqueId) != "") {
this.codemirror.setValue(localStorage.getItem(this.options.autosave.unique_id)); this.codemirror.setValue(localStorage.getItem("smde_" + this.options.autosave.uniqueId));
this.options.autosave.foundSavedValue = true;
}
this.options.autosave.loaded = true; this.options.autosave.loaded = true;
} }
if(localStorage) { localStorage.setItem("smde_" + this.options.autosave.uniqueId, simplemde.value());
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;
var el = document.getElementById("autosaved"); el.innerHTML = "Autosaved: " + h + ":" + m + " " + dd;
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);
} else {
console.log("SimpleMDE: localStorage not available, cannot autosave");
} }
};
setTimeout(function() { SimpleMDE.prototype.clearAutosavedValue = function() {
simplemde.autosave(); if(localStorage) {
}, this.options.autosave.delay || 10000); if(this.options.autosave.uniqueId == undefined || this.options.autosave.uniqueId == "") {
console.log("SimpleMDE: You must set a uniqueId to use the autosave feature");
return;
}
localStorage.removeItem("smde_" + this.options.autosave.uniqueId);
} else {
console.log("SimpleMDE: localStorage not available, cannot autosave");
}
}; };
SimpleMDE.prototype.createSideBySide = function() { SimpleMDE.prototype.createSideBySide = function() {
@ -1238,6 +1326,7 @@ SimpleMDE.toggleUnorderedList = toggleUnorderedList;
SimpleMDE.toggleOrderedList = toggleOrderedList; SimpleMDE.toggleOrderedList = toggleOrderedList;
SimpleMDE.drawLink = drawLink; SimpleMDE.drawLink = drawLink;
SimpleMDE.drawImage = drawImage; SimpleMDE.drawImage = drawImage;
SimpleMDE.drawTable = drawTable;
SimpleMDE.drawHorizontalRule = drawHorizontalRule; SimpleMDE.drawHorizontalRule = drawHorizontalRule;
SimpleMDE.undo = undo; SimpleMDE.undo = undo;
SimpleMDE.redo = redo; SimpleMDE.redo = redo;
@ -1290,6 +1379,9 @@ SimpleMDE.prototype.drawLink = function() {
SimpleMDE.prototype.drawImage = function() { SimpleMDE.prototype.drawImage = function() {
drawImage(this); drawImage(this);
}; };
SimpleMDE.prototype.drawTable = function() {
drawTable(this);
};
SimpleMDE.prototype.drawHorizontalRule = function() { SimpleMDE.prototype.drawHorizontalRule = function() {
drawHorizontalRule(this); drawHorizontalRule(this);
}; };

Loading…
Cancel
Save