ngModel does not update after insertEmbed with source 'user'

[dineshkumar02]

While upload the image to the editor and via insertEmbed method, the ngModel is not reflecting the changes.

But the insertText is working as expected.

Would you share some inputs and suggestions on this please.

Angular version : 14.0.0
ngx-quill : 18.0.0

Code, which is not working as expected

const range = this.editor.getSelection(true);
this.editor.insertEmbed(range.index, 'image', url, 'user');

  <quill-editor [styles]="{height: '200px'}" [(ngModel)]="description" (onEditorCreated)="editorCreated($event)">
  </quill-editor>

Note: On the editor, it's rendering the image but on the ngModel it's not reflecting the changes.

Please let me know If I miss anything here

[KillerCodeMonkey]

I only have the opportunity to listen on quilljs events when the content changes. You could test with plain quilljs if the quilljs event https://quilljs.com/docs/api/#events Text-Change is called + the correct source is set. If this is not working you should check the quilljs repo for issues.

I have no other possibility to get informed for changes

Dinesh Kumar @.***> schrieb am Fr., 9. Sept. 2022, 17:59:

While upload the image to the editor and via insertEmbed method, the ngModel is not reflecting the changes.

But the insertText is working as expected.

Would you share some inputs and suggestions on this please.

Angular version : 14.0.0 ngx-quill : 18.0.0

Code, which is not working as expected

const range = this.editor.getSelection(true); this.editor.insertEmbed(range.index, 'image', url, 'user');

<quill-editor [styles]="{height: '200px'}" [(ngModel)]="description" (onEditorCreated)="editorCreated($event)">

Note: On the editor, it's rendering the image but on the ngModel it's not reflecting the changes.

Please let me know If I miss anything here

— Reply to this email directly, view it on GitHub https://github.com/KillerCodeMonkey/ngx-quill/issues/1601, or unsubscribe https://github.com/notifications/unsubscribe-auth/AARI4YDX5DF6KRY2WQOYSMTV5NNGDANCNFSM6AAAAAAQIZZCHQ . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[dineshkumar02]

Thanks for the response.

If I remember correctly, it was working fine with the Angular 13 and the problem is started with the 14 version. Need to further investigation from my side, and will post some findings.

[KillerCodeMonkey]

Thanks. I guess i changed nothing in the "base handling" in that part. But thanks again for your investigating.

Dinesh Kumar @.***> schrieb am Sa., 10. Sept. 2022, 19:54:

Thanks for the response.

If I remember correctly, it was working fine with the Angular 13 and the problem is started with the 14 version. Need to further investigation from my side, and will post some findings.

— Reply to this email directly, view it on GitHub https://github.com/KillerCodeMonkey/ngx-quill/issues/1601#issuecomment-1242776701, or unsubscribe https://github.com/notifications/unsubscribe-auth/AARI4YGTNPBFZC5FHB7IMY3V5TDMDANCNFSM6AAAAAAQIZZCHQ . You are receiving this because you commented.Message ID: @.***>

[KillerCodeMonkey]

do you have any findings?

[dineshkumar02]

Apologies for the delay, I may need some more time to test this functionality. Probably in the next couple of days.

[dineshkumar02]

My sincere apologies,

The root cause of this issue is, whenever I config the QuillModule with the required options below, then insertEmbed is not working.

Not Working

QuillModule.forRoot(

         {
         format: 'text',
         modules: {
           toolbar: [
             ['bold', 'italic', 'underline', 'strike'],
             ['blockquote', 'code-block'],
             [{ 'header': 1 }, { 'header': 2 }],
             [{ 'list': 'ordered' }, { 'list': 'bullet' }],
             [{ 'script': 'sub' }, { 'script': 'super' }],
             [{ 'indent': '-1' }, { 'indent': '+1' }],
             [{ 'direction': 'rtl' }],
             [{ 'size': ['small', false, 'large', 'huge'] }],
             [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
             ['link', 'image'],
             ['clean'],
           ],
         },
       }
    ),

If I remove the options, and just use QuillModule.forRoot() then, image binding with the model is working.

Please let me know if you see any issues with the options which I have

[KillerCodeMonkey]

Could you try what is happening when not using Format text? Because using Format text und insertEmbedded makes no sense.

Text just gets the plain text content and is checking for changes.

Dinesh Kumar @.***> schrieb am Sa., 17. Sept. 2022, 09:38:

My sincere apologies,

The root cause of this issue is, whenever I config the QuillModule with the required options with below, then insertEmbed is not working.

Not Working

QuillModule.forRoot(

     {
     format: 'text',
     modules: {
       toolbar: [
         ['bold', 'italic', 'underline', 'strike'],
         ['blockquote', 'code-block'],
         [{ 'header': 1 }, { 'header': 2 }],
         [{ 'list': 'ordered' }, { 'list': 'bullet' }],
         [{ 'script': 'sub' }, { 'script': 'super' }],
         [{ 'indent': '-1' }, { 'indent': '+1' }],
         [{ 'direction': 'rtl' }],
         [{ 'size': ['small', false, 'large', 'huge'] }],
         [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
         ['link', 'image'],
         ['clean'],
       ],
     },
   }
),

If I remove the options, and just use QuillModule.forRoot() then, image binding with the model is working.

Please let me know if you see any issues with the options which I have

— Reply to this email directly, view it on GitHub https://github.com/KillerCodeMonkey/ngx-quill/issues/1601#issuecomment-1250021806, or unsubscribe https://github.com/notifications/unsubscribe-auth/AARI4YG6LNYGRZKOP3HZRWLV6VYQTANCNFSM6AAAAAAQIZZCHQ . You are receiving this because you commented.Message ID: @.***>

[dineshkumar02]

You are right.

By removing format: 'text', it's working :-)

Thanks for your help and suggestions, apologies for the delay

[KillerCodeMonkey]

No problem. Nice that your issue is resolved

Dinesh Kumar @.***> schrieb am Sa., 17. Sept. 2022, 09:46:

You are right.

By removing format: 'text', it's working :-)

Thanks for your help and suggestions, apologies for the delay

— Reply to this email directly, view it on GitHub https://github.com/KillerCodeMonkey/ngx-quill/issues/1601#issuecomment-1250022780, or unsubscribe https://github.com/notifications/unsubscribe-auth/AARI4YH5S3HDH2YFDMM63YTV6VZMDANCNFSM6AAAAAAQIZZCHQ . You are receiving this because you commented.Message ID: @.***>