Merge pull request #30 from desmosinc/feature.substituteKeyboardEvents

`substituteKeyboardEvents` config option

src/publicapi.js

@@ -77,6 +77,7 @@ function getInterface(v) {
 
   MQ.L = L;
   MQ.R = R;
+  MQ.saneKeyboardEvents = saneKeyboardEvents;
 
   function config(currentOptions, newOptions) {
     if (newOptions && newOptions.handlers) {

src/services/saneKeyboardEvents.util.js

@@ -95,8 +95,8 @@ var saneKeyboardEvents = (function() {
     var textarea = jQuery(el);
     var target = jQuery(handlers.container || textarea);
 
-    // checkTextareaFor() is called after keypress or paste events to
-    // say "Hey, I think something was just typed" or "pasted" (resp.),
+    // checkTextareaFor() is called after key or clipboard events to
+    // say "Hey, I think something was just typed" or "pasted" etc,
     // so that at all subsequent opportune times (next event or timeout),
     // will check for expected typed or pasted text.
     // Need to check repeatedly because #135: in Safari 5.1 (at least),
@@ -109,6 +109,13 @@ var saneKeyboardEvents = (function() {
       clearTimeout(timeoutId);
       timeoutId = setTimeout(checker);
     }
+    function checkTextareaOnce(checker) {
+      checkTextareaFor(function(e) {
+        checker(e);
+        checkTextarea = noop;
+        clearTimeout(timeoutId);
+      });
+    }
     target.bind('keydown keypress input keyup focusout paste', function(e) { checkTextarea(e); });
 
 
@@ -148,12 +155,12 @@ var saneKeyboardEvents = (function() {
       keydown = e;
       keypress = null;
 
-      if (shouldBeSelected) checkTextareaFor(function(e) {
+      if (shouldBeSelected) checkTextareaOnce(function(e) {
         if (!(e && e.type === 'focusout') && textarea[0].select) {
-          textarea[0].select(); // re-select textarea in case it's an unrecognized
+          // re-select textarea in case it's an unrecognized key that clears
+          // the selection, then never again, 'cos next thing might be blur
+          textarea[0].select();
         }
-        checkTextarea = noop; // key that clears the selection, then never
-        clearTimeout(timeoutId); // again, 'cos next thing might be blur
       });
 
       handleKey();
@@ -229,6 +236,8 @@ var saneKeyboardEvents = (function() {
       keydown: onKeydown,
       keypress: onKeypress,
       focusout: onBlur,
+      cut: function() { checkTextareaOnce(function() { handlers.cut(); }); },
+      copy: function() { checkTextareaOnce(function() { handlers.copy(); }); },
       paste: onPaste
     });
 

src/services/textarea.js

@@ -18,7 +18,6 @@ Controller.open(function(_) {
 
     var ctrlr = this;
     ctrlr.cursor.selectionChanged = function() { ctrlr.selectionChanged(); };
-    ctrlr.container.bind('copy', function() { ctrlr.setTextareaSelection(); });
   };
   _.selectionChanged = function() {
     var ctrlr = this;
@@ -52,6 +51,7 @@ Controller.open(function(_) {
     this.container.prepend('<span class="mq-selectable">$'+ctrlr.exportLatex()+'$</span>');
     ctrlr.blurred = true;
     textarea.bind('cut paste', false)
+    .bind('copy', function() { ctrlr.setTextareaSelection(); })
     .focus(function() { ctrlr.blurred = false; }).blur(function() {
       if (cursor.selection) cursor.selection.clear();
       setTimeout(detach); //detaching during blur explodes in WebKit
@@ -66,23 +66,13 @@ Controller.open(function(_) {
       if (text) textarea.select();
     };
   };
+  Options.p.substituteKeyboardEvents = saneKeyboardEvents;
   _.editablesTextareaEvents = function() {
-    var ctrlr = this, root = ctrlr.root, cursor = ctrlr.cursor,
-      textarea = ctrlr.textarea, textareaSpan = ctrlr.textareaSpan;
+    var ctrlr = this, textarea = ctrlr.textarea, textareaSpan = ctrlr.textareaSpan;
 
-    var keyboardEventsShim = saneKeyboardEvents(textarea, this);
+    var keyboardEventsShim = this.options.substituteKeyboardEvents(textarea, this);
     this.selectFn = function(text) { keyboardEventsShim.select(text); };
-
-    this.container.prepend(textareaSpan)
-    .on('cut', function(e) {
-      if (cursor.selection) {
-        setTimeout(function() {
-          ctrlr.notify('edit'); // deletes selection if present
-          cursor.parent.bubble('reflow');
-        });
-      }
-    });
-
+    this.container.prepend(textareaSpan);
     this.focusBlurEvents();
   };
   _.typedText = function(ch) {
@@ -96,6 +86,18 @@ Controller.open(function(_) {
     aria.alert();
     this.scrollHoriz();
   };
+  _.cut = function() {
+    var ctrlr = this, cursor = ctrlr.cursor;
+    if (cursor.selection) {
+      setTimeout(function() {
+        ctrlr.notify('edit'); // deletes selection if present
+        cursor.parent.bubble('reflow');
+      });
+    }
+  };
+  _.copy = function() {
+    this.setTextareaSelection();
+  };
   _.paste = function(text) {
     // TODO: document `statelessClipboard` config option in README, after
     // making it work like it should, that is, in both text and math mode

test/unit/publicapi.test.js

@@ -794,6 +794,51 @@ suite('Public API', function() {
     });
   });
 
+  suite('substituteKeyboardEvents', function() {
+    test('can intercept key events', function() {
+      var mq = MQ.MathField($('<span>').appendTo('#mock')[0], {
+        substituteKeyboardEvents: function(textarea, handlers) {
+          return MQ.saneKeyboardEvents(textarea, jQuery.extend({}, handlers, {
+            keystroke: function(_key, evt) {
+              key = _key;
+              return handlers.keystroke.apply(handlers, arguments);
+            }
+          }));
+        }
+      });
+      var key;
+
+      $(mq.el()).find('textarea').trigger({ type: 'keydown', which: '37' });
+      assert.equal(key, 'Left');
+
+      $(mq.el()).remove();
+    });
+    test('cut is async', function() {
+      var mq = MQ.MathField($('<span>').appendTo('#mock')[0], {
+        substituteKeyboardEvents: function(textarea, handlers) {
+          return MQ.saneKeyboardEvents(textarea, jQuery.extend({}, handlers, {
+            cut: function() {
+              count += 1;
+              return handlers.cut.apply(handlers, arguments);
+            }
+          }));
+        }
+      });
+      var count = 0;
+
+      $(mq.el()).find('textarea').trigger('cut');
+      assert.equal(count, 0);
+
+      $(mq.el()).find('textarea').trigger('input');
+      assert.equal(count, 1);
+
+      $(mq.el()).find('textarea').trigger('keyup');
+      assert.equal(count, 1);
+
+      $(mq.el()).remove();
+    });
+  });
+
   suite('clickAt', function() {
     test('inserts at coordinates', function() {
       // Insert filler so that the page is taller than the window so this test is deterministic

test/visual.html

@@ -277,6 +277,12 @@ <h3>substituteTextarea</h3>
 
 <p>In Safari on iOS, this should be focusable but not bring up the on-screen keyboard; to test, try focusing anything else and confirm this blurs: <span id="no-kbd-math"></span> (confirmed working on iOS 6.1.3)</p>
 
+<h3>substituteKeyboardEvents</h3>
+
+<p>Should be able to prevent cut, typing, and pasting in this field: <span id="disable-typing">1+2+3</span></p>
+
+<p>Should wrap anything you type in '&lt;&gt;': <span id="wrap-typing">1+2+3</span></p>
+
 </div>
 <script type="text/javascript">
 window.onerror = function() {
@@ -446,6 +452,29 @@ <h3>substituteTextarea</h3>
     return $('<span tabindex=0 style="display:inline-block;width:1px;height:1px" />')[0];
   }
 });
+
+MQ.MathField($('#disable-typing')[0], {
+  substituteKeyboardEvents: function(textarea, handlers) {
+    return MQ.saneKeyboardEvents(textarea, $.extend({}, handlers, {
+      cut: $.noop,
+      paste: $.noop,
+      keystroke: $.noop,
+      typedText: $.noop
+    }));
+  }
+});
+
+MQ.MathField($('#wrap-typing')[0], {
+  substituteKeyboardEvents: function(textarea, handlers) {
+    return MQ.saneKeyboardEvents(textarea, $.extend({}, handlers, {
+      typedText: function (text) {
+        handlers.typedText('<');
+        handlers.typedText(text);
+        handlers.typedText('>');
+      }
+    }));
+  }
+});
 </script>
 </body>
 </html>