From 383514762a3854333900fe2167a5fc1f42041e14 Mon Sep 17 00:00:00 2001 From: Wes Cossick Date: Fri, 19 Jun 2015 15:43:21 -0500 Subject: [PATCH] Improved previewing of tables, Restructure --- sources files/codemirror/codemirror.css | 136 --- sources files/markdownify.js | 834 +++++++++--------- .../{markdownify-theme.css => theme.css} | 142 +++ 3 files changed, 580 insertions(+), 532 deletions(-) delete mode 100644 sources files/codemirror/codemirror.css rename sources files/{markdownify-theme.css => theme.css} (65%) diff --git a/sources files/codemirror/codemirror.css b/sources files/codemirror/codemirror.css deleted file mode 100644 index 3d04a20..0000000 --- a/sources files/codemirror/codemirror.css +++ /dev/null @@ -1,136 +0,0 @@ -.CodeMirror { - height:auto; - min-height: 300px; - border:1px solid #ddd; - border-bottom-left-radius:4px; - border-bottom-right-radius:4px; - padding:10px; -} -:-webkit-full-screen { - background: #f9f9f5; - padding: 0.5em 1em; - width: 100%; - height: 100%; -} -:-moz-full-screen { - padding: 0.5em 1em; - background: #f9f9f5; - width: 100%; - height: 100%; -} -.editor-wrapper { - font: 16px/1.62 "Helvetica Neue", "Xin Gothic", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif; - color: #2c3e50; -} -/* this is the title */ -.editor-wrapper input.title { - font: 18px "Helvetica Neue", "Xin Gothic", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif; - background: transparent; - padding: 4px; - width: 100%; - border: none; - outline: none; - opacity: 0.6; -} -.editor-toolbar { - position: relative; - opacity: 0.6; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; - user-select: none; - padding:0 10px; - border-top:1px solid #bbb; - border-left:1px solid #bbb; - border-right:1px solid #bbb; - border-top-left-radius:4px; - border-top-right-radius:4px; -} -.editor-toolbar:before, .editor-toolbar:after { - display: block; - content: ' '; - height: 1px; -} -.editor-toolbar:before { - margin-bottom: 8px; -} -.editor-toolbar:after { - margin-top: 8px; -} -.editor-wrapper input.title:hover, .editor-wrapper input.title:focus, .editor-toolbar:hover { - opacity: 0.8; -} -.editor-toolbar a { - display: inline-block; - text-align: center; - text-decoration: none !important; - color: #2c3e50 !important; - width:30px; - height:30px; - margin:0; - border: 1px solid transparent; - border-radius: 3px; - cursor: pointer; -} -.editor-toolbar a:hover, .editor-toolbar a.active { - background: #fcfcfc; - border-color: #95a5a6; -} -.editor-toolbar a:before { - line-height:30px; -} -.editor-toolbar i.separator { - display: inline-block; - width: 0; - border-left: 1px solid #d9d9d9; - border-right: 1px solid white; - color: transparent; - text-indent: -10px; - margin: 0 6px; -} -.editor-toolbar a.icon-fullscreen { - position: absolute; - right:10px; -} -.editor-statusbar { - padding: 8px 10px; - font-size: 12px; - color: #959694; - text-align: right; -} -.editor-statusbar span { - display: inline-block; - min-width: 4em; - margin-left: 1em; -} -.editor-statusbar .lines:before { - content: 'lines: '; -} -.editor-statusbar .words:before { - content: 'words: '; -} -.editor-preview { - padding:10px; - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - background: #fff; - z-index: 9999; - overflow: auto; - display:none; - -} -.editor-preview-active { - display:block; -} -.editor-preview > p { - margin-top: 0; -} - -.editor-preview pre{ - background:#eee; - margin-bottom:10px; -} \ No newline at end of file diff --git a/sources files/markdownify.js b/sources files/markdownify.js index 165a34b..f619971 100644 --- a/sources files/markdownify.js +++ b/sources files/markdownify.js @@ -1,14 +1,13 @@ - var isMac = /Mac/.test(navigator.platform); var shortcuts = { - 'Cmd-B': toggleBold, - 'Cmd-I': toggleItalic, - 'Cmd-K': drawLink, - 'Cmd-Alt-I': drawImage, - "Cmd-'": toggleBlockquote, - 'Cmd-Alt-L': toggleOrderedList, - 'Cmd-L': toggleUnOrderedList + 'Cmd-B': toggleBold, + 'Cmd-I': toggleItalic, + 'Cmd-K': drawLink, + 'Cmd-Alt-I': drawImage, + "Cmd-'": toggleBlockquote, + 'Cmd-Alt-L': toggleOrderedList, + 'Cmd-L': toggleUnOrderedList }; @@ -16,12 +15,12 @@ var shortcuts = { * Fix shortcut. Mac use Command, others use Ctrl. */ function fixShortcut(name) { - if (isMac) { - name = name.replace('Ctrl', 'Cmd'); - } else { - name = name.replace('Cmd', 'Ctrl'); - } - return name; + if (isMac) { + name = name.replace('Ctrl', 'Cmd'); + } else { + name = name.replace('Cmd', 'Ctrl'); + } + return name; } @@ -29,28 +28,28 @@ function fixShortcut(name) { * Create icon element for toolbar. */ function createIcon(name, options) { - options = options || {}; - var el = document.createElement('a'); + options = options || {}; + var el = document.createElement('a'); - var shortcut = options.shortcut || shortcuts[name]; - if (shortcut) { - shortcut = fixShortcut(shortcut); - el.title = shortcut; - el.title = el.title.replace('Cmd', '⌘'); - if (isMac) { - el.title = el.title.replace('Alt', '⌥'); + var shortcut = options.shortcut || shortcuts[name]; + if (shortcut) { + shortcut = fixShortcut(shortcut); + el.title = shortcut; + el.title = el.title.replace('Cmd', '⌘'); + if (isMac) { + el.title = el.title.replace('Alt', '⌥'); + } } - } - el.className = options.className || 'icon-' + name; - return el; + el.className = options.className || 'icon-' + name; + return el; } function createSep() { - el = document.createElement('i'); - el.className = 'separator'; - el.innerHTML = '|'; - return el; + el = document.createElement('i'); + el.className = 'separator'; + el.innerHTML = '|'; + return el; } @@ -58,33 +57,34 @@ function createSep() { * The state of CodeMirror at the given position. */ function getState(cm, pos) { - pos = pos || cm.getCursor('start'); - var stat = cm.getTokenAt(pos); - if (!stat.type) return {}; + pos = pos || cm.getCursor('start'); + var stat = cm.getTokenAt(pos); + if (!stat.type) return {}; - var types = stat.type.split(' '); + var types = stat.type.split(' '); - var ret = {}, data, text; - for (var i = 0; i < types.length; i++) { - data = types[i]; - if (data === 'strong') { - ret.bold = true; - } else if (data === 'variable-2') { - text = cm.getLine(pos.line); - if (/^\s*\d+\.\s/.test(text)) { - ret['ordered-list'] = true; - } else { - ret['unordered-list'] = true; - } - } else if (data === 'atom') { - ret.quote = true; - } else if (data === 'em') { - ret.italic = true; - } else if (data === 'quote') { - ret.quote = true; + var ret = {}, + data, text; + for (var i = 0; i < types.length; i++) { + data = types[i]; + if (data === 'strong') { + ret.bold = true; + } else if (data === 'variable-2') { + text = cm.getLine(pos.line); + if (/^\s*\d+\.\s/.test(text)) { + ret['ordered-list'] = true; + } else { + ret['unordered-list'] = true; + } + } else if (data === 'atom') { + ret.quote = true; + } else if (data === 'em') { + ret.italic = true; + } else if (data === 'quote') { + ret.quote = true; + } } - } - return ret; + return ret; } @@ -92,34 +92,34 @@ function getState(cm, pos) { * Toggle full screen of the editor. */ function toggleFullScreen(editor) { - var el = editor.codemirror.getWrapperElement(); + var el = editor.codemirror.getWrapperElement(); - // https://developer.mozilla.org/en-US/docs/DOM/Using_fullscreen_mode - var doc = document; - var isFull = doc.fullScreen || doc.mozFullScreen || doc.webkitFullScreen; - var request = function() { - if (el.requestFullScreen) { - el.requestFullScreen(); - } else if (el.mozRequestFullScreen) { - el.mozRequestFullScreen(); - } else if (el.webkitRequestFullScreen) { - el.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); + // https://developer.mozilla.org/en-US/docs/DOM/Using_fullscreen_mode + var doc = document; + var isFull = doc.fullScreen || doc.mozFullScreen || doc.webkitFullScreen; + var request = function() { + if (el.requestFullScreen) { + el.requestFullScreen(); + } else if (el.mozRequestFullScreen) { + el.mozRequestFullScreen(); + } else if (el.webkitRequestFullScreen) { + el.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); + } + }; + var cancel = function() { + if (doc.cancelFullScreen) { + doc.cancelFullScreen(); + } else if (doc.mozCancelFullScreen) { + doc.mozCancelFullScreen(); + } else if (doc.webkitCancelFullScreen) { + doc.webkitCancelFullScreen(); + } + }; + if (!isFull) { + request(); + } else if (cancel) { + cancel(); } - }; - var cancel = function() { - if (doc.cancelFullScreen) { - doc.cancelFullScreen(); - } else if (doc.mozCancelFullScreen) { - doc.mozCancelFullScreen(); - } else if (doc.webkitCancelFullScreen) { - doc.webkitCancelFullScreen(); - } - }; - if (!isFull) { - request(); - } else if (cancel) { - cancel(); - } } @@ -127,7 +127,7 @@ function toggleFullScreen(editor) { * Action for toggling bold. */ function toggleBold(editor) { - _toggleBlock(editor, 'bold', '**'); + _toggleBlock(editor, 'bold', '**'); } @@ -135,22 +135,22 @@ function toggleBold(editor) { * Action for toggling italic. */ function toggleItalic(editor) { - _toggleBlock(editor, 'italic', '*'); + _toggleBlock(editor, 'italic', '*'); } /** * Action for toggling code block. */ function toggleCodeBlock(editor) { - _toggleBlock(editor, 'code', '```\r\n', '\r\n```'); + _toggleBlock(editor, 'code', '```\r\n', '\r\n```'); } /** * Action for toggling blockquote. */ function toggleBlockquote(editor) { - var cm = editor.codemirror; - _toggleLine(cm, 'quote'); + var cm = editor.codemirror; + _toggleLine(cm, 'quote'); } @@ -159,8 +159,8 @@ function toggleBlockquote(editor) { * Action for toggling ul. */ function toggleUnOrderedList(editor) { - var cm = editor.codemirror; - _toggleLine(cm, 'unordered-list'); + var cm = editor.codemirror; + _toggleLine(cm, 'unordered-list'); } @@ -168,8 +168,8 @@ function toggleUnOrderedList(editor) { * Action for toggling ol. */ function toggleOrderedList(editor) { - var cm = editor.codemirror; - _toggleLine(cm, 'ordered-list'); + var cm = editor.codemirror; + _toggleLine(cm, 'ordered-list'); } @@ -177,9 +177,9 @@ function toggleOrderedList(editor) { * Action for drawing a link. */ function drawLink(editor) { - var cm = editor.codemirror; - var stat = getState(cm); - _replaceSelection(cm, stat.link, '[', '](http://)'); + var cm = editor.codemirror; + var stat = getState(cm); + _replaceSelection(cm, stat.link, '[', '](http://)'); } @@ -187,9 +187,9 @@ function drawLink(editor) { * Action for drawing an img. */ function drawImage(editor) { - var cm = editor.codemirror; - var stat = getState(cm); - _replaceSelection(cm, stat.image, '![Short description of image](http://', ')'); + var cm = editor.codemirror; + var stat = getState(cm); + _replaceSelection(cm, stat.image, '![Short description of image](http://', ')'); } @@ -197,9 +197,9 @@ function drawImage(editor) { * Undo action. */ function undo(editor) { - var cm = editor.codemirror; - cm.undo(); - cm.focus(); + var cm = editor.codemirror; + cm.undo(); + cm.focus(); } @@ -207,198 +207,240 @@ function undo(editor) { * Redo action. */ function redo(editor) { - var cm = editor.codemirror; - cm.redo(); - cm.focus(); + var cm = editor.codemirror; + cm.redo(); + cm.focus(); } /** * Preview action. */ function togglePreview(editor) { - var toolbar = editor.toolbar.preview; - var parse = editor.constructor.markdown; - var cm = editor.codemirror; - var wrapper = cm.getWrapperElement(); - var preview = wrapper.lastChild; - if (!/editor-preview/.test(preview.className)) { - preview = document.createElement('div'); - preview.className = 'editor-preview'; - wrapper.appendChild(preview); - } - if (/editor-preview-active/.test(preview.className)) { - preview.className = preview.className.replace( - /\s*editor-preview-active\s*/g, '' - ); - toolbar.className = toolbar.className.replace(/\s*active\s*/g, ''); - } else { - /* When the preview button is clicked for the first time, - * give some time for the transition from editor.css to fire and the view to slide from right to left, - * instead of just appearing. - */ - setTimeout(function() {preview.className += ' editor-preview-active'}, 1); - toolbar.className += ' active'; - } - var text = cm.getValue(); - preview.innerHTML = parse(text); + var toolbar = editor.toolbar.preview; + var parse = editor.constructor.markdown; + var cm = editor.codemirror; + var wrapper = cm.getWrapperElement(); + var preview = wrapper.lastChild; + if (!/editor-preview/.test(preview.className)) { + preview = document.createElement('div'); + preview.className = 'editor-preview'; + wrapper.appendChild(preview); + } + if (/editor-preview-active/.test(preview.className)) { + preview.className = preview.className.replace( + /\s*editor-preview-active\s*/g, '' + ); + toolbar.className = toolbar.className.replace(/\s*active\s*/g, ''); + } else { + /* When the preview button is clicked for the first time, + * give some time for the transition from editor.css to fire and the view to slide from right to left, + * instead of just appearing. + */ + setTimeout(function() { + preview.className += ' editor-preview-active' + }, 1); + toolbar.className += ' active'; + } + var text = cm.getValue(); + preview.innerHTML = parse(text); } function _replaceSelection(cm, active, start, end) { - var text; - var startPoint = cm.getCursor('start'); - var endPoint = cm.getCursor('end'); - if (active) { - text = cm.getLine(startPoint.line); - start = text.slice(0, startPoint.ch); - end = text.slice(startPoint.ch); - cm.replaceRange(start + end, {line: startPoint.line, ch: 0}); - } else { - text = cm.getSelection(); - cm.replaceSelection(start + text + end); + var text; + var startPoint = cm.getCursor('start'); + var endPoint = cm.getCursor('end'); + if (active) { + text = cm.getLine(startPoint.line); + start = text.slice(0, startPoint.ch); + end = text.slice(startPoint.ch); + cm.replaceRange(start + end, { + line: startPoint.line, + ch: 0 + }); + } else { + text = cm.getSelection(); + cm.replaceSelection(start + text + end); - startPoint.ch += start.length; - endPoint.ch += start.length; - } - cm.setSelection(startPoint, endPoint); - cm.focus(); + startPoint.ch += start.length; + endPoint.ch += start.length; + } + cm.setSelection(startPoint, endPoint); + cm.focus(); } function _toggleLine(cm, name) { - var stat = getState(cm); - var startPoint = cm.getCursor('start'); - var endPoint = cm.getCursor('end'); - var repl = { - 'quote': /^(\s*)\>\s+/, - 'unordered-list': /^(\s*)(\*|\-|\+)\s+/, - 'ordered-list': /^(\s*)\d+\.\s+/ - }; - var map = { - 'quote': '> ', - 'unordered-list': '* ', - 'ordered-list': '1. ' - }; - for (var i = startPoint.line; i <= endPoint.line; i++) { - (function(i) { - var text = cm.getLine(i); - if (stat[name]) { - text = text.replace(repl[name], '$1'); - } else { - text = map[name] + text; - } - cm.replaceRange(text, {line: i, ch: 0}, {line: i, ch: 99999999999999}); - })(i); - } - cm.focus(); + var stat = getState(cm); + var startPoint = cm.getCursor('start'); + var endPoint = cm.getCursor('end'); + var repl = { + 'quote': /^(\s*)\>\s+/, + 'unordered-list': /^(\s*)(\*|\-|\+)\s+/, + 'ordered-list': /^(\s*)\d+\.\s+/ + }; + var map = { + 'quote': '> ', + 'unordered-list': '* ', + 'ordered-list': '1. ' + }; + for (var i = startPoint.line; i <= endPoint.line; i++) { + (function(i) { + var text = cm.getLine(i); + if (stat[name]) { + text = text.replace(repl[name], '$1'); + } else { + text = map[name] + text; + } + cm.replaceRange(text, { + line: i, + ch: 0 + }, { + line: i, + ch: 99999999999999 + }); + })(i); + } + cm.focus(); } -function _toggleBlock(editor, type, start_chars, end_chars){ - end_chars = (typeof end_chars === 'undefined') ? start_chars : end_chars; - var cm = editor.codemirror; - var stat = getState(cm); +function _toggleBlock(editor, type, start_chars, end_chars) { + end_chars = (typeof end_chars === 'undefined') ? start_chars : end_chars; + var cm = editor.codemirror; + var stat = getState(cm); - var text; - var start = start_chars; - var end = end_chars; + var text; + var start = start_chars; + var end = end_chars; - var startPoint = cm.getCursor('start'); - var endPoint = cm.getCursor('end'); - - if (stat[type]) { - text = cm.getLine(startPoint.line); - start = text.slice(0, startPoint.ch); - end = text.slice(startPoint.ch); - if(type == "bold"){ - start = start.replace(/(\*\*|__)(?![\s\S]*(\*\*|__))/, ""); - end = end.replace(/(\*\*|__)/, ""); - } - else if(type == "italic"){ - start = start.replace(/(\*|_)(?![\s\S]*(\*|_))/, ""); - end = end.replace(/(\*|_)/, ""); - } - cm.replaceRange(start + end, {line: startPoint.line, ch: 0}, {line: startPoint.line, ch: 99999999999999}); - - startPoint.ch -= 2; - endPoint.ch -= 2; - } else { - text = cm.getSelection(); - if(type == "bold"){ - text = text.split("**").join(""); - text = text.split("__").join(""); - } - else if(type == "italic"){ - text = text.split("*").join(""); - text = text.split("_").join(""); - } - cm.replaceSelection(start + text + end); + var startPoint = cm.getCursor('start'); + var endPoint = cm.getCursor('end'); - startPoint.ch += start_chars.length; - endPoint.ch = startPoint.ch + text.length; - } - - cm.setSelection(startPoint, endPoint); - cm.focus(); + if (stat[type]) { + text = cm.getLine(startPoint.line); + start = text.slice(0, startPoint.ch); + end = text.slice(startPoint.ch); + if (type == "bold") { + start = start.replace(/(\*\*|__)(?![\s\S]*(\*\*|__))/, ""); + end = end.replace(/(\*\*|__)/, ""); + } else if (type == "italic") { + start = start.replace(/(\*|_)(?![\s\S]*(\*|_))/, ""); + end = end.replace(/(\*|_)/, ""); + } + cm.replaceRange(start + end, { + line: startPoint.line, + ch: 0 + }, { + line: startPoint.line, + ch: 99999999999999 + }); + + startPoint.ch -= 2; + endPoint.ch -= 2; + } else { + text = cm.getSelection(); + if (type == "bold") { + text = text.split("**").join(""); + text = text.split("__").join(""); + } else if (type == "italic") { + text = text.split("*").join(""); + text = text.split("_").join(""); + } + cm.replaceSelection(start + text + end); + + startPoint.ch += start_chars.length; + endPoint.ch = startPoint.ch + text.length; + } + + cm.setSelection(startPoint, endPoint); + cm.focus(); } /* The right word count in respect for CJK. */ function wordCount(data) { - var pattern = /[a-zA-Z0-9_\u0392-\u03c9]+|[\u4E00-\u9FFF\u3400-\u4dbf\uf900-\ufaff\u3040-\u309f\uac00-\ud7af]+/g; - var m = data.match(pattern); - var count = 0; - if( m === null ) return count; - for (var i = 0; i < m.length; i++) { - if (m[i].charCodeAt(0) >= 0x4E00) { - count += m[i].length; - } else { - count += 1; + var pattern = /[a-zA-Z0-9_\u0392-\u03c9]+|[\u4E00-\u9FFF\u3400-\u4dbf\uf900-\ufaff\u3040-\u309f\uac00-\ud7af]+/g; + var m = data.match(pattern); + var count = 0; + if (m === null) return count; + for (var i = 0; i < m.length; i++) { + if (m[i].charCodeAt(0) >= 0x4E00) { + count += m[i].length; + } else { + count += 1; + } } - } - return count; + return count; } -var toolbar = [ - {name: 'bold', action: toggleBold, className: "fa fa-bold"}, - {name: 'italic', action: toggleItalic, className: "fa fa-italic"}, - '|', +var toolbar = [{ + name: 'bold', + action: toggleBold, + className: "fa fa-bold" + }, { + name: 'italic', + action: toggleItalic, + className: "fa fa-italic" + }, + '|', - {name: 'quote', action: toggleBlockquote, className: "fa fa-quote-left"}, - {name: 'unordered-list', action: toggleUnOrderedList, className: "fa fa-list-ul"}, - {name: 'ordered-list', action: toggleOrderedList, className: "fa fa-list-ol"}, - '|', + { + name: 'quote', + action: toggleBlockquote, + className: "fa fa-quote-left" + }, { + name: 'unordered-list', + action: toggleUnOrderedList, + className: "fa fa-list-ul" + }, { + name: 'ordered-list', + action: toggleOrderedList, + className: "fa fa-list-ol" + }, + '|', - {name: 'link', action: drawLink, className: "fa fa-link"}, - {name: 'image', action: drawImage, className: "fa fa-picture-o"}, - '|', + { + name: 'link', + action: drawLink, + className: "fa fa-link" + }, { + name: 'image', + action: drawImage, + className: "fa fa-picture-o" + }, + '|', - {name: 'preview', action: togglePreview, className: "fa fa-eye"}, + { + name: 'preview', + action: togglePreview, + className: "fa fa-eye" + }, ]; /** * Interface of Markdownify. */ function Markdownify(options) { - options = options || {}; + options = options || {}; - if (options.element) { - this.element = options.element; - } + if (options.element) { + this.element = options.element; + } - options.toolbar = options.toolbar || Markdownify.toolbar; - // you can customize toolbar with object - // [{name: 'bold', shortcut: 'Ctrl-B', className: 'icon-bold'}] + options.toolbar = options.toolbar || Markdownify.toolbar; + // you can customize toolbar with object + // [{name: 'bold', shortcut: 'Ctrl-B', className: 'icon-bold'}] - if (!options.hasOwnProperty('status')) { - options.status = ['lines', 'words', 'cursor']; - } + if (!options.hasOwnProperty('status')) { + options.status = ['lines', 'words', 'cursor']; + } - this.options = options; + this.options = options; - // If user has passed an element, it should auto rendered - if (this.element) { - this.render(); - } + // If user has passed an element, it should auto rendered + if (this.element) { + this.render(); + } } /** @@ -410,175 +452,175 @@ Markdownify.toolbar = toolbar; * Default markdown render. */ Markdownify.markdown = function(text) { - if (window.marked) { - // use marked as markdown parser - return marked(text); - } + if (window.marked) { + // use marked as markdown parser + return marked(text); + } }; /** * Render editor to the given element. */ Markdownify.prototype.render = function(el) { - if (!el) { - el = this.element || document.getElementsByTagName('textarea')[0]; - } + if (!el) { + el = this.element || document.getElementsByTagName('textarea')[0]; + } - if (this._rendered && this._rendered === el) { - // Already rendered. - return; - } + if (this._rendered && this._rendered === el) { + // Already rendered. + return; + } - this.element = el; - var options = this.options; + this.element = el; + var options = this.options; - var self = this; - var keyMaps = {}; + var self = this; + var keyMaps = {}; - for (var key in shortcuts) { - (function(key) { - keyMaps[fixShortcut(key)] = function(cm) { - shortcuts[key](self); - }; - })(key); - } + for (var key in shortcuts) { + (function(key) { + keyMaps[fixShortcut(key)] = function(cm) { + shortcuts[key](self); + }; + })(key); + } - keyMaps["Enter"] = "newlineAndIndentContinueMarkdownList"; - keyMaps['Tab'] = 'tabAndIndentContinueMarkdownList'; - keyMaps['Shift-Tab'] = 'shiftTabAndIndentContinueMarkdownList'; + keyMaps["Enter"] = "newlineAndIndentContinueMarkdownList"; + keyMaps['Tab'] = 'tabAndIndentContinueMarkdownList'; + keyMaps['Shift-Tab'] = 'shiftTabAndIndentContinueMarkdownList'; - this.codemirror = CodeMirror.fromTextArea(el, { - mode: 'markdown', - theme: 'paper', - tabSize: '2', - indentWithTabs: true, - lineNumbers: false, - autofocus: false, - extraKeys: keyMaps, - lineWrapping: true - }); + this.codemirror = CodeMirror.fromTextArea(el, { + mode: 'markdown', + theme: 'paper', + tabSize: '2', + indentWithTabs: true, + lineNumbers: false, + autofocus: false, + extraKeys: keyMaps, + lineWrapping: true + }); - if (options.toolbar !== false) { - this.createToolbar(); - } - if (options.status !== false) { - this.createStatusbar(); - } + if (options.toolbar !== false) { + this.createToolbar(); + } + if (options.status !== false) { + this.createStatusbar(); + } - this._rendered = this.element; + this._rendered = this.element; }; Markdownify.prototype.createToolbar = function(items) { - items = items || this.options.toolbar; + items = items || this.options.toolbar; - if (!items || items.length === 0) { - return; - } - - var bar = document.createElement('div'); - bar.className = 'editor-toolbar'; - - var self = this; - - var el; - self.toolbar = {}; - - for (var i = 0; i < items.length; i++) { - (function(item) { - var el; - if (item.name) { - el = createIcon(item.name, item); - } else if (item === '|') { - el = createSep(); - } else { - el = createIcon(item); - } - - // bind events, special for info - if (item.action) { - if (typeof item.action === 'function') { - el.onclick = function(e) { - item.action(self); - }; - } else if (typeof item.action === 'string') { - el.href = item.action; - el.target = '_blank'; - } - } - self.toolbar[item.name || item] = el; - bar.appendChild(el); - })(items[i]); - } - - var cm = this.codemirror; - cm.on('cursorActivity', function() { - var stat = getState(cm); - - for (var key in self.toolbar) { - (function(key) { - var el = self.toolbar[key]; - if (stat[key]) { - el.className += ' active'; - } else { - el.className = el.className.replace(/\s*active\s*/g, ''); - } - })(key); + if (!items || items.length === 0) { + return; } - }); - var cmWrapper = cm.getWrapperElement(); - cmWrapper.parentNode.insertBefore(bar, cmWrapper); - return bar; + var bar = document.createElement('div'); + bar.className = 'editor-toolbar'; + + var self = this; + + var el; + self.toolbar = {}; + + for (var i = 0; i < items.length; i++) { + (function(item) { + var el; + if (item.name) { + el = createIcon(item.name, item); + } else if (item === '|') { + el = createSep(); + } else { + el = createIcon(item); + } + + // bind events, special for info + if (item.action) { + if (typeof item.action === 'function') { + el.onclick = function(e) { + item.action(self); + }; + } else if (typeof item.action === 'string') { + el.href = item.action; + el.target = '_blank'; + } + } + self.toolbar[item.name || item] = el; + bar.appendChild(el); + })(items[i]); + } + + var cm = this.codemirror; + cm.on('cursorActivity', function() { + var stat = getState(cm); + + for (var key in self.toolbar) { + (function(key) { + var el = self.toolbar[key]; + if (stat[key]) { + el.className += ' active'; + } else { + el.className = el.className.replace(/\s*active\s*/g, ''); + } + })(key); + } + }); + + var cmWrapper = cm.getWrapperElement(); + cmWrapper.parentNode.insertBefore(bar, cmWrapper); + return bar; }; Markdownify.prototype.createStatusbar = function(status) { - status = status || this.options.status; + status = status || this.options.status; - if (!status || status.length === 0) return; + if (!status || status.length === 0) return; - var bar = document.createElement('div'); - bar.className = 'editor-statusbar'; + var bar = document.createElement('div'); + bar.className = 'editor-statusbar'; - var pos, cm = this.codemirror; - for (var i = 0; i < status.length; i++) { - (function(name) { - var el = document.createElement('span'); - el.className = name; - if (name === 'words') { - el.innerHTML = '0'; - cm.on('update', function() { - el.innerHTML = wordCount(cm.getValue()); - }); - } else if (name === 'lines') { - el.innerHTML = '0'; - cm.on('update', function() { - el.innerHTML = cm.lineCount(); - }); - } else if (name === 'cursor') { - el.innerHTML = '0:0'; - cm.on('cursorActivity', function() { - pos = cm.getCursor(); - el.innerHTML = pos.line + ':' + pos.ch; - }); - } - bar.appendChild(el); - })(status[i]); - } - var cmWrapper = this.codemirror.getWrapperElement(); - cmWrapper.parentNode.insertBefore(bar, cmWrapper.nextSibling); - return bar; + var pos, cm = this.codemirror; + for (var i = 0; i < status.length; i++) { + (function(name) { + var el = document.createElement('span'); + el.className = name; + if (name === 'words') { + el.innerHTML = '0'; + cm.on('update', function() { + el.innerHTML = wordCount(cm.getValue()); + }); + } else if (name === 'lines') { + el.innerHTML = '0'; + cm.on('update', function() { + el.innerHTML = cm.lineCount(); + }); + } else if (name === 'cursor') { + el.innerHTML = '0:0'; + cm.on('cursorActivity', function() { + pos = cm.getCursor(); + el.innerHTML = pos.line + ':' + pos.ch; + }); + } + bar.appendChild(el); + })(status[i]); + } + var cmWrapper = this.codemirror.getWrapperElement(); + cmWrapper.parentNode.insertBefore(bar, cmWrapper.nextSibling); + return bar; }; /** * Get or set the text content. */ Markdownify.prototype.value = function(val) { - if (val) { - this.codemirror.getDoc().setValue(val); - return this; - } else { - return this.codemirror.getValue(); - } + if (val) { + this.codemirror.getDoc().setValue(val); + return this; + } else { + return this.codemirror.getValue(); + } }; @@ -601,35 +643,35 @@ Markdownify.toggleFullScreen = toggleFullScreen; * Bind instance methods for exports. */ Markdownify.prototype.toggleBold = function() { - toggleBold(this); + toggleBold(this); }; Markdownify.prototype.toggleItalic = function() { - toggleItalic(this); + toggleItalic(this); }; Markdownify.prototype.toggleBlockquote = function() { - toggleBlockquote(this); + toggleBlockquote(this); }; Markdownify.prototype.toggleUnOrderedList = function() { - toggleUnOrderedList(this); + toggleUnOrderedList(this); }; Markdownify.prototype.toggleOrderedList = function() { - toggleOrderedList(this); + toggleOrderedList(this); }; Markdownify.prototype.drawLink = function() { - drawLink(this); + drawLink(this); }; Markdownify.prototype.drawImage = function() { - drawImage(this); + drawImage(this); }; Markdownify.prototype.undo = function() { - undo(this); + undo(this); }; Markdownify.prototype.redo = function() { - redo(this); + redo(this); }; Markdownify.prototype.togglePreview = function() { - togglePreview(this); + togglePreview(this); }; Markdownify.prototype.toggleFullScreen = function() { - toggleFullScreen(this); + toggleFullScreen(this); }; \ No newline at end of file diff --git a/sources files/markdownify-theme.css b/sources files/theme.css similarity index 65% rename from sources files/markdownify-theme.css rename to sources files/theme.css index 60a0422..fc3ab4c 100644 --- a/sources files/markdownify-theme.css +++ b/sources files/theme.css @@ -226,4 +226,146 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} .CodeMirror .CodeMirror-code .cm-comment{ background:#eee; border-radius:2px; +} + +.CodeMirror { + height:auto; + min-height: 300px; + border:1px solid #ddd; + border-bottom-left-radius:4px; + border-bottom-right-radius:4px; + padding:10px; +} +:-webkit-full-screen { + background: #f9f9f5; + padding: 0.5em 1em; + width: 100%; + height: 100%; +} +:-moz-full-screen { + padding: 0.5em 1em; + background: #f9f9f5; + width: 100%; + height: 100%; +} +.editor-wrapper { + font: 16px/1.62 "Helvetica Neue", "Xin Gothic", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif; + color: #2c3e50; +} +/* this is the title */ +.editor-wrapper input.title { + font: 18px "Helvetica Neue", "Xin Gothic", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif; + background: transparent; + padding: 4px; + width: 100%; + border: none; + outline: none; + opacity: 0.6; +} +.editor-toolbar { + position: relative; + opacity: 0.6; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; + padding:0 10px; + border-top:1px solid #bbb; + border-left:1px solid #bbb; + border-right:1px solid #bbb; + border-top-left-radius:4px; + border-top-right-radius:4px; +} +.editor-toolbar:before, .editor-toolbar:after { + display: block; + content: ' '; + height: 1px; +} +.editor-toolbar:before { + margin-bottom: 8px; +} +.editor-toolbar:after { + margin-top: 8px; +} +.editor-wrapper input.title:hover, .editor-wrapper input.title:focus, .editor-toolbar:hover { + opacity: 0.8; +} +.editor-toolbar a { + display: inline-block; + text-align: center; + text-decoration: none !important; + color: #2c3e50 !important; + width:30px; + height:30px; + margin:0; + border: 1px solid transparent; + border-radius: 3px; + cursor: pointer; +} +.editor-toolbar a:hover, .editor-toolbar a.active { + background: #fcfcfc; + border-color: #95a5a6; +} +.editor-toolbar a:before { + line-height:30px; +} +.editor-toolbar i.separator { + display: inline-block; + width: 0; + border-left: 1px solid #d9d9d9; + border-right: 1px solid white; + color: transparent; + text-indent: -10px; + margin: 0 6px; +} +.editor-toolbar a.icon-fullscreen { + position: absolute; + right:10px; +} +.editor-statusbar { + padding: 8px 10px; + font-size: 12px; + color: #959694; + text-align: right; +} +.editor-statusbar span { + display: inline-block; + min-width: 4em; + margin-left: 1em; +} +.editor-statusbar .lines:before { + content: 'lines: '; +} +.editor-statusbar .words:before { + content: 'words: '; +} +.editor-preview { + padding:10px; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: #fff; + z-index: 9999; + overflow: auto; + display:none; + +} +.editor-preview-active { + display:block; +} +.editor-preview > p { + margin-top: 0; +} + +.editor-preview pre{ + background:#eee; + margin-bottom:10px; +} + +.editor-preview table td, .editor-preview table th { + border: solid 1px #bbb; + padding: 5px; } \ No newline at end of file