0

I have a contenteditable div, when I am trying to paste some text in that div it is always getting pasted in the end. I am using view child to access the reference of the contenteditable div and using inner text to get the value.

Question How can i be able to paste the copied text at the current cursor position.

Please find my code below.

Component.html

<div class="text-block" contenteditable #textBlockElement (input)="textOnChange($event.target.innerText)" (paste)="pasteOnContenteditable($event)"></div>

Component.ts

@ViewChild('textBlockElement ', { static: false }) textBlockElement : ElementRef;

pasteOnContenteditable(e : any) {
   e.preventDefault();
   let clipboardData = e.clipboardData;
   let pastedText = clipboardData.getData('text');
   let textEl : HTMLElement = this.textBlockElement.nativeElement;
   textEl.innerText = textEl.innerText + pastedText;
}


textOnChange(textVal : string){
   console.log(textVal);
}
Swagata Adhikary
  • 245
  • 5
  • 16
  • You should first get the current caret position and then try to paste the text, on that position. To find the caret position inside your contenteditable div look at this https://stackoverflow.com/questions/3972014/get-contenteditable-caret-position – Hojat Afsharan Nov 03 '21 at 09:58

1 Answers1

0

I have tried your scenario and found out the place where your logic behaves wrongly.

The problem in your code is that you were appended the text at the end instead of finding the cursor position.

Kindly check the below code to resolve your issue. (https://stackblitz.com/edit/angular-ivy-pnjtxp?file=src%2Fapp%2Fapp.component.html)

In app.component.html

<div class="text-block" contenteditable #textBlockElement
 (input)="textOnChange($event.target)" 
 (paste)="pasteOnContenteditable($event)"></div>

In app.component.ts

import { Component, VERSION, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  @ViewChild('textBlockElement ', { static: false }) textBlockElement : ElementRef;

pasteOnContenteditable(e : any) {
   e.preventDefault();
   let clipboardData = e.clipboardData;
   let pastedText = clipboardData.getData('text');
   let textEl : HTMLElement = this.textBlockElement.nativeElement;
  //  textEl.innerText = textEl.innerText + pastedText;
   this.insertAtCursor(textEl, pastedText);
}
 
 insertAtCursor (input, textToInsert) {
  // get current text of the input
  const value = input.innerText;
console.log('***********',value);
  // save selection start and end position
  const start = input.selectionStart;
  const end = input.selectionEnd;

  // update the value with our text inserted
  input.innerText = value.slice(0, start) + textToInsert + value.slice(end);

  // update cursor to be at the end of insertion
  input.selectionStart = input.selectionEnd = start + textToInsert.length;
}

textOnChange(textVal){
   console.log(textVal);
}
}
Muthupriya
  • 345
  • 1
  • 10