2899 lines
82 KiB
JavaScript
2899 lines
82 KiB
JavaScript
/**
|
|
* EpicEditor - An Embeddable JavaScript Markdown Editor (https://github.com/OscarGodson/EpicEditor)
|
|
* Copyright (c) 2011-2012, Oscar Godson. (MIT Licensed)
|
|
*/
|
|
|
|
(function (window, undefined) {
|
|
/**
|
|
* Applies attributes to a DOM object
|
|
* @param {object} context The DOM obj you want to apply the attributes to
|
|
* @param {object} attrs A key/value pair of attributes you want to apply
|
|
* @returns {undefined}
|
|
*/
|
|
function _applyAttrs(context, attrs) {
|
|
for (var attr in attrs) {
|
|
if (attrs.hasOwnProperty(attr)) {
|
|
context[attr] = attrs[attr];
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Applies styles to a DOM object
|
|
* @param {object} context The DOM obj you want to apply the attributes to
|
|
* @param {object} attrs A key/value pair of attributes you want to apply
|
|
* @returns {undefined}
|
|
*/
|
|
function _applyStyles(context, attrs) {
|
|
for (var attr in attrs) {
|
|
if (attrs.hasOwnProperty(attr)) {
|
|
context.style[attr] = attrs[attr];
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Returns a DOM objects computed style
|
|
* @param {object} el The element you want to get the style from
|
|
* @param {string} styleProp The property you want to get from the element
|
|
* @returns {string} Returns a string of the value. If property is not set it will return a blank string
|
|
*/
|
|
function _getStyle(el, styleProp) {
|
|
var x = el
|
|
, y = null;
|
|
if (window.getComputedStyle) {
|
|
y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp);
|
|
}
|
|
else if (x.currentStyle) {
|
|
y = x.currentStyle[styleProp];
|
|
}
|
|
return y;
|
|
}
|
|
|
|
/**
|
|
* Saves the current style state for the styles requested, then applies styles
|
|
* to overwrite the existing one. The old styles are returned as an object so
|
|
* you can pass it back in when you want to revert back to the old style
|
|
* @param {object} el The element to get the styles of
|
|
* @param {string} type Can be "save" or "apply". apply will just apply styles you give it. Save will write styles
|
|
* @param {object} styles Key/value style/property pairs
|
|
* @returns {object}
|
|
*/
|
|
function _saveStyleState(el, type, styles) {
|
|
var returnState = {}
|
|
, style;
|
|
if (type === 'save') {
|
|
for (style in styles) {
|
|
if (styles.hasOwnProperty(style)) {
|
|
returnState[style] = _getStyle(el, style);
|
|
}
|
|
}
|
|
// After it's all done saving all the previous states, change the styles
|
|
_applyStyles(el, styles);
|
|
}
|
|
else if (type === 'apply') {
|
|
_applyStyles(el, styles);
|
|
}
|
|
return returnState;
|
|
}
|
|
|
|
/**
|
|
* Gets an elements total width including it's borders and padding
|
|
* @param {object} el The element to get the total width of
|
|
* @returns {int}
|
|
*/
|
|
function _outerWidth(el) {
|
|
var b = parseInt(_getStyle(el, 'border-left-width'), 10) + parseInt(_getStyle(el, 'border-right-width'), 10)
|
|
, p = parseInt(_getStyle(el, 'padding-left'), 10) + parseInt(_getStyle(el, 'padding-right'), 10)
|
|
, w = el.offsetWidth
|
|
, t;
|
|
// For IE in case no border is set and it defaults to "medium"
|
|
if (isNaN(b)) { b = 0; }
|
|
t = b + p + w;
|
|
return t;
|
|
}
|
|
|
|
/**
|
|
* Gets an elements total height including it's borders and padding
|
|
* @param {object} el The element to get the total width of
|
|
* @returns {int}
|
|
*/
|
|
function _outerHeight(el) {
|
|
var b = parseInt(_getStyle(el, 'border-top-width'), 10) + parseInt(_getStyle(el, 'border-bottom-width'), 10)
|
|
, p = parseInt(_getStyle(el, 'padding-top'), 10) + parseInt(_getStyle(el, 'padding-bottom'), 10)
|
|
, w = parseInt(_getStyle(el, 'height'), 10)
|
|
, t;
|
|
// For IE in case no border is set and it defaults to "medium"
|
|
if (isNaN(b)) { b = 0; }
|
|
t = b + p + w;
|
|
return t;
|
|
}
|
|
|
|
/**
|
|
* Inserts a <link> tag specifically for CSS
|
|
* @param {string} path The path to the CSS file
|
|
* @param {object} context In what context you want to apply this to (document, iframe, etc)
|
|
* @param {string} id An id for you to reference later for changing properties of the <link>
|
|
* @returns {undefined}
|
|
*/
|
|
function _insertCSSLink(path, context, id) {
|
|
id = id || '';
|
|
var headID = context.getElementsByTagName("head")[0]
|
|
, cssNode = context.createElement('link');
|
|
|
|
_applyAttrs(cssNode, {
|
|
type: 'text/css'
|
|
, id: id
|
|
, rel: 'stylesheet'
|
|
, href: path
|
|
, name: path
|
|
, media: 'screen'
|
|
});
|
|
|
|
headID.appendChild(cssNode);
|
|
}
|
|
|
|
// Simply replaces a class (o), to a new class (n) on an element provided (e)
|
|
function _replaceClass(e, o, n) {
|
|
e.className = e.className.replace(o, n);
|
|
}
|
|
|
|
// Feature detects an iframe to get the inner document for writing to
|
|
function _getIframeInnards(el) {
|
|
return el.contentDocument || el.contentWindow.document;
|
|
}
|
|
|
|
// Grabs the text from an element and preserves whitespace
|
|
function _getText(el) {
|
|
var theText;
|
|
// Make sure to check for type of string because if the body of the page
|
|
// doesn't have any text it'll be "" which is falsey and will go into
|
|
// the else which is meant for Firefox and shit will break
|
|
if (typeof document.body.innerText == 'string') {
|
|
theText = el.innerText;
|
|
}
|
|
else {
|
|
// First replace <br>s before replacing the rest of the HTML
|
|
theText = el.innerHTML.replace(/<br>/gi, "\n");
|
|
// Now we can clean the HTML
|
|
theText = theText.replace(/<(?:.|\n)*?>/gm, '');
|
|
// Now fix HTML entities
|
|
theText = theText.replace(/</gi, '<');
|
|
theText = theText.replace(/>/gi, '>');
|
|
}
|
|
return theText;
|
|
}
|
|
|
|
function _setText(el, content) {
|
|
// Don't convert lt/gt characters as HTML when viewing the editor window
|
|
// TODO: Write a test to catch regressions for this
|
|
content = content.replace(/</g, '<');
|
|
content = content.replace(/>/g, '>');
|
|
content = content.replace(/\n/g, '<br>');
|
|
|
|
// Make sure to there aren't two spaces in a row (replace one with )
|
|
// If you find and replace every space with a text will not wrap.
|
|
// Hence the name (Non-Breaking-SPace).
|
|
// TODO: Probably need to test this somehow...
|
|
content = content.replace(/<br>\s/g, '<br> ')
|
|
content = content.replace(/\s\s\s/g, ' ')
|
|
content = content.replace(/\s\s/g, ' ')
|
|
content = content.replace(/^ /, ' ')
|
|
|
|
el.innerHTML = content;
|
|
return true;
|
|
}
|
|
|
|
/**
|
|
* Converts the 'raw' format of a file's contents into plaintext
|
|
* @param {string} content Contents of the file
|
|
* @returns {string} the sanitized content
|
|
*/
|
|
function _sanitizeRawContent(content) {
|
|
// Get this, 2 spaces in a content editable actually converts to:
|
|
// 0020 00a0, meaning, "space no-break space". So, manually convert
|
|
// no-break spaces to spaces again before handing to marked.
|
|
// Also, WebKit converts no-break to unicode equivalent and FF HTML.
|
|
return content.replace(/\u00a0/g, ' ').replace(/ /g, ' ');
|
|
}
|
|
|
|
/**
|
|
* Will return the version number if the browser is IE. If not will return -1
|
|
* TRY NEVER TO USE THIS AND USE FEATURE DETECTION IF POSSIBLE
|
|
* @returns {Number} -1 if false or the version number if true
|
|
*/
|
|
function _isIE() {
|
|
var rv = -1 // Return value assumes failure.
|
|
, ua = navigator.userAgent
|
|
, re;
|
|
if (navigator.appName == 'Microsoft Internet Explorer') {
|
|
re = /MSIE ([0-9]{1,}[\.0-9]{0,})/;
|
|
if (re.exec(ua) != null) {
|
|
rv = parseFloat(RegExp.$1, 10);
|
|
}
|
|
}
|
|
return rv;
|
|
}
|
|
|
|
/**
|
|
* Same as the isIE(), but simply returns a boolean
|
|
* THIS IS TERRIBLE AND IS ONLY USED BECAUSE FULLSCREEN IN SAFARI IS BORKED
|
|
* If some other engine uses WebKit and has support for fullscreen they
|
|
* probably wont get native fullscreen until Safari's fullscreen is fixed
|
|
* @returns {Boolean} true if Safari
|
|
*/
|
|
function _isSafari() {
|
|
var n = window.navigator;
|
|
return n.userAgent.indexOf('Safari') > -1 && n.userAgent.indexOf('Chrome') == -1;
|
|
}
|
|
|
|
/**
|
|
* Same as the isIE(), but simply returns a boolean
|
|
* THIS IS TERRIBLE ONLY USE IF ABSOLUTELY NEEDED
|
|
* @returns {Boolean} true if Safari
|
|
*/
|
|
function _isFirefox() {
|
|
var n = window.navigator;
|
|
return n.userAgent.indexOf('Firefox') > -1 && n.userAgent.indexOf('Seamonkey') == -1;
|
|
}
|
|
|
|
/**
|
|
* Determines if supplied value is a function
|
|
* @param {object} object to determine type
|
|
*/
|
|
function _isFunction(functionToCheck) {
|
|
var getType = {};
|
|
return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
|
|
}
|
|
|
|
/**
|
|
* Overwrites obj1's values with obj2's and adds obj2's if non existent in obj1
|
|
* @param {boolean} [deepMerge=false] If true, will deep merge meaning it will merge sub-objects like {obj:obj2{foo:'bar'}}
|
|
* @param {object} first object
|
|
* @param {object} second object
|
|
* @returnss {object} a new object based on obj1 and obj2
|
|
*/
|
|
function _mergeObjs() {
|
|
// copy reference to target object
|
|
var target = arguments[0] || {}
|
|
, i = 1
|
|
, length = arguments.length
|
|
, deep = false
|
|
, options
|
|
, name
|
|
, src
|
|
, copy
|
|
|
|
// Handle a deep copy situation
|
|
if (typeof target === "boolean") {
|
|
deep = target;
|
|
target = arguments[1] || {};
|
|
// skip the boolean and the target
|
|
i = 2;
|
|
}
|
|
|
|
// Handle case when target is a string or something (possible in deep copy)
|
|
if (typeof target !== "object" && !_isFunction(target)) {
|
|
target = {};
|
|
}
|
|
// extend jQuery itself if only one argument is passed
|
|
if (length === i) {
|
|
target = this;
|
|
--i;
|
|
}
|
|
|
|
for (; i < length; i++) {
|
|
// Only deal with non-null/undefined values
|
|
if ((options = arguments[i]) != null) {
|
|
// Extend the base object
|
|
for (name in options) {
|
|
// @NOTE: added hasOwnProperty check
|
|
if (options.hasOwnProperty(name)) {
|
|
src = target[name];
|
|
copy = options[name];
|
|
// Prevent never-ending loop
|
|
if (target === copy) {
|
|
continue;
|
|
}
|
|
// Recurse if we're merging object values
|
|
if (deep && copy && typeof copy === "object" && !copy.nodeType) {
|
|
target[name] = _mergeObjs(deep,
|
|
// Never move original objects, clone them
|
|
src || (copy.length != null ? [] : {})
|
|
, copy);
|
|
} else if (copy !== undefined) { // Don't bring in undefined values
|
|
target[name] = copy;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Return the modified object
|
|
return target;
|
|
}
|
|
|
|
/**
|
|
* Initiates the EpicEditor object and sets up offline storage as well
|
|
* @class Represents an EpicEditor instance
|
|
* @param {object} options An optional customization object
|
|
* @returns {object} EpicEditor will be returned
|
|
*/
|
|
function EpicEditor(options) {
|
|
// Default settings will be overwritten/extended by options arg
|
|
var self = this
|
|
, opts = options || {}
|
|
, _defaultFileSchema
|
|
, _defaultFile
|
|
, defaults = { container: 'epiceditor'
|
|
, basePath: 'epiceditor'
|
|
, textarea: undefined
|
|
, clientSideStorage: true
|
|
, localStorageName: 'epiceditor'
|
|
, useNativeFullscreen: true
|
|
, file: { name: null
|
|
, defaultContent: ''
|
|
, autoSave: 100 // Set to false for no auto saving
|
|
}
|
|
, theme: { base: '/themes/base/epiceditor.css'
|
|
, preview: '/themes/preview/github.css'
|
|
, editor: '/themes/editor/epic-dark.css'
|
|
}
|
|
, focusOnLoad: false
|
|
, shortcut: { modifier: 18 // alt keycode
|
|
, fullscreen: 70 // f keycode
|
|
, preview: 80 // p keycode
|
|
}
|
|
, string: { togglePreview: 'Toggle Preview Mode'
|
|
, toggleEdit: 'Toggle Edit Mode'
|
|
, toggleFullscreen: 'Enter Fullscreen'
|
|
}
|
|
, parser: typeof marked == 'function' ? marked : null
|
|
, autogrow: false
|
|
, button: { fullscreen: true
|
|
, preview: true
|
|
, bar: "auto"
|
|
}
|
|
}
|
|
, defaultStorage
|
|
, autogrowDefaults = { minHeight: 80
|
|
, maxHeight: false
|
|
, scroll: true
|
|
};
|
|
|
|
self.settings = _mergeObjs(true, defaults, opts);
|
|
|
|
var buttons = self.settings.button;
|
|
self._fullscreenEnabled = typeof(buttons) === 'object' ? typeof buttons.fullscreen === 'undefined' || buttons.fullscreen : buttons === true;
|
|
self._editEnabled = typeof(buttons) === 'object' ? typeof buttons.edit === 'undefined' || buttons.edit : buttons === true;
|
|
self._previewEnabled = typeof(buttons) === 'object' ? typeof buttons.preview === 'undefined' || buttons.preview : buttons === true;
|
|
|
|
if (!(typeof self.settings.parser == 'function' && typeof self.settings.parser('TEST') == 'string')) {
|
|
self.settings.parser = function (str) {
|
|
return str;
|
|
}
|
|
}
|
|
|
|
if (self.settings.autogrow) {
|
|
if (self.settings.autogrow === true) {
|
|
self.settings.autogrow = autogrowDefaults;
|
|
}
|
|
else {
|
|
self.settings.autogrow = _mergeObjs(true, autogrowDefaults, self.settings.autogrow);
|
|
}
|
|
self._oldHeight = -1;
|
|
}
|
|
|
|
// If you put an absolute link as the path of any of the themes ignore the basePath
|
|
// preview theme
|
|
if (!self.settings.theme.preview.match(/^https?:\/\//)) {
|
|
self.settings.theme.preview = self.settings.basePath + self.settings.theme.preview;
|
|
}
|
|
// editor theme
|
|
if (!self.settings.theme.editor.match(/^https?:\/\//)) {
|
|
self.settings.theme.editor = self.settings.basePath + self.settings.theme.editor;
|
|
}
|
|
// base theme
|
|
if (!self.settings.theme.base.match(/^https?:\/\//)) {
|
|
self.settings.theme.base = self.settings.basePath + self.settings.theme.base;
|
|
}
|
|
|
|
// Grab the container element and save it to self.element
|
|
// if it's a string assume it's an ID and if it's an object
|
|
// assume it's a DOM element
|
|
if (typeof self.settings.container == 'string') {
|
|
self.element = document.getElementById(self.settings.container);
|
|
}
|
|
else if (typeof self.settings.container == 'object') {
|
|
self.element = self.settings.container;
|
|
}
|
|
|
|
// Figure out the file name. If no file name is given we'll use the ID.
|
|
// If there's no ID either we'll use a namespaced file name that's incremented
|
|
// based on the calling order. As long as it doesn't change, drafts will be saved.
|
|
if (!self.settings.file.name) {
|
|
if (typeof self.settings.container == 'string') {
|
|
self.settings.file.name = self.settings.container;
|
|
}
|
|
else if (typeof self.settings.container == 'object') {
|
|
if (self.element.id) {
|
|
self.settings.file.name = self.element.id;
|
|
}
|
|
else {
|
|
if (!EpicEditor._data.unnamedEditors) {
|
|
EpicEditor._data.unnamedEditors = [];
|
|
}
|
|
EpicEditor._data.unnamedEditors.push(self);
|
|
self.settings.file.name = '__epiceditor-untitled-' + EpicEditor._data.unnamedEditors.length;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (self.settings.button.bar === "show") {
|
|
self.settings.button.bar = true;
|
|
}
|
|
|
|
if (self.settings.button.bar === "hide") {
|
|
self.settings.button.bar = false;
|
|
}
|
|
|
|
// Protect the id and overwrite if passed in as an option
|
|
// TODO: Put underscrore to denote that this is private
|
|
self._instanceId = 'epiceditor-' + Math.round(Math.random() * 100000);
|
|
self._storage = {};
|
|
self._canSave = true;
|
|
|
|
// Setup local storage of files
|
|
self._defaultFileSchema = function () {
|
|
return {
|
|
content: self.settings.file.defaultContent
|
|
, created: new Date()
|
|
, modified: new Date()
|
|
}
|
|
}
|
|
|
|
if (localStorage && self.settings.clientSideStorage) {
|
|
this._storage = localStorage;
|
|
if (this._storage[self.settings.localStorageName] && self.getFiles(self.settings.file.name) === undefined) {
|
|
_defaultFile = self._defaultFileSchema();
|
|
_defaultFile.content = self.settings.file.defaultContent;
|
|
}
|
|
}
|
|
|
|
if (!this._storage[self.settings.localStorageName]) {
|
|
defaultStorage = {};
|
|
defaultStorage[self.settings.file.name] = self._defaultFileSchema();
|
|
defaultStorage = JSON.stringify(defaultStorage);
|
|
this._storage[self.settings.localStorageName] = defaultStorage;
|
|
}
|
|
|
|
// A string to prepend files with to save draft versions of files
|
|
// and reset all preview drafts on each load!
|
|
self._previewDraftLocation = '__draft-';
|
|
self._storage[self._previewDraftLocation + self.settings.localStorageName] = self._storage[self.settings.localStorageName];
|
|
|
|
// This needs to replace the use of classes to check the state of EE
|
|
self._eeState = {
|
|
fullscreen: false
|
|
, preview: false
|
|
, edit: false
|
|
, loaded: false
|
|
, unloaded: false
|
|
}
|
|
|
|
// Now that it exists, allow binding of events if it doesn't exist yet
|
|
if (!self.events) {
|
|
self.events = {};
|
|
}
|
|
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* Inserts the EpicEditor into the DOM via an iframe and gets it ready for editing and previewing
|
|
* @returns {object} EpicEditor will be returned
|
|
*/
|
|
EpicEditor.prototype.load = function (callback) {
|
|
|
|
// Get out early if it's already loaded
|
|
if (this.is('loaded')) { return this; }
|
|
|
|
// TODO: Gotta get the privates with underscores!
|
|
// TODO: Gotta document what these are for...
|
|
var self = this
|
|
, _HtmlTemplates
|
|
, iframeElement
|
|
, baseTag
|
|
, utilBtns
|
|
, utilBar
|
|
, utilBarTimer
|
|
, keypressTimer
|
|
, mousePos = { y: -1, x: -1 }
|
|
, _elementStates
|
|
, _isInEdit
|
|
, nativeFs = false
|
|
, nativeFsWebkit = false
|
|
, nativeFsMoz = false
|
|
, nativeFsW3C = false
|
|
, fsElement
|
|
, isMod = false
|
|
, isCtrl = false
|
|
, eventableIframes
|
|
, i // i is reused for loops
|
|
, boundAutogrow;
|
|
|
|
// Startup is a way to check if this EpicEditor is starting up. Useful for
|
|
// checking and doing certain things before EpicEditor emits a load event.
|
|
self._eeState.startup = true;
|
|
|
|
if (self.settings.useNativeFullscreen) {
|
|
nativeFsWebkit = document.body.webkitRequestFullScreen ? true : false;
|
|
nativeFsMoz = document.body.mozRequestFullScreen ? true : false;
|
|
nativeFsW3C = document.body.requestFullscreen ? true : false;
|
|
nativeFs = nativeFsWebkit || nativeFsMoz || nativeFsW3C;
|
|
}
|
|
|
|
// Fucking Safari's native fullscreen works terribly
|
|
// REMOVE THIS IF SAFARI 7 WORKS BETTER
|
|
if (_isSafari()) {
|
|
nativeFs = false;
|
|
nativeFsWebkit = false;
|
|
}
|
|
|
|
// It opens edit mode by default (for now);
|
|
if (!self.is('edit') && !self.is('preview')) {
|
|
self._eeState.edit = true;
|
|
}
|
|
|
|
callback = callback || function () {};
|
|
|
|
// The editor HTML
|
|
// TODO: edit-mode class should be dynamically added
|
|
_HtmlTemplates = {
|
|
// This is wrapping iframe element. It contains the other two iframes and the utilbar
|
|
chrome: '<div id="epiceditor-wrapper" class="epiceditor-edit-mode">' +
|
|
'<iframe frameborder="0" id="epiceditor-editor-frame"></iframe>' +
|
|
'<iframe frameborder="0" id="epiceditor-previewer-frame"></iframe>' +
|
|
'<div id="epiceditor-utilbar">' +
|
|
(self._previewEnabled ? '<button title="' + this.settings.string.togglePreview + '" class="epiceditor-toggle-btn epiceditor-toggle-preview-btn"></button> ' : '') +
|
|
(self._editEnabled ? '<button title="' + this.settings.string.toggleEdit + '" class="epiceditor-toggle-btn epiceditor-toggle-edit-btn"></button> ' : '') +
|
|
(self._fullscreenEnabled ? '<button title="' + this.settings.string.toggleFullscreen + '" class="epiceditor-fullscreen-btn"></button>' : '') +
|
|
'</div>' +
|
|
'</div>'
|
|
|
|
// The previewer is just an empty box for the generated HTML to go into
|
|
, previewer: '<div id="epiceditor-preview"></div>'
|
|
, editor: '<!doctype HTML>'
|
|
};
|
|
|
|
// Write an iframe and then select it for the editor
|
|
self.element.innerHTML = '<iframe scrolling="no" frameborder="0" id= "' + self._instanceId + '"></iframe>';
|
|
|
|
// Because browsers add things like invisible padding and margins and stuff
|
|
// to iframes, we need to set manually set the height so that the height
|
|
// doesn't keep increasing (by 2px?) every time reflow() is called.
|
|
// FIXME: Figure out how to fix this without setting this
|
|
self.element.style.height = self.element.offsetHeight + 'px';
|
|
|
|
iframeElement = document.getElementById(self._instanceId);
|
|
|
|
// Store a reference to the iframeElement itself
|
|
self.iframeElement = iframeElement;
|
|
|
|
// Grab the innards of the iframe (returns the document.body)
|
|
// TODO: Change self.iframe to self.iframeDocument
|
|
self.iframe = _getIframeInnards(iframeElement);
|
|
self.iframe.open();
|
|
self.iframe.write(_HtmlTemplates.chrome);
|
|
|
|
// Now that we got the innards of the iframe, we can grab the other iframes
|
|
self.editorIframe = self.iframe.getElementById('epiceditor-editor-frame')
|
|
self.previewerIframe = self.iframe.getElementById('epiceditor-previewer-frame');
|
|
|
|
// Setup the editor iframe
|
|
self.editorIframeDocument = _getIframeInnards(self.editorIframe);
|
|
self.editorIframeDocument.open();
|
|
// Need something for... you guessed it, Firefox
|
|
self.editorIframeDocument.write(_HtmlTemplates.editor);
|
|
self.editorIframeDocument.close();
|
|
|
|
// Setup the previewer iframe
|
|
self.previewerIframeDocument = _getIframeInnards(self.previewerIframe);
|
|
self.previewerIframeDocument.open();
|
|
self.previewerIframeDocument.write(_HtmlTemplates.previewer);
|
|
|
|
// Base tag is added so that links will open a new tab and not inside of the iframes
|
|
baseTag = self.previewerIframeDocument.createElement('base');
|
|
baseTag.target = '_blank';
|
|
self.previewerIframeDocument.getElementsByTagName('head')[0].appendChild(baseTag);
|
|
|
|
self.previewerIframeDocument.close();
|
|
|
|
self.reflow();
|
|
|
|
// Insert Base Stylesheet
|
|
_insertCSSLink(self.settings.theme.base, self.iframe, 'theme');
|
|
|
|
// Insert Editor Stylesheet
|
|
_insertCSSLink(self.settings.theme.editor, self.editorIframeDocument, 'theme');
|
|
|
|
// Insert Previewer Stylesheet
|
|
_insertCSSLink(self.settings.theme.preview, self.previewerIframeDocument, 'theme');
|
|
|
|
// Add a relative style to the overall wrapper to keep CSS relative to the editor
|
|
self.iframe.getElementById('epiceditor-wrapper').style.position = 'relative';
|
|
|
|
// Set the position to relative so we hide them with left: -999999px
|
|
self.editorIframe.style.position = 'absolute';
|
|
self.previewerIframe.style.position = 'absolute';
|
|
|
|
// Now grab the editor and previewer for later use
|
|
self.editor = self.editorIframeDocument.body;
|
|
self.previewer = self.previewerIframeDocument.getElementById('epiceditor-preview');
|
|
|
|
self.editor.contentEditable = true;
|
|
|
|
// Firefox's <body> gets all fucked up so, to be sure, we need to hardcode it
|
|
self.iframe.body.style.height = this.element.offsetHeight + 'px';
|
|
|
|
// Should actually check what mode it's in!
|
|
self.previewerIframe.style.left = '-999999px';
|
|
|
|
// Keep long lines from being longer than the editor
|
|
this.editorIframeDocument.body.style.wordWrap = 'break-word';
|
|
|
|
// FIXME figure out why it needs +2 px
|
|
if (_isIE() > -1) {
|
|
this.previewer.style.height = parseInt(_getStyle(this.previewer, 'height'), 10) + 2;
|
|
}
|
|
|
|
// If there is a file to be opened with that filename and it has content...
|
|
this.open(self.settings.file.name);
|
|
|
|
if (self.settings.focusOnLoad) {
|
|
// We need to wait until all three iframes are done loading by waiting until the parent
|
|
// iframe's ready state == complete, then we can focus on the contenteditable
|
|
self.iframe.addEventListener('readystatechange', function () {
|
|
if (self.iframe.readyState == 'complete') {
|
|
self.focus();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Because IE scrolls the whole window to hash links, we need our own
|
|
// method of scrolling the iframe to an ID from clicking a hash
|
|
self.previewerIframeDocument.addEventListener('click', function (e) {
|
|
var el = e.target
|
|
, body = self.previewerIframeDocument.body;
|
|
if (el.nodeName == 'A') {
|
|
// Make sure the link is a hash and the link is local to the iframe
|
|
if (el.hash && el.hostname == window.location.hostname) {
|
|
// Prevent the whole window from scrolling
|
|
e.preventDefault();
|
|
// Prevent opening a new window
|
|
el.target = '_self';
|
|
// Scroll to the matching element, if an element exists
|
|
if (body.querySelector(el.hash)) {
|
|
body.scrollTop = body.querySelector(el.hash).offsetTop;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
utilBtns = self.iframe.getElementById('epiceditor-utilbar');
|
|
|
|
// TODO: Move into fullscreen setup function (_setupFullscreen)
|
|
_elementStates = {}
|
|
self._goFullscreen = function (el) {
|
|
this._fixScrollbars('auto');
|
|
|
|
if (self.is('fullscreen')) {
|
|
self._exitFullscreen(el);
|
|
return;
|
|
}
|
|
|
|
if (nativeFs) {
|
|
if (nativeFsWebkit) {
|
|
el.webkitRequestFullScreen();
|
|
}
|
|
else if (nativeFsMoz) {
|
|
el.mozRequestFullScreen();
|
|
}
|
|
else if (nativeFsW3C) {
|
|
el.requestFullscreen();
|
|
}
|
|
}
|
|
|
|
_isInEdit = self.is('edit');
|
|
|
|
// Set the state of EE in fullscreen
|
|
// We set edit and preview to true also because they're visible
|
|
// we might want to allow fullscreen edit mode without preview (like a "zen" mode)
|
|
self._eeState.fullscreen = true;
|
|
self._eeState.edit = true;
|
|
self._eeState.preview = true;
|
|
|
|
// Cache calculations
|
|
var windowInnerWidth = window.innerWidth
|
|
, windowInnerHeight = window.innerHeight
|
|
, windowOuterWidth = window.outerWidth
|
|
, windowOuterHeight = window.outerHeight;
|
|
|
|
// Without this the scrollbars will get hidden when scrolled to the bottom in faux fullscreen (see #66)
|
|
if (!nativeFs) {
|
|
windowOuterHeight = window.innerHeight;
|
|
}
|
|
|
|
// This MUST come first because the editor is 100% width so if we change the width of the iframe or wrapper
|
|
// the editor's width wont be the same as before
|
|
_elementStates.editorIframe = _saveStyleState(self.editorIframe, 'save', {
|
|
'width': windowOuterWidth / 2 + 'px'
|
|
, 'height': windowOuterHeight + 'px'
|
|
, 'float': 'left' // Most browsers
|
|
, 'cssFloat': 'left' // FF
|
|
, 'styleFloat': 'left' // Older IEs
|
|
, 'display': 'block'
|
|
, 'position': 'static'
|
|
, 'left': ''
|
|
});
|
|
|
|
// the previewer
|
|
_elementStates.previewerIframe = _saveStyleState(self.previewerIframe, 'save', {
|
|
'width': windowOuterWidth / 2 + 'px'
|
|
, 'height': windowOuterHeight + 'px'
|
|
, 'float': 'right' // Most browsers
|
|
, 'cssFloat': 'right' // FF
|
|
, 'styleFloat': 'right' // Older IEs
|
|
, 'display': 'block'
|
|
, 'position': 'static'
|
|
, 'left': ''
|
|
});
|
|
|
|
// Setup the containing element CSS for fullscreen
|
|
_elementStates.element = _saveStyleState(self.element, 'save', {
|
|
'position': 'fixed'
|
|
, 'top': '0'
|
|
, 'left': '0'
|
|
, 'width': '100%'
|
|
, 'z-index': '9999' // Most browsers
|
|
, 'zIndex': '9999' // Firefox
|
|
, 'border': 'none'
|
|
, 'margin': '0'
|
|
// Should use the base styles background!
|
|
, 'background': _getStyle(self.editor, 'background-color') // Try to hide the site below
|
|
, 'height': windowInnerHeight + 'px'
|
|
});
|
|
|
|
// The iframe element
|
|
_elementStates.iframeElement = _saveStyleState(self.iframeElement, 'save', {
|
|
'width': windowOuterWidth + 'px'
|
|
, 'height': windowInnerHeight + 'px'
|
|
});
|
|
|
|
// ...Oh, and hide the buttons and prevent scrolling
|
|
utilBtns.style.visibility = 'hidden';
|
|
|
|
if (!nativeFs) {
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
self.preview();
|
|
|
|
self.focus();
|
|
|
|
self.emit('fullscreenenter');
|
|
};
|
|
|
|
self._exitFullscreen = function (el) {
|
|
this._fixScrollbars();
|
|
|
|
_saveStyleState(self.element, 'apply', _elementStates.element);
|
|
_saveStyleState(self.iframeElement, 'apply', _elementStates.iframeElement);
|
|
_saveStyleState(self.editorIframe, 'apply', _elementStates.editorIframe);
|
|
_saveStyleState(self.previewerIframe, 'apply', _elementStates.previewerIframe);
|
|
|
|
// We want to always revert back to the original styles in the CSS so,
|
|
// if it's a fluid width container it will expand on resize and not get
|
|
// stuck at a specific width after closing fullscreen.
|
|
self.element.style.width = self._eeState.reflowWidth ? self._eeState.reflowWidth : '';
|
|
self.element.style.height = self._eeState.reflowHeight ? self._eeState.reflowHeight : '';
|
|
|
|
utilBtns.style.visibility = 'visible';
|
|
|
|
// Put the editor back in the right state
|
|
// TODO: This is ugly... how do we make this nicer?
|
|
// setting fullscreen to false here prevents the
|
|
// native fs callback from calling this function again
|
|
self._eeState.fullscreen = false;
|
|
|
|
if (!nativeFs) {
|
|
document.body.style.overflow = 'auto';
|
|
}
|
|
else {
|
|
if (nativeFsWebkit) {
|
|
document.webkitCancelFullScreen();
|
|
}
|
|
else if (nativeFsMoz) {
|
|
document.mozCancelFullScreen();
|
|
}
|
|
else if (nativeFsW3C) {
|
|
document.exitFullscreen();
|
|
}
|
|
}
|
|
|
|
if (_isInEdit) {
|
|
self.edit();
|
|
}
|
|
else {
|
|
self.preview();
|
|
}
|
|
|
|
self.reflow();
|
|
|
|
self.emit('fullscreenexit');
|
|
};
|
|
|
|
// This setups up live previews by triggering preview() IF in fullscreen on keyup
|
|
self.editor.addEventListener('keyup', function () {
|
|
if (keypressTimer) {
|
|
window.clearTimeout(keypressTimer);
|
|
}
|
|
keypressTimer = window.setTimeout(function () {
|
|
if (self.is('fullscreen')) {
|
|
self.preview();
|
|
}
|
|
}, 250);
|
|
});
|
|
|
|
fsElement = self.iframeElement;
|
|
|
|
// Sets up the onclick event on utility buttons
|
|
utilBtns.addEventListener('click', function (e) {
|
|
var targetClass = e.target.className;
|
|
if (targetClass.indexOf('epiceditor-toggle-preview-btn') > -1) {
|
|
self.preview();
|
|
}
|
|
else if (targetClass.indexOf('epiceditor-toggle-edit-btn') > -1) {
|
|
self.edit();
|
|
}
|
|
else if (targetClass.indexOf('epiceditor-fullscreen-btn') > -1) {
|
|
self._goFullscreen(fsElement);
|
|
}
|
|
});
|
|
|
|
// Sets up the NATIVE fullscreen editor/previewer for WebKit
|
|
if (nativeFsWebkit) {
|
|
document.addEventListener('webkitfullscreenchange', function () {
|
|
if (!document.webkitIsFullScreen && self._eeState.fullscreen) {
|
|
self._exitFullscreen(fsElement);
|
|
}
|
|
}, false);
|
|
}
|
|
else if (nativeFsMoz) {
|
|
document.addEventListener('mozfullscreenchange', function () {
|
|
if (!document.mozFullScreen && self._eeState.fullscreen) {
|
|
self._exitFullscreen(fsElement);
|
|
}
|
|
}, false);
|
|
}
|
|
else if (nativeFsW3C) {
|
|
document.addEventListener('fullscreenchange', function () {
|
|
if (document.fullscreenElement == null && self._eeState.fullscreen) {
|
|
self._exitFullscreen(fsElement);
|
|
}
|
|
}, false);
|
|
}
|
|
|
|
// TODO: Move utilBar stuff into a utilBar setup function (_setupUtilBar)
|
|
utilBar = self.iframe.getElementById('epiceditor-utilbar');
|
|
|
|
// Hide it at first until they move their mouse
|
|
if (self.settings.button.bar !== true) {
|
|
utilBar.style.display = 'none';
|
|
}
|
|
|
|
utilBar.addEventListener('mouseover', function () {
|
|
if (utilBarTimer) {
|
|
clearTimeout(utilBarTimer);
|
|
}
|
|
});
|
|
|
|
function utilBarHandler(e) {
|
|
if (self.settings.button.bar !== "auto") {
|
|
return;
|
|
}
|
|
// Here we check if the mouse has moves more than 5px in any direction before triggering the mousemove code
|
|
// we do this for 2 reasons:
|
|
// 1. On Mac OS X lion when you scroll and it does the iOS like "jump" when it hits the top/bottom of the page itll fire off
|
|
// a mousemove of a few pixels depending on how hard you scroll
|
|
// 2. We give a slight buffer to the user in case he barely touches his touchpad or mouse and not trigger the UI
|
|
if (Math.abs(mousePos.y - e.pageY) >= 5 || Math.abs(mousePos.x - e.pageX) >= 5) {
|
|
utilBar.style.display = 'block';
|
|
// if we have a timer already running, kill it out
|
|
if (utilBarTimer) {
|
|
clearTimeout(utilBarTimer);
|
|
}
|
|
|
|
// begin a new timer that hides our object after 1000 ms
|
|
utilBarTimer = window.setTimeout(function () {
|
|
utilBar.style.display = 'none';
|
|
}, 1000);
|
|
}
|
|
mousePos = { y: e.pageY, x: e.pageX };
|
|
}
|
|
|
|
// Add keyboard shortcuts for convenience.
|
|
function shortcutHandler(e) {
|
|
if (e.keyCode == self.settings.shortcut.modifier) { isMod = true } // check for modifier press(default is alt key), save to var
|
|
if (e.keyCode == 17) { isCtrl = true } // check for ctrl/cmnd press, in order to catch ctrl/cmnd + s
|
|
|
|
// Check for alt+p and make sure were not in fullscreen - default shortcut to switch to preview
|
|
if (isMod === true && e.keyCode == self.settings.shortcut.preview && !self.is('fullscreen')) {
|
|
e.preventDefault();
|
|
if (self.is('edit') && self._previewEnabled) {
|
|
self.preview();
|
|
}
|
|
else if (self._editEnabled) {
|
|
self.edit();
|
|
}
|
|
}
|
|
// Check for alt+f - default shortcut to make editor fullscreen
|
|
if (isMod === true && e.keyCode == self.settings.shortcut.fullscreen && self._fullscreenEnabled) {
|
|
e.preventDefault();
|
|
self._goFullscreen(fsElement);
|
|
}
|
|
|
|
// Set the modifier key to false once *any* key combo is completed
|
|
// or else, on Windows, hitting the alt key will lock the isMod state to true (ticket #133)
|
|
if (isMod === true && e.keyCode !== self.settings.shortcut.modifier) {
|
|
isMod = false;
|
|
}
|
|
|
|
// When a user presses "esc", revert everything!
|
|
if (e.keyCode == 27 && self.is('fullscreen')) {
|
|
self._exitFullscreen(fsElement);
|
|
}
|
|
|
|
// Check for ctrl + s (since a lot of people do it out of habit) and make it do nothing
|
|
if (isCtrl === true && e.keyCode == 83) {
|
|
self.save();
|
|
e.preventDefault();
|
|
isCtrl = false;
|
|
}
|
|
|
|
// Do the same for Mac now (metaKey == cmd).
|
|
if (e.metaKey && e.keyCode == 83) {
|
|
self.save();
|
|
e.preventDefault();
|
|
}
|
|
|
|
}
|
|
|
|
function shortcutUpHandler(e) {
|
|
if (e.keyCode == self.settings.shortcut.modifier) { isMod = false }
|
|
if (e.keyCode == 17) { isCtrl = false }
|
|
}
|
|
|
|
function pasteHandler(e) {
|
|
var content;
|
|
if (e.clipboardData) {
|
|
//FF 22, Webkit, "standards"
|
|
e.preventDefault();
|
|
content = e.clipboardData.getData("text/plain");
|
|
self.editorIframeDocument.execCommand("insertText", false, content);
|
|
}
|
|
else if (window.clipboardData) {
|
|
//IE, "nasty"
|
|
e.preventDefault();
|
|
content = window.clipboardData.getData("Text");
|
|
content = content.replace(/</g, '<');
|
|
content = content.replace(/>/g, '>');
|
|
content = content.replace(/\n/g, '<br>');
|
|
content = content.replace(/\r/g, ''); //fuck you, ie!
|
|
content = content.replace(/<br>\s/g, '<br> ')
|
|
content = content.replace(/\s\s\s/g, ' ')
|
|
content = content.replace(/\s\s/g, ' ')
|
|
self.editorIframeDocument.selection.createRange().pasteHTML(content);
|
|
}
|
|
}
|
|
|
|
// Hide and show the util bar based on mouse movements
|
|
eventableIframes = [self.previewerIframeDocument, self.editorIframeDocument];
|
|
|
|
for (i = 0; i < eventableIframes.length; i++) {
|
|
eventableIframes[i].addEventListener('mousemove', function (e) {
|
|
utilBarHandler(e);
|
|
});
|
|
eventableIframes[i].addEventListener('scroll', function (e) {
|
|
utilBarHandler(e);
|
|
});
|
|
eventableIframes[i].addEventListener('keyup', function (e) {
|
|
shortcutUpHandler(e);
|
|
});
|
|
eventableIframes[i].addEventListener('keydown', function (e) {
|
|
shortcutHandler(e);
|
|
});
|
|
eventableIframes[i].addEventListener('paste', function (e) {
|
|
pasteHandler(e);
|
|
});
|
|
}
|
|
|
|
// Save the document every 100ms by default
|
|
// TODO: Move into autosave setup function (_setupAutoSave)
|
|
if (self.settings.file.autoSave) {
|
|
self._saveIntervalTimer = window.setInterval(function () {
|
|
if (!self._canSave) {
|
|
return;
|
|
}
|
|
self.save(false, true);
|
|
}, self.settings.file.autoSave);
|
|
}
|
|
|
|
// Update a textarea automatically if a textarea is given so you don't need
|
|
// AJAX to submit a form and instead fall back to normal form behavior
|
|
if (self.settings.textarea) {
|
|
self._setupTextareaSync();
|
|
}
|
|
|
|
window.addEventListener('resize', function () {
|
|
// If NOT webkit, and in fullscreen, we need to account for browser resizing
|
|
// we don't care about webkit because you can't resize in webkit's fullscreen
|
|
if (self.is('fullscreen')) {
|
|
_applyStyles(self.iframeElement, {
|
|
'width': window.outerWidth + 'px'
|
|
, 'height': window.innerHeight + 'px'
|
|
});
|
|
|
|
_applyStyles(self.element, {
|
|
'height': window.innerHeight + 'px'
|
|
});
|
|
|
|
_applyStyles(self.previewerIframe, {
|
|
'width': window.outerWidth / 2 + 'px'
|
|
, 'height': window.innerHeight + 'px'
|
|
});
|
|
|
|
_applyStyles(self.editorIframe, {
|
|
'width': window.outerWidth / 2 + 'px'
|
|
, 'height': window.innerHeight + 'px'
|
|
});
|
|
}
|
|
// Makes the editor support fluid width when not in fullscreen mode
|
|
else if (!self.is('fullscreen')) {
|
|
self.reflow();
|
|
}
|
|
});
|
|
|
|
// Set states before flipping edit and preview modes
|
|
self._eeState.loaded = true;
|
|
self._eeState.unloaded = false;
|
|
|
|
if (self.is('preview')) {
|
|
self.preview();
|
|
}
|
|
else {
|
|
self.edit();
|
|
}
|
|
|
|
self.iframe.close();
|
|
self._eeState.startup = false;
|
|
|
|
if (self.settings.autogrow) {
|
|
self._fixScrollbars();
|
|
|
|
boundAutogrow = function () {
|
|
setTimeout(function () {
|
|
self._autogrow();
|
|
}, 1);
|
|
};
|
|
|
|
//for if autosave is disabled or very slow
|
|
['keydown', 'keyup', 'paste', 'cut'].forEach(function (ev) {
|
|
self.getElement('editor').addEventListener(ev, boundAutogrow);
|
|
});
|
|
|
|
self.on('__update', boundAutogrow);
|
|
self.on('edit', function () {
|
|
setTimeout(boundAutogrow, 50)
|
|
});
|
|
self.on('preview', function () {
|
|
setTimeout(boundAutogrow, 50)
|
|
});
|
|
|
|
//for browsers that have rendering delays
|
|
setTimeout(boundAutogrow, 50);
|
|
boundAutogrow();
|
|
}
|
|
|
|
// The callback and call are the same thing, but different ways to access them
|
|
callback.call(this);
|
|
this.emit('load');
|
|
return this;
|
|
}
|
|
|
|
EpicEditor.prototype._setupTextareaSync = function () {
|
|
var self = this
|
|
, textareaFileName = self.settings.file.name
|
|
, _syncTextarea;
|
|
|
|
// Even if autoSave is false, we want to make sure to keep the textarea synced
|
|
// with the editor's content. One bad thing about this tho is that we're
|
|
// creating two timers now in some configurations. We keep the textarea synced
|
|
// by saving and opening the textarea content from the draft file storage.
|
|
self._textareaSaveTimer = window.setInterval(function () {
|
|
if (!self._canSave) {
|
|
return;
|
|
}
|
|
self.save(true);
|
|
}, 100);
|
|
|
|
_syncTextarea = function () {
|
|
// TODO: Figure out root cause for having to do this ||.
|
|
// This only happens for draft files. Probably has something to do with
|
|
// the fact draft files haven't been saved by the time this is called.
|
|
// TODO: Add test for this case.
|
|
self._textareaElement.value = self.exportFile(textareaFileName, 'text', true) || self.settings.file.defaultContent;
|
|
}
|
|
|
|
if (typeof self.settings.textarea == 'string') {
|
|
self._textareaElement = document.getElementById(self.settings.textarea);
|
|
}
|
|
else if (typeof self.settings.textarea == 'object') {
|
|
self._textareaElement = self.settings.textarea;
|
|
}
|
|
|
|
// On page load, if there's content in the textarea that means one of two
|
|
// different things:
|
|
//
|
|
// 1. The editor didn't load and the user was writing in the textarea and
|
|
// now he refreshed the page or the JS loaded and the textarea now has
|
|
// content. If this is the case the user probably expects his content is
|
|
// moved into the editor and not lose what he typed.
|
|
//
|
|
// 2. The developer put content in the textarea from some server side
|
|
// code. In this case, the textarea will take precedence.
|
|
//
|
|
// If the developer wants drafts to be recoverable they should check if
|
|
// the local file in localStorage's modified date is newer than the server.
|
|
if (self._textareaElement.value !== '') {
|
|
self.importFile(textareaFileName, self._textareaElement.value);
|
|
|
|
// manually save draft after import so there is no delay between the
|
|
// import and exporting in _syncTextarea. Without this, _syncTextarea
|
|
// will pull the saved data from localStorage which will be <=100ms old.
|
|
self.save(true);
|
|
}
|
|
|
|
// Update the textarea on load and pull from drafts
|
|
_syncTextarea();
|
|
|
|
// Make sure to keep it updated
|
|
self.on('__update', _syncTextarea);
|
|
}
|
|
|
|
/**
|
|
* Will NOT focus the editor if the editor is still starting up AND
|
|
* focusOnLoad is set to false. This allows you to place this in code that
|
|
* gets fired during .load() without worrying about it overriding the user's
|
|
* option. For example use cases see preview() and edit().
|
|
* @returns {undefined}
|
|
*/
|
|
|
|
// Prevent focus when the user sets focusOnLoad to false by checking if the
|
|
// editor is starting up AND if focusOnLoad is true
|
|
EpicEditor.prototype._focusExceptOnLoad = function () {
|
|
var self = this;
|
|
if ((self._eeState.startup && self.settings.focusOnLoad) || !self._eeState.startup) {
|
|
self.focus();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Will remove the editor, but not offline files
|
|
* @returns {object} EpicEditor will be returned
|
|
*/
|
|
EpicEditor.prototype.unload = function (callback) {
|
|
|
|
// Make sure the editor isn't already unloaded.
|
|
if (this.is('unloaded')) {
|
|
throw new Error('Editor isn\'t loaded');
|
|
}
|
|
|
|
var self = this
|
|
, editor = window.parent.document.getElementById(self._instanceId);
|
|
|
|
editor.parentNode.removeChild(editor);
|
|
self._eeState.loaded = false;
|
|
self._eeState.unloaded = true;
|
|
callback = callback || function () {};
|
|
|
|
if (self.settings.textarea) {
|
|
self._textareaElement.value = "";
|
|
self.removeListener('__update');
|
|
}
|
|
|
|
if (self._saveIntervalTimer) {
|
|
window.clearInterval(self._saveIntervalTimer);
|
|
}
|
|
if (self._textareaSaveTimer) {
|
|
window.clearInterval(self._textareaSaveTimer);
|
|
}
|
|
|
|
callback.call(this);
|
|
self.emit('unload');
|
|
return self;
|
|
}
|
|
|
|
/**
|
|
* reflow allows you to dynamically re-fit the editor in the parent without
|
|
* having to unload and then reload the editor again.
|
|
*
|
|
* reflow will also emit a `reflow` event and will return the new dimensions.
|
|
* If it's called without params it'll return the new width and height and if
|
|
* it's called with just width or just height it'll just return the width or
|
|
* height. It's returned as an object like: { width: '100px', height: '1px' }
|
|
*
|
|
* @param {string|null} kind Can either be 'width' or 'height' or null
|
|
* if null, both the height and width will be resized
|
|
* @param {function} callback A function to fire after the reflow is finished.
|
|
* Will return the width / height in an obj as the first param of the callback.
|
|
* @returns {object} EpicEditor will be returned
|
|
*/
|
|
EpicEditor.prototype.reflow = function (kind, callback) {
|
|
var self = this
|
|
, widthDiff = _outerWidth(self.element) - self.element.offsetWidth
|
|
, heightDiff = _outerHeight(self.element) - self.element.offsetHeight
|
|
, elements = [self.iframeElement, self.editorIframe, self.previewerIframe]
|
|
, eventData = {}
|
|
, newWidth
|
|
, newHeight;
|
|
|
|
if (typeof kind == 'function') {
|
|
callback = kind;
|
|
kind = null;
|
|
}
|
|
|
|
if (!callback) {
|
|
callback = function () {};
|
|
}
|
|
|
|
for (var x = 0; x < elements.length; x++) {
|
|
if (!kind || kind == 'width') {
|
|
newWidth = self.element.offsetWidth - widthDiff + 'px';
|
|
elements[x].style.width = newWidth;
|
|
self._eeState.reflowWidth = newWidth;
|
|
eventData.width = newWidth;
|
|
}
|
|
if (!kind || kind == 'height') {
|
|
newHeight = self.element.offsetHeight - heightDiff + 'px';
|
|
elements[x].style.height = newHeight;
|
|
self._eeState.reflowHeight = newHeight
|
|
eventData.height = newHeight;
|
|
}
|
|
}
|
|
|
|
self.emit('reflow', eventData);
|
|
callback.call(this, eventData);
|
|
return self;
|
|
}
|
|
|
|
/**
|
|
* Will take the markdown and generate a preview view based on the theme
|
|
* @returns {object} EpicEditor will be returned
|
|
*/
|
|
EpicEditor.prototype.preview = function () {
|
|
var self = this
|
|
, x
|
|
, theme = self.settings.theme.preview
|
|
, anchors;
|
|
|
|
_replaceClass(self.getElement('wrapper'), 'epiceditor-edit-mode', 'epiceditor-preview-mode');
|
|
|
|
// Check if no CSS theme link exists
|
|
if (!self.previewerIframeDocument.getElementById('theme')) {
|
|
_insertCSSLink(theme, self.previewerIframeDocument, 'theme');
|
|
}
|
|
else if (self.previewerIframeDocument.getElementById('theme').name !== theme) {
|
|
self.previewerIframeDocument.getElementById('theme').href = theme;
|
|
}
|
|
|
|
// Save a preview draft since it might not be saved to the real file yet
|
|
self.save(true);
|
|
|
|
// Add the generated draft HTML into the previewer
|
|
self.previewer.innerHTML = self.exportFile(null, 'html', true);
|
|
|
|
// Hide the editor and display the previewer
|
|
if (!self.is('fullscreen')) {
|
|
self.editorIframe.style.left = '-999999px';
|
|
self.previewerIframe.style.left = '';
|
|
self._eeState.preview = true;
|
|
self._eeState.edit = false;
|
|
self._focusExceptOnLoad();
|
|
}
|
|
|
|
self.emit('preview');
|
|
return self;
|
|
}
|
|
|
|
/**
|
|
* Helper to focus on the editor iframe. Will figure out which iframe to
|
|
* focus on based on which one is active and will handle the cross browser
|
|
* issues with focusing on the iframe vs the document body.
|
|
* @returns {object} EpicEditor will be returned
|
|
*/
|
|
EpicEditor.prototype.focus = function (pageload) {
|
|
var self = this
|
|
, isPreview = self.is('preview')
|
|
, focusElement = isPreview ? self.previewerIframeDocument.body
|
|
: self.editorIframeDocument.body;
|
|
|
|
if (_isFirefox() && isPreview) {
|
|
focusElement = self.previewerIframe;
|
|
}
|
|
|
|
focusElement.focus();
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* Puts the editor into fullscreen mode
|
|
* @returns {object} EpicEditor will be returned
|
|
*/
|
|
EpicEditor.prototype.enterFullscreen = function () {
|
|
if (this.is('fullscreen')) { return this; }
|
|
this._goFullscreen(this.iframeElement);
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* Closes fullscreen mode if opened
|
|
* @returns {object} EpicEditor will be returned
|
|
*/
|
|
EpicEditor.prototype.exitFullscreen = function () {
|
|
if (!this.is('fullscreen')) { return this; }
|
|
this._exitFullscreen(this.iframeElement);
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* Hides the preview and shows the editor again
|
|
* @returns {object} EpicEditor will be returned
|
|
*/
|
|
EpicEditor.prototype.edit = function () {
|
|
var self = this;
|
|
_replaceClass(self.getElement('wrapper'), 'epiceditor-preview-mode', 'epiceditor-edit-mode');
|
|
self._eeState.preview = false;
|
|
self._eeState.edit = true;
|
|
self.editorIframe.style.left = '';
|
|
self.previewerIframe.style.left = '-999999px';
|
|
self._focusExceptOnLoad();
|
|
self.emit('edit');
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* Grabs a specificed HTML node. Use it as a shortcut to getting the iframe contents
|
|
* @param {String} name The name of the node (can be document, body, editor, previewer, or wrapper)
|
|
* @returns {Object|Null}
|
|
*/
|
|
EpicEditor.prototype.getElement = function (name) {
|
|
var available = {
|
|
"container": this.element
|
|
, "wrapper": this.iframe.getElementById('epiceditor-wrapper')
|
|
, "wrapperIframe": this.iframeElement
|
|
, "editor": this.editorIframeDocument
|
|
, "editorIframe": this.editorIframe
|
|
, "previewer": this.previewerIframeDocument
|
|
, "previewerIframe": this.previewerIframe
|
|
}
|
|
|
|
// Check that the given string is a possible option and verify the editor isn't unloaded
|
|
// without this, you'd be given a reference to an object that no longer exists in the DOM
|
|
if (!available[name] || this.is('unloaded')) {
|
|
return null;
|
|
}
|
|
else {
|
|
return available[name];
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Returns a boolean of each "state" of the editor. For example "editor.is('loaded')" // returns true/false
|
|
* @param {String} what the state you want to check for
|
|
* @returns {Boolean}
|
|
*/
|
|
EpicEditor.prototype.is = function (what) {
|
|
var self = this;
|
|
switch (what) {
|
|
case 'loaded':
|
|
return self._eeState.loaded;
|
|
case 'unloaded':
|
|
return self._eeState.unloaded
|
|
case 'preview':
|
|
return self._eeState.preview
|
|
case 'edit':
|
|
return self._eeState.edit;
|
|
case 'fullscreen':
|
|
return self._eeState.fullscreen;
|
|
// TODO: This "works", but the tests are saying otherwise. Come back to this
|
|
// and figure out how to fix it.
|
|
// case 'focused':
|
|
// return document.activeElement == self.iframeElement;
|
|
default:
|
|
return false;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Opens a file
|
|
* @param {string} name The name of the file you want to open
|
|
* @returns {object} EpicEditor will be returned
|
|
*/
|
|
EpicEditor.prototype.open = function (name) {
|
|
var self = this
|
|
, defaultContent = self.settings.file.defaultContent
|
|
, fileObj;
|
|
name = name || self.settings.file.name;
|
|
self.settings.file.name = name;
|
|
if (this._storage[self.settings.localStorageName]) {
|
|
fileObj = self.exportFile(name);
|
|
if (fileObj !== undefined) {
|
|
_setText(self.editor, fileObj);
|
|
self.emit('read');
|
|
}
|
|
else {
|
|
_setText(self.editor, defaultContent);
|
|
self.save(); // ensure a save
|
|
self.emit('create');
|
|
}
|
|
self.previewer.innerHTML = self.exportFile(null, 'html');
|
|
self.emit('open');
|
|
}
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* Saves content for offline use
|
|
* @returns {object} EpicEditor will be returned
|
|
*/
|
|
EpicEditor.prototype.save = function (_isPreviewDraft, _isAuto) {
|
|
var self = this
|
|
, storage
|
|
, isUpdate = false
|
|
, file = self.settings.file.name
|
|
, previewDraftName = ''
|
|
, data = this._storage[previewDraftName + self.settings.localStorageName]
|
|
, content = _getText(this.editor);
|
|
|
|
if (_isPreviewDraft) {
|
|
previewDraftName = self._previewDraftLocation;
|
|
}
|
|
|
|
// This could have been false but since we're manually saving
|
|
// we know it's save to start autoSaving again
|
|
this._canSave = true;
|
|
|
|
// Guard against storage being wiped out without EpicEditor knowing
|
|
// TODO: Emit saving error - storage seems to have been wiped
|
|
if (data) {
|
|
storage = JSON.parse(this._storage[previewDraftName + self.settings.localStorageName]);
|
|
|
|
// If the file doesn't exist we need to create it
|
|
if (storage[file] === undefined) {
|
|
storage[file] = self._defaultFileSchema();
|
|
}
|
|
|
|
// If it does, we need to check if the content is different and
|
|
// if it is, send the update event and update the timestamp
|
|
else if (content !== storage[file].content) {
|
|
storage[file].modified = new Date();
|
|
isUpdate = true;
|
|
}
|
|
//don't bother autosaving if the content hasn't actually changed
|
|
else if (_isAuto) {
|
|
return;
|
|
}
|
|
|
|
storage[file].content = content;
|
|
this._storage[previewDraftName + self.settings.localStorageName] = JSON.stringify(storage);
|
|
|
|
// After the content is actually changed, emit update so it emits the updated content
|
|
if (isUpdate) {
|
|
self.emit('update');
|
|
// Emit a private update event so it can't get accidentally removed
|
|
self.emit('__update');
|
|
}
|
|
|
|
if (_isAuto) {
|
|
this.emit('autosave');
|
|
}
|
|
else if (!_isPreviewDraft) {
|
|
this.emit('save');
|
|
}
|
|
}
|
|
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* Removes a page
|
|
* @param {string} name The name of the file you want to remove from localStorage
|
|
* @returns {object} EpicEditor will be returned
|
|
*/
|
|
EpicEditor.prototype.remove = function (name) {
|
|
var self = this
|
|
, s;
|
|
name = name || self.settings.file.name;
|
|
|
|
// If you're trying to delete a page you have open, block saving
|
|
if (name == self.settings.file.name) {
|
|
self._canSave = false;
|
|
}
|
|
|
|
s = JSON.parse(this._storage[self.settings.localStorageName]);
|
|
delete s[name];
|
|
this._storage[self.settings.localStorageName] = JSON.stringify(s);
|
|
this.emit('remove');
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* Renames a file
|
|
* @param {string} oldName The old file name
|
|
* @param {string} newName The new file name
|
|
* @returns {object} EpicEditor will be returned
|
|
*/
|
|
EpicEditor.prototype.rename = function (oldName, newName) {
|
|
var self = this
|
|
, s = JSON.parse(this._storage[self.settings.localStorageName]);
|
|
s[newName] = s[oldName];
|
|
delete s[oldName];
|
|
this._storage[self.settings.localStorageName] = JSON.stringify(s);
|
|
self.open(newName);
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* Imports a file and it's contents and opens it
|
|
* @param {string} name The name of the file you want to import (will overwrite existing files!)
|
|
* @param {string} content Content of the file you want to import
|
|
* @param {string} kind The kind of file you want to import (TBI)
|
|
* @param {object} meta Meta data you want to save with your file.
|
|
* @returns {object} EpicEditor will be returned
|
|
*/
|
|
EpicEditor.prototype.importFile = function (name, content, kind, meta) {
|
|
var self = this
|
|
, isNew = false;
|
|
|
|
name = name || self.settings.file.name;
|
|
content = content || '';
|
|
kind = kind || 'md';
|
|
meta = meta || {};
|
|
|
|
if (JSON.parse(this._storage[self.settings.localStorageName])[name] === undefined) {
|
|
isNew = true;
|
|
}
|
|
|
|
// Set our current file to the new file and update the content
|
|
self.settings.file.name = name;
|
|
_setText(self.editor, content);
|
|
|
|
if (isNew) {
|
|
self.emit('create');
|
|
}
|
|
|
|
self.save();
|
|
|
|
if (self.is('fullscreen')) {
|
|
self.preview();
|
|
}
|
|
|
|
//firefox has trouble with importing and working out the size right away
|
|
if (self.settings.autogrow) {
|
|
setTimeout(function () {
|
|
self._autogrow();
|
|
}, 50);
|
|
}
|
|
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* Gets the local filestore
|
|
* @param {string} name Name of the file in the store
|
|
* @returns {object|undefined} the local filestore, or a specific file in the store, if a name is given
|
|
*/
|
|
EpicEditor.prototype._getFileStore = function (name, _isPreviewDraft) {
|
|
var previewDraftName = ''
|
|
, store;
|
|
if (_isPreviewDraft) {
|
|
previewDraftName = this._previewDraftLocation;
|
|
}
|
|
store = JSON.parse(this._storage[previewDraftName + this.settings.localStorageName]);
|
|
if (name) {
|
|
return store[name];
|
|
}
|
|
else {
|
|
return store;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Exports a file as a string in a supported format
|
|
* @param {string} name Name of the file you want to export (case sensitive)
|
|
* @param {string} kind Kind of file you want the content in (currently supports html and text, default is the format the browser "wants")
|
|
* @returns {string|undefined} The content of the file in the content given or undefined if it doesn't exist
|
|
*/
|
|
EpicEditor.prototype.exportFile = function (name, kind, _isPreviewDraft) {
|
|
var self = this
|
|
, file
|
|
, content;
|
|
|
|
name = name || self.settings.file.name;
|
|
kind = kind || 'text';
|
|
|
|
file = self._getFileStore(name, _isPreviewDraft);
|
|
|
|
// If the file doesn't exist just return early with undefined
|
|
if (file === undefined) {
|
|
return;
|
|
}
|
|
|
|
content = file.content;
|
|
|
|
switch (kind) {
|
|
case 'html':
|
|
content = _sanitizeRawContent(content);
|
|
return self.settings.parser(content);
|
|
case 'text':
|
|
return _sanitizeRawContent(content);
|
|
case 'json':
|
|
file.content = _sanitizeRawContent(file.content);
|
|
return JSON.stringify(file);
|
|
case 'raw':
|
|
return content;
|
|
default:
|
|
return content;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Gets the contents and metadata for files
|
|
* @param {string} name Name of the file whose data you want (case sensitive)
|
|
* @param {boolean} excludeContent whether the contents of files should be excluded
|
|
* @returns {object} An object with the names and data of every file, or just the data of one file if a name was given
|
|
*/
|
|
EpicEditor.prototype.getFiles = function (name, excludeContent) {
|
|
var file
|
|
, data = this._getFileStore(name);
|
|
|
|
if (name) {
|
|
if (data !== undefined) {
|
|
if (excludeContent) {
|
|
delete data.content;
|
|
}
|
|
else {
|
|
data.content = _sanitizeRawContent(data.content);
|
|
}
|
|
}
|
|
return data;
|
|
}
|
|
else {
|
|
for (file in data) {
|
|
if (data.hasOwnProperty(file)) {
|
|
if (excludeContent) {
|
|
delete data[file].content;
|
|
}
|
|
else {
|
|
data[file].content = _sanitizeRawContent(data[file].content);
|
|
}
|
|
}
|
|
}
|
|
return data;
|
|
}
|
|
}
|
|
|
|
// EVENTS
|
|
// TODO: Support for namespacing events like "preview.foo"
|
|
/**
|
|
* Sets up an event handler for a specified event
|
|
* @param {string} ev The event name
|
|
* @param {function} handler The callback to run when the event fires
|
|
* @returns {object} EpicEditor will be returned
|
|
*/
|
|
EpicEditor.prototype.on = function (ev, handler) {
|
|
var self = this;
|
|
if (!this.events[ev]) {
|
|
this.events[ev] = [];
|
|
}
|
|
this.events[ev].push(handler);
|
|
return self;
|
|
};
|
|
|
|
/**
|
|
* This will emit or "trigger" an event specified
|
|
* @param {string} ev The event name
|
|
* @param {any} data Any data you want to pass into the callback
|
|
* @returns {object} EpicEditor will be returned
|
|
*/
|
|
EpicEditor.prototype.emit = function (ev, data) {
|
|
var self = this
|
|
, x;
|
|
|
|
data = data || self.getFiles(self.settings.file.name);
|
|
|
|
if (!this.events[ev]) {
|
|
return;
|
|
}
|
|
|
|
function invokeHandler(handler) {
|
|
handler.call(self, data);
|
|
}
|
|
|
|
for (x = 0; x < self.events[ev].length; x++) {
|
|
invokeHandler(self.events[ev][x]);
|
|
}
|
|
|
|
return self;
|
|
};
|
|
|
|
/**
|
|
* Will remove any listeners added from EpicEditor.on()
|
|
* @param {string} ev The event name
|
|
* @param {function} handler Handler to remove
|
|
* @returns {object} EpicEditor will be returned
|
|
*/
|
|
EpicEditor.prototype.removeListener = function (ev, handler) {
|
|
var self = this;
|
|
if (!handler) {
|
|
this.events[ev] = [];
|
|
return self;
|
|
}
|
|
if (!this.events[ev]) {
|
|
return self;
|
|
}
|
|
// Otherwise a handler and event exist, so take care of it
|
|
this.events[ev].splice(this.events[ev].indexOf(handler), 1);
|
|
return self;
|
|
}
|
|
|
|
/**
|
|
* Handles autogrowing the editor
|
|
*/
|
|
EpicEditor.prototype._autogrow = function () {
|
|
var editorHeight
|
|
, newHeight
|
|
, minHeight
|
|
, maxHeight
|
|
, el
|
|
, style
|
|
, maxedOut = false;
|
|
|
|
//autogrow in fullscreen is nonsensical
|
|
if (!this.is('fullscreen')) {
|
|
if (this.is('edit')) {
|
|
el = this.getElement('editor').documentElement;
|
|
}
|
|
else {
|
|
el = this.getElement('previewer').documentElement;
|
|
}
|
|
|
|
editorHeight = _outerHeight(el);
|
|
newHeight = editorHeight;
|
|
|
|
//handle minimum
|
|
minHeight = this.settings.autogrow.minHeight;
|
|
if (typeof minHeight === 'function') {
|
|
minHeight = minHeight(this);
|
|
}
|
|
|
|
if (minHeight && newHeight < minHeight) {
|
|
newHeight = minHeight;
|
|
}
|
|
|
|
//handle maximum
|
|
maxHeight = this.settings.autogrow.maxHeight;
|
|
if (typeof maxHeight === 'function') {
|
|
maxHeight = maxHeight(this);
|
|
}
|
|
|
|
if (maxHeight && newHeight > maxHeight) {
|
|
newHeight = maxHeight;
|
|
maxedOut = true;
|
|
}
|
|
|
|
if (maxedOut) {
|
|
this._fixScrollbars('auto');
|
|
} else {
|
|
this._fixScrollbars('hidden');
|
|
}
|
|
|
|
//actual resize
|
|
if (newHeight != this.oldHeight) {
|
|
this.getElement('container').style.height = newHeight + 'px';
|
|
this.reflow();
|
|
if (this.settings.autogrow.scroll) {
|
|
window.scrollBy(0, newHeight - this.oldHeight);
|
|
}
|
|
this.oldHeight = newHeight;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Shows or hides scrollbars based on the autogrow setting
|
|
* @param {string} forceSetting a value to force the overflow to
|
|
*/
|
|
EpicEditor.prototype._fixScrollbars = function (forceSetting) {
|
|
var setting;
|
|
if (this.settings.autogrow) {
|
|
setting = 'hidden';
|
|
}
|
|
else {
|
|
setting = 'auto';
|
|
}
|
|
setting = forceSetting || setting;
|
|
this.getElement('editor').documentElement.style.overflow = setting;
|
|
this.getElement('previewer').documentElement.style.overflow = setting;
|
|
}
|
|
|
|
EpicEditor.version = '0.2.2';
|
|
|
|
// Used to store information to be shared across editors
|
|
EpicEditor._data = {};
|
|
|
|
window.EpicEditor = EpicEditor;
|
|
})(window);
|
|
|
|
/**
|
|
* marked - a markdown parser
|
|
* Copyright (c) 2011-2013, Christopher Jeffrey. (MIT Licensed)
|
|
* https://github.com/chjj/marked
|
|
*/
|
|
|
|
;(function() {
|
|
|
|
/**
|
|
* Block-Level Grammar
|
|
*/
|
|
|
|
var block = {
|
|
newline: /^\n+/,
|
|
code: /^( {4}[^\n]+\n*)+/,
|
|
fences: noop,
|
|
hr: /^( *[-*_]){3,} *(?:\n+|$)/,
|
|
heading: /^ *(#{1,6}) *([^\n]+?) *#* *(?:\n+|$)/,
|
|
nptable: noop,
|
|
lheading: /^([^\n]+)\n *(=|-){3,} *\n*/,
|
|
blockquote: /^( *>[^\n]+(\n[^\n]+)*\n*)+/,
|
|
list: /^( *)(bull) [\s\S]+?(?:hr|\n{2,}(?! )(?!\1bull )\n*|\s*$)/,
|
|
html: /^ *(?:comment|closed|closing) *(?:\n{2,}|\s*$)/,
|
|
def: /^ *\[([^\]]+)\]: *([^\s]+)(?: +["(]([^\n]+)[")])? *(?:\n+|$)/,
|
|
table: noop,
|
|
paragraph: /^([^\n]+\n?(?!hr|heading|lheading|blockquote|tag|def))+\n*/,
|
|
text: /^[^\n]+/
|
|
};
|
|
|
|
block.bullet = /(?:[*+-]|\d+\.)/;
|
|
block.item = /^( *)(bull) [^\n]*(?:\n(?!\1bull )[^\n]*)*/;
|
|
block.item = replace(block.item, 'gm')
|
|
(/bull/g, block.bullet)
|
|
();
|
|
|
|
block.list = replace(block.list)
|
|
(/bull/g, block.bullet)
|
|
('hr', /\n+(?=(?: *[-*_]){3,} *(?:\n+|$))/)
|
|
();
|
|
|
|
block._tag = '(?!(?:'
|
|
+ 'a|em|strong|small|s|cite|q|dfn|abbr|data|time|code'
|
|
+ '|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo'
|
|
+ '|span|br|wbr|ins|del|img)\\b)\\w+(?!:/|@)\\b';
|
|
|
|
block.html = replace(block.html)
|
|
('comment', /<!--[\s\S]*?-->/)
|
|
('closed', /<(tag)[\s\S]+?<\/\1>/)
|
|
('closing', /<tag(?:"[^"]*"|'[^']*'|[^'">])*?>/)
|
|
(/tag/g, block._tag)
|
|
();
|
|
|
|
block.paragraph = replace(block.paragraph)
|
|
('hr', block.hr)
|
|
('heading', block.heading)
|
|
('lheading', block.lheading)
|
|
('blockquote', block.blockquote)
|
|
('tag', '<' + block._tag)
|
|
('def', block.def)
|
|
();
|
|
|
|
/**
|
|
* Normal Block Grammar
|
|
*/
|
|
|
|
block.normal = merge({}, block);
|
|
|
|
/**
|
|
* GFM Block Grammar
|
|
*/
|
|
|
|
block.gfm = merge({}, block.normal, {
|
|
fences: /^ *(`{3,}|~{3,}) *(\w+)? *\n([\s\S]+?)\s*\1 *(?:\n+|$)/,
|
|
paragraph: /^/
|
|
});
|
|
|
|
block.gfm.paragraph = replace(block.paragraph)
|
|
('(?!', '(?!' + block.gfm.fences.source.replace('\\1', '\\2') + '|')
|
|
();
|
|
|
|
/**
|
|
* GFM + Tables Block Grammar
|
|
*/
|
|
|
|
block.tables = merge({}, block.gfm, {
|
|
nptable: /^ *(\S.*\|.*)\n *([-:]+ *\|[-| :]*)\n((?:.*\|.*(?:\n|$))*)\n*/,
|
|
table: /^ *\|(.+)\n *\|( *[-:]+[-| :]*)\n((?: *\|.*(?:\n|$))*)\n*/
|
|
});
|
|
|
|
/**
|
|
* Block Lexer
|
|
*/
|
|
|
|
function Lexer(options) {
|
|
this.tokens = [];
|
|
this.tokens.links = {};
|
|
this.options = options || marked.defaults;
|
|
this.rules = block.normal;
|
|
|
|
if (this.options.gfm) {
|
|
if (this.options.tables) {
|
|
this.rules = block.tables;
|
|
} else {
|
|
this.rules = block.gfm;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Expose Block Rules
|
|
*/
|
|
|
|
Lexer.rules = block;
|
|
|
|
/**
|
|
* Static Lex Method
|
|
*/
|
|
|
|
Lexer.lex = function(src, options) {
|
|
var lexer = new Lexer(options);
|
|
return lexer.lex(src);
|
|
};
|
|
|
|
/**
|
|
* Preprocessing
|
|
*/
|
|
|
|
Lexer.prototype.lex = function(src) {
|
|
src = src
|
|
.replace(/\r\n|\r/g, '\n')
|
|
.replace(/\t/g, ' ')
|
|
.replace(/\u00a0/g, ' ')
|
|
.replace(/\u2424/g, '\n');
|
|
|
|
return this.token(src, true);
|
|
};
|
|
|
|
/**
|
|
* Lexing
|
|
*/
|
|
|
|
Lexer.prototype.token = function(src, top) {
|
|
var src = src.replace(/^ +$/gm, '')
|
|
, next
|
|
, loose
|
|
, cap
|
|
, item
|
|
, space
|
|
, i
|
|
, l;
|
|
|
|
while (src) {
|
|
// newline
|
|
if (cap = this.rules.newline.exec(src)) {
|
|
src = src.substring(cap[0].length);
|
|
if (cap[0].length > 1) {
|
|
this.tokens.push({
|
|
type: 'space'
|
|
});
|
|
}
|
|
}
|
|
|
|
// code
|
|
if (cap = this.rules.code.exec(src)) {
|
|
src = src.substring(cap[0].length);
|
|
cap = cap[0].replace(/^ {4}/gm, '');
|
|
this.tokens.push({
|
|
type: 'code',
|
|
text: !this.options.pedantic
|
|
? cap.replace(/\n+$/, '')
|
|
: cap
|
|
});
|
|
continue;
|
|
}
|
|
|
|
// fences (gfm)
|
|
if (cap = this.rules.fences.exec(src)) {
|
|
src = src.substring(cap[0].length);
|
|
this.tokens.push({
|
|
type: 'code',
|
|
lang: cap[2],
|
|
text: cap[3]
|
|
});
|
|
continue;
|
|
}
|
|
|
|
// heading
|
|
if (cap = this.rules.heading.exec(src)) {
|
|
src = src.substring(cap[0].length);
|
|
this.tokens.push({
|
|
type: 'heading',
|
|
depth: cap[1].length,
|
|
text: cap[2]
|
|
});
|
|
continue;
|
|
}
|
|
|
|
// table no leading pipe (gfm)
|
|
if (top && (cap = this.rules.nptable.exec(src))) {
|
|
src = src.substring(cap[0].length);
|
|
|
|
item = {
|
|
type: 'table',
|
|
header: cap[1].replace(/^ *| *\| *$/g, '').split(/ *\| */),
|
|
align: cap[2].replace(/^ *|\| *$/g, '').split(/ *\| */),
|
|
cells: cap[3].replace(/\n$/, '').split('\n')
|
|
};
|
|
|
|
for (i = 0; i < item.align.length; i++) {
|
|
if (/^ *-+: *$/.test(item.align[i])) {
|
|
item.align[i] = 'right';
|
|
} else if (/^ *:-+: *$/.test(item.align[i])) {
|
|
item.align[i] = 'center';
|
|
} else if (/^ *:-+ *$/.test(item.align[i])) {
|
|
item.align[i] = 'left';
|
|
} else {
|
|
item.align[i] = null;
|
|
}
|
|
}
|
|
|
|
for (i = 0; i < item.cells.length; i++) {
|
|
item.cells[i] = item.cells[i].split(/ *\| */);
|
|
}
|
|
|
|
this.tokens.push(item);
|
|
|
|
continue;
|
|
}
|
|
|
|
// lheading
|
|
if (cap = this.rules.lheading.exec(src)) {
|
|
src = src.substring(cap[0].length);
|
|
this.tokens.push({
|
|
type: 'heading',
|
|
depth: cap[2] === '=' ? 1 : 2,
|
|
text: cap[1]
|
|
});
|
|
continue;
|
|
}
|
|
|
|
// hr
|
|
if (cap = this.rules.hr.exec(src)) {
|
|
src = src.substring(cap[0].length);
|
|
this.tokens.push({
|
|
type: 'hr'
|
|
});
|
|
continue;
|
|
}
|
|
|
|
// blockquote
|
|
if (cap = this.rules.blockquote.exec(src)) {
|
|
src = src.substring(cap[0].length);
|
|
|
|
this.tokens.push({
|
|
type: 'blockquote_start'
|
|
});
|
|
|
|
cap = cap[0].replace(/^ *> ?/gm, '');
|
|
|
|
// Pass `top` to keep the current
|
|
// "toplevel" state. This is exactly
|
|
// how markdown.pl works.
|
|
this.token(cap, top);
|
|
|
|
this.tokens.push({
|
|
type: 'blockquote_end'
|
|
});
|
|
|
|
continue;
|
|
}
|
|
|
|
// list
|
|
if (cap = this.rules.list.exec(src)) {
|
|
src = src.substring(cap[0].length);
|
|
|
|
this.tokens.push({
|
|
type: 'list_start',
|
|
ordered: isFinite(cap[2])
|
|
});
|
|
|
|
// Get each top-level item.
|
|
cap = cap[0].match(this.rules.item);
|
|
|
|
next = false;
|
|
l = cap.length;
|
|
i = 0;
|
|
|
|
for (; i < l; i++) {
|
|
item = cap[i];
|
|
|
|
// Remove the list item's bullet
|
|
// so it is seen as the next token.
|
|
space = item.length;
|
|
item = item.replace(/^ *([*+-]|\d+\.) +/, '');
|
|
|
|
// Outdent whatever the
|
|
// list item contains. Hacky.
|
|
if (~item.indexOf('\n ')) {
|
|
space -= item.length;
|
|
item = !this.options.pedantic
|
|
? item.replace(new RegExp('^ {1,' + space + '}', 'gm'), '')
|
|
: item.replace(/^ {1,4}/gm, '');
|
|
}
|
|
|
|
// Determine whether item is loose or not.
|
|
// Use: /(^|\n)(?! )[^\n]+\n\n(?!\s*$)/
|
|
// for discount behavior.
|
|
loose = next || /\n\n(?!\s*$)/.test(item);
|
|
if (i !== l - 1) {
|
|
next = item[item.length-1] === '\n';
|
|
if (!loose) loose = next;
|
|
}
|
|
|
|
this.tokens.push({
|
|
type: loose
|
|
? 'loose_item_start'
|
|
: 'list_item_start'
|
|
});
|
|
|
|
// Recurse.
|
|
this.token(item, false);
|
|
|
|
this.tokens.push({
|
|
type: 'list_item_end'
|
|
});
|
|
}
|
|
|
|
this.tokens.push({
|
|
type: 'list_end'
|
|
});
|
|
|
|
continue;
|
|
}
|
|
|
|
// html
|
|
if (cap = this.rules.html.exec(src)) {
|
|
src = src.substring(cap[0].length);
|
|
this.tokens.push({
|
|
type: this.options.sanitize
|
|
? 'paragraph'
|
|
: 'html',
|
|
pre: cap[1] === 'pre',
|
|
text: cap[0]
|
|
});
|
|
continue;
|
|
}
|
|
|
|
// def
|
|
if (top && (cap = this.rules.def.exec(src))) {
|
|
src = src.substring(cap[0].length);
|
|
this.tokens.links[cap[1].toLowerCase()] = {
|
|
href: cap[2],
|
|
title: cap[3]
|
|
};
|
|
continue;
|
|
}
|
|
|
|
// table (gfm)
|
|
if (top && (cap = this.rules.table.exec(src))) {
|
|
src = src.substring(cap[0].length);
|
|
|
|
item = {
|
|
type: 'table',
|
|
header: cap[1].replace(/^ *| *\| *$/g, '').split(/ *\| */),
|
|
align: cap[2].replace(/^ *|\| *$/g, '').split(/ *\| */),
|
|
cells: cap[3].replace(/(?: *\| *)?\n$/, '').split('\n')
|
|
};
|
|
|
|
for (i = 0; i < item.align.length; i++) {
|
|
if (/^ *-+: *$/.test(item.align[i])) {
|
|
item.align[i] = 'right';
|
|
} else if (/^ *:-+: *$/.test(item.align[i])) {
|
|
item.align[i] = 'center';
|
|
} else if (/^ *:-+ *$/.test(item.align[i])) {
|
|
item.align[i] = 'left';
|
|
} else {
|
|
item.align[i] = null;
|
|
}
|
|
}
|
|
|
|
for (i = 0; i < item.cells.length; i++) {
|
|
item.cells[i] = item.cells[i]
|
|
.replace(/^ *\| *| *\| *$/g, '')
|
|
.split(/ *\| */);
|
|
}
|
|
|
|
this.tokens.push(item);
|
|
|
|
continue;
|
|
}
|
|
|
|
// top-level paragraph
|
|
if (top && (cap = this.rules.paragraph.exec(src))) {
|
|
src = src.substring(cap[0].length);
|
|
this.tokens.push({
|
|
type: 'paragraph',
|
|
text: cap[0]
|
|
});
|
|
continue;
|
|
}
|
|
|
|
// text
|
|
if (cap = this.rules.text.exec(src)) {
|
|
// Top-level should never reach here.
|
|
src = src.substring(cap[0].length);
|
|
this.tokens.push({
|
|
type: 'text',
|
|
text: cap[0]
|
|
});
|
|
continue;
|
|
}
|
|
|
|
if (src) {
|
|
throw new
|
|
Error('Infinite loop on byte: ' + src.charCodeAt(0));
|
|
}
|
|
}
|
|
|
|
return this.tokens;
|
|
};
|
|
|
|
/**
|
|
* Inline-Level Grammar
|
|
*/
|
|
|
|
var inline = {
|
|
escape: /^\\([\\`*{}\[\]()#+\-.!_>|])/,
|
|
autolink: /^<([^ >]+(@|:\/)[^ >]+)>/,
|
|
url: noop,
|
|
tag: /^<!--[\s\S]*?-->|^<\/?\w+(?:"[^"]*"|'[^']*'|[^'">])*?>/,
|
|
link: /^!?\[(inside)\]\(href\)/,
|
|
reflink: /^!?\[(inside)\]\s*\[([^\]]*)\]/,
|
|
nolink: /^!?\[((?:\[[^\]]*\]|[^\[\]])*)\]/,
|
|
strong: /^__([\s\S]+?)__(?!_)|^\*\*([\s\S]+?)\*\*(?!\*)/,
|
|
em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
|
|
code: /^(`+)([\s\S]*?[^`])\1(?!`)/,
|
|
br: /^ {2,}\n(?!\s*$)/,
|
|
del: noop,
|
|
text: /^[\s\S]+?(?=[\\<!\[_*`]| {2,}\n|$)/
|
|
};
|
|
|
|
inline._inside = /(?:\[[^\]]*\]|[^\]]|\](?=[^\[]*\]))*/;
|
|
inline._href = /\s*<?([^\s]*?)>?(?:\s+['"]([\s\S]*?)['"])?\s*/;
|
|
|
|
inline.link = replace(inline.link)
|
|
('inside', inline._inside)
|
|
('href', inline._href)
|
|
();
|
|
|
|
inline.reflink = replace(inline.reflink)
|
|
('inside', inline._inside)
|
|
();
|
|
|
|
/**
|
|
* Normal Inline Grammar
|
|
*/
|
|
|
|
inline.normal = merge({}, inline);
|
|
|
|
/**
|
|
* Pedantic Inline Grammar
|
|
*/
|
|
|
|
inline.pedantic = merge({}, inline.normal, {
|
|
strong: /^__(?=\S)([\s\S]*?\S)__(?!_)|^\*\*(?=\S)([\s\S]*?\S)\*\*(?!\*)/,
|
|
em: /^_(?=\S)([\s\S]*?\S)_(?!_)|^\*(?=\S)([\s\S]*?\S)\*(?!\*)/
|
|
});
|
|
|
|
/**
|
|
* GFM Inline Grammar
|
|
*/
|
|
|
|
inline.gfm = merge({}, inline.normal, {
|
|
escape: replace(inline.escape)('])', '~])')(),
|
|
url: /^(https?:\/\/[^\s]+[^.,:;"')\]\s])/,
|
|
del: /^~{2,}([\s\S]+?)~{2,}/,
|
|
text: replace(inline.text)
|
|
(']|', '~]|')
|
|
('|', '|https?://|')
|
|
()
|
|
});
|
|
|
|
/**
|
|
* GFM + Line Breaks Inline Grammar
|
|
*/
|
|
|
|
inline.breaks = merge({}, inline.gfm, {
|
|
br: replace(inline.br)('{2,}', '*')(),
|
|
text: replace(inline.gfm.text)('{2,}', '*')()
|
|
});
|
|
|
|
/**
|
|
* Inline Lexer & Compiler
|
|
*/
|
|
|
|
function InlineLexer(links, options) {
|
|
this.options = options || marked.defaults;
|
|
this.links = links;
|
|
this.rules = inline.normal;
|
|
|
|
if (!this.links) {
|
|
throw new
|
|
Error('Tokens array requires a `links` property.');
|
|
}
|
|
|
|
if (this.options.gfm) {
|
|
if (this.options.breaks) {
|
|
this.rules = inline.breaks;
|
|
} else {
|
|
this.rules = inline.gfm;
|
|
}
|
|
} else if (this.options.pedantic) {
|
|
this.rules = inline.pedantic;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Expose Inline Rules
|
|
*/
|
|
|
|
InlineLexer.rules = inline;
|
|
|
|
/**
|
|
* Static Lexing/Compiling Method
|
|
*/
|
|
|
|
InlineLexer.output = function(src, links, opt) {
|
|
var inline = new InlineLexer(links, opt);
|
|
return inline.output(src);
|
|
};
|
|
|
|
/**
|
|
* Lexing/Compiling
|
|
*/
|
|
|
|
InlineLexer.prototype.output = function(src) {
|
|
var out = ''
|
|
, link
|
|
, text
|
|
, href
|
|
, cap;
|
|
|
|
while (src) {
|
|
// escape
|
|
if (cap = this.rules.escape.exec(src)) {
|
|
src = src.substring(cap[0].length);
|
|
out += cap[1];
|
|
continue;
|
|
}
|
|
|
|
// autolink
|
|
if (cap = this.rules.autolink.exec(src)) {
|
|
src = src.substring(cap[0].length);
|
|
if (cap[2] === '@') {
|
|
text = cap[1][6] === ':'
|
|
? this.mangle(cap[1].substring(7))
|
|
: this.mangle(cap[1]);
|
|
href = this.mangle('mailto:') + text;
|
|
} else {
|
|
text = escape(cap[1]);
|
|
href = text;
|
|
}
|
|
out += '<a href="'
|
|
+ href
|
|
+ '">'
|
|
+ text
|
|
+ '</a>';
|
|
continue;
|
|
}
|
|
|
|
// url (gfm)
|
|
if (cap = this.rules.url.exec(src)) {
|
|
src = src.substring(cap[0].length);
|
|
text = escape(cap[1]);
|
|
href = text;
|
|
out += '<a href="'
|
|
+ href
|
|
+ '">'
|
|
+ text
|
|
+ '</a>';
|
|
continue;
|
|
}
|
|
|
|
// tag
|
|
if (cap = this.rules.tag.exec(src)) {
|
|
src = src.substring(cap[0].length);
|
|
out += this.options.sanitize
|
|
? escape(cap[0])
|
|
: cap[0];
|
|
continue;
|
|
}
|
|
|
|
// link
|
|
if (cap = this.rules.link.exec(src)) {
|
|
src = src.substring(cap[0].length);
|
|
out += this.outputLink(cap, {
|
|
href: cap[2],
|
|
title: cap[3]
|
|
});
|
|
continue;
|
|
}
|
|
|
|
// reflink, nolink
|
|
if ((cap = this.rules.reflink.exec(src))
|
|
|| (cap = this.rules.nolink.exec(src))) {
|
|
src = src.substring(cap[0].length);
|
|
link = (cap[2] || cap[1]).replace(/\s+/g, ' ');
|
|
link = this.links[link.toLowerCase()];
|
|
if (!link || !link.href) {
|
|
out += cap[0][0];
|
|
src = cap[0].substring(1) + src;
|
|
continue;
|
|
}
|
|
out += this.outputLink(cap, link);
|
|
continue;
|
|
}
|
|
|
|
// strong
|
|
if (cap = this.rules.strong.exec(src)) {
|
|
src = src.substring(cap[0].length);
|
|
out += '<strong>'
|
|
+ this.output(cap[2] || cap[1])
|
|
+ '</strong>';
|
|
continue;
|
|
}
|
|
|
|
// em
|
|
if (cap = this.rules.em.exec(src)) {
|
|
src = src.substring(cap[0].length);
|
|
out += '<em>'
|
|
+ this.output(cap[2] || cap[1])
|
|
+ '</em>';
|
|
continue;
|
|
}
|
|
|
|
// code
|
|
if (cap = this.rules.code.exec(src)) {
|
|
src = src.substring(cap[0].length);
|
|
out += '<code>'
|
|
+ escape(cap[2], true)
|
|
+ '</code>';
|
|
continue;
|
|
}
|
|
|
|
// br
|
|
if (cap = this.rules.br.exec(src)) {
|
|
src = src.substring(cap[0].length);
|
|
out += '<br>';
|
|
continue;
|
|
}
|
|
|
|
// del (gfm)
|
|
if (cap = this.rules.del.exec(src)) {
|
|
src = src.substring(cap[0].length);
|
|
out += '<del>'
|
|
+ this.output(cap[1])
|
|
+ '</del>';
|
|
continue;
|
|
}
|
|
|
|
// text
|
|
if (cap = this.rules.text.exec(src)) {
|
|
src = src.substring(cap[0].length);
|
|
out += escape(cap[0]);
|
|
continue;
|
|
}
|
|
|
|
if (src) {
|
|
throw new
|
|
Error('Infinite loop on byte: ' + src.charCodeAt(0));
|
|
}
|
|
}
|
|
|
|
return out;
|
|
};
|
|
|
|
/**
|
|
* Compile Link
|
|
*/
|
|
|
|
InlineLexer.prototype.outputLink = function(cap, link) {
|
|
if (cap[0][0] !== '!') {
|
|
return '<a href="'
|
|
+ escape(link.href)
|
|
+ '"'
|
|
+ (link.title
|
|
? ' title="'
|
|
+ escape(link.title)
|
|
+ '"'
|
|
: '')
|
|
+ '>'
|
|
+ this.output(cap[1])
|
|
+ '</a>';
|
|
} else {
|
|
return '<img src="'
|
|
+ escape(link.href)
|
|
+ '" alt="'
|
|
+ escape(cap[1])
|
|
+ '"'
|
|
+ (link.title
|
|
? ' title="'
|
|
+ escape(link.title)
|
|
+ '"'
|
|
: '')
|
|
+ '>';
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Mangle Links
|
|
*/
|
|
|
|
InlineLexer.prototype.mangle = function(text) {
|
|
var out = ''
|
|
, l = text.length
|
|
, i = 0
|
|
, ch;
|
|
|
|
for (; i < l; i++) {
|
|
ch = text.charCodeAt(i);
|
|
if (Math.random() > 0.5) {
|
|
ch = 'x' + ch.toString(16);
|
|
}
|
|
out += '&#' + ch + ';';
|
|
}
|
|
|
|
return out;
|
|
};
|
|
|
|
/**
|
|
* Parsing & Compiling
|
|
*/
|
|
|
|
function Parser(options) {
|
|
this.tokens = [];
|
|
this.token = null;
|
|
this.options = options || marked.defaults;
|
|
}
|
|
|
|
/**
|
|
* Static Parse Method
|
|
*/
|
|
|
|
Parser.parse = function(src, options) {
|
|
var parser = new Parser(options);
|
|
return parser.parse(src);
|
|
};
|
|
|
|
/**
|
|
* Parse Loop
|
|
*/
|
|
|
|
Parser.prototype.parse = function(src) {
|
|
this.inline = new InlineLexer(src.links, this.options);
|
|
this.tokens = src.reverse();
|
|
|
|
var out = '';
|
|
while (this.next()) {
|
|
out += this.tok();
|
|
}
|
|
|
|
return out;
|
|
};
|
|
|
|
/**
|
|
* Next Token
|
|
*/
|
|
|
|
Parser.prototype.next = function() {
|
|
return this.token = this.tokens.pop();
|
|
};
|
|
|
|
/**
|
|
* Preview Next Token
|
|
*/
|
|
|
|
Parser.prototype.peek = function() {
|
|
return this.tokens[this.tokens.length-1] || 0;
|
|
};
|
|
|
|
/**
|
|
* Parse Text Tokens
|
|
*/
|
|
|
|
Parser.prototype.parseText = function() {
|
|
var body = this.token.text;
|
|
|
|
while (this.peek().type === 'text') {
|
|
body += '\n' + this.next().text;
|
|
}
|
|
|
|
return this.inline.output(body);
|
|
};
|
|
|
|
/**
|
|
* Parse Current Token
|
|
*/
|
|
|
|
Parser.prototype.tok = function() {
|
|
switch (this.token.type) {
|
|
case 'space': {
|
|
return '';
|
|
}
|
|
case 'hr': {
|
|
return '<hr>\n';
|
|
}
|
|
case 'heading': {
|
|
return '<h'
|
|
+ this.token.depth
|
|
+ '>'
|
|
+ this.inline.output(this.token.text)
|
|
+ '</h'
|
|
+ this.token.depth
|
|
+ '>\n';
|
|
}
|
|
case 'code': {
|
|
if (this.options.highlight) {
|
|
var code = this.options.highlight(this.token.text, this.token.lang);
|
|
if (code != null && code !== this.token.text) {
|
|
this.token.escaped = true;
|
|
this.token.text = code;
|
|
}
|
|
}
|
|
|
|
if (!this.token.escaped) {
|
|
this.token.text = escape(this.token.text, true);
|
|
}
|
|
|
|
return '<pre><code'
|
|
+ (this.token.lang
|
|
? ' class="lang-'
|
|
+ this.token.lang
|
|
+ '"'
|
|
: '')
|
|
+ '>'
|
|
+ this.token.text
|
|
+ '</code></pre>\n';
|
|
}
|
|
case 'table': {
|
|
var body = ''
|
|
, heading
|
|
, i
|
|
, row
|
|
, cell
|
|
, j;
|
|
|
|
// header
|
|
body += '<thead>\n<tr>\n';
|
|
for (i = 0; i < this.token.header.length; i++) {
|
|
heading = this.inline.output(this.token.header[i]);
|
|
body += this.token.align[i]
|
|
? '<th align="' + this.token.align[i] + '">' + heading + '</th>\n'
|
|
: '<th>' + heading + '</th>\n';
|
|
}
|
|
body += '</tr>\n</thead>\n';
|
|
|
|
// body
|
|
body += '<tbody>\n'
|
|
for (i = 0; i < this.token.cells.length; i++) {
|
|
row = this.token.cells[i];
|
|
body += '<tr>\n';
|
|
for (j = 0; j < row.length; j++) {
|
|
cell = this.inline.output(row[j]);
|
|
body += this.token.align[j]
|
|
? '<td align="' + this.token.align[j] + '">' + cell + '</td>\n'
|
|
: '<td>' + cell + '</td>\n';
|
|
}
|
|
body += '</tr>\n';
|
|
}
|
|
body += '</tbody>\n';
|
|
|
|
return '<table>\n'
|
|
+ body
|
|
+ '</table>\n';
|
|
}
|
|
case 'blockquote_start': {
|
|
var body = '';
|
|
|
|
while (this.next().type !== 'blockquote_end') {
|
|
body += this.tok();
|
|
}
|
|
|
|
return '<blockquote>\n'
|
|
+ body
|
|
+ '</blockquote>\n';
|
|
}
|
|
case 'list_start': {
|
|
var type = this.token.ordered ? 'ol' : 'ul'
|
|
, body = '';
|
|
|
|
while (this.next().type !== 'list_end') {
|
|
body += this.tok();
|
|
}
|
|
|
|
return '<'
|
|
+ type
|
|
+ '>\n'
|
|
+ body
|
|
+ '</'
|
|
+ type
|
|
+ '>\n';
|
|
}
|
|
case 'list_item_start': {
|
|
var body = '';
|
|
|
|
while (this.next().type !== 'list_item_end') {
|
|
body += this.token.type === 'text'
|
|
? this.parseText()
|
|
: this.tok();
|
|
}
|
|
|
|
return '<li>'
|
|
+ body
|
|
+ '</li>\n';
|
|
}
|
|
case 'loose_item_start': {
|
|
var body = '';
|
|
|
|
while (this.next().type !== 'list_item_end') {
|
|
body += this.tok();
|
|
}
|
|
|
|
return '<li>'
|
|
+ body
|
|
+ '</li>\n';
|
|
}
|
|
case 'html': {
|
|
return !this.token.pre && !this.options.pedantic
|
|
? this.inline.output(this.token.text)
|
|
: this.token.text;
|
|
}
|
|
case 'paragraph': {
|
|
return '<p>'
|
|
+ this.inline.output(this.token.text)
|
|
+ '</p>\n';
|
|
}
|
|
case 'text': {
|
|
return '<p>'
|
|
+ this.parseText()
|
|
+ '</p>\n';
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Helpers
|
|
*/
|
|
|
|
function escape(html, encode) {
|
|
return html
|
|
.replace(!encode ? /&(?!#?\w+;)/g : /&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"')
|
|
.replace(/'/g, ''');
|
|
}
|
|
|
|
function replace(regex, opt) {
|
|
regex = regex.source;
|
|
opt = opt || '';
|
|
return function self(name, val) {
|
|
if (!name) return new RegExp(regex, opt);
|
|
val = val.source || val;
|
|
val = val.replace(/(^|[^\[])\^/g, '$1');
|
|
regex = regex.replace(name, val);
|
|
return self;
|
|
};
|
|
}
|
|
|
|
function noop() {}
|
|
noop.exec = noop;
|
|
|
|
function merge(obj) {
|
|
var i = 1
|
|
, target
|
|
, key;
|
|
|
|
for (; i < arguments.length; i++) {
|
|
target = arguments[i];
|
|
for (key in target) {
|
|
if (Object.prototype.hasOwnProperty.call(target, key)) {
|
|
obj[key] = target[key];
|
|
}
|
|
}
|
|
}
|
|
|
|
return obj;
|
|
}
|
|
|
|
/**
|
|
* Marked
|
|
*/
|
|
|
|
function marked(src, opt) {
|
|
try {
|
|
return Parser.parse(Lexer.lex(src, opt), opt);
|
|
} catch (e) {
|
|
e.message += '\nPlease report this to https://github.com/chjj/marked.';
|
|
if ((opt || marked.defaults).silent) {
|
|
return 'An error occured:\n' + e.message;
|
|
}
|
|
throw e;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Options
|
|
*/
|
|
|
|
marked.options =
|
|
marked.setOptions = function(opt) {
|
|
marked.defaults = opt;
|
|
return marked;
|
|
};
|
|
|
|
marked.defaults = {
|
|
gfm: true,
|
|
tables: true,
|
|
breaks: false,
|
|
pedantic: false,
|
|
sanitize: false,
|
|
silent: false,
|
|
highlight: null
|
|
};
|
|
|
|
/**
|
|
* Expose
|
|
*/
|
|
|
|
marked.Parser = Parser;
|
|
marked.parser = Parser.parse;
|
|
|
|
marked.Lexer = Lexer;
|
|
marked.lexer = Lexer.lex;
|
|
|
|
marked.InlineLexer = InlineLexer;
|
|
marked.inlineLexer = InlineLexer.output;
|
|
|
|
marked.parse = marked;
|
|
|
|
if (typeof module !== 'undefined') {
|
|
module.exports = marked;
|
|
} else if (typeof define === 'function' && define.amd) {
|
|
define(function() { return marked; });
|
|
} else {
|
|
this.marked = marked;
|
|
}
|
|
|
|
}).call(function() {
|
|
return this || (typeof window !== 'undefined' ? window : global);
|
|
}());
|