Copy and paste support for tag editors.

.gitignore

@@ -5,6 +5,7 @@
 *.log
 
 .vscode
+.awcache
 
 # Build results
 bin/

src/Squidex/app/features/schemas/pages/schema/field-wizard.component.ts

@@ -24,7 +24,7 @@ import {
 })
 export class FieldWizardComponent implements OnInit {
     @ViewChild('nameInput')
-    public nameInput: ElementRef;
+    public nameInput: ElementRef<HTMLElement>;
 
     @Input()
     public schema: SchemaDetailsDto;

src/Squidex/app/framework/angular/forms/iframe-editor.component.ts

@@ -32,7 +32,7 @@ export class IFrameEditorComponent implements ControlValueAccessor, AfterViewIni
     private plugin: HTMLIFrameElement;
 
     @ViewChild('iframe')
-    public iframe: ElementRef;
+    public iframe: ElementRef<HTMLIFrameElement>;
 
     @Input()
     public set url(value: string) {

src/Squidex/app/framework/angular/forms/slider.component.ts

@@ -32,10 +32,10 @@ export class SliderComponent implements ControlValueAccessor {
     private isDragging = false;
 
     @ViewChild('bar')
-    public bar: ElementRef;
+    public bar: ElementRef<Element>;
 
     @ViewChild('thumb')
-    public thumb: ElementRef;
+    public thumb: ElementRef<Element>;
 
     @Input()
     public min = 0;

src/Squidex/app/framework/angular/forms/tag-editor.component.html

@@ -9,6 +9,9 @@
 
         <input type="text" class="blank" #input
             (blur)="markTouched()"
+            (cut)="onCut($event)"
+            (copy)="onCopy($event)"
+            (paste)="onPaste($event)"
             (focus)="focus()"
             (keydown)="onKeyDown($event)"
             [formControl]="addInput"

src/Squidex/app/framework/angular/forms/tag-editor.component.ts

@@ -115,10 +115,10 @@ export class TagEditorComponent implements AfterViewInit, ControlValueAccessor,
     public inputName = 'tag-editor';
 
     @ViewChild('form')
-    public formElement: ElementRef;
+    public formElement: ElementRef<Element>;
 
     @ViewChild('input')
-    public inputElement: ElementRef;
+    public inputElement: ElementRef<HTMLInputElement>;
 
     public hasFocus = false;
 
@@ -340,6 +340,51 @@ export class TagEditorComponent implements AfterViewInit, ControlValueAccessor,
         this.selectIndex(this.suggestedIndex + 1);
     }
 
+    public onCut(event: ClipboardEvent) {
+        if (!this.hasSelection()) {
+            this.onCopy(event);
+
+            this.updateItems([]);
+        }
+    }
+
+    public onCopy(event: ClipboardEvent) {
+        if (!this.hasSelection()) {
+            event.clipboardData.setData('text/plain', this.items.filter(x => !!x).join(','));
+
+            event.preventDefault();
+        }
+    }
+
+    public onPaste(event: ClipboardEvent) {
+        const value = event.clipboardData.getData('text/plain');
+
+        if (value) {
+            this.resetForm();
+
+            const values = [...this.items];
+
+            for (let part of value.split(',')) {
+                const converted = this.converter.convert(part);
+
+                if (converted) {
+                    values.push(converted);
+                }
+            }
+
+            this.updateItems(values);
+        }
+
+        event.preventDefault();
+    }
+
+    private hasSelection() {
+        const s = this.inputElement.nativeElement.selectionStart;
+        const e = this.inputElement.nativeElement.selectionEnd;
+
+        return s && e && (e - s) > 0;
+    }
+
     private updateItems(items: any[]) {
         this.items = items;
 

src/Squidex/app/framework/angular/modals/modal-dialog.component.ts

@@ -47,10 +47,10 @@ export class ModalDialogComponent implements AfterViewInit {
     public closed = new EventEmitter();
 
     @ViewChild('tabsElement')
-    public tabsElement: ElementRef;
+    public tabsElement: ElementRef<ParentNode>;
 
     @ViewChild('footerElement')
-    public footerElement: ElementRef;
+    public footerElement: ElementRef<ParentNode>;
 
     public hasTabs = false;
     public hasFooter = false;

src/Squidex/app/framework/angular/panel.component.ts

@@ -59,7 +59,7 @@ export class PanelComponent implements AfterViewInit, OnDestroy, OnInit {
     public sidebarClass = '';
 
     @ViewChild('panel')
-    public panel: ElementRef;
+    public panel: ElementRef<HTMLElement>;
 
     constructor(
         private readonly container: PanelContainerDirective,