1) Sort tags by name.

2) Allow enter for tags.

src/Squidex/app/features/assets/pages/assets-page.component.html

@@ -34,16 +34,14 @@
         <div class="section">
             <h3>Tags</h3>
     
-            <ng-container *ngIf="assetsState.tags | async; let tags">
-                <a class="row tag" *ngFor="let tag of tags | sqxKeys" (click)="toggleTag(tag)" [class.active]="assetsState.isTagSelected(tag)">
-                    <div class="col">
-                        {{tag}}
-                    </div>
-                    <div class="col col-auto">
-                        {{tags[tag]}}
-                    </div>
-                </a>
-            </ng-container>
+            <a class="row tag" *ngFor="let tag of assetsState.tags | async" (click)="toggleTag(tag.name)" [class.active]="assetsState.isTagSelected(tag)">
+                <div class="col">
+                    {{tag.name}}
+                </div>
+                <div class="col col-auto">
+                    {{tag.count}}
+                </div>
+            </a>
         </div>
     </ng-container>
 </sqx-panel>

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

@@ -3,13 +3,16 @@
         {{item}} <i class="icon-close" (click)="remove(i)"></i>
     </span>
 
-    <input type="text" class="blank" [attr.name]="inputName" (keydown)="onKeyDown($event)" [class.hidden]="addInput.disabled" #input
-        (focus)="focus()"
+    <input type="text" class="blank" #input
         (blur)="markTouched()"
+        (focus)="focus()"
         (input)="adjustSize()"
+        (keydown)="onKeyDown($event)"
         [formControl]="addInput"
+        [attr.name]="inputName"
+        [attr.placeholder]="placeholder"
+        [class.hidden]="addInput.disabled"
         autocomplete="off" 
         autocorrect="off"
-        autocapitalize="off"
-        placeholder="+Tag">   
+        autocapitalize="off">   
 </div>

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

@@ -12,6 +12,7 @@ import { Types } from '@app/framework/internal';
 
 const KEY_SPACE = 32;
 const KEY_DELETE = 8;
+const KEY_ENTER = 13;
 
 export interface Converter {
     convert(input: string): any;
@@ -82,9 +83,15 @@ export class TagEditorComponent implements ControlValueAccessor {
     @Input()
     public useDefaultValue = true;
 
+    @Input()
+    public acceptEnter = false;
+
     @Input()
     public class: string;
 
+    @Input()
+    public placeholder = '+Tag';
+
     @Input()
     public inputName = 'tag-editor';
 
@@ -164,7 +171,7 @@ export class TagEditorComponent implements ControlValueAccessor {
     }
 
     public onKeyDown(event: KeyboardEvent) {
-        if (event.keyCode === KEY_SPACE) {
+        if (event.keyCode === KEY_SPACE || (event.keyCode === KEY_ENTER && this.acceptEnter)) {
             const value = <string>this.addInput.value;
 
             if (value && this.converter.isValidInput(value)) {

src/Squidex/app/shared/components/asset.component.html

@@ -68,7 +68,7 @@
                 </div>
             </div>
             <div class="file-tags tags">
-                <sqx-tag-editor [useDefaultValue]="false" [formControl]="tagInput" class="blank"></sqx-tag-editor>
+                <sqx-tag-editor [acceptEnter]="true" [useDefaultValue]="false" [formControl]="tagInput" class="blank"></sqx-tag-editor>
             </div>
             <div class="file-info">
                 <ng-container *ngIf="asset.pixelWidth">{{asset.pixelWidth}}x{{asset.pixelHeight}}px, </ng-container> {{asset.fileSize | sqxFileSize}}

src/Squidex/app/shared/state/assets.state.ts

@@ -35,7 +35,7 @@ interface Snapshot {
 export class AssetsState extends State<Snapshot> {
     public tags =
         this.changes.pipe(map(x => x.tags),
-            distinctUntilChanged());
+            distinctUntilChanged(), map(x => sort(x)));
 
     public assets =
         this.changes.pipe(map(x => x.assets),
@@ -210,5 +210,19 @@ export class AssetsState extends State<Snapshot> {
     }
 }
 
+function sort(tags: { [name: string]: number }) {
+    return Object.keys(tags).sort((a, b) => {
+        if (a < b) {
+            return -1;
+        }
+        if (a > b) {
+            return 1;
+        }
+        return 0;
+    }).map(key => {
+        return { name: key, count: tags[key] };
+    });
+}
+
 @Injectable()
 export class AssetsDialogState extends AssetsState { }