如何实现像instagram这样的textarea？

如何解决如何实现像instagram这样的textarea？

在instagram中，当我们在图片上书写文字时，可以写到一定的限制。之后，该应用程序开始减小字体大小和文本区域的宽度，并在每行上增加文本区域的高度，以使所有文本在屏幕上可见，并且文本区域保持在中心。如何实现这种功能？

HTML

<ion-content class="modal-body">

  <ion-row>

    <ion-col>
      <!-- cancel button  -->
      <ion-button (click)="cancel()" expand="block" fill="clear" shape="round">
        Cancel
      </ion-button>
    </ion-col>
    <ion-col class="ion-align-self-center ion-text-center">
      <!-- font style badge  -->
      <ion-badge class="font-style-badge ion-padding" style="font-family: {{ fontFamily }};" size="large" color="light"
        mode="ios" (click)="changeFontStyle()">{{ fontFamily | uppercase }}</ion-badge>
    </ion-col>
    <ion-col>
      <!-- done button  -->
      <ion-button (click)="done()" expand="block" fill="clear" shape="round">
        Done
      </ion-button>
    </ion-col>

  </ion-row>

  <!-- range slider  -->
  <div class="range">
    <ng5-slider [(value)]="fontSize" [options]="options"></ng5-slider>
  </div>

  <!-- write text block  -->
  <ion-textarea #textBlock (ionBlur)="focusText()" [(ngModel)]="text" rows="1" maxRows="8"
    style="font-size: {{ fontSize }}px; font-family: {{ fontFamily }}" class="text-input"
    (resized)="onResized($event)" placeholder="Write something" autosize>
  </ion-textarea>

  <!-- color palette fab -->
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button class="color-btn" color="light" [cpPosition]="'top-left'" [cpPositionOffset]="'50%'"
      [cpPositionRelativetoArrow]="true" [(colorPicker)]="textColor" tappable>
      <ion-icon color="dark" name="color-palette"></ion-icon>
    </ion-fab-button>
  </ion-fab>

</ion-content>

TS

onResized(height) {
    console.log('textblock resized height,fontsize: ',height,this.fontSize);
    if (height > this.textBlockHeight) {
      // textblock height is increased
      this.textBlockHeight = height;
      console.log('new line added');
    } else if (height < this.textBlockHeight) {
      // textblock height is decreased
      this.textBlockHeight = height;
      console.log('line removed');
    } else {
      // textblock height not changed
    }
  }