Issue with 2 way databinding with ngModelChange

[sanishmbod]

What is the current behavior?

When using 2 way databinding with nested components and ngModelChange, the ngModelChange event is not fired when making changes from the toolbar (like inserting source code or making text bold). Also when using the text editor for typing text, it is out of sync by one character.

What is the expected behavior? For ngModelChange to fire with the latest changes.

Which versions of TinyMCE/TinyMCE-Angular, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE or TinyMCE-Angular?

I am using :

    "@tinymce/tinymce-angular": "3.6.1",
    "tinymce": "^5.4.2",

Demo Video : https://streamable.com/rhbk4d Demo code : https://github.com/sanishmbod/tinymce-problem

[tinydylan]

Thanks for the bug report and demo code. We'll test it out and see what we can do.

[jscasca]

Hi @sanishmbod

Thank you for the replication code. I tried to make a PR into your repo but I didn't have access.

So there are two things:

• First:

  NgModel not changing with changes from the toolbar

By default, the Angular wrapper only emits changes when the editor fires the following events: input change undo redo. However, you can modify the default behaviour by adding the property modelEvents to fire NgModel changes on different editor events.

• Second:

  The NgModel is out of sync

This happens because of an Angular bug where translating from angular will generate code following the order of the translation. This cause custom callbacks to fire with a not-yet-synchronised value and displaying the behaviour you are experiencing. You can find it better explained here: https://medium.com/@lukaonik/how-to-fix-the-previous-ngmodelchange-previous-value-in-angular-6c2838c3407d

You can try this:

<editor [(ngModel)]="content" (ngModelChange)="textChange()" modelEvents='change input nodechange undo redo' [init]="{
  height: 500,
  menubar: true,
  branding: false,
  theme_url: '/assets/tinymce/themes/silver/theme.min.js',
  base_url: '/assets/tinymce/',
  toolbar: 'undo redo | styleselect | bold bullist numlist | link | table | code  ',
  plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table paste code help wordcount'
  ],
  menu: {
    edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | searchreplace selectall' },
    insert: { title: 'Insert', items: 'image media link inserttable hr charmap' },
    view: { title: 'View', items: 'code preview' },
    format: { title: 'Format', items: 'bold superscript subscript | formats | removeformat' },
    table: { title: 'Table', items: 'inserttable tableprops deletetable | cell row column' },
    file: { title: 'File', items: '' },
    tools: { title: 'Tools', items: '' }
  }
}"></editor>

Let me know your thoughts.