2 * EpicEditor - An Embeddable JavaScript Markdown Editor (https://github.com/OscarGodson/EpicEditor)
3 * Copyright (c) 2011-2012, Oscar Godson. (MIT Licensed)
6 (function (window, undefined) {
8 * Applies attributes to a DOM object
9 * @param {object} context The DOM obj you want to apply the attributes to
10 * @param {object} attrs A key/value pair of attributes you want to apply
11 * @returns {undefined}
13 function _applyAttrs(context, attrs) {
14 for (var attr in attrs) {
15 if (attrs.hasOwnProperty(attr)) {
16 context[attr] = attrs[attr];
22 * Applies styles to a DOM object
23 * @param {object} context The DOM obj you want to apply the attributes to
24 * @param {object} attrs A key/value pair of attributes you want to apply
25 * @returns {undefined}
27 function _applyStyles(context, attrs) {
28 for (var attr in attrs) {
29 if (attrs.hasOwnProperty(attr)) {
30 context.style[attr] = attrs[attr];
36 * Returns a DOM objects computed style
37 * @param {object} el The element you want to get the style from
38 * @param {string} styleProp The property you want to get from the element
39 * @returns {string} Returns a string of the value. If property is not set it will return a blank string
41 function _getStyle(el, styleProp) {
44 if (window.getComputedStyle) {
45 y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp);
47 else if (x.currentStyle) {
48 y = x.currentStyle[styleProp];
54 * Saves the current style state for the styles requested, then applies styles
55 * to overwrite the existing one. The old styles are returned as an object so
56 * you can pass it back in when you want to revert back to the old style
57 * @param {object} el The element to get the styles of
58 * @param {string} type Can be "save" or "apply". apply will just apply styles you give it. Save will write styles
59 * @param {object} styles Key/value style/property pairs
62 function _saveStyleState(el, type, styles) {
65 if (type === 'save') {
66 for (style in styles) {
67 if (styles.hasOwnProperty(style)) {
68 returnState[style] = _getStyle(el, style);
71 // After it's all done saving all the previous states, change the styles
72 _applyStyles(el, styles);
74 else if (type === 'apply') {
75 _applyStyles(el, styles);
81 * Gets an elements total width including it's borders and padding
82 * @param {object} el The element to get the total width of
85 function _outerWidth(el) {
86 var b = parseInt(_getStyle(el, 'border-left-width'), 10) + parseInt(_getStyle(el, 'border-right-width'), 10)
87 , p = parseInt(_getStyle(el, 'padding-left'), 10) + parseInt(_getStyle(el, 'padding-right'), 10)
90 // For IE in case no border is set and it defaults to "medium"
91 if (isNaN(b)) { b = 0; }
97 * Gets an elements total height including it's borders and padding
98 * @param {object} el The element to get the total width of
101 function _outerHeight(el) {
102 var b = parseInt(_getStyle(el, 'border-top-width'), 10) + parseInt(_getStyle(el, 'border-bottom-width'), 10)
103 , p = parseInt(_getStyle(el, 'padding-top'), 10) + parseInt(_getStyle(el, 'padding-bottom'), 10)
104 , w = parseInt(_getStyle(el, 'height'), 10)
106 // For IE in case no border is set and it defaults to "medium"
107 if (isNaN(b)) { b = 0; }
113 * Inserts a <link> tag specifically for CSS
114 * @param {string} path The path to the CSS file
115 * @param {object} context In what context you want to apply this to (document, iframe, etc)
116 * @param {string} id An id for you to reference later for changing properties of the <link>
117 * @returns {undefined}
119 function _insertCSSLink(path, context, id) {
121 var headID = context.getElementsByTagName("head")[0]
122 , cssNode = context.createElement('link');
124 _applyAttrs(cssNode, {
133 headID.appendChild(cssNode);
136 // Simply replaces a class (o), to a new class (n) on an element provided (e)
137 function _replaceClass(e, o, n) {
138 e.className = e.className.replace(o, n);
141 // Feature detects an iframe to get the inner document for writing to
142 function _getIframeInnards(el) {
143 return el.contentDocument || el.contentWindow.document;
146 // Grabs the text from an element and preserves whitespace
147 function _getText(el) {
149 // Make sure to check for type of string because if the body of the page
150 // doesn't have any text it'll be "" which is falsey and will go into
151 // the else which is meant for Firefox and shit will break
152 if (typeof document.body.innerText == 'string') {
153 theText = el.innerText;
156 // First replace <br>s before replacing the rest of the HTML
157 theText = el.innerHTML.replace(/<br>/gi, "\n");
158 // Now we can clean the HTML
159 theText = theText.replace(/<(?:.|\n)*?>/gm, '');
160 // Now fix HTML entities
161 theText = theText.replace(/</gi, '<');
162 theText = theText.replace(/>/gi, '>');
167 function _setText(el, content) {
168 // Don't convert lt/gt characters as HTML when viewing the editor window
169 // TODO: Write a test to catch regressions for this
170 content = content.replace(/</g, '<');
171 content = content.replace(/>/g, '>');
172 content = content.replace(/\n/g, '<br>');
174 // Make sure to there aren't two spaces in a row (replace one with )
175 // If you find and replace every space with a text will not wrap.
176 // Hence the name (Non-Breaking-SPace).
177 // TODO: Probably need to test this somehow...
178 content = content.replace(/<br>\s/g, '<br> ')
179 content = content.replace(/\s\s\s/g, ' ')
180 content = content.replace(/\s\s/g, ' ')
181 content = content.replace(/^ /, ' ')
183 el.innerHTML = content;
188 * Converts the 'raw' format of a file's contents into plaintext
189 * @param {string} content Contents of the file
190 * @returns {string} the sanitized content
192 function _sanitizeRawContent(content) {
193 // Get this, 2 spaces in a content editable actually converts to:
194 // 0020 00a0, meaning, "space no-break space". So, manually convert
195 // no-break spaces to spaces again before handing to marked.
196 // Also, WebKit converts no-break to unicode equivalent and FF HTML.
197 return content.replace(/\u00a0/g, ' ').replace(/ /g, ' ');
201 * Will return the version number if the browser is IE. If not will return -1
202 * TRY NEVER TO USE THIS AND USE FEATURE DETECTION IF POSSIBLE
203 * @returns {Number} -1 if false or the version number if true
206 var rv = -1 // Return value assumes failure.
207 , ua = navigator.userAgent
209 if (navigator.appName == 'Microsoft Internet Explorer') {
210 re = /MSIE ([0-9]{1,}[\.0-9]{0,})/;
211 if (re.exec(ua) != null) {
212 rv = parseFloat(RegExp.$1, 10);
219 * Same as the isIE(), but simply returns a boolean
220 * THIS IS TERRIBLE AND IS ONLY USED BECAUSE FULLSCREEN IN SAFARI IS BORKED
221 * If some other engine uses WebKit and has support for fullscreen they
222 * probably wont get native fullscreen until Safari's fullscreen is fixed
223 * @returns {Boolean} true if Safari
225 function _isSafari() {
226 var n = window.navigator;
227 return n.userAgent.indexOf('Safari') > -1 && n.userAgent.indexOf('Chrome') == -1;
231 * Same as the isIE(), but simply returns a boolean
232 * THIS IS TERRIBLE ONLY USE IF ABSOLUTELY NEEDED
233 * @returns {Boolean} true if Safari
235 function _isFirefox() {
236 var n = window.navigator;
237 return n.userAgent.indexOf('Firefox') > -1 && n.userAgent.indexOf('Seamonkey') == -1;
241 * Determines if supplied value is a function
242 * @param {object} object to determine type
244 function _isFunction(functionToCheck) {
246 return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
250 * Overwrites obj1's values with obj2's and adds obj2's if non existent in obj1
251 * @param {boolean} [deepMerge=false] If true, will deep merge meaning it will merge sub-objects like {obj:obj2{foo:'bar'}}
252 * @param {object} first object
253 * @param {object} second object
254 * @returnss {object} a new object based on obj1 and obj2
256 function _mergeObjs() {
257 // copy reference to target object
258 var target = arguments[0] || {}
260 , length = arguments.length
267 // Handle a deep copy situation
268 if (typeof target === "boolean") {
270 target = arguments[1] || {};
271 // skip the boolean and the target
275 // Handle case when target is a string or something (possible in deep copy)
276 if (typeof target !== "object" && !_isFunction(target)) {
279 // extend jQuery itself if only one argument is passed
285 for (; i < length; i++) {
286 // Only deal with non-null/undefined values
287 if ((options = arguments[i]) != null) {
288 // Extend the base object
289 for (name in options) {
290 // @NOTE: added hasOwnProperty check
291 if (options.hasOwnProperty(name)) {
293 copy = options[name];
294 // Prevent never-ending loop
295 if (target === copy) {
298 // Recurse if we're merging object values
299 if (deep && copy && typeof copy === "object" && !copy.nodeType) {
300 target[name] = _mergeObjs(deep,
301 // Never move original objects, clone them
302 src || (copy.length != null ? [] : {})
304 } else if (copy !== undefined) { // Don't bring in undefined values
312 // Return the modified object
317 * Initiates the EpicEditor object and sets up offline storage as well
318 * @class Represents an EpicEditor instance
319 * @param {object} options An optional customization object
320 * @returns {object} EpicEditor will be returned
322 function EpicEditor(options) {
323 // Default settings will be overwritten/extended by options arg
325 , opts = options || {}
328 , defaults = { container: 'epiceditor'
329 , basePath: 'epiceditor'
330 , textarea: undefined
331 , clientSideStorage: true
332 , localStorageName: 'epiceditor'
333 , useNativeFullscreen: true
336 , autoSave: 100 // Set to false for no auto saving
338 , theme: { base: '/themes/base/epiceditor.css'
339 , preview: '/themes/preview/github.css'
340 , editor: '/themes/editor/epic-dark.css'
343 , shortcut: { modifier: 18 // alt keycode
344 , fullscreen: 70 // f keycode
345 , preview: 80 // p keycode
347 , string: { togglePreview: 'Toggle Preview Mode'
348 , toggleEdit: 'Toggle Edit Mode'
349 , toggleFullscreen: 'Enter Fullscreen'
351 , parser: typeof marked == 'function' ? marked : null
353 , button: { fullscreen: true
359 , autogrowDefaults = { minHeight: 80
364 self.settings = _mergeObjs(true, defaults, opts);
366 var buttons = self.settings.button;
367 self._fullscreenEnabled = typeof(buttons) === 'object' ? typeof buttons.fullscreen === 'undefined' || buttons.fullscreen : buttons === true;
368 self._editEnabled = typeof(buttons) === 'object' ? typeof buttons.edit === 'undefined' || buttons.edit : buttons === true;
369 self._previewEnabled = typeof(buttons) === 'object' ? typeof buttons.preview === 'undefined' || buttons.preview : buttons === true;
371 if (!(typeof self.settings.parser == 'function' && typeof self.settings.parser('TEST') == 'string')) {
372 self.settings.parser = function (str) {
377 if (self.settings.autogrow) {
378 if (self.settings.autogrow === true) {
379 self.settings.autogrow = autogrowDefaults;
382 self.settings.autogrow = _mergeObjs(true, autogrowDefaults, self.settings.autogrow);
384 self._oldHeight = -1;
387 // If you put an absolute link as the path of any of the themes ignore the basePath
389 if (!self.settings.theme.preview.match(/^https?:\/\//)) {
390 self.settings.theme.preview = self.settings.basePath + self.settings.theme.preview;
393 if (!self.settings.theme.editor.match(/^https?:\/\//)) {
394 self.settings.theme.editor = self.settings.basePath + self.settings.theme.editor;
397 if (!self.settings.theme.base.match(/^https?:\/\//)) {
398 self.settings.theme.base = self.settings.basePath + self.settings.theme.base;
401 // Grab the container element and save it to self.element
402 // if it's a string assume it's an ID and if it's an object
403 // assume it's a DOM element
404 if (typeof self.settings.container == 'string') {
405 self.element = document.getElementById(self.settings.container);
407 else if (typeof self.settings.container == 'object') {
408 self.element = self.settings.container;
411 // Figure out the file name. If no file name is given we'll use the ID.
412 // If there's no ID either we'll use a namespaced file name that's incremented
413 // based on the calling order. As long as it doesn't change, drafts will be saved.
414 if (!self.settings.file.name) {
415 if (typeof self.settings.container == 'string') {
416 self.settings.file.name = self.settings.container;
418 else if (typeof self.settings.container == 'object') {
419 if (self.element.id) {
420 self.settings.file.name = self.element.id;
423 if (!EpicEditor._data.unnamedEditors) {
424 EpicEditor._data.unnamedEditors = [];
426 EpicEditor._data.unnamedEditors.push(self);
427 self.settings.file.name = '__epiceditor-untitled-' + EpicEditor._data.unnamedEditors.length;
432 if (self.settings.button.bar === "show") {
433 self.settings.button.bar = true;
436 if (self.settings.button.bar === "hide") {
437 self.settings.button.bar = false;
440 // Protect the id and overwrite if passed in as an option
441 // TODO: Put underscrore to denote that this is private
442 self._instanceId = 'epiceditor-' + Math.round(Math.random() * 100000);
444 self._canSave = true;
446 // Setup local storage of files
447 self._defaultFileSchema = function () {
449 content: self.settings.file.defaultContent
450 , created: new Date()
451 , modified: new Date()
455 if (localStorage && self.settings.clientSideStorage) {
456 this._storage = localStorage;
457 if (this._storage[self.settings.localStorageName] && self.getFiles(self.settings.file.name) === undefined) {
458 _defaultFile = self._defaultFileSchema();
459 _defaultFile.content = self.settings.file.defaultContent;
463 if (!this._storage[self.settings.localStorageName]) {
465 defaultStorage[self.settings.file.name] = self._defaultFileSchema();
466 defaultStorage = JSON.stringify(defaultStorage);
467 this._storage[self.settings.localStorageName] = defaultStorage;
470 // A string to prepend files with to save draft versions of files
471 // and reset all preview drafts on each load!
472 self._previewDraftLocation = '__draft-';
473 self._storage[self._previewDraftLocation + self.settings.localStorageName] = self._storage[self.settings.localStorageName];
475 // This needs to replace the use of classes to check the state of EE
484 // Now that it exists, allow binding of events if it doesn't exist yet
493 * Inserts the EpicEditor into the DOM via an iframe and gets it ready for editing and previewing
494 * @returns {object} EpicEditor will be returned
496 EpicEditor.prototype.load = function (callback) {
498 // Get out early if it's already loaded
499 if (this.is('loaded')) { return this; }
501 // TODO: Gotta get the privates with underscores!
502 // TODO: Gotta document what these are for...
511 , mousePos = { y: -1, x: -1 }
515 , nativeFsWebkit = false
516 , nativeFsMoz = false
517 , nativeFsW3C = false
522 , i // i is reused for loops
525 // Startup is a way to check if this EpicEditor is starting up. Useful for
526 // checking and doing certain things before EpicEditor emits a load event.
527 self._eeState.startup = true;
529 if (self.settings.useNativeFullscreen) {
530 nativeFsWebkit = document.body.webkitRequestFullScreen ? true : false;
531 nativeFsMoz = document.body.mozRequestFullScreen ? true : false;
532 nativeFsW3C = document.body.requestFullscreen ? true : false;
533 nativeFs = nativeFsWebkit || nativeFsMoz || nativeFsW3C;
536 // Fucking Safari's native fullscreen works terribly
537 // REMOVE THIS IF SAFARI 7 WORKS BETTER
540 nativeFsWebkit = false;
543 // It opens edit mode by default (for now);
544 if (!self.is('edit') && !self.is('preview')) {
545 self._eeState.edit = true;
548 callback = callback || function () {};
551 // TODO: edit-mode class should be dynamically added
553 // This is wrapping iframe element. It contains the other two iframes and the utilbar
554 chrome: '<div id="epiceditor-wrapper" class="epiceditor-edit-mode">' +
555 '<iframe frameborder="0" id="epiceditor-editor-frame"></iframe>' +
556 '<iframe frameborder="0" id="epiceditor-previewer-frame"></iframe>' +
557 '<div id="epiceditor-utilbar">' +
558 (self._previewEnabled ? '<button title="' + this.settings.string.togglePreview + '" class="epiceditor-toggle-btn epiceditor-toggle-preview-btn"></button> ' : '') +
559 (self._editEnabled ? '<button title="' + this.settings.string.toggleEdit + '" class="epiceditor-toggle-btn epiceditor-toggle-edit-btn"></button> ' : '') +
560 (self._fullscreenEnabled ? '<button title="' + this.settings.string.toggleFullscreen + '" class="epiceditor-fullscreen-btn"></button>' : '') +
564 // The previewer is just an empty box for the generated HTML to go into
565 , previewer: '<div id="epiceditor-preview"></div>'
566 , editor: '<!doctype HTML>'
569 // Write an iframe and then select it for the editor
570 self.element.innerHTML = '<iframe scrolling="no" frameborder="0" id= "' + self._instanceId + '"></iframe>';
572 // Because browsers add things like invisible padding and margins and stuff
573 // to iframes, we need to set manually set the height so that the height
574 // doesn't keep increasing (by 2px?) every time reflow() is called.
575 // FIXME: Figure out how to fix this without setting this
576 self.element.style.height = self.element.offsetHeight + 'px';
578 iframeElement = document.getElementById(self._instanceId);
580 // Store a reference to the iframeElement itself
581 self.iframeElement = iframeElement;
583 // Grab the innards of the iframe (returns the document.body)
584 // TODO: Change self.iframe to self.iframeDocument
585 self.iframe = _getIframeInnards(iframeElement);
587 self.iframe.write(_HtmlTemplates.chrome);
589 // Now that we got the innards of the iframe, we can grab the other iframes
590 self.editorIframe = self.iframe.getElementById('epiceditor-editor-frame')
591 self.previewerIframe = self.iframe.getElementById('epiceditor-previewer-frame');
593 // Setup the editor iframe
594 self.editorIframeDocument = _getIframeInnards(self.editorIframe);
595 self.editorIframeDocument.open();
596 // Need something for... you guessed it, Firefox
597 self.editorIframeDocument.write(_HtmlTemplates.editor);
598 self.editorIframeDocument.close();
600 // Setup the previewer iframe
601 self.previewerIframeDocument = _getIframeInnards(self.previewerIframe);
602 self.previewerIframeDocument.open();
603 self.previewerIframeDocument.write(_HtmlTemplates.previewer);
605 // Base tag is added so that links will open a new tab and not inside of the iframes
606 baseTag = self.previewerIframeDocument.createElement('base');
607 baseTag.target = '_blank';
608 self.previewerIframeDocument.getElementsByTagName('head')[0].appendChild(baseTag);
610 self.previewerIframeDocument.close();
614 // Insert Base Stylesheet
615 _insertCSSLink(self.settings.theme.base, self.iframe, 'theme');
617 // Insert Editor Stylesheet
618 _insertCSSLink(self.settings.theme.editor, self.editorIframeDocument, 'theme');
620 // Insert Previewer Stylesheet
621 _insertCSSLink(self.settings.theme.preview, self.previewerIframeDocument, 'theme');
623 // Add a relative style to the overall wrapper to keep CSS relative to the editor
624 self.iframe.getElementById('epiceditor-wrapper').style.position = 'relative';
626 // Set the position to relative so we hide them with left: -999999px
627 self.editorIframe.style.position = 'absolute';
628 self.previewerIframe.style.position = 'absolute';
630 // Now grab the editor and previewer for later use
631 self.editor = self.editorIframeDocument.body;
632 self.previewer = self.previewerIframeDocument.getElementById('epiceditor-preview');
634 self.editor.contentEditable = true;
636 // Firefox's <body> gets all fucked up so, to be sure, we need to hardcode it
637 self.iframe.body.style.height = this.element.offsetHeight + 'px';
639 // Should actually check what mode it's in!
640 self.previewerIframe.style.left = '-999999px';
642 // Keep long lines from being longer than the editor
643 this.editorIframeDocument.body.style.wordWrap = 'break-word';
645 // FIXME figure out why it needs +2 px
647 this.previewer.style.height = parseInt(_getStyle(this.previewer, 'height'), 10) + 2;
650 // If there is a file to be opened with that filename and it has content...
651 this.open(self.settings.file.name);
653 if (self.settings.focusOnLoad) {
654 // We need to wait until all three iframes are done loading by waiting until the parent
655 // iframe's ready state == complete, then we can focus on the contenteditable
656 self.iframe.addEventListener('readystatechange', function () {
657 if (self.iframe.readyState == 'complete') {
663 // Because IE scrolls the whole window to hash links, we need our own
664 // method of scrolling the iframe to an ID from clicking a hash
665 self.previewerIframeDocument.addEventListener('click', function (e) {
667 , body = self.previewerIframeDocument.body;
668 if (el.nodeName == 'A') {
669 // Make sure the link is a hash and the link is local to the iframe
670 if (el.hash && el.hostname == window.location.hostname) {
671 // Prevent the whole window from scrolling
673 // Prevent opening a new window
675 // Scroll to the matching element, if an element exists
676 if (body.querySelector(el.hash)) {
677 body.scrollTop = body.querySelector(el.hash).offsetTop;
683 utilBtns = self.iframe.getElementById('epiceditor-utilbar');
685 // TODO: Move into fullscreen setup function (_setupFullscreen)
687 self._goFullscreen = function (el) {
688 this._fixScrollbars('auto');
690 if (self.is('fullscreen')) {
691 self._exitFullscreen(el);
696 if (nativeFsWebkit) {
697 el.webkitRequestFullScreen();
699 else if (nativeFsMoz) {
700 el.mozRequestFullScreen();
702 else if (nativeFsW3C) {
703 el.requestFullscreen();
707 _isInEdit = self.is('edit');
709 // Set the state of EE in fullscreen
710 // We set edit and preview to true also because they're visible
711 // we might want to allow fullscreen edit mode without preview (like a "zen" mode)
712 self._eeState.fullscreen = true;
713 self._eeState.edit = true;
714 self._eeState.preview = true;
716 // Cache calculations
717 var windowInnerWidth = window.innerWidth
718 , windowInnerHeight = window.innerHeight
719 , windowOuterWidth = window.outerWidth
720 , windowOuterHeight = window.outerHeight;
722 // Without this the scrollbars will get hidden when scrolled to the bottom in faux fullscreen (see #66)
724 windowOuterHeight = window.innerHeight;
727 // This MUST come first because the editor is 100% width so if we change the width of the iframe or wrapper
728 // the editor's width wont be the same as before
729 _elementStates.editorIframe = _saveStyleState(self.editorIframe, 'save', {
730 'width': windowOuterWidth / 2 + 'px'
731 , 'height': windowOuterHeight + 'px'
732 , 'float': 'left' // Most browsers
733 , 'cssFloat': 'left' // FF
734 , 'styleFloat': 'left' // Older IEs
736 , 'position': 'static'
741 _elementStates.previewerIframe = _saveStyleState(self.previewerIframe, 'save', {
742 'width': windowOuterWidth / 2 + 'px'
743 , 'height': windowOuterHeight + 'px'
744 , 'float': 'right' // Most browsers
745 , 'cssFloat': 'right' // FF
746 , 'styleFloat': 'right' // Older IEs
748 , 'position': 'static'
752 // Setup the containing element CSS for fullscreen
753 _elementStates.element = _saveStyleState(self.element, 'save', {
758 , 'z-index': '9999' // Most browsers
759 , 'zIndex': '9999' // Firefox
762 // Should use the base styles background!
763 , 'background': _getStyle(self.editor, 'background-color') // Try to hide the site below
764 , 'height': windowInnerHeight + 'px'
767 // The iframe element
768 _elementStates.iframeElement = _saveStyleState(self.iframeElement, 'save', {
769 'width': windowOuterWidth + 'px'
770 , 'height': windowInnerHeight + 'px'
773 // ...Oh, and hide the buttons and prevent scrolling
774 utilBtns.style.visibility = 'hidden';
777 document.body.style.overflow = 'hidden';
784 self.emit('fullscreenenter');
787 self._exitFullscreen = function (el) {
788 this._fixScrollbars();
790 _saveStyleState(self.element, 'apply', _elementStates.element);
791 _saveStyleState(self.iframeElement, 'apply', _elementStates.iframeElement);
792 _saveStyleState(self.editorIframe, 'apply', _elementStates.editorIframe);
793 _saveStyleState(self.previewerIframe, 'apply', _elementStates.previewerIframe);
795 // We want to always revert back to the original styles in the CSS so,
796 // if it's a fluid width container it will expand on resize and not get
797 // stuck at a specific width after closing fullscreen.
798 self.element.style.width = self._eeState.reflowWidth ? self._eeState.reflowWidth : '';
799 self.element.style.height = self._eeState.reflowHeight ? self._eeState.reflowHeight : '';
801 utilBtns.style.visibility = 'visible';
803 // Put the editor back in the right state
804 // TODO: This is ugly... how do we make this nicer?
805 // setting fullscreen to false here prevents the
806 // native fs callback from calling this function again
807 self._eeState.fullscreen = false;
810 document.body.style.overflow = 'auto';
813 if (nativeFsWebkit) {
814 document.webkitCancelFullScreen();
816 else if (nativeFsMoz) {
817 document.mozCancelFullScreen();
819 else if (nativeFsW3C) {
820 document.exitFullscreen();
833 self.emit('fullscreenexit');
836 // This setups up live previews by triggering preview() IF in fullscreen on keyup
837 self.editor.addEventListener('keyup', function () {
839 window.clearTimeout(keypressTimer);
841 keypressTimer = window.setTimeout(function () {
842 if (self.is('fullscreen')) {
848 fsElement = self.iframeElement;
850 // Sets up the onclick event on utility buttons
851 utilBtns.addEventListener('click', function (e) {
852 var targetClass = e.target.className;
853 if (targetClass.indexOf('epiceditor-toggle-preview-btn') > -1) {
856 else if (targetClass.indexOf('epiceditor-toggle-edit-btn') > -1) {
859 else if (targetClass.indexOf('epiceditor-fullscreen-btn') > -1) {
860 self._goFullscreen(fsElement);
864 // Sets up the NATIVE fullscreen editor/previewer for WebKit
865 if (nativeFsWebkit) {
866 document.addEventListener('webkitfullscreenchange', function () {
867 if (!document.webkitIsFullScreen && self._eeState.fullscreen) {
868 self._exitFullscreen(fsElement);
872 else if (nativeFsMoz) {
873 document.addEventListener('mozfullscreenchange', function () {
874 if (!document.mozFullScreen && self._eeState.fullscreen) {
875 self._exitFullscreen(fsElement);
879 else if (nativeFsW3C) {
880 document.addEventListener('fullscreenchange', function () {
881 if (document.fullscreenElement == null && self._eeState.fullscreen) {
882 self._exitFullscreen(fsElement);
887 // TODO: Move utilBar stuff into a utilBar setup function (_setupUtilBar)
888 utilBar = self.iframe.getElementById('epiceditor-utilbar');
890 // Hide it at first until they move their mouse
891 if (self.settings.button.bar !== true) {
892 utilBar.style.display = 'none';
895 utilBar.addEventListener('mouseover', function () {
897 clearTimeout(utilBarTimer);
901 function utilBarHandler(e) {
902 if (self.settings.button.bar !== "auto") {
905 // Here we check if the mouse has moves more than 5px in any direction before triggering the mousemove code
906 // we do this for 2 reasons:
907 // 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
908 // a mousemove of a few pixels depending on how hard you scroll
909 // 2. We give a slight buffer to the user in case he barely touches his touchpad or mouse and not trigger the UI
910 if (Math.abs(mousePos.y - e.pageY) >= 5 || Math.abs(mousePos.x - e.pageX) >= 5) {
911 utilBar.style.display = 'block';
912 // if we have a timer already running, kill it out
914 clearTimeout(utilBarTimer);
917 // begin a new timer that hides our object after 1000 ms
918 utilBarTimer = window.setTimeout(function () {
919 utilBar.style.display = 'none';
922 mousePos = { y: e.pageY, x: e.pageX };
925 // Add keyboard shortcuts for convenience.
926 function shortcutHandler(e) {
927 if (e.keyCode == self.settings.shortcut.modifier) { isMod = true } // check for modifier press(default is alt key), save to var
928 if (e.keyCode == 17) { isCtrl = true } // check for ctrl/cmnd press, in order to catch ctrl/cmnd + s
930 // Check for alt+p and make sure were not in fullscreen - default shortcut to switch to preview
931 if (isMod === true && e.keyCode == self.settings.shortcut.preview && !self.is('fullscreen')) {
933 if (self.is('edit') && self._previewEnabled) {
936 else if (self._editEnabled) {
940 // Check for alt+f - default shortcut to make editor fullscreen
941 if (isMod === true && e.keyCode == self.settings.shortcut.fullscreen && self._fullscreenEnabled) {
943 self._goFullscreen(fsElement);
946 // Set the modifier key to false once *any* key combo is completed
947 // or else, on Windows, hitting the alt key will lock the isMod state to true (ticket #133)
948 if (isMod === true && e.keyCode !== self.settings.shortcut.modifier) {
952 // When a user presses "esc", revert everything!
953 if (e.keyCode == 27 && self.is('fullscreen')) {
954 self._exitFullscreen(fsElement);
957 // Check for ctrl + s (since a lot of people do it out of habit) and make it do nothing
958 if (isCtrl === true && e.keyCode == 83) {
964 // Do the same for Mac now (metaKey == cmd).
965 if (e.metaKey && e.keyCode == 83) {
972 function shortcutUpHandler(e) {
973 if (e.keyCode == self.settings.shortcut.modifier) { isMod = false }
974 if (e.keyCode == 17) { isCtrl = false }
977 function pasteHandler(e) {
979 if (e.clipboardData) {
980 //FF 22, Webkit, "standards"
982 content = e.clipboardData.getData("text/plain");
983 self.editorIframeDocument.execCommand("insertText", false, content);
985 else if (window.clipboardData) {
988 content = window.clipboardData.getData("Text");
989 content = content.replace(/</g, '<');
990 content = content.replace(/>/g, '>');
991 content = content.replace(/\n/g, '<br>');
992 content = content.replace(/\r/g, ''); //fuck you, ie!
993 content = content.replace(/<br>\s/g, '<br> ')
994 content = content.replace(/\s\s\s/g, ' ')
995 content = content.replace(/\s\s/g, ' ')
996 self.editorIframeDocument.selection.createRange().pasteHTML(content);
1000 // Hide and show the util bar based on mouse movements
1001 eventableIframes = [self.previewerIframeDocument, self.editorIframeDocument];
1003 for (i = 0; i < eventableIframes.length; i++) {
1004 eventableIframes[i].addEventListener('mousemove', function (e) {
1007 eventableIframes[i].addEventListener('scroll', function (e) {
1010 eventableIframes[i].addEventListener('keyup', function (e) {
1011 shortcutUpHandler(e);
1013 eventableIframes[i].addEventListener('keydown', function (e) {
1016 eventableIframes[i].addEventListener('paste', function (e) {
1021 // Save the document every 100ms by default
1022 // TODO: Move into autosave setup function (_setupAutoSave)
1023 if (self.settings.file.autoSave) {
1024 self._saveIntervalTimer = window.setInterval(function () {
1025 if (!self._canSave) {
1028 self.save(false, true);
1029 }, self.settings.file.autoSave);
1032 // Update a textarea automatically if a textarea is given so you don't need
1033 // AJAX to submit a form and instead fall back to normal form behavior
1034 if (self.settings.textarea) {
1035 self._setupTextareaSync();
1038 window.addEventListener('resize', function () {
1039 // If NOT webkit, and in fullscreen, we need to account for browser resizing
1040 // we don't care about webkit because you can't resize in webkit's fullscreen
1041 if (self.is('fullscreen')) {
1042 _applyStyles(self.iframeElement, {
1043 'width': window.outerWidth + 'px'
1044 , 'height': window.innerHeight + 'px'
1047 _applyStyles(self.element, {
1048 'height': window.innerHeight + 'px'
1051 _applyStyles(self.previewerIframe, {
1052 'width': window.outerWidth / 2 + 'px'
1053 , 'height': window.innerHeight + 'px'
1056 _applyStyles(self.editorIframe, {
1057 'width': window.outerWidth / 2 + 'px'
1058 , 'height': window.innerHeight + 'px'
1061 // Makes the editor support fluid width when not in fullscreen mode
1062 else if (!self.is('fullscreen')) {
1067 // Set states before flipping edit and preview modes
1068 self._eeState.loaded = true;
1069 self._eeState.unloaded = false;
1071 if (self.is('preview')) {
1078 self.iframe.close();
1079 self._eeState.startup = false;
1081 if (self.settings.autogrow) {
1082 self._fixScrollbars();
1084 boundAutogrow = function () {
1085 setTimeout(function () {
1090 //for if autosave is disabled or very slow
1091 ['keydown', 'keyup', 'paste', 'cut'].forEach(function (ev) {
1092 self.getElement('editor').addEventListener(ev, boundAutogrow);
1095 self.on('__update', boundAutogrow);
1096 self.on('edit', function () {
1097 setTimeout(boundAutogrow, 50)
1099 self.on('preview', function () {
1100 setTimeout(boundAutogrow, 50)
1103 //for browsers that have rendering delays
1104 setTimeout(boundAutogrow, 50);
1108 // The callback and call are the same thing, but different ways to access them
1109 callback.call(this);
1114 EpicEditor.prototype._setupTextareaSync = function () {
1116 , textareaFileName = self.settings.file.name
1119 // Even if autoSave is false, we want to make sure to keep the textarea synced
1120 // with the editor's content. One bad thing about this tho is that we're
1121 // creating two timers now in some configurations. We keep the textarea synced
1122 // by saving and opening the textarea content from the draft file storage.
1123 self._textareaSaveTimer = window.setInterval(function () {
1124 if (!self._canSave) {
1130 _syncTextarea = function () {
1131 // TODO: Figure out root cause for having to do this ||.
1132 // This only happens for draft files. Probably has something to do with
1133 // the fact draft files haven't been saved by the time this is called.
1134 // TODO: Add test for this case.
1135 self._textareaElement.value = self.exportFile(textareaFileName, 'text', true) || self.settings.file.defaultContent;
1138 if (typeof self.settings.textarea == 'string') {
1139 self._textareaElement = document.getElementById(self.settings.textarea);
1141 else if (typeof self.settings.textarea == 'object') {
1142 self._textareaElement = self.settings.textarea;
1145 // On page load, if there's content in the textarea that means one of two
1146 // different things:
1148 // 1. The editor didn't load and the user was writing in the textarea and
1149 // now he refreshed the page or the JS loaded and the textarea now has
1150 // content. If this is the case the user probably expects his content is
1151 // moved into the editor and not lose what he typed.
1153 // 2. The developer put content in the textarea from some server side
1154 // code. In this case, the textarea will take precedence.
1156 // If the developer wants drafts to be recoverable they should check if
1157 // the local file in localStorage's modified date is newer than the server.
1158 if (self._textareaElement.value !== '') {
1159 self.importFile(textareaFileName, self._textareaElement.value);
1161 // manually save draft after import so there is no delay between the
1162 // import and exporting in _syncTextarea. Without this, _syncTextarea
1163 // will pull the saved data from localStorage which will be <=100ms old.
1167 // Update the textarea on load and pull from drafts
1170 // Make sure to keep it updated
1171 self.on('__update', _syncTextarea);
1175 * Will NOT focus the editor if the editor is still starting up AND
1176 * focusOnLoad is set to false. This allows you to place this in code that
1177 * gets fired during .load() without worrying about it overriding the user's
1178 * option. For example use cases see preview() and edit().
1179 * @returns {undefined}
1182 // Prevent focus when the user sets focusOnLoad to false by checking if the
1183 // editor is starting up AND if focusOnLoad is true
1184 EpicEditor.prototype._focusExceptOnLoad = function () {
1186 if ((self._eeState.startup && self.settings.focusOnLoad) || !self._eeState.startup) {
1192 * Will remove the editor, but not offline files
1193 * @returns {object} EpicEditor will be returned
1195 EpicEditor.prototype.unload = function (callback) {
1197 // Make sure the editor isn't already unloaded.
1198 if (this.is('unloaded')) {
1199 throw new Error('Editor isn\'t loaded');
1203 , editor = window.parent.document.getElementById(self._instanceId);
1205 editor.parentNode.removeChild(editor);
1206 self._eeState.loaded = false;
1207 self._eeState.unloaded = true;
1208 callback = callback || function () {};
1210 if (self.settings.textarea) {
1211 self._textareaElement.value = "";
1212 self.removeListener('__update');
1215 if (self._saveIntervalTimer) {
1216 window.clearInterval(self._saveIntervalTimer);
1218 if (self._textareaSaveTimer) {
1219 window.clearInterval(self._textareaSaveTimer);
1222 callback.call(this);
1223 self.emit('unload');
1228 * reflow allows you to dynamically re-fit the editor in the parent without
1229 * having to unload and then reload the editor again.
1231 * reflow will also emit a `reflow` event and will return the new dimensions.
1232 * If it's called without params it'll return the new width and height and if
1233 * it's called with just width or just height it'll just return the width or
1234 * height. It's returned as an object like: { width: '100px', height: '1px' }
1236 * @param {string|null} kind Can either be 'width' or 'height' or null
1237 * if null, both the height and width will be resized
1238 * @param {function} callback A function to fire after the reflow is finished.
1239 * Will return the width / height in an obj as the first param of the callback.
1240 * @returns {object} EpicEditor will be returned
1242 EpicEditor.prototype.reflow = function (kind, callback) {
1244 , widthDiff = _outerWidth(self.element) - self.element.offsetWidth
1245 , heightDiff = _outerHeight(self.element) - self.element.offsetHeight
1246 , elements = [self.iframeElement, self.editorIframe, self.previewerIframe]
1251 if (typeof kind == 'function') {
1257 callback = function () {};
1260 for (var x = 0; x < elements.length; x++) {
1261 if (!kind || kind == 'width') {
1262 newWidth = self.element.offsetWidth - widthDiff + 'px';
1263 elements[x].style.width = newWidth;
1264 self._eeState.reflowWidth = newWidth;
1265 eventData.width = newWidth;
1267 if (!kind || kind == 'height') {
1268 newHeight = self.element.offsetHeight - heightDiff + 'px';
1269 elements[x].style.height = newHeight;
1270 self._eeState.reflowHeight = newHeight
1271 eventData.height = newHeight;
1275 self.emit('reflow', eventData);
1276 callback.call(this, eventData);
1281 * Will take the markdown and generate a preview view based on the theme
1282 * @returns {object} EpicEditor will be returned
1284 EpicEditor.prototype.preview = function () {
1287 , theme = self.settings.theme.preview
1290 _replaceClass(self.getElement('wrapper'), 'epiceditor-edit-mode', 'epiceditor-preview-mode');
1292 // Check if no CSS theme link exists
1293 if (!self.previewerIframeDocument.getElementById('theme')) {
1294 _insertCSSLink(theme, self.previewerIframeDocument, 'theme');
1296 else if (self.previewerIframeDocument.getElementById('theme').name !== theme) {
1297 self.previewerIframeDocument.getElementById('theme').href = theme;
1300 // Save a preview draft since it might not be saved to the real file yet
1303 // Add the generated draft HTML into the previewer
1304 self.previewer.innerHTML = self.exportFile(null, 'html', true);
1306 // Hide the editor and display the previewer
1307 if (!self.is('fullscreen')) {
1308 self.editorIframe.style.left = '-999999px';
1309 self.previewerIframe.style.left = '';
1310 self._eeState.preview = true;
1311 self._eeState.edit = false;
1312 self._focusExceptOnLoad();
1315 self.emit('preview');
1320 * Helper to focus on the editor iframe. Will figure out which iframe to
1321 * focus on based on which one is active and will handle the cross browser
1322 * issues with focusing on the iframe vs the document body.
1323 * @returns {object} EpicEditor will be returned
1325 EpicEditor.prototype.focus = function (pageload) {
1327 , isPreview = self.is('preview')
1328 , focusElement = isPreview ? self.previewerIframeDocument.body
1329 : self.editorIframeDocument.body;
1331 if (_isFirefox() && isPreview) {
1332 focusElement = self.previewerIframe;
1335 focusElement.focus();
1340 * Puts the editor into fullscreen mode
1341 * @returns {object} EpicEditor will be returned
1343 EpicEditor.prototype.enterFullscreen = function () {
1344 if (this.is('fullscreen')) { return this; }
1345 this._goFullscreen(this.iframeElement);
1350 * Closes fullscreen mode if opened
1351 * @returns {object} EpicEditor will be returned
1353 EpicEditor.prototype.exitFullscreen = function () {
1354 if (!this.is('fullscreen')) { return this; }
1355 this._exitFullscreen(this.iframeElement);
1360 * Hides the preview and shows the editor again
1361 * @returns {object} EpicEditor will be returned
1363 EpicEditor.prototype.edit = function () {
1365 _replaceClass(self.getElement('wrapper'), 'epiceditor-preview-mode', 'epiceditor-edit-mode');
1366 self._eeState.preview = false;
1367 self._eeState.edit = true;
1368 self.editorIframe.style.left = '';
1369 self.previewerIframe.style.left = '-999999px';
1370 self._focusExceptOnLoad();
1376 * Grabs a specificed HTML node. Use it as a shortcut to getting the iframe contents
1377 * @param {String} name The name of the node (can be document, body, editor, previewer, or wrapper)
1378 * @returns {Object|Null}
1380 EpicEditor.prototype.getElement = function (name) {
1382 "container": this.element
1383 , "wrapper": this.iframe.getElementById('epiceditor-wrapper')
1384 , "wrapperIframe": this.iframeElement
1385 , "editor": this.editorIframeDocument
1386 , "editorIframe": this.editorIframe
1387 , "previewer": this.previewerIframeDocument
1388 , "previewerIframe": this.previewerIframe
1391 // Check that the given string is a possible option and verify the editor isn't unloaded
1392 // without this, you'd be given a reference to an object that no longer exists in the DOM
1393 if (!available[name] || this.is('unloaded')) {
1397 return available[name];
1402 * Returns a boolean of each "state" of the editor. For example "editor.is('loaded')" // returns true/false
1403 * @param {String} what the state you want to check for
1404 * @returns {Boolean}
1406 EpicEditor.prototype.is = function (what) {
1410 return self._eeState.loaded;
1412 return self._eeState.unloaded
1414 return self._eeState.preview
1416 return self._eeState.edit;
1418 return self._eeState.fullscreen;
1419 // TODO: This "works", but the tests are saying otherwise. Come back to this
1420 // and figure out how to fix it.
1422 // return document.activeElement == self.iframeElement;
1430 * @param {string} name The name of the file you want to open
1431 * @returns {object} EpicEditor will be returned
1433 EpicEditor.prototype.open = function (name) {
1435 , defaultContent = self.settings.file.defaultContent
1437 name = name || self.settings.file.name;
1438 self.settings.file.name = name;
1439 if (this._storage[self.settings.localStorageName]) {
1440 fileObj = self.exportFile(name);
1441 if (fileObj !== undefined) {
1442 _setText(self.editor, fileObj);
1446 _setText(self.editor, defaultContent);
1447 self.save(); // ensure a save
1448 self.emit('create');
1450 self.previewer.innerHTML = self.exportFile(null, 'html');
1457 * Saves content for offline use
1458 * @returns {object} EpicEditor will be returned
1460 EpicEditor.prototype.save = function (_isPreviewDraft, _isAuto) {
1464 , file = self.settings.file.name
1465 , previewDraftName = ''
1466 , data = this._storage[previewDraftName + self.settings.localStorageName]
1467 , content = _getText(this.editor);
1469 if (_isPreviewDraft) {
1470 previewDraftName = self._previewDraftLocation;
1473 // This could have been false but since we're manually saving
1474 // we know it's save to start autoSaving again
1475 this._canSave = true;
1477 // Guard against storage being wiped out without EpicEditor knowing
1478 // TODO: Emit saving error - storage seems to have been wiped
1480 storage = JSON.parse(this._storage[previewDraftName + self.settings.localStorageName]);
1482 // If the file doesn't exist we need to create it
1483 if (storage[file] === undefined) {
1484 storage[file] = self._defaultFileSchema();
1487 // If it does, we need to check if the content is different and
1488 // if it is, send the update event and update the timestamp
1489 else if (content !== storage[file].content) {
1490 storage[file].modified = new Date();
1493 //don't bother autosaving if the content hasn't actually changed
1498 storage[file].content = content;
1499 this._storage[previewDraftName + self.settings.localStorageName] = JSON.stringify(storage);
1501 // After the content is actually changed, emit update so it emits the updated content
1503 self.emit('update');
1504 // Emit a private update event so it can't get accidentally removed
1505 self.emit('__update');
1509 this.emit('autosave');
1511 else if (!_isPreviewDraft) {
1521 * @param {string} name The name of the file you want to remove from localStorage
1522 * @returns {object} EpicEditor will be returned
1524 EpicEditor.prototype.remove = function (name) {
1527 name = name || self.settings.file.name;
1529 // If you're trying to delete a page you have open, block saving
1530 if (name == self.settings.file.name) {
1531 self._canSave = false;
1534 s = JSON.parse(this._storage[self.settings.localStorageName]);
1536 this._storage[self.settings.localStorageName] = JSON.stringify(s);
1537 this.emit('remove');
1543 * @param {string} oldName The old file name
1544 * @param {string} newName The new file name
1545 * @returns {object} EpicEditor will be returned
1547 EpicEditor.prototype.rename = function (oldName, newName) {
1549 , s = JSON.parse(this._storage[self.settings.localStorageName]);
1550 s[newName] = s[oldName];
1552 this._storage[self.settings.localStorageName] = JSON.stringify(s);
1558 * Imports a file and it's contents and opens it
1559 * @param {string} name The name of the file you want to import (will overwrite existing files!)
1560 * @param {string} content Content of the file you want to import
1561 * @param {string} kind The kind of file you want to import (TBI)
1562 * @param {object} meta Meta data you want to save with your file.
1563 * @returns {object} EpicEditor will be returned
1565 EpicEditor.prototype.importFile = function (name, content, kind, meta) {
1569 name = name || self.settings.file.name;
1570 content = content || '';
1571 kind = kind || 'md';
1574 if (JSON.parse(this._storage[self.settings.localStorageName])[name] === undefined) {
1578 // Set our current file to the new file and update the content
1579 self.settings.file.name = name;
1580 _setText(self.editor, content);
1583 self.emit('create');
1588 if (self.is('fullscreen')) {
1592 //firefox has trouble with importing and working out the size right away
1593 if (self.settings.autogrow) {
1594 setTimeout(function () {
1603 * Gets the local filestore
1604 * @param {string} name Name of the file in the store
1605 * @returns {object|undefined} the local filestore, or a specific file in the store, if a name is given
1607 EpicEditor.prototype._getFileStore = function (name, _isPreviewDraft) {
1608 var previewDraftName = ''
1610 if (_isPreviewDraft) {
1611 previewDraftName = this._previewDraftLocation;
1613 store = JSON.parse(this._storage[previewDraftName + this.settings.localStorageName]);
1623 * Exports a file as a string in a supported format
1624 * @param {string} name Name of the file you want to export (case sensitive)
1625 * @param {string} kind Kind of file you want the content in (currently supports html and text, default is the format the browser "wants")
1626 * @returns {string|undefined} The content of the file in the content given or undefined if it doesn't exist
1628 EpicEditor.prototype.exportFile = function (name, kind, _isPreviewDraft) {
1633 name = name || self.settings.file.name;
1634 kind = kind || 'text';
1636 file = self._getFileStore(name, _isPreviewDraft);
1638 // If the file doesn't exist just return early with undefined
1639 if (file === undefined) {
1643 content = file.content;
1647 content = _sanitizeRawContent(content);
1648 return self.settings.parser(content);
1650 return _sanitizeRawContent(content);
1652 file.content = _sanitizeRawContent(file.content);
1653 return JSON.stringify(file);
1662 * Gets the contents and metadata for files
1663 * @param {string} name Name of the file whose data you want (case sensitive)
1664 * @param {boolean} excludeContent whether the contents of files should be excluded
1665 * @returns {object} An object with the names and data of every file, or just the data of one file if a name was given
1667 EpicEditor.prototype.getFiles = function (name, excludeContent) {
1669 , data = this._getFileStore(name);
1672 if (data !== undefined) {
1673 if (excludeContent) {
1674 delete data.content;
1677 data.content = _sanitizeRawContent(data.content);
1683 for (file in data) {
1684 if (data.hasOwnProperty(file)) {
1685 if (excludeContent) {
1686 delete data[file].content;
1689 data[file].content = _sanitizeRawContent(data[file].content);
1698 // TODO: Support for namespacing events like "preview.foo"
1700 * Sets up an event handler for a specified event
1701 * @param {string} ev The event name
1702 * @param {function} handler The callback to run when the event fires
1703 * @returns {object} EpicEditor will be returned
1705 EpicEditor.prototype.on = function (ev, handler) {
1707 if (!this.events[ev]) {
1708 this.events[ev] = [];
1710 this.events[ev].push(handler);
1715 * This will emit or "trigger" an event specified
1716 * @param {string} ev The event name
1717 * @param {any} data Any data you want to pass into the callback
1718 * @returns {object} EpicEditor will be returned
1720 EpicEditor.prototype.emit = function (ev, data) {
1724 data = data || self.getFiles(self.settings.file.name);
1726 if (!this.events[ev]) {
1730 function invokeHandler(handler) {
1731 handler.call(self, data);
1734 for (x = 0; x < self.events[ev].length; x++) {
1735 invokeHandler(self.events[ev][x]);
1742 * Will remove any listeners added from EpicEditor.on()
1743 * @param {string} ev The event name
1744 * @param {function} handler Handler to remove
1745 * @returns {object} EpicEditor will be returned
1747 EpicEditor.prototype.removeListener = function (ev, handler) {
1750 this.events[ev] = [];
1753 if (!this.events[ev]) {
1756 // Otherwise a handler and event exist, so take care of it
1757 this.events[ev].splice(this.events[ev].indexOf(handler), 1);
1762 * Handles autogrowing the editor
1764 EpicEditor.prototype._autogrow = function () {
1773 //autogrow in fullscreen is nonsensical
1774 if (!this.is('fullscreen')) {
1775 if (this.is('edit')) {
1776 el = this.getElement('editor').documentElement;
1779 el = this.getElement('previewer').documentElement;
1782 editorHeight = _outerHeight(el);
1783 newHeight = editorHeight;
1786 minHeight = this.settings.autogrow.minHeight;
1787 if (typeof minHeight === 'function') {
1788 minHeight = minHeight(this);
1791 if (minHeight && newHeight < minHeight) {
1792 newHeight = minHeight;
1796 maxHeight = this.settings.autogrow.maxHeight;
1797 if (typeof maxHeight === 'function') {
1798 maxHeight = maxHeight(this);
1801 if (maxHeight && newHeight > maxHeight) {
1802 newHeight = maxHeight;
1807 this._fixScrollbars('auto');
1809 this._fixScrollbars('hidden');
1813 if (newHeight != this.oldHeight) {
1814 this.getElement('container').style.height = newHeight + 'px';
1816 if (this.settings.autogrow.scroll) {
1817 window.scrollBy(0, newHeight - this.oldHeight);
1819 this.oldHeight = newHeight;
1825 * Shows or hides scrollbars based on the autogrow setting
1826 * @param {string} forceSetting a value to force the overflow to
1828 EpicEditor.prototype._fixScrollbars = function (forceSetting) {
1830 if (this.settings.autogrow) {
1836 setting = forceSetting || setting;
1837 this.getElement('editor').documentElement.style.overflow = setting;
1838 this.getElement('previewer').documentElement.style.overflow = setting;
1841 EpicEditor.version = '0.2.2';
1843 // Used to store information to be shared across editors
1844 EpicEditor._data = {};
1846 window.EpicEditor = EpicEditor;
1850 * marked - a markdown parser
1851 * Copyright (c) 2011-2013, Christopher Jeffrey. (MIT Licensed)
1852 * https://github.com/chjj/marked
1858 * Block-Level Grammar
1863 code: /^( {4}[^\n]+\n*)+/,
1865 hr: /^( *[-*_]){3,} *(?:\n+|$)/,
1866 heading: /^ *(#{1,6}) *([^\n]+?) *#* *(?:\n+|$)/,
1868 lheading: /^([^\n]+)\n *(=|-){3,} *\n*/,
1869 blockquote: /^( *>[^\n]+(\n[^\n]+)*\n*)+/,
1870 list: /^( *)(bull) [\s\S]+?(?:hr|\n{2,}(?! )(?!\1bull )\n*|\s*$)/,
1871 html: /^ *(?:comment|closed|closing) *(?:\n{2,}|\s*$)/,
1872 def: /^ *\[([^\]]+)\]: *([^\s]+)(?: +["(]([^\n]+)[")])? *(?:\n+|$)/,
1874 paragraph: /^([^\n]+\n?(?!hr|heading|lheading|blockquote|tag|def))+\n*/,
1878 block.bullet = /(?:[*+-]|\d+\.)/;
1879 block.item = /^( *)(bull) [^\n]*(?:\n(?!\1bull )[^\n]*)*/;
1880 block.item = replace(block.item, 'gm')
1881 (/bull/g, block.bullet)
1884 block.list = replace(block.list)
1885 (/bull/g, block.bullet)
1886 ('hr', /\n+(?=(?: *[-*_]){3,} *(?:\n+|$))/)
1889 block._tag = '(?!(?:'
1890 + 'a|em|strong|small|s|cite|q|dfn|abbr|data|time|code'
1891 + '|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo'
1892 + '|span|br|wbr|ins|del|img)\\b)\\w+(?!:/|@)\\b';
1894 block.html = replace(block.html)
1895 ('comment', /<!--[\s\S]*?-->/)
1896 ('closed', /<(tag)[\s\S]+?<\/\1>/)
1897 ('closing', /<tag(?:"[^"]*"|'[^']*'|[^'">])*?>/)
1898 (/tag/g, block._tag)
1901 block.paragraph = replace(block.paragraph)
1903 ('heading', block.heading)
1904 ('lheading', block.lheading)
1905 ('blockquote', block.blockquote)
1906 ('tag', '<' + block._tag)
1911 * Normal Block Grammar
1914 block.normal = merge({}, block);
1920 block.gfm = merge({}, block.normal, {
1921 fences: /^ *(`{3,}|~{3,}) *(\w+)? *\n([\s\S]+?)\s*\1 *(?:\n+|$)/,
1925 block.gfm.paragraph = replace(block.paragraph)
1926 ('(?!', '(?!' + block.gfm.fences.source.replace('\\1', '\\2') + '|')
1930 * GFM + Tables Block Grammar
1933 block.tables = merge({}, block.gfm, {
1934 nptable: /^ *(\S.*\|.*)\n *([-:]+ *\|[-| :]*)\n((?:.*\|.*(?:\n|$))*)\n*/,
1935 table: /^ *\|(.+)\n *\|( *[-:]+[-| :]*)\n((?: *\|.*(?:\n|$))*)\n*/
1942 function Lexer(options) {
1944 this.tokens.links = {};
1945 this.options = options || marked.defaults;
1946 this.rules = block.normal;
1948 if (this.options.gfm) {
1949 if (this.options.tables) {
1950 this.rules = block.tables;
1952 this.rules = block.gfm;
1958 * Expose Block Rules
1961 Lexer.rules = block;
1967 Lexer.lex = function(src, options) {
1968 var lexer = new Lexer(options);
1969 return lexer.lex(src);
1976 Lexer.prototype.lex = function(src) {
1978 .replace(/\r\n|\r/g, '\n')
1979 .replace(/\t/g, ' ')
1980 .replace(/\u00a0/g, ' ')
1981 .replace(/\u2424/g, '\n');
1983 return this.token(src, true);
1990 Lexer.prototype.token = function(src, top) {
1991 var src = src.replace(/^ +$/gm, '')
2002 if (cap = this.rules.newline.exec(src)) {
2003 src = src.substring(cap[0].length);
2004 if (cap[0].length > 1) {
2012 if (cap = this.rules.code.exec(src)) {
2013 src = src.substring(cap[0].length);
2014 cap = cap[0].replace(/^ {4}/gm, '');
2017 text: !this.options.pedantic
2018 ? cap.replace(/\n+$/, '')
2025 if (cap = this.rules.fences.exec(src)) {
2026 src = src.substring(cap[0].length);
2036 if (cap = this.rules.heading.exec(src)) {
2037 src = src.substring(cap[0].length);
2040 depth: cap[1].length,
2046 // table no leading pipe (gfm)
2047 if (top && (cap = this.rules.nptable.exec(src))) {
2048 src = src.substring(cap[0].length);
2052 header: cap[1].replace(/^ *| *\| *$/g, '').split(/ *\| */),
2053 align: cap[2].replace(/^ *|\| *$/g, '').split(/ *\| */),
2054 cells: cap[3].replace(/\n$/, '').split('\n')
2057 for (i = 0; i < item.align.length; i++) {
2058 if (/^ *-+: *$/.test(item.align[i])) {
2059 item.align[i] = 'right';
2060 } else if (/^ *:-+: *$/.test(item.align[i])) {
2061 item.align[i] = 'center';
2062 } else if (/^ *:-+ *$/.test(item.align[i])) {
2063 item.align[i] = 'left';
2065 item.align[i] = null;
2069 for (i = 0; i < item.cells.length; i++) {
2070 item.cells[i] = item.cells[i].split(/ *\| */);
2073 this.tokens.push(item);
2079 if (cap = this.rules.lheading.exec(src)) {
2080 src = src.substring(cap[0].length);
2083 depth: cap[2] === '=' ? 1 : 2,
2090 if (cap = this.rules.hr.exec(src)) {
2091 src = src.substring(cap[0].length);
2099 if (cap = this.rules.blockquote.exec(src)) {
2100 src = src.substring(cap[0].length);
2103 type: 'blockquote_start'
2106 cap = cap[0].replace(/^ *> ?/gm, '');
2108 // Pass `top` to keep the current
2109 // "toplevel" state. This is exactly
2110 // how markdown.pl works.
2111 this.token(cap, top);
2114 type: 'blockquote_end'
2121 if (cap = this.rules.list.exec(src)) {
2122 src = src.substring(cap[0].length);
2126 ordered: isFinite(cap[2])
2129 // Get each top-level item.
2130 cap = cap[0].match(this.rules.item);
2136 for (; i < l; i++) {
2139 // Remove the list item's bullet
2140 // so it is seen as the next token.
2141 space = item.length;
2142 item = item.replace(/^ *([*+-]|\d+\.) +/, '');
2144 // Outdent whatever the
2145 // list item contains. Hacky.
2146 if (~item.indexOf('\n ')) {
2147 space -= item.length;
2148 item = !this.options.pedantic
2149 ? item.replace(new RegExp('^ {1,' + space + '}', 'gm'), '')
2150 : item.replace(/^ {1,4}/gm, '');
2153 // Determine whether item is loose or not.
2154 // Use: /(^|\n)(?! )[^\n]+\n\n(?!\s*$)/
2155 // for discount behavior.
2156 loose = next || /\n\n(?!\s*$)/.test(item);
2158 next = item[item.length-1] === '\n';
2159 if (!loose) loose = next;
2164 ? 'loose_item_start'
2169 this.token(item, false);
2172 type: 'list_item_end'
2184 if (cap = this.rules.html.exec(src)) {
2185 src = src.substring(cap[0].length);
2187 type: this.options.sanitize
2190 pre: cap[1] === 'pre',
2197 if (top && (cap = this.rules.def.exec(src))) {
2198 src = src.substring(cap[0].length);
2199 this.tokens.links[cap[1].toLowerCase()] = {
2207 if (top && (cap = this.rules.table.exec(src))) {
2208 src = src.substring(cap[0].length);
2212 header: cap[1].replace(/^ *| *\| *$/g, '').split(/ *\| */),
2213 align: cap[2].replace(/^ *|\| *$/g, '').split(/ *\| */),
2214 cells: cap[3].replace(/(?: *\| *)?\n$/, '').split('\n')
2217 for (i = 0; i < item.align.length; i++) {
2218 if (/^ *-+: *$/.test(item.align[i])) {
2219 item.align[i] = 'right';
2220 } else if (/^ *:-+: *$/.test(item.align[i])) {
2221 item.align[i] = 'center';
2222 } else if (/^ *:-+ *$/.test(item.align[i])) {
2223 item.align[i] = 'left';
2225 item.align[i] = null;
2229 for (i = 0; i < item.cells.length; i++) {
2230 item.cells[i] = item.cells[i]
2231 .replace(/^ *\| *| *\| *$/g, '')
2235 this.tokens.push(item);
2240 // top-level paragraph
2241 if (top && (cap = this.rules.paragraph.exec(src))) {
2242 src = src.substring(cap[0].length);
2251 if (cap = this.rules.text.exec(src)) {
2252 // Top-level should never reach here.
2253 src = src.substring(cap[0].length);
2263 Error('Infinite loop on byte: ' + src.charCodeAt(0));
2271 * Inline-Level Grammar
2275 escape: /^\\([\\`*{}\[\]()#+\-.!_>|])/,
2276 autolink: /^<([^ >]+(@|:\/)[^ >]+)>/,
2278 tag: /^<!--[\s\S]*?-->|^<\/?\w+(?:"[^"]*"|'[^']*'|[^'">])*?>/,
2279 link: /^!?\[(inside)\]\(href\)/,
2280 reflink: /^!?\[(inside)\]\s*\[([^\]]*)\]/,
2281 nolink: /^!?\[((?:\[[^\]]*\]|[^\[\]])*)\]/,
2282 strong: /^__([\s\S]+?)__(?!_)|^\*\*([\s\S]+?)\*\*(?!\*)/,
2283 em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
2284 code: /^(`+)([\s\S]*?[^`])\1(?!`)/,
2285 br: /^ {2,}\n(?!\s*$)/,
2287 text: /^[\s\S]+?(?=[\\<!\[_*`]| {2,}\n|$)/
2290 inline._inside = /(?:\[[^\]]*\]|[^\]]|\](?=[^\[]*\]))*/;
2291 inline._href = /\s*<?([^\s]*?)>?(?:\s+['"]([\s\S]*?)['"])?\s*/;
2293 inline.link = replace(inline.link)
2294 ('inside', inline._inside)
2295 ('href', inline._href)
2298 inline.reflink = replace(inline.reflink)
2299 ('inside', inline._inside)
2303 * Normal Inline Grammar
2306 inline.normal = merge({}, inline);
2309 * Pedantic Inline Grammar
2312 inline.pedantic = merge({}, inline.normal, {
2313 strong: /^__(?=\S)([\s\S]*?\S)__(?!_)|^\*\*(?=\S)([\s\S]*?\S)\*\*(?!\*)/,
2314 em: /^_(?=\S)([\s\S]*?\S)_(?!_)|^\*(?=\S)([\s\S]*?\S)\*(?!\*)/
2318 * GFM Inline Grammar
2321 inline.gfm = merge({}, inline.normal, {
2322 escape: replace(inline.escape)('])', '~])')(),
2323 url: /^(https?:\/\/[^\s]+[^.,:;"')\]\s])/,
2324 del: /^~{2,}([\s\S]+?)~{2,}/,
2325 text: replace(inline.text)
2327 ('|', '|https?://|')
2332 * GFM + Line Breaks Inline Grammar
2335 inline.breaks = merge({}, inline.gfm, {
2336 br: replace(inline.br)('{2,}', '*')(),
2337 text: replace(inline.gfm.text)('{2,}', '*')()
2341 * Inline Lexer & Compiler
2344 function InlineLexer(links, options) {
2345 this.options = options || marked.defaults;
2347 this.rules = inline.normal;
2351 Error('Tokens array requires a `links` property.');
2354 if (this.options.gfm) {
2355 if (this.options.breaks) {
2356 this.rules = inline.breaks;
2358 this.rules = inline.gfm;
2360 } else if (this.options.pedantic) {
2361 this.rules = inline.pedantic;
2366 * Expose Inline Rules
2369 InlineLexer.rules = inline;
2372 * Static Lexing/Compiling Method
2375 InlineLexer.output = function(src, links, opt) {
2376 var inline = new InlineLexer(links, opt);
2377 return inline.output(src);
2384 InlineLexer.prototype.output = function(src) {
2393 if (cap = this.rules.escape.exec(src)) {
2394 src = src.substring(cap[0].length);
2400 if (cap = this.rules.autolink.exec(src)) {
2401 src = src.substring(cap[0].length);
2402 if (cap[2] === '@') {
2403 text = cap[1][6] === ':'
2404 ? this.mangle(cap[1].substring(7))
2405 : this.mangle(cap[1]);
2406 href = this.mangle('mailto:') + text;
2408 text = escape(cap[1]);
2420 if (cap = this.rules.url.exec(src)) {
2421 src = src.substring(cap[0].length);
2422 text = escape(cap[1]);
2433 if (cap = this.rules.tag.exec(src)) {
2434 src = src.substring(cap[0].length);
2435 out += this.options.sanitize
2442 if (cap = this.rules.link.exec(src)) {
2443 src = src.substring(cap[0].length);
2444 out += this.outputLink(cap, {
2452 if ((cap = this.rules.reflink.exec(src))
2453 || (cap = this.rules.nolink.exec(src))) {
2454 src = src.substring(cap[0].length);
2455 link = (cap[2] || cap[1]).replace(/\s+/g, ' ');
2456 link = this.links[link.toLowerCase()];
2457 if (!link || !link.href) {
2459 src = cap[0].substring(1) + src;
2462 out += this.outputLink(cap, link);
2467 if (cap = this.rules.strong.exec(src)) {
2468 src = src.substring(cap[0].length);
2470 + this.output(cap[2] || cap[1])
2476 if (cap = this.rules.em.exec(src)) {
2477 src = src.substring(cap[0].length);
2479 + this.output(cap[2] || cap[1])
2485 if (cap = this.rules.code.exec(src)) {
2486 src = src.substring(cap[0].length);
2488 + escape(cap[2], true)
2494 if (cap = this.rules.br.exec(src)) {
2495 src = src.substring(cap[0].length);
2501 if (cap = this.rules.del.exec(src)) {
2502 src = src.substring(cap[0].length);
2504 + this.output(cap[1])
2510 if (cap = this.rules.text.exec(src)) {
2511 src = src.substring(cap[0].length);
2512 out += escape(cap[0]);
2518 Error('Infinite loop on byte: ' + src.charCodeAt(0));
2529 InlineLexer.prototype.outputLink = function(cap, link) {
2530 if (cap[0][0] !== '!') {
2536 + escape(link.title)
2540 + this.output(cap[1])
2550 + escape(link.title)
2561 InlineLexer.prototype.mangle = function(text) {
2567 for (; i < l; i++) {
2568 ch = text.charCodeAt(i);
2569 if (Math.random() > 0.5) {
2570 ch = 'x' + ch.toString(16);
2572 out += '&#' + ch + ';';
2579 * Parsing & Compiling
2582 function Parser(options) {
2585 this.options = options || marked.defaults;
2589 * Static Parse Method
2592 Parser.parse = function(src, options) {
2593 var parser = new Parser(options);
2594 return parser.parse(src);
2601 Parser.prototype.parse = function(src) {
2602 this.inline = new InlineLexer(src.links, this.options);
2603 this.tokens = src.reverse();
2606 while (this.next()) {
2617 Parser.prototype.next = function() {
2618 return this.token = this.tokens.pop();
2622 * Preview Next Token
2625 Parser.prototype.peek = function() {
2626 return this.tokens[this.tokens.length-1] || 0;
2633 Parser.prototype.parseText = function() {
2634 var body = this.token.text;
2636 while (this.peek().type === 'text') {
2637 body += '\n' + this.next().text;
2640 return this.inline.output(body);
2644 * Parse Current Token
2647 Parser.prototype.tok = function() {
2648 switch (this.token.type) {
2659 + this.inline.output(this.token.text)
2665 if (this.options.highlight) {
2666 var code = this.options.highlight(this.token.text, this.token.lang);
2667 if (code != null && code !== this.token.text) {
2668 this.token.escaped = true;
2669 this.token.text = code;
2673 if (!this.token.escaped) {
2674 this.token.text = escape(this.token.text, true);
2685 + '</code></pre>\n';
2696 body += '<thead>\n<tr>\n';
2697 for (i = 0; i < this.token.header.length; i++) {
2698 heading = this.inline.output(this.token.header[i]);
2699 body += this.token.align[i]
2700 ? '<th align="' + this.token.align[i] + '">' + heading + '</th>\n'
2701 : '<th>' + heading + '</th>\n';
2703 body += '</tr>\n</thead>\n';
2707 for (i = 0; i < this.token.cells.length; i++) {
2708 row = this.token.cells[i];
2710 for (j = 0; j < row.length; j++) {
2711 cell = this.inline.output(row[j]);
2712 body += this.token.align[j]
2713 ? '<td align="' + this.token.align[j] + '">' + cell + '</td>\n'
2714 : '<td>' + cell + '</td>\n';
2718 body += '</tbody>\n';
2724 case 'blockquote_start': {
2727 while (this.next().type !== 'blockquote_end') {
2731 return '<blockquote>\n'
2733 + '</blockquote>\n';
2735 case 'list_start': {
2736 var type = this.token.ordered ? 'ol' : 'ul'
2739 while (this.next().type !== 'list_end') {
2751 case 'list_item_start': {
2754 while (this.next().type !== 'list_item_end') {
2755 body += this.token.type === 'text'
2764 case 'loose_item_start': {
2767 while (this.next().type !== 'list_item_end') {
2776 return !this.token.pre && !this.options.pedantic
2777 ? this.inline.output(this.token.text)
2782 + this.inline.output(this.token.text)
2797 function escape(html, encode) {
2799 .replace(!encode ? /&(?!#?\w+;)/g : /&/g, '&')
2800 .replace(/</g, '<')
2801 .replace(/>/g, '>')
2802 .replace(/"/g, '"')
2803 .replace(/'/g, ''');
2806 function replace(regex, opt) {
2807 regex = regex.source;
2809 return function self(name, val) {
2810 if (!name) return new RegExp(regex, opt);
2811 val = val.source || val;
2812 val = val.replace(/(^|[^\[])\^/g, '$1');
2813 regex = regex.replace(name, val);
2821 function merge(obj) {
2826 for (; i < arguments.length; i++) {
2827 target = arguments[i];
2828 for (key in target) {
2829 if (Object.prototype.hasOwnProperty.call(target, key)) {
2830 obj[key] = target[key];
2842 function marked(src, opt) {
2844 return Parser.parse(Lexer.lex(src, opt), opt);
2846 e.message += '\nPlease report this to https://github.com/chjj/marked.';
2847 if ((opt || marked.defaults).silent) {
2848 return 'An error occured:\n' + e.message;
2859 marked.setOptions = function(opt) {
2860 marked.defaults = opt;
2878 marked.Parser = Parser;
2879 marked.parser = Parser.parse;
2881 marked.Lexer = Lexer;
2882 marked.lexer = Lexer.lex;
2884 marked.InlineLexer = InlineLexer;
2885 marked.inlineLexer = InlineLexer.output;
2887 marked.parse = marked;
2889 if (typeof module !== 'undefined') {
2890 module.exports = marked;
2891 } else if (typeof define === 'function' && define.amd) {
2892 define(function() { return marked; });
2894 this.marked = marked;
2897 }).call(function() {
2898 return this || (typeof window !== 'undefined' ? window : global);