{"id":3100,"date":"2013-12-25T19:54:40","date_gmt":"2013-12-26T01:54:40","guid":{"rendered":"http:\/\/bililite.com\/blog\/?p=3100"},"modified":"2014-02-26T17:15:23","modified_gmt":"2014-02-26T23:15:23","slug":"bililiterange-undo","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2013\/12\/25\/bililiterange-undo\/","title":{"rendered":"<code>bililiteRange<\/code> <code>undo<\/code>"},"content":{"rendered":"<p>This is a plugin for <a href=\"http:\/\/bililite.com\/blog\/2011\/01\/17\/cross-browser-text-ranges-and-selections\/\" title=\"Cross-Browser Text Ranges and Selections\">bililiteRange<\/a> that implements a simple undo\/redo stack. It listens for <code>input<\/code> events (so to use it in IE<10 you need some kind of polyfill) and records the old text each time, so it's pretty memory-inefficient, but it works for what I want to do.<\/p>\r\n\r\n<p>See <a href=\"https:\/\/github.com\/dwachss\/bililiteRange\/blob\/master\/bililiteRange.undo.js\">the code on github<\/a>.<\/p>\r\n<p><a href=\"\/blog\/blogfiles\/prism\/prismeditor.html\">See a demo<\/a> with the <a href=\"http:\/\/bililite.com\/blog\/2013\/12\/16\/simple-syntax-highlighting-editor-with-prism\/\" title=\"Simple syntax-highlighting editor with Prism\">Prism editor<\/a> (control-z to undo, control-y to redo).<\/p>\r\n<p>Usage is simple:<\/p>\r\n<pre><code class=\"language-javascript\" >bililiteRange(element).undo(0); \/\/ initializes the event listener without trying to undo anything; safe to call multiple times\r\nbililiteRange(element).undo(); \/\/ restores the text from the last undo point\r\nbililiteRange(element).undo(-1); \/\/ redo--undoes the last undo<\/code><\/pre>\r\n<p><code class=\"language-javascript\" >bililiteRange(element).undo(n)<\/code> for any <code class=\"language-javascript\" >n<\/code> works and will undo (for positive <code class=\"language-javascript\" >n<\/code>) or redo (for negative <code class=\"language-javascript\" >n<\/code>) that many times, though I'm not sure how useful that would be.<\/p>\r\n<p>There are convenience methods to be used as event handlers:<\/p>\r\n<pre><code class=\"language-javascript\" >bililiteRange.undo(event);\r\nbililiteRange.redo(event);<\/code><\/pre>\r\n<p>So a simple keyboard shortcut handler would be:<\/p>\r\n<pre><code class=\"language-javascript\" >\t\tbililiteRange(editor).undo(0); \/\/ initialize\r\n\t\teditor.addEventListener ('keydown', function(evt){\r\n\t\t\t\/\/ control z\r\n\t\t\tif (evt.ctrlKey && evt.which == 90) bililiteRange.undo(evt);\r\n\t\t\t\/\/ control y\r\n\t\t\tif (evt.ctrlKey && evt.which == 89) bililiteRange.redo(evt);\r\n\t\t});\r\n<\/code><\/pre>\r\n<p>or, if you use my <a href=\"http:\/\/bililite.com\/blog\/2013\/03\/20\/hotkeys-with-keymap\/\" title=\"hotkeys with keymap\">hotkeys jQuery plugin<\/a>, \r\n<pre><code class=\"language-javascript\" >\r\n$(editor).on('keydown', {keys: '^z'}, bililiteRange.undo);\r\n$(editor).on('keydown', {keys: '^y'}, bililiteRange.redo);<\/code><\/pre>\r\n\r\n<p>Hope that this is useful to someone.<\/p>\r\n\r\n<p>It tries to be sophisticated about typing, and bunches all typing done in a row into one, so that <code class=\"language-javascript\" >undo<\/code> undoes the entire line. Backspacing, moving the insertion point, or typing a newline starts a new undo point.<\/p>\r\n\r\n<p>Restoring the insertion point isn't as sophisticated as in a real word processor yet; moving the insertion point then typing then undoing moves the insertion point back to where is was originally, not to the start of typing.<\/p> ","protected":false},"excerpt":{"rendered":"This is a plugin for bililiteRange that implements a simple undo\/redo stack. It listens for input events (so to use it in IE","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,10],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3100"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=3100"}],"version-history":[{"count":6,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3100\/revisions"}],"predecessor-version":[{"id":3116,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3100\/revisions\/3116"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=3100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=3100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=3100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}