I'm working on a project which I want to use <table> with content editable <td>s, the problem I'm facing is when I type text in the <td> element cursor keeps jumping to the beginning of the word and if I type 123 it will be typed as 321 in the <td>

<td>Freight Costs to dealership</td>
<td colspan='6' class='text'
contenteditable 
[ngModel]="quateForm.get('dealershipNote').value" 
[ngModelOptions]='{standalone: true}' 
(input)='onChangeDealershipNote($event.target.textContent)'>

and

onChangeDealershipNote(e) {
  this.quateForm.patchValue({ dealershipNote: e });
}

please note that After saving, I want to view and edit the content in the future.