Handle browser that don't do clipboardData. Add compat note to readme

Closes jbt#14
ThinkingStudio · Oct 17, 2015 · 4812667 · 4812667
1 parent 06cd3c2
commit 4812667
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 41 deletions.
diff --git a/README.md b/README.md
@@ -6,13 +6,15 @@ As seen in my [online markdown editor](//jbt.github.io/markdown-editor) (the lef
 
 Requires [Prism](//prismjs.com) - Prism core is required plus any languages you want to be syntax-highlighted inside fenced code blocks. The bundled `prism-all.js` includes _all_ available languages.
 
+
 ## Usage
 
  * Include `prism.css` and `mdedit.css`
  * Include `prism-all.js` and `mdedit.js`
  * Include a `<pre>` element where you want an editor
  * Then `var editor = mdEdit(thatPreElement, {options})`;
 
+
 ## API
 
  * The `options` parameter to the constructor may include the following configuration options:
@@ -21,3 +23,8 @@ Requires [Prism](//prismjs.com) - Prism core is required plus any languages you
 
  * `editor.getValue()` - returns the current value of the editor view
  * `editor.setValue(val)` - sets the current value to `val` and updates the view
+
+
+## Browser support
+
+Anything that supports ES5 well enough. That means (hopefully) IE9+, and all recent versions of all the other browsers.
diff --git a/mdedit.js b/mdedit.js
@@ -862,10 +862,6 @@ Editor.prototype.keyup = function(evt){
   var keyCode = evt && evt.keyCode || 0,
       code = this.getText();
 
-  // if(keyCode < 9 || keyCode == 13 || keyCode > 32 && keyCode < 41) {
-    // $t.trigger('caretmove');
-  // }
-
   if([
     9, 91, 93, 16, 17, 18, // modifiers
     20, // caps lock
@@ -901,7 +897,6 @@ Editor.prototype.changed = function(evt){
     this._prevHTML = setHTML = Prism['highlight'](code, md);
   }
   this._prevCode = code;
-  // Prism.highlightElement(this); // bit messy + unnecessary + strips leading newlines :(
 
   if(setHTML !== undefined){
     if(!/\n$/.test(code)) {
@@ -1016,13 +1011,6 @@ Editor.prototype.keydown = function(evt){
         evt.preventDefault();
       }
 
-      break;
-    case 191:
-      // if(cmdOrCtrl && !evt.altKey) {
-      //   that.action('comment', { lang: this.id });
-      //   return false;
-      // }
-
       break;
   }
 };
@@ -1079,6 +1067,20 @@ Editor.prototype.paste = function(evt){
   var end = this.selMgr.getEnd();
   var selection = start === end ? '' : this.getText().slice(start, end);
 
+  var self = this;
+
+  function applyPasted(pasted){
+    self.undoMgr.action({
+      add: pasted,
+      del: selection,
+      start: start
+    });
+
+    start += pasted.length;
+    self.selMgr.setRange(start, start);
+    self.changed();
+  }
+
   if(evt.clipboardData){
     evt.preventDefault();
 
@@ -1090,15 +1092,14 @@ Editor.prototype.paste = function(evt){
       start: start
     });
 
-    this.undoMgr.action({
-      add: pasted,
-      del: selection,
-      start: start
-    });
+    applyPasted(pasted);
+  }else{
+    // handle IE9 with no clipboardData. Flickers a bit if styles have changed :(
+    setTimeout(function(){
+      var newEnd = self.selMgr.getEnd();
 
-    start += pasted.length;
-    this.selMgr.setRange(start, start);
-    this.changed();
+      applyPasted(self.getText().slice(start, newEnd));
+    }, 0);
   }
 };
 

diff --git a/mdedit.min.js b/mdedit.min.js
diff --git a/src/Editor.js b/src/Editor.js
@@ -71,10 +71,6 @@ Editor.prototype.keyup = function(evt){
   var keyCode = evt && evt.keyCode || 0,
       code = this.getText();
 
-  // if(keyCode < 9 || keyCode == 13 || keyCode > 32 && keyCode < 41) {
-    // $t.trigger('caretmove');
-  // }
-
   if([
     9, 91, 93, 16, 17, 18, // modifiers
     20, // caps lock
@@ -110,7 +106,6 @@ Editor.prototype.changed = function(evt){
     this._prevHTML = setHTML = Prism['highlight'](code, md);
   }
   this._prevCode = code;
-  // Prism.highlightElement(this); // bit messy + unnecessary + strips leading newlines :(
 
   if(setHTML !== undefined){
     if(!/\n$/.test(code)) {
@@ -225,13 +220,6 @@ Editor.prototype.keydown = function(evt){
         evt.preventDefault();
       }
 
-      break;
-    case 191:
-      // if(cmdOrCtrl && !evt.altKey) {
-      //   that.action('comment', { lang: this.id });
-      //   return false;
-      // }
-
       break;
   }
 };
@@ -288,6 +276,20 @@ Editor.prototype.paste = function(evt){
   var end = this.selMgr.getEnd();
   var selection = start === end ? '' : this.getText().slice(start, end);
 
+  var self = this;
+
+  function applyPasted(pasted){
+    self.undoMgr.action({
+      add: pasted,
+      del: selection,
+      start: start
+    });
+
+    start += pasted.length;
+    self.selMgr.setRange(start, start);
+    self.changed();
+  }
+
   if(evt.clipboardData){
     evt.preventDefault();
 
@@ -299,14 +301,13 @@ Editor.prototype.paste = function(evt){
       start: start
     });
 
-    this.undoMgr.action({
-      add: pasted,
-      del: selection,
-      start: start
-    });
+    applyPasted(pasted);
+  }else{
+    // handle IE9 with no clipboardData. Flickers a bit if styles have changed :(
+    setTimeout(function(){
+      var newEnd = self.selMgr.getEnd();
 
-    start += pasted.length;
-    this.selMgr.setRange(start, start);
-    this.changed();
+      applyPasted(self.getText().slice(start, newEnd));
+    }, 0);
   }
 };