From bde60031accdd103a7939f83fd581e4ec56d0156 Mon Sep 17 00:00:00 2001 From: Matthew Harrison-Jones Date: Fri, 24 May 2013 11:09:20 +0100 Subject: [PATCH 1/4] Add keyboard shortcuts --- core/admin/assets/js/editor.js | 102 +++++++++++++++++++++++ core/admin/assets/js/markdown-actions.js | 67 +++++++++++++++ core/admin/views/editor.hbs | 1 + 3 files changed, 170 insertions(+) create mode 100644 core/admin/assets/js/markdown-actions.js diff --git a/core/admin/assets/js/editor.js b/core/admin/assets/js/editor.js index 31b1ab13e0..0d0a5f1e27 100644 --- a/core/admin/assets/js/editor.js +++ b/core/admin/assets/js/editor.js @@ -90,6 +90,22 @@ } } + function getSelectedText() { + if (window.getSelection) { + var sel = window.getSelection(); + if (sel.rangeCount) { + var range = sel.getRangeAt(0).cloneRange(); + range.surroundContents(span); + sel.removeAllRanges(); + sel.addRange(range); + } + } + if (document.selection) { + return document.selection.createRange().text; + } + return ''; + } + // ## Main Initialisation $(document).ready(function () { @@ -148,10 +164,96 @@ } }); + // ## Shortcuts // Zen writing mode shortcut.add("Alt+Shift+Z", function () { $('body').toggleClass('zen'); }); + var CMTextarea = $(".CodeMirror textarea"); + // Bold text + shortcut.add("Ctrl+B", function () { + return CMTextarea.addMarkdown({style: "bold", target: editor}); + }); + + // Bold text + shortcut.add("Meta+B", function () { + return CMTextarea.addMarkdown({style: "bold", target: editor}); + }); + + // Italic text + shortcut.add("Ctrl+I", function () { + return CMTextarea.addMarkdown({style: "italic", target: editor}); + }); + + // Italic text + shortcut.add("Meta+I", function () { + return CMTextarea.addMarkdown({style: "italic", target: editor}); + }); + + // Strike through text + shortcut.add("Ctrl+Alt+U", function () { + return CMTextarea.addMarkdown({style: "strike", target: editor}); + }); + + // Inline Code + shortcut.add("Ctrl+Shift+K", function () { + return CMTextarea.addMarkdown({style: "code", target: editor}); + }); + + // Inline Code + shortcut.add("Meta+K", function () { + return CMTextarea.addMarkdown({style: "code", target: editor}); + }); + + // H1 + shortcut.add("Alt+1", function () { + return CMTextarea.addMarkdown({style: "h1", target: editor}); + }); + + // H2 + shortcut.add("Alt+2", function () { + return CMTextarea.addMarkdown({style: "h2", target: editor}); + }); + + // H3 + shortcut.add("Alt+3", function () { + return CMTextarea.addMarkdown({style: "h3", target: editor}); + }); + + // H4 + shortcut.add("Alt+4", function () { + return CMTextarea.addMarkdown({style: "h4", target: editor}); + }); + + // H5 + shortcut.add("Alt+5", function () { + return CMTextarea.addMarkdown({style: "h5", target: editor}); + }); + + // H6 + shortcut.add("Alt+6", function () { + return CMTextarea.addMarkdown({style: "h6", target: editor}); + }); + + // Link + shortcut.add("Ctrl+Shift+L", function () { + return CMTextarea.addMarkdown({style: "link", target: editor}); + }); + + // Image + shortcut.add("Ctrl+Shift+I", function () { + return CMTextarea.addMarkdown({style: "image", target: editor}); + }); + + // Blockquote + shortcut.add("Ctrl+Q", function () { + return CMTextarea.addMarkdown({style: "blockquote", target: editor}); + }); + + // Current Date + shortcut.add("Ctrl+Shift+1", function () { + return CMTextarea.addMarkdown({style: "currentDate", target: editor}); + }); }); }(jQuery, Showdown, CodeMirror, shortcut)); \ No newline at end of file diff --git a/core/admin/assets/js/markdown-actions.js b/core/admin/assets/js/markdown-actions.js new file mode 100644 index 0000000000..1f90ad220e --- /dev/null +++ b/core/admin/assets/js/markdown-actions.js @@ -0,0 +1,67 @@ +/*global window, document, jQuery*/ + +// Polyfill for Object.create +if ( typeof Object.create !== 'function' ) { + Object.create = function( obj ) { + function F() {}; + F.prototype = obj; + return new F(); + }; +} + +// # Surrounds given text with Markdown syntax +(function ($, window, document, undefined) { + "use strict"; + var Markdown = { + init : function (options, elem) { + var self = this; + self.elem = elem; + self.$elem = $(elem); + + self.style = (typeof options === 'string') ? options : options.style; + + self.options = $.extend({}, $.fn.addMarkdown.options, options); + + self.replace(); + }, + replace: function () { + var text = this.options.target.getSelection(), md; + if (this.options.syntax[this.style]) { + md = this.options.syntax[this.style].replace('$1', text); + this.options.target.replaceSelection(md); + } else { + console.log("invalid style"); + } + + } + }; + $.fn.addMarkdown = function (options) { + return this.each(function () { + + var markdown = Object.create(Markdown); + markdown.init(options, this); + + }); + }; + + $.fn.addMarkdown.options = { + style: null, + target: null, + syntax: { + bold: "**$1**", + italic: "_$1_", + strike: "~~$1~~", + code: "`$1`", + h1: "\n# $1\n", + h2: "\n## $1\n", + h3: "\n### $1\n", + h4: "\n#### $1\n", + h5: "\n##### $1\n", + h6: "\n###### $1\n", + link: "[$1](http://)", + image: "![$1](http://)", + blockquote: "> $1", + currentDate: new Date().toLocaleString() + } + }; +})(jQuery, window, document); \ No newline at end of file diff --git a/core/admin/views/editor.hbs b/core/admin/views/editor.hbs index 0b972c6b01..ba5efc8884 100644 --- a/core/admin/views/editor.hbs +++ b/core/admin/views/editor.hbs @@ -4,6 +4,7 @@ + {{/contentFor}} From 27875b2849f4be082287eb8d6a661f80f9dd0b27 Mon Sep 17 00:00:00 2001 From: Matthew Harrison-Jones Date: Sun, 26 May 2013 14:01:00 +0100 Subject: [PATCH 2/4] Updated to fix JSLint issues --- core/admin/assets/js/markdown-actions.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/core/admin/assets/js/markdown-actions.js b/core/admin/assets/js/markdown-actions.js index 1f90ad220e..b00b592a36 100644 --- a/core/admin/assets/js/markdown-actions.js +++ b/core/admin/assets/js/markdown-actions.js @@ -1,16 +1,17 @@ -/*global window, document, jQuery*/ +/*global window, document, console, jQuery*/ // Polyfill for Object.create -if ( typeof Object.create !== 'function' ) { - Object.create = function( obj ) { - function F() {}; +if (typeof Object.create !== 'function') { + Object.create = function (obj) { + "use strict"; + function F() {} F.prototype = obj; return new F(); }; } // # Surrounds given text with Markdown syntax -(function ($, window, document, undefined) { +(function ($, window, document) { "use strict"; var Markdown = { init : function (options, elem) { @@ -30,7 +31,7 @@ if ( typeof Object.create !== 'function' ) { md = this.options.syntax[this.style].replace('$1', text); this.options.target.replaceSelection(md); } else { - console.log("invalid style"); + console.log("Invalid style."); } } @@ -64,4 +65,4 @@ if ( typeof Object.create !== 'function' ) { currentDate: new Date().toLocaleString() } }; -})(jQuery, window, document); \ No newline at end of file +}(jQuery, window, document)); \ No newline at end of file From d91c93f93947ef4e5757974cc7a749d0758ccb1c Mon Sep 17 00:00:00 2001 From: Matthew Harrison-Jones Date: Tue, 28 May 2013 13:54:55 +0100 Subject: [PATCH 3/4] Converted from Jquery plugin to Codemirror function --- core/admin/assets/js/editor.js | 51 ++++++++---------------- core/admin/assets/js/markdown-actions.js | 37 +++++------------ 2 files changed, 28 insertions(+), 60 deletions(-) diff --git a/core/admin/assets/js/editor.js b/core/admin/assets/js/editor.js index 0d0a5f1e27..64a220a8ec 100644 --- a/core/admin/assets/js/editor.js +++ b/core/admin/assets/js/editor.js @@ -90,22 +90,6 @@ } } - function getSelectedText() { - if (window.getSelection) { - var sel = window.getSelection(); - if (sel.rangeCount) { - var range = sel.getRangeAt(0).cloneRange(); - range.surroundContents(span); - sel.removeAllRanges(); - sel.addRange(range); - } - } - if (document.selection) { - return document.selection.createRange().text; - } - return ''; - } - // ## Main Initialisation $(document).ready(function () { @@ -170,90 +154,89 @@ $('body').toggleClass('zen'); }); - var CMTextarea = $(".CodeMirror textarea"); // Bold text shortcut.add("Ctrl+B", function () { - return CMTextarea.addMarkdown({style: "bold", target: editor}); + return editor.addMarkdown({style: "bold"}); }); // Bold text shortcut.add("Meta+B", function () { - return CMTextarea.addMarkdown({style: "bold", target: editor}); + return editor.addMarkdown({style: "bold"}); }); // Italic text shortcut.add("Ctrl+I", function () { - return CMTextarea.addMarkdown({style: "italic", target: editor}); + return editor.addMarkdown({style: "italic"}); }); // Italic text shortcut.add("Meta+I", function () { - return CMTextarea.addMarkdown({style: "italic", target: editor}); + return editor.addMarkdown({style: "italic"}); }); // Strike through text shortcut.add("Ctrl+Alt+U", function () { - return CMTextarea.addMarkdown({style: "strike", target: editor}); + return editor.addMarkdown({style: "strike"}); }); // Inline Code shortcut.add("Ctrl+Shift+K", function () { - return CMTextarea.addMarkdown({style: "code", target: editor}); + return editor.addMarkdown({style: "code"}); }); // Inline Code shortcut.add("Meta+K", function () { - return CMTextarea.addMarkdown({style: "code", target: editor}); + return editor.addMarkdown({style: "code"}); }); // H1 shortcut.add("Alt+1", function () { - return CMTextarea.addMarkdown({style: "h1", target: editor}); + return editor.addMarkdown({style: "h1"}); }); // H2 shortcut.add("Alt+2", function () { - return CMTextarea.addMarkdown({style: "h2", target: editor}); + return editor.addMarkdown({style: "h2"}); }); // H3 shortcut.add("Alt+3", function () { - return CMTextarea.addMarkdown({style: "h3", target: editor}); + return editor.addMarkdown({style: "h3"}); }); // H4 shortcut.add("Alt+4", function () { - return CMTextarea.addMarkdown({style: "h4", target: editor}); + return editor.addMarkdown({style: "h4"}); }); // H5 shortcut.add("Alt+5", function () { - return CMTextarea.addMarkdown({style: "h5", target: editor}); + return editor.addMarkdown({style: "h5"}); }); // H6 shortcut.add("Alt+6", function () { - return CMTextarea.addMarkdown({style: "h6", target: editor}); + return editor.addMarkdown({style: "h6"}); }); // Link shortcut.add("Ctrl+Shift+L", function () { - return CMTextarea.addMarkdown({style: "link", target: editor}); + return editor.addMarkdown({style: "link"}); }); // Image shortcut.add("Ctrl+Shift+I", function () { - return CMTextarea.addMarkdown({style: "image", target: editor}); + return editor.addMarkdown({style: "image"}); }); // Blockquote shortcut.add("Ctrl+Q", function () { - return CMTextarea.addMarkdown({style: "blockquote", target: editor}); + return editor.addMarkdown({style: "blockquote"}); }); // Current Date shortcut.add("Ctrl+Shift+1", function () { - return CMTextarea.addMarkdown({style: "currentDate", target: editor}); + return editor.addMarkdown({style: "currentDate"}); }); }); }(jQuery, Showdown, CodeMirror, shortcut)); \ No newline at end of file diff --git a/core/admin/assets/js/markdown-actions.js b/core/admin/assets/js/markdown-actions.js index b00b592a36..15f059d849 100644 --- a/core/admin/assets/js/markdown-actions.js +++ b/core/admin/assets/js/markdown-actions.js @@ -1,53 +1,38 @@ -/*global window, document, console, jQuery*/ - -// Polyfill for Object.create -if (typeof Object.create !== 'function') { - Object.create = function (obj) { - "use strict"; - function F() {} - F.prototype = obj; - return new F(); - }; -} +/*global console, jQuery, CodeMirror*/ // # Surrounds given text with Markdown syntax -(function ($, window, document) { +(function ($) { "use strict"; var Markdown = { init : function (options, elem) { var self = this; self.elem = elem; - self.$elem = $(elem); self.style = (typeof options === 'string') ? options : options.style; - self.options = $.extend({}, $.fn.addMarkdown.options, options); + self.options = $.extend({}, CodeMirror.prototype.addMarkdown.options, options); self.replace(); }, replace: function () { - var text = this.options.target.getSelection(), md; + var text = this.elem.getSelection(), md; if (this.options.syntax[this.style]) { md = this.options.syntax[this.style].replace('$1', text); - this.options.target.replaceSelection(md); + this.elem.replaceSelection(md); } else { console.log("Invalid style."); } } }; - $.fn.addMarkdown = function (options) { - return this.each(function () { - var markdown = Object.create(Markdown); - markdown.init(options, this); - - }); + CodeMirror.prototype.addMarkdown = function (options) { + var markdown = Object.create(Markdown); + markdown.init(options, this); }; - $.fn.addMarkdown.options = { + CodeMirror.prototype.addMarkdown.options = { style: null, - target: null, syntax: { bold: "**$1**", italic: "_$1_", @@ -60,9 +45,9 @@ if (typeof Object.create !== 'function') { h5: "\n##### $1\n", h6: "\n###### $1\n", link: "[$1](http://)", - image: "![$1](http://)", + image: "!image[$1](http://)", blockquote: "> $1", currentDate: new Date().toLocaleString() } }; -}(jQuery, window, document)); \ No newline at end of file +}(jQuery)); \ No newline at end of file From c6734ebbf65238da05f4a16cbc69a1e4535f0f3b Mon Sep 17 00:00:00 2001 From: Matthew Harrison-Jones Date: Tue, 28 May 2013 14:23:01 +0100 Subject: [PATCH 4/4] Moved shortcut initialisation over to interation Currently using jQuery.each not _.each. Can be easily changed with ``` _.each(MarkdownShortcuts, function(short) { shortcut.add(short.key, function () { return editor.addMarkdown({style: short.style}); }); }); ``` --- core/admin/assets/js/editor.js | 152 +++++++++++++++------------------ 1 file changed, 70 insertions(+), 82 deletions(-) diff --git a/core/admin/assets/js/editor.js b/core/admin/assets/js/editor.js index 64a220a8ec..b470cf90d6 100644 --- a/core/admin/assets/js/editor.js +++ b/core/admin/assets/js/editor.js @@ -154,89 +154,77 @@ $('body').toggleClass('zen'); }); - // Bold text - shortcut.add("Ctrl+B", function () { - return editor.addMarkdown({style: "bold"}); - }); + var MarkdownShortcuts = [ + { + 'key': 'Ctrl+B', + 'style': 'bold' + }, + { + 'key': 'Meta+B', + 'style': 'bold' + }, + { + 'key': 'Ctrl+I', + 'style': 'italic' + }, + { + 'key': 'Meta+I', + 'style': 'italic' + }, + { + 'key': 'Ctrl+Alt+U', + 'style': 'strike' + }, + { + 'key': 'Ctrl+Shift+K', + 'style': 'code' + }, + { + 'key': 'Alt+1', + 'style': 'h1' + }, + { + 'key': 'Alt+2', + 'style': 'h2' + }, + { + 'key': 'Alt+3', + 'style': 'h3' + }, + { + 'key': 'Alt+4', + 'style': 'h4' + }, + { + 'key': 'Alt+5', + 'style': 'h5' + }, + { + 'key': 'Alt+6', + 'style': 'h6' + }, + { + 'key': 'Ctrl+Shift+L', + 'style': 'link' + }, + { + 'key': 'Ctrl+Shift+I', + 'style': 'image' + }, + { + 'key': 'Ctrl+Q', + 'style': 'blockquote' + }, + { + 'key': 'Ctrl+Shift+1', + 'style': 'currentdate' + } + ]; - // Bold text - shortcut.add("Meta+B", function () { - return editor.addMarkdown({style: "bold"}); - }); - - // Italic text - shortcut.add("Ctrl+I", function () { - return editor.addMarkdown({style: "italic"}); - }); - - // Italic text - shortcut.add("Meta+I", function () { - return editor.addMarkdown({style: "italic"}); - }); - - // Strike through text - shortcut.add("Ctrl+Alt+U", function () { - return editor.addMarkdown({style: "strike"}); - }); - - // Inline Code - shortcut.add("Ctrl+Shift+K", function () { - return editor.addMarkdown({style: "code"}); - }); - - // Inline Code - shortcut.add("Meta+K", function () { - return editor.addMarkdown({style: "code"}); - }); - - // H1 - shortcut.add("Alt+1", function () { - return editor.addMarkdown({style: "h1"}); - }); - - // H2 - shortcut.add("Alt+2", function () { - return editor.addMarkdown({style: "h2"}); - }); - - // H3 - shortcut.add("Alt+3", function () { - return editor.addMarkdown({style: "h3"}); - }); - - // H4 - shortcut.add("Alt+4", function () { - return editor.addMarkdown({style: "h4"}); - }); - - // H5 - shortcut.add("Alt+5", function () { - return editor.addMarkdown({style: "h5"}); - }); - - // H6 - shortcut.add("Alt+6", function () { - return editor.addMarkdown({style: "h6"}); - }); - - // Link - shortcut.add("Ctrl+Shift+L", function () { - return editor.addMarkdown({style: "link"}); - }); - - // Image - shortcut.add("Ctrl+Shift+I", function () { - return editor.addMarkdown({style: "image"}); - }); - - // Blockquote - shortcut.add("Ctrl+Q", function () { - return editor.addMarkdown({style: "blockquote"}); - }); - - // Current Date - shortcut.add("Ctrl+Shift+1", function () { - return editor.addMarkdown({style: "currentDate"}); + $.each(MarkdownShortcuts, function (index, short) { + shortcut.add(short.key, function () { + return editor.addMarkdown({style: short.style}); + }); }); }); }(jQuery, Showdown, CodeMirror, shortcut)); \ No newline at end of file