Document editor insertImage() don't render Image first time Completed

Hi,

I'm using documentEditor insertImage() method in my Angular application using syncfusion Angular library.

I need to insert a custom image after some pre-processing on it.

To do that, I've added a custom toolbar button on my document editor instance.
When user clicks on that button, following function will fire:

private insertCustomImg(): void {

  const canvas = document.createElement('canvas');

  canvas.width = 400;

  canvas.height = 338;

  const context = canvas.getContext('2d');

  const placeholderImg = new Image();

  placeholderImg.src = 'assets/widget_placeholder.jpg';

  const customImgText = 'Some random text';

  placeholderImg.onload = () => {

  context.drawImage(placeholderImg, 0, 0);

  context.font = '20px Arial';

  context.fillText(customImgText, 20, 30);

this.documentEditorContainer.documentEditor.editor.insertImage(canvas.toDataURL(), 400, 338);

  };

}

The problem is that after inserting the Image into document, document editor component will not render instantly the new Image.

User have to click on it to make it appear.

It occurs only the first time.

After the first custom image inserted, everything will work fine.

I'll attach to you the example project used for the above screenshot (Angular 11 & Suncfusione 18.x).

Thanks in advance.

EDIT: cannot attach 7z of project because is 43 MB. Here's the weTransfert link. .