Обнаружить разделение строки из Gmail в буфер обмена (угловой)

Question

Я пытаюсь разрешить пользователям вставлять из Gmail в поле и обнаруживать разрывы строк. Это не обязательно должна быть текстовая область, я просто хочу обнаружить разрывы строк.

Проблема в том, что, когда пользователь вставляет что-то вроде ниже ... буфер обмена, похоже, не обнаруживает разрыв (даже еслипользователь нажал ввод в gmail)

Item 1 
Item 2 
Item 3

Чтобы обнаружить его, пользователь, кажется, должен был нажать ввод дважды ... как показано ниже:

Item 1

Item 2

Item 3

Есть ли способобнаружить разрывы строк в gmail?

Ниже, похоже, работает блокнот, входящие и другие области, откуда я копирую.

Демонстрация Stackblitz

Компонент:

<input type="text" placeholder="paste items here" (paste)="onPaste(i, $event, $event)">

<div *ngIf="itemArray.length > 0">
Item list:
</div>

<div *ngFor="let item of itemArray">
  {{item}}
</div>

TS:

itemArray = [];

  onPaste(i, event: ClipboardEvent, value) {
    let clipboardData = event.clipboardData;
    let pastedText = clipboardData.getData('text/plain').split("\n");
    pastedText.forEach(item => {
      item = item.toString()
      item = item.replace(/(\r\n|\n|\r|\s\r|\r)/gm, "")
      this.itemArray.push(item) 
    })
  }

Answer 1

Я думаю, что проблема в том, что вставленный текст имеет разрывы строк, которые являются просто возвратом каретки (\ r). Это не переносится в поле ввода. Похоже, просто \ n проходит. Я нашел подход, который использует текстовую область, которая принимает перевод строки независимо от \ r или \ n или \ r \ n. Затем используйте событие ввода текстовой области, чтобы прочитать текст из него. Так что это своего рода прокси для буфера обмена. Я знаю, что это не правильное решение, но может немного помочь.

Я изменил ваш Stackblitz .

Answer 2

Вы можете использовать <p>{{item}} </p> вместо {{item}}

<div *ngFor="let item of itemArray">
    <p>{{item}} </p> 
</div>

stackBlitz answer

надеюсь, это поможет ...!