Fix start value of TextAreaMath

projects/common/components/input-elements/text-area-math/area-segment.component.ts

@@ -10,11 +10,11 @@ import { BehaviorSubject } from 'rxjs';
   template: `
     @if (type === 'math') {
       <aspect-math-input #inputComponent
-                                  [fullWidth]="false"
-                                  [value]="value"
-                                  (focusIn)="onFocusIn($event)"
-                                  (focusOut)="focusOut.emit($event)"
-                                  (valueChange)="valueChanged.emit({ index: index, value: $event})">
+                         [fullWidth]="false"
+                         [value]="value"
+                         (focusIn)="onFocusIn($event)"
+                         (focusOut)="focusOut.emit($event)"
+                         (valueChange)="valueChanged.emit({ index: index, value: $event})">
       </aspect-math-input>
     } @else {
       <aspect-area-input #inputComponent

projects/common/components/input-elements/text-area-math/text-area-math.component.ts

@@ -33,7 +33,8 @@ import { TextInputComponent } from 'common/directives/text-input-component.direc
          [style.font-size.px]="elementModel.styling.fontSize"
          [style.font-weight]="elementModel.styling.bold ? 'bold' : ''"
          [style.font-style]="elementModel.styling.italic ? 'italic' : ''"
-         [style.text-decoration]="elementModel.styling.underline ? 'underline' : ''">
+         [style.text-decoration]="elementModel.styling.underline ? 'underline' : ''"
+         (click)="selectLastSegment()">
       <span class="alignment-fix">&nbsp;</span>
       @for (segment of segments; track segment; let i = $index) {
         <aspect-text-area-math-segment
@@ -46,7 +47,8 @@ import { TextInputComponent } from 'common/directives/text-input-component.direc
           (onKeyDown)="onKeyDown.emit($event)"
           (focusIn)="focusChanged.emit({ inputElement: $event, focused: true })"
           (focusOut)="focusChanged.emit({ inputElement: $event, focused: false })"
-          (remove)="removeSegment($event)">
+          (remove)="removeSegment($event)"
+          (click)="$event.preventDefault(); $event.stopPropagation()">
         </aspect-text-area-math-segment>
       }
     </div>
@@ -74,13 +76,27 @@ export class TextAreaMathComponent extends TextInputComponent implements OnInit
   ngOnInit(): void {
     super.ngOnInit();
     if (this.parentForm) this.segments = this.elementFormControl.value;
+  }
+
+  private addStartSegment() {
+    this.segments.push({
+      type: 'text',
+      value: ''
+    });
+    super.setElementValue(this.segments);
+  }
+
+  addFormula() {
     if (this.segments.length === 0) {
-      this.segments.push({ type: 'text', value: '' });
-      super.setElementValue(this.segments);
+      this.addStartSegment();
+      // wait for rendering of segments
+      setTimeout(() => this.addNewSegments());
+    } else {
+      this.addNewSegments();
     }
   }
 
-  addFormula() {
+  private addNewSegments() {
     this.segments = this.elementFormControl.value;
     this.updateFocus(this.selectedFocus.value);
     const range = RangeSelectionService.getRange();
@@ -106,6 +122,7 @@ export class TextAreaMathComponent extends TextInputComponent implements OnInit
       this.addSegments(true, false, segmentIndex, '', '');
     }
     super.setElementValue(this.segments);
+    // wait for rendering of segments and keyboard animation
     setTimeout(() => this.updateFocus(newSegmentIndex), 250);
   }
 
@@ -165,4 +182,12 @@ export class TextAreaMathComponent extends TextInputComponent implements OnInit
   private updateFocus(index: number, offset?: number): void {
     this.segmentComponents.toArray()[index].setFocus(offset);
   }
+
+  selectLastSegment() {
+    if (this.segments.length === 0) {
+      this.addStartSegment();
+    }
+    // wait for rendering of segments
+    setTimeout(() => this.updateFocus(this.segments.length - 1));
+  }
 }

projects/player/src/app/directives/text-input-group.directive.ts

@@ -89,7 +89,6 @@ export abstract class TextInputGroupDirective extends ElementFormGroupDirective
   }
 
   detectHardwareKeyboard(elementModel: UIElement): void {
-    console.log('detectHardwareKeyboard', elementModel);
     if (elementModel.showSoftwareKeyboard) {
       this.deviceService.hasHardwareKeyboard = true;
       this.keyboardService.close();

projects/player/src/app/services/scroll-to-input.service.ts

@@ -10,18 +10,15 @@ export abstract class ScrollToInputService extends InputService {
   scrollElement(): void {
     if (this.isOpen && this.isElementHiddenByKeyboard()) {
       const scrollPositionTarget = this.isViewHighEnoughToCenterElement() ? 'center' : 'start';
-      console.log('scrollPositionTarget', scrollPositionTarget);
       this.elementComponent.domElement.scrollIntoView({ block: scrollPositionTarget });
     }
   }
 
   private isViewHighEnoughToCenterElement(): boolean {
-    return window.innerHeight - this.keyboardHeight >
-      this.elementComponent.domElement.getBoundingClientRect().height;
+    return window.innerHeight - this.keyboardHeight > this.elementComponent.domElement.getBoundingClientRect().height;
   }
 
   private isElementHiddenByKeyboard(): boolean {
-    return window.innerHeight - this.elementComponent.domElement.getBoundingClientRect().bottom <
-      this.keyboardHeight;
+    return window.innerHeight - this.elementComponent.domElement.getBoundingClientRect().bottom < this.keyboardHeight;
   }
 }