From 6b5135d3ac65e53877cd451770ba3c84a1a58438 Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Tue, 22 Jan 2019 18:29:49 +0100
Subject: [PATCH] Paste event.

---
 .../shared/assets-editor.component.html       |  4 ++--
 .../shared/assets-editor.component.scss       |  1 +
 .../content/shared/assets-editor.component.ts | 20 ++++++++++++++++++-
 .../angular/forms/file-drop.directive.ts      | 10 ++++------
 .../angular/forms/tag-editor.component.ts     |  2 +-
 .../components/assets-list.component.html     |  4 ++--
 .../components/assets-list.component.ts       | 18 ++++++++++++++++-
 7 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/src/Squidex/app/features/content/shared/assets-editor.component.html b/src/Squidex/app/features/content/shared/assets-editor.component.html
index 958d0a71a..176b2dfb9 100644
--- a/src/Squidex/app/features/content/shared/assets-editor.component.html
+++ b/src/Squidex/app/features/content/shared/assets-editor.component.html
@@ -1,8 +1,8 @@
-<div class="assets-container" [class.disabled]="isDisabled">
+<div class="assets-container" [class.disabled]="isDisabled" (paste)="pasteFiles($event)" tabindex="1000">
     <div class="header list">
         <div class="row no-gutters">
             <div class="col">
-                <div class="drop-area align-items-center" (sqxFileDrop)="addFiles($event)" (click)="assetsDialog.show()">
+                <div class="drop-area align-items-center" (click)="assetsDialog.show()">
                     Drop files or click here to add assets.
                 </div>
             </div>
diff --git a/src/Squidex/app/features/content/shared/assets-editor.component.scss b/src/Squidex/app/features/content/shared/assets-editor.component.scss
index bbbe97e4d..498a0bcc2 100644
--- a/src/Squidex/app/features/content/shared/assets-editor.component.scss
+++ b/src/Squidex/app/features/content/shared/assets-editor.component.scss
@@ -30,6 +30,7 @@
 .body {
     margin-bottom: -.25rem;
     margin-top: 1rem;
+    min-height: 1px;
 }
 
 .unrow {
diff --git a/src/Squidex/app/features/content/shared/assets-editor.component.ts b/src/Squidex/app/features/content/shared/assets-editor.component.ts
index 49214df36..5a59e5951 100644
--- a/src/Squidex/app/features/content/shared/assets-editor.component.ts
+++ b/src/Squidex/app/features/content/shared/assets-editor.component.ts
@@ -115,6 +115,10 @@ export class AssetsEditorComponent implements ControlValueAccessor, OnInit, OnDe
         this.changeDetector.markForCheck();
     }
 
+    public noop() {
+        return;
+    }
+
     public registerOnChange(fn: any) {
         this.callChange = fn;
     }
@@ -123,9 +127,23 @@ export class AssetsEditorComponent implements ControlValueAccessor, OnInit, OnDe
         this.callTouched = fn;
     }
 
+    public pasteFiles(event: ClipboardEvent) {
+        for (let i = 0; i < event.clipboardData.items.length; i++) {
+            const file = event.clipboardData.items[i].getAsFile();
+
+            if (file) {
+                this.newAssets = this.newAssets.pushFront(file);
+            }
+        }
+    }
+
     public addFiles(files: FileList) {
         for (let i = 0; i < files.length; i++) {
-            this.newAssets = this.newAssets.pushFront(files[i]);
+            const file = files[i];
+
+            if (file) {
+                this.newAssets = this.newAssets.pushFront(file);
+            }
         }
     }
 
diff --git a/src/Squidex/app/framework/angular/forms/file-drop.directive.ts b/src/Squidex/app/framework/angular/forms/file-drop.directive.ts
index 0238b1e04..4167ed6be 100644
--- a/src/Squidex/app/framework/angular/forms/file-drop.directive.ts
+++ b/src/Squidex/app/framework/angular/forms/file-drop.directive.ts
@@ -7,6 +7,8 @@
 
 import { Directive, ElementRef, EventEmitter, HostListener, Output, Renderer2 } from '@angular/core';
 
+import { Types } from './../../utils/types';
+
 @Directive({
     selector: '[sqxFileDrop]'
 })
@@ -88,9 +90,9 @@ export class FileDropDirective {
             return false;
         }
 
-        if (isFunction(types.indexOf)) {
+        if (Types.isFunction(types.indexOf)) {
             return types.indexOf('Files') !== -1;
-        } else if (isFunction(types.contains)) {
+        } else if (Types.isFunction(types.contains)) {
             return types.contains('Files');
         } else {
             return false;
@@ -98,10 +100,6 @@ export class FileDropDirective {
     }
 }
 
-function isFunction(obj: any): boolean {
-    return !!(obj && obj.constructor && obj.call && obj.apply);
-}
-
 interface DragDropEvent extends MouseEvent {
     readonly dataTransfer: DataTransfer;
 }
\ No newline at end of file
diff --git a/src/Squidex/app/framework/angular/forms/tag-editor.component.ts b/src/Squidex/app/framework/angular/forms/tag-editor.component.ts
index dedd95008..0fa053881 100644
--- a/src/Squidex/app/framework/angular/forms/tag-editor.component.ts
+++ b/src/Squidex/app/framework/angular/forms/tag-editor.component.ts
@@ -211,7 +211,7 @@ export class TagEditorComponent implements AfterViewInit, ControlValueAccessor,
     }
 
     public markTouched() {
-        this.selectValue(this.addInput.value);
+        this.selectValue(this.addInput.value, true);
 
         this.resetAutocompletion();
         this.resetFocus();
diff --git a/src/Squidex/app/shared/components/assets-list.component.html b/src/Squidex/app/shared/components/assets-list.component.html
index 2cddf2d30..d2f849a28 100644
--- a/src/Squidex/app/shared/components/assets-list.component.html
+++ b/src/Squidex/app/shared/components/assets-list.component.html
@@ -1,4 +1,4 @@
-<div class="file-drop" (sqxFileDrop)="addFiles($event)" *ngIf="!isDisabled">
+<div class="file-drop" (sqxFileDrop)="addFiles($event)" *ngIf="!isDisabled" (paste)="pasteFiles($event)">
     <h3 class="file-drop-header">Drop files here to upload</h3>
 
     <div class="file-drop-or">or</div>
@@ -14,7 +14,7 @@
     <div class="file-drop-info">Drop file on existing item to replace the asset with a newer version.</div>
 </div>
 
-<div class="row assets" [class.unrow]="isListView" *ngIf="state.tagsNames | async; let tags">
+<div class="row assets" [class.unrow]="isListView" *ngIf="state.tagsNames | async; let tags" (paste)="pasteFiles($event)">
     <sqx-asset *ngFor="let file of newFiles" [initFile]="file"
         [isListView]="isListView"
         (failed)="remove(file)" 
diff --git a/src/Squidex/app/shared/components/assets-list.component.ts b/src/Squidex/app/shared/components/assets-list.component.ts
index 1193dede2..7909634b5 100644
--- a/src/Squidex/app/shared/components/assets-list.component.ts
+++ b/src/Squidex/app/shared/components/assets-list.component.ts
@@ -78,10 +78,26 @@ export class AssetsListComponent {
         this.newFiles = this.newFiles.remove(file);
     }
 
+    public pasteFiles(event: ClipboardEvent) {
+        for (let i = 0; i < event.clipboardData.items.length; i++) {
+            const file = event.clipboardData.items[i].getAsFile();
+
+            if (file) {
+                this.newFiles = this.newFiles.pushFront(file);
+            }
+        }
+    }
+
     public addFiles(files: FileList) {
         for (let i = 0; i < files.length; i++) {
-            this.newFiles = this.newFiles.pushFront(files[i]);
+            const file = files[i];
+
+            if (file) {
+                this.newFiles = this.newFiles.pushFront(file);
+            }
         }
+
+        return true;
     }
 
     public trackByAsset(index: number, asset: AssetDto) {