矢印キー上下でチャット入力とチャットパレットを移動。

src/app/component/chat-input/chat-input.component.html

@@ -69,7 +69,7 @@
         <input *ngIf="onlyCharacters" type="color" style="width:1em; margin-left: 3px" [(ngModel)]="paletteColor" [ngModelOptions]="{standalone: true}">
         <textarea class="chat-input" [placeholder]="!onlyCharacters ? 'Ctrl+⇅:履歴 &#x23CE;:送信 Shift+&#x23CE;:改行　チャットパレットの色を優先' : 'Ctrl+⇅:履歴 &#x23CE;:送信 Shift+&#x23CE;:改行　白(255,255,255):あなたの色'" [(ngModel)]="text"
           [ngModelOptions]="{standalone: true}" (input)="onInput()" (keydown.enter)="sendChat($event)" (focus)="isFilterTextUpdate = true" (blur)="isFilterTextUpdate = false"
-          (keydown.control.arrowup)="moveHistory($event, 1)" (keydown.control.arrowdown)="moveHistory($event, -1)"
+          (keydown.control.arrowup)="moveHistory($event, 1)" (keydown.control.arrowdown)="moveHistory($event, -1)" (keydown.arrowdown)="moveTo($event)"
           #textArea></textarea>
         <button type="submit" (click)="sendChat(null)"><b>SEND</b></button>
       </form>

src/app/component/chat-input/chat-input.component.ts

@@ -39,7 +39,7 @@ interface StandGroup {
   styleUrls: ['./chat-input.component.css']
 })
 export class ChatInputComponent implements OnInit, OnDestroy {
-  @ViewChild('textArea', { static: true }) textAreaElementRef: ElementRef;
+  @ViewChild('textArea', { static: true }) textAreaElementRef: ElementRef<HTMLTextAreaElement>;
 
   @Input() onlyCharacters: boolean = false;
   @Input() chatTabidentifier: string = '';
@@ -78,6 +78,8 @@ export class ChatInputComponent implements OnInit, OnDestroy {
   get filterText(): string { return this._filterText };
   set filterText(filterText: string) { this._filterText = filterText; this.filterTextChange.emit(filterText); }
 
+  @Output() moveToPalette = new EventEmitter();
+
   @Output() chat = new EventEmitter<{ 
     text: string, gameType: string, sendFrom: string, sendTo: string,
     color?: string, 
@@ -352,6 +354,15 @@ export class ChatInputComponent implements OnInit, OnDestroy {
     this.calcFitHeight();
   }
 
+  moveTo(e: Event) {
+    if (!this.textAreaElementRef) return;
+    if (this.textAreaElementRef.nativeElement.selectionStart != this.textAreaElementRef.nativeElement.selectionEnd) return;
+    if (this.textAreaElementRef.nativeElement.selectionStart === this.textAreaElementRef.nativeElement.value.length) {
+      this.moveToPalette.emit();
+      e.preventDefault();
+    }
+  }
+
    sendChat(event: Partial<KeyboardEvent>) {
     if (event) event.preventDefault();
     //if (!this.text.length) return;

src/app/component/chat-palette/chat-palette.component.html

@@ -8,15 +8,15 @@
         </label>
       </div>
     </form>
-    <chat-input [onlyCharacters]="true" [chatTabidentifier]="chatTabidentifier" 
+    <chat-input [onlyCharacters]="true" [chatTabidentifier]="chatTabidentifier" (moveToPalette)="moveToPalette()"
     [(gameType)]="gameType" [(sendFrom)]="sendFrom" [(text)]="text" [(filterText)]="filterText" (chat)="sendChat($event)" #chatInput></chat-input>
     <div *ngIf="isEdit" class="edit-info" style="display: flex">
       <div style="width: calc(100% - 1.6em); text-align: center"><i class="material-icons" style="vertical-align: middle; font-size: 1.05rem">info_outline</i> チャットパレット編集中</div>
       <div style="width: 1.6em; text-align: right"><button style="padding: 2px 6px; vertical-align: baseline; font-size: x-small; height: 1.24rem" (click)="helpChatPallet()">?</button></div>
     </div>
   </div>
   <div *ngIf="!isEdit" style="flex-grow: 1; height: 0; min-height: 100px;">
-    <select #chatPlette class="palette" style="overflow-y: auto;" size="5" (keydown.enter)="chatInputComponent.sendChat(null)" (click)="clickPalette(chatPlette.value)">
+    <select #chatPlette class="palette" style="overflow-y: auto;" size="5" (focus)="arrowPalette()" (keydown.arrowUp)="moveToInput($event)" (keyup.arrowUp)="arrowPalette()" (keyup.arrowDown)="arrowPalette()" (keydown.enter)="enterPalette(chatPlette.value)" (click)="clickPalette(chatPlette.value)">
       <ng-container *ngIf="palette">
         <ng-container *ngFor="let palette of palette.getPalette()">
           <option *ngIf="filter(palette)" value="{{palette}}" [style.color]="color">{{palette}}</option>

src/app/component/chat-palette/chat-palette.component.ts

@@ -117,6 +117,38 @@ export class ChatPaletteComponent implements OnInit, OnDestroy {
     }
   }
 
+  moveToInput(e: Event) {
+    if (!this.chatPletteElementRef.nativeElement) return;
+    const selectedPaletteIndex = this.chatPletteElementRef.nativeElement.selectedIndex;
+    if (selectedPaletteIndex <= 0) {
+      this.chatInputComponent.textAreaElementRef.nativeElement.focus();
+      e.preventDefault();
+    }
+  }
+
+  arrowPalette() {
+    if (!this.chatPletteElementRef.nativeElement) return;
+    this.selectedPaletteIndex = this.chatPletteElementRef.nativeElement.selectedIndex;
+    if (this.selectedPaletteIndex >= 0 && this.chatPletteElementRef.nativeElement.options[this.selectedPaletteIndex]) {
+      this.text = this.palette.evaluate(this.chatPletteElementRef.nativeElement.options[this.selectedPaletteIndex].value, this.character.rootDataElement);
+      let textArea: HTMLTextAreaElement = this.chatInputComponent.textAreaElementRef.nativeElement;
+      textArea.value = this.text;
+    }
+  }
+
+  enterPalette(line: string) {
+    if (!this.chatPletteElementRef.nativeElement) return;
+    this.text = this.palette.evaluate(line, this.character.rootDataElement);
+    this.chatInputComponent.sendChat(null);
+  }
+
+  moveToPalette() {
+    if (!this.chatPletteElementRef.nativeElement) return;
+    if (this.chatPletteElementRef.nativeElement.options.length <= 0) return;
+    this.chatPletteElementRef.nativeElement.options[0].selected = true;
+    this.chatPletteElementRef.nativeElement.focus();
+  }
+
   sendChat(value: { text: string, gameType: string, sendFrom: string, sendTo: string,
     color?: string, isInverse?:boolean, isHollow?: boolean, isBlackPaint?: boolean, aura?: number, isUseFaceIcon?: boolean, characterIdentifier?: string, standIdentifier?: string, standName?: string, isUseStandImage?: boolean }) {
     if (this.chatTab) {