feat(tagsInput): Add addOnPaste and pasteSplitPattern options

Add two new options, addOnPaste and pasteSplitPattern, that enable the
tagsInput directive to automatically split pasted text into tags.

src/tags-input.js

@@ -24,6 +24,8 @@
  * @param {boolean=} [addOnSpace=false] Flag indicating that a new tag will be added on pressing the SPACE key.
  * @param {boolean=} [addOnComma=true] Flag indicating that a new tag will be added on pressing the COMMA key.
  * @param {boolean=} [addOnBlur=true] Flag indicating that a new tag will be added when the input field loses focus.
+ * @param {boolean=} [addOnPaste=false] Flag indicating that the text pasted into the input field will be split into tags.
+ * @param {string=} [pasteSplitPattern=,] Regular expression used to split the pasted text into tags.
  * @param {boolean=} [replaceSpacesWithDashes=true] Flag indicating that spaces will be replaced with dashes.
  * @param {string=} [allowedTagsPattern=.+] Regular expression that determines whether a new tag is valid.
  * @param {boolean=} [enableEditingLastTag=false] Flag indicating that the last tag will be moved back into
@@ -140,6 +142,8 @@ tagsInput.directive('tagsInput', function($timeout, $document, tagsInputConfig)
                 addOnSpace: [Boolean, false],
                 addOnComma: [Boolean, true],
                 addOnBlur: [Boolean, true],
+                addOnPaste: [Boolean, false],
+                pasteSplitPattern: [RegExp, /,/],
                 allowedTagsPattern: [RegExp, /.+/],
                 enableEditingLastTag: [Boolean, false],
                 minTags: [Number, 0],
@@ -238,6 +242,9 @@ tagsInput.directive('tagsInput', function($timeout, $document, tagsInputConfig)
                                 events.trigger('input-blur');
                             }
                         });
+                    },
+                    paste: function($event) {
+                        events.trigger('input-paste', $event);
                     }
                 },
                 host: {
@@ -316,6 +323,18 @@ tagsInput.directive('tagsInput', function($timeout, $document, tagsInputConfig)
 
                         event.preventDefault();
                     }
+                })
+                .on('input-paste', function(event) {
+                    if (options.addOnPaste) {
+                        var data = event.clipboardData.getData('text/plain');
+                        var tags = data.split(options.pasteSplitPattern);
+                        if (tags.length > 1) {
+                            tags.forEach(function(tag) {
+                                tagList.addText(tag);
+                            });
+                            event.preventDefault();
+                        }
+                    }
                 });
         }
     };

templates/tags-input.html

@@ -12,6 +12,7 @@
            ng-keydown="eventHandlers.input.keydown($event)"
            ng-focus="eventHandlers.input.focus($event)"
            ng-blur="eventHandlers.input.blur($event)"
+           ng-paste="eventHandlers.input.paste($event)"
            ng-trim="false"
            ng-class="{'invalid-tag': newTag.invalid}"
            ti-bind-attrs="{type: options.type, placeholder: options.placeholder, tabindex: options.tabindex}"

test/tags-input.spec.js

@@ -574,6 +574,100 @@ describe('tags-input directive', function() {
         });
     });
 
+    describe('add-on-paste option', function() {
+        var eventData;
+
+        beforeEach(function() {
+            eventData = {
+                clipboardData: jasmine.createSpyObj('clipboardData', ['getData']),
+                preventDefault: jasmine.createSpy()
+            };
+        });
+
+        it('initializes the option to false', function() {
+            // Arrange/Act
+            compile();
+
+            // Assert
+            expect(isolateScope.options.addOnPaste).toBe(false);
+        });
+
+        it('splits the pasted text into tags if there is more than one tag and the option is true', function() {
+            // Arrange
+            compile('add-on-paste="true"');
+            eventData.clipboardData.getData.and.returnValue('tag1, tag2, tag3');
+
+            // Act
+            var event = jQuery.Event('paste', eventData);
+            getInput().trigger(event);
+
+            // Assert
+            expect($scope.tags).toEqual([
+                { text: 'tag1' },
+                { text: 'tag2' },
+                { text: 'tag3' }
+            ]);
+            expect(eventData.preventDefault).toHaveBeenCalled();
+        });
+
+        it('doesn\'t split the pasted text into tags if there is just one tag and the option is true', function() {
+            // Arrange
+            compile('add-on-paste="true"');
+            eventData.clipboardData.getData.and.returnValue('tag1');
+
+            // Act
+            var event = jQuery.Event('paste', eventData);
+            getInput().trigger(event);
+
+            // Assert
+            expect($scope.tags).toEqual([]);
+            expect(eventData.preventDefault).not.toHaveBeenCalled();
+        });
+
+        it('doesn\'t split the pasted text into tags if the option is false', function() {
+            // Arrange
+            compile('add-on-paste="false"');
+            eventData.clipboardData.getData.and.returnValue('tag1, tag2, tag3');
+
+            // Act
+            var event = jQuery.Event('paste', eventData);
+            getInput().trigger(event);
+
+            // Assert
+            expect($scope.tags).toEqual([]);
+            expect(eventData.preventDefault).not.toHaveBeenCalled();
+        });
+
+        describe('paste-split-pattern option', function() {
+            it('initializes the option to comma', function() {
+                // Arrange/Act
+                compile();
+
+                // Assert
+                expect(isolateScope.options.pasteSplitPattern).toEqual(/,/);
+            });
+
+            it('splits the pasted text into tags using the provided pattern', function() {
+                // Arrange
+                compile('add-on-paste="true"', 'paste-split-pattern="[,;|]"');
+                eventData.clipboardData.getData.and.returnValue('tag1, tag2; tag3| tag4');
+
+                // Act
+                var event = jQuery.Event('paste', eventData);
+                getInput().trigger(event);
+
+                // Assert
+                expect($scope.tags).toEqual([
+                    { text: 'tag1' },
+                    { text: 'tag2' },
+                    { text: 'tag3' },
+                    { text: 'tag4' }
+                ]);
+                expect(eventData.preventDefault).toHaveBeenCalled();
+            });
+        });
+    });
+
     describe('type option', function() {
         it('sets the input\'s type property', function() {
             SUPPORTED_INPUT_TYPES.forEach(function(type) {
@@ -701,7 +795,7 @@ describe('tags-input directive', function() {
             compile();
 
             // Assert
-            expect(isolateScope.options.allowedTagsPattern.toString()).toBe('/.+/');
+            expect(isolateScope.options.allowedTagsPattern).toEqual(/.+/);
         });
     });
 

test/test-page.html

@@ -45,7 +45,7 @@
 </head>
 <body ng-controller="Ctrl">
     <p></p>
-    <tags-input ng-model="tags" type="email" add-on-blur="false" ng-focus="focus()" ng-blur="blur()">
+    <tags-input ng-model="tags" add-on-blur="false" ng-focus="focus()" ng-blur="blur()" add-on-paste="true" paste-split-pattern="[,;|]">
         <auto-complete source="loadItems($query)" load-on-down-arrow="true"></auto-complete>
     </tags-input>
     <p></p>