[feature] Paste from clipboard

src/cellmanager.js

@@ -153,6 +153,22 @@ export default class CellManager {
                 this.instance.showToastMessage(message, 2);
             }
         });
+
+        if (this.options.pasteFromClipboard) {
+            this.keyboard.on('ctrl+v', (e) => {
+                // hack
+                // https://stackoverflow.com/a/2177059/5353542
+                this.instance.pasteTarget.focus();
+
+                setTimeout(() => {
+                    const data = this.instance.pasteTarget.value;
+                    this.instance.pasteTarget.value = '';
+                    this.pasteContentInCell(data);
+                }, 10);
+
+                return false;
+            });
+        }
     }
 
     bindMouseEvents() {
@@ -541,6 +557,30 @@ export default class CellManager {
         return rows.reduce((total, row) => total + row.length, 0);
     }
 
+    pasteContentInCell(data) {
+        if (!this.$focusedCell) return;
+
+        const matrix = data
+            .split('\n')
+            .map(row => row.split('\t'))
+            .filter(row => row.length && row.every(it => it));
+
+        let { colIndex, rowIndex } = $.data(this.$focusedCell);
+
+        let focusedCell = {
+            colIndex: +colIndex,
+            rowIndex: +rowIndex
+        };
+
+        matrix.forEach((row, i) => {
+            let rowIndex = i + focusedCell.rowIndex;
+            row.forEach((cell, j) => {
+                let colIndex = j + focusedCell.colIndex;
+                this.updateCell(colIndex, rowIndex, cell);
+            });
+        });
+    }
+
     activateFilter(colIndex) {
         this.columnmanager.toggleFilter();
         this.columnmanager.focusFilter(colIndex);

src/datatable.js

@@ -75,6 +75,7 @@ class DataTable {
                     </span>
                 </div>
                 <div class="dt-toast"></div>
+                <textarea class="dt-paste-target"></textarea>
             </div>
         `;
 
@@ -83,6 +84,7 @@ class DataTable {
         this.bodyScrollable = $('.dt-scrollable', this.wrapper);
         this.freezeContainer = $('.dt-freeze', this.wrapper);
         this.toastMessage = $('.dt-toast', this.wrapper);
+        this.pasteTarget = $('.dt-paste-target', this.wrapper);
     }
 
     refresh(data, columns) {

src/defaults.js

@@ -51,5 +51,6 @@ export default {
     inlineFilters: false,
     treeView: false,
     checkedRowStatus: true,
-    dynamicRowHeight: false
+    dynamicRowHeight: false,
+    pasteFromClipboard: false
 };

src/keyboard.js

@@ -13,7 +13,8 @@ const KEYCODES = {
     9: 'tab',
     27: 'esc',
     67: 'c',
-    70: 'f'
+    70: 'f',
+    86: 'v'
 };
 
 export default class Keyboard {

src/style.css

@@ -249,6 +249,11 @@
 	}
 }
 
+.dt-paste-target {
+	position: fixed;
+	left: -999em;
+}
+
 body.dt-resize {
 	cursor: col-resize;
 }