added copy/paste functionality

Author: Jonathan Yannes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-web-terminal",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "A web-based terminal facade built on reactjs",
   "repository": {
     "type": "git",

src/components/react-web-terminal/react-web-terminal-cursor.jsx

@@ -22,14 +22,14 @@ export default class WebTerminalCursor extends React.Component {
       this.setState(this.state);
     }
 
-    moveLeft() {
+    moveLeft(amount = 1) {
       if (this.state.cursorPos > 0)
-        this.setCursorPos(this.getCursorPos() - 1);
+        this.setCursorPos(this.getCursorPos() - amount);
     }
 
-    moveRight() {
+    moveRight(amount = 1) {
       if (this.state.cursorPos < this.getInput().length)
-        this.setCursorPos(this.getCursorPos() + 1);
+        this.setCursorPos(this.getCursorPos() + amount);
     }
 
     moveToBegining() {

src/components/react-web-terminal/react-web-terminal-input-buffer.jsx

@@ -13,14 +13,20 @@ export default class WebTerminalInputBuffer extends React.Component {
   }
 
   getInput() {
-      return this.state.input;
+    return this.state.input;
   }
 
   resetInputBuffer() {
     this.state.input = '';
     this.cursor.moveToBegining();
   }
 
+  insertText(text) {
+    this.state.input = this.getPreCursorStr() + text + this.cursor.getCursorChar() + this.getPostCursorStr();
+    this.cursor.moveRight(text.length);
+    this.setState(this.state);
+  }
+
   handleKeyDown(e) {
     const key = getKey(e);
     if (key === 'Enter') {
@@ -36,13 +42,24 @@ export default class WebTerminalInputBuffer extends React.Component {
     } else if (key === 'ArrowRight') {
       this.cursor.moveRight();
       this.forceUpdate();
+    } else if (navigator.appVersion.indexOf('Mac') !== -1 && e.metaKey && key === 'c') {
+      return;
+    } else if (navigator.appVersion.indexOf('Mac') !== -1 && e.metaKey && key === 'v') {
+      return;
+    } else if (e.ctrlKey && key === 'c') {
+      return;
+    } else if (e.ctrlKey && key === 'v') {
+      return;
     } else if (nonPrintableKeys.indexOf(key) === -1) {
-      this.state.input = this.getPreCursorStr() + key + this.cursor.getCursorChar() + this.getPostCursorStr();
-      this.cursor.moveRight();
-      this.setState(this.state);
+      this.insertText(key);
     }
   }
 
+  onPaste(e) {
+    const pastedText = e.clipboardData.getData('Text');
+    this.insertText(pastedText);
+  }
+
   onCommandEntered() {
     if (this.props.onCommandEntered) this.props.onCommandEntered();
   }

src/components/react-web-terminal/react-web-terminal-input.jsx

@@ -23,6 +23,10 @@ export default class WebTerminalInput extends React.Component {
     this.buffer.handleKeyDown(e);
   }
 
+  onPaste(e) {
+    this.buffer.onPaste(e);
+  }
+
   onCommandEntered() {
     if (this.props.onCommandEntered) this.props.onCommandEntered();
   }

src/components/react-web-terminal/react-web-terminal.jsx

@@ -54,6 +54,10 @@ export default class WebTerminal extends React.Component {
     if (!this.keyStrokeMapHandler(e)) this.inputComp.handleKeyDown(e);
   }
 
+  onPaste(e) {
+    this.inputComp.onPaste(e);
+  }
+
   onCommandEntered() {
     this.addToLog(this.inputComp.state.prompt + this.input(), 'react-web-terminal-input');
 
@@ -82,7 +86,7 @@ export default class WebTerminal extends React.Component {
     });
 
     return (
-      <div tabIndex="-1" ref={(root) => { this.root = root }} className="react-web-terminal" onKeyDown={this.handleKeyDown.bind(this)}>
+      <div tabIndex="-1" ref={(root) => { this.root = root }} className="react-web-terminal" onKeyDown={this.handleKeyDown.bind(this)} onPaste={this.onPaste.bind(this)}>
         {logNodes}
         <WebTerminalInput ref={(input) => { this.inputComp = input }} prompt={this.props.prompt} onCommandEntered={this.onCommandEntered.bind(this)} />
       </div>