fix(toolbar, reactive-forms): prevent firing submit while clicking …

…toolbar buttons

while using the editor with reactive forms `ngSubmit` is fired while clicking toolbar buttons, now
button type is specified to avoid firing unnecessarily

src/app/ngx-editor/ngx-editor-toolbar/ngx-editor-toolbar.component.html

@@ -1,114 +1,119 @@
 <div class="ngx-toolbar" *ngIf="showToolbar">
   <div class="ngx-toolbar-set">
-    <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('bold')" (click)="triggerCommand('bold')" title="Bold" [disabled]="!enableToolbar">
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('bold')" (click)="triggerCommand('bold')"
+      title="Bold" [disabled]="!enableToolbar">
       <i class="fa fa-bold" aria-hidden="true"></i>
     </button>
-    <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('italic')" (click)="triggerCommand('italic')" title="Italic"
-      [disabled]="!enableToolbar">
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('italic')" (click)="triggerCommand('italic')"
+      title="Italic" [disabled]="!enableToolbar">
       <i class="fa fa-italic" aria-hidden="true"></i>
     </button>
-    <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('underline')" (click)="triggerCommand('underline')" title="Underline"
-      [disabled]="!enableToolbar">
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('underline')" (click)="triggerCommand('underline')"
+      title="Underline" [disabled]="!enableToolbar">
       <i class="fa fa-underline" aria-hidden="true"></i>
     </button>
-    <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('strikeThrough')" (click)="triggerCommand('strikeThrough')"
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('strikeThrough')" (click)="triggerCommand('strikeThrough')"
       title="Strikethrough" [disabled]="!enableToolbar">
       <i class="fa fa-strikethrough" aria-hidden="true"></i>
     </button>
-    <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('superscript')" (click)="triggerCommand('superscript')"
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('superscript')" (click)="triggerCommand('superscript')"
       title="Superscript" [disabled]="!enableToolbar">
       <i class="fa fa-superscript" aria-hidden="true"></i>
     </button>
-    <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('subscript')" (click)="triggerCommand('subscript')" title="Subscript"
-      [disabled]="!enableToolbar">
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('subscript')" (click)="triggerCommand('subscript')"
+      title="Subscript" [disabled]="!enableToolbar">
       <i class="fa fa-subscript" aria-hidden="true"></i>
     </button>
   </div>
   <div class="ngx-toolbar-set">
-    <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('justifyLeft')" (click)="triggerCommand('justifyLeft')"
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('justifyLeft')" (click)="triggerCommand('justifyLeft')"
       title="Justify Left" [disabled]="!enableToolbar">
       <i class="fa fa-align-left" aria-hidden="true"></i>
     </button>
-    <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('justifyCenter')" (click)="triggerCommand('justifyCenter')"
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('justifyCenter')" (click)="triggerCommand('justifyCenter')"
       title="Justify Center" [disabled]="!enableToolbar">
       <i class="fa fa-align-center" aria-hidden="true"></i>
     </button>
-    <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('justifyRight')" (click)="triggerCommand('justifyRight')"
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('justifyRight')" (click)="triggerCommand('justifyRight')"
       title="Justify Right" [disabled]="!enableToolbar">
       <i class="fa fa-align-right" aria-hidden="true"></i>
     </button>
-    <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('justifyFull')" (click)="triggerCommand('justifyFull')"
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('justifyFull')" (click)="triggerCommand('justifyFull')"
       title="Justify" [disabled]="!enableToolbar">
       <i class="fa fa-align-justify" aria-hidden="true"></i>
     </button>
-    <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('indent')" (click)="triggerCommand('indent')" title="Indent"
-      [disabled]="!enableToolbar">
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('indent')" (click)="triggerCommand('indent')"
+      title="Indent" [disabled]="!enableToolbar">
       <i class="fa fa-indent" aria-hidden="true"></i>
     </button>
-    <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('outdent')" (click)="triggerCommand('outdent')" title="Outdent"
-      [disabled]="!enableToolbar">
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('outdent')" (click)="triggerCommand('outdent')"
+      title="Outdent" [disabled]="!enableToolbar">
       <i class="fa fa-outdent" aria-hidden="true"></i>
     </button>
   </div>
   <div class="ngx-toolbar-set">
-    <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('cut')" (click)="triggerCommand('cut')" title="Cut" [disabled]="!enableToolbar">
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('cut')" (click)="triggerCommand('cut')" title="Cut"
+      [disabled]="!enableToolbar">
       <i class="fa fa-scissors" aria-hidden="true"></i>
     </button>
-    <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('copy')" (click)="triggerCommand('copy')" title="Copy" [disabled]="!enableToolbar">
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('copy')" (click)="triggerCommand('copy')"
+      title="Copy" [disabled]="!enableToolbar">
       <i class="fa fa-files-o" aria-hidden="true"></i>
     </button>
-    <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('delete')" (click)="triggerCommand('delete')" title="Delete"
-      [disabled]="!enableToolbar">
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('delete')" (click)="triggerCommand('delete')"
+      title="Delete" [disabled]="!enableToolbar">
       <i class="fa fa-trash" aria-hidden="true"></i>
     </button>
-    <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('removeFormat')" (click)="triggerCommand('removeFormat')"
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('removeFormat')" (click)="triggerCommand('removeFormat')"
       title="Clear Formatting" [disabled]="!enableToolbar">
       <i class="fa fa-eraser" aria-hidden="true"></i>
     </button>
-    <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('undo')" (click)="triggerCommand('undo')" title="Undo" [disabled]="!enableToolbar">
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('undo')" (click)="triggerCommand('undo')"
+      title="Undo" [disabled]="!enableToolbar">
       <i class="fa fa-undo" aria-hidden="true"></i>
     </button>
-    <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('redo')" (click)="triggerCommand('redo')" title="Redo" [disabled]="!enableToolbar">
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('redo')" (click)="triggerCommand('redo')"
+      title="Redo" [disabled]="!enableToolbar">
       <i class="fa fa-repeat" aria-hidden="true"></i>
     </button>
   </div>
   <div class="ngx-toolbar-set">
-    <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('paragraph')" (click)="triggerCommand('insertParagraph')"
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('paragraph')" (click)="triggerCommand('insertParagraph')"
       title="Paragraph" [disabled]="!enableToolbar">
       <i class="fa fa-paragraph" aria-hidden="true"></i>
     </button>
-    <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('blockquote')" (click)="triggerCommand('blockquote')" title="Blockquote"
-      [disabled]="!enableToolbar">
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('blockquote')" (click)="triggerCommand('blockquote')"
+      title="Blockquote" [disabled]="!enableToolbar">
       <i class="fa fa-quote-left" aria-hidden="true"></i>
     </button>
-    <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('removeBlockquote')" (click)="triggerCommand('removeBlockquote')"
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('removeBlockquote')" (click)="triggerCommand('removeBlockquote')"
       title="Remove Blockquote" [disabled]="!enableToolbar">
       <i class="fa fa-quote-right" aria-hidden="true"></i>
     </button>
-    <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('horizontalLine')" (click)="triggerCommand('insertHorizontalRule')"
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('horizontalLine')" (click)="triggerCommand('insertHorizontalRule')"
       title="Horizontal Line" [disabled]="!enableToolbar">
       <i class="fa fa-minus" aria-hidden="true"></i>
     </button>
-    <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('orderedList')" (click)="triggerCommand('insertUnorderedList')"
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('orderedList')" (click)="triggerCommand('insertUnorderedList')"
       title="Unodered List" [disabled]="!enableToolbar">
       <i class="fa fa-list-ul" aria-hidden="true"></i>
     </button>
-    <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('unorderedList')" (click)="triggerCommand('insertOrderedList')"
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('unorderedList')" (click)="triggerCommand('insertOrderedList')"
       title="Ordered List" [disabled]="!enableToolbar">
       <i class="fa fa-list-ol" aria-hidden="true"></i>
     </button>
   </div>
   <div class="ngx-toolbar-set">
-    <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('link')" (click)="triggerCommand('link')" title="Insert/Edit Link"
-      [disabled]="!enableToolbar">
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('link')" (click)="triggerCommand('link')"
+      title="Insert/Edit Link" [disabled]="!enableToolbar">
       <i class="fa fa-link" aria-hidden="true"></i>
     </button>
-    <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('unlink')" (click)="triggerCommand('unlink')" title="Unlink"
-      [disabled]="!enableToolbar">
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('unlink')" (click)="triggerCommand('unlink')"
+      title="Unlink" [disabled]="!enableToolbar">
       <i class="fa fa-chain-broken" aria-hidden="true"></i>
     </button>
-    <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('image')" (click)="triggerCommand('image')" title="Insert Image"
-      [disabled]="!enableToolbar">
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('image')" (click)="triggerCommand('image')"
+      title="Insert Image" [disabled]="!enableToolbar">
       <i class="fa fa-picture-o" aria-hidden="true"></i>
     </button>
   </div>