Replacing images inserted as dataURLs with links to the shared files in the common library of images #1287

Right before calling editor.getContents() to save the contents of the editor, I call the following code:

export const replaceImages = async () => {
  const ctx = canvas.getContext('2d');
  const images = editor.getImagesInfo();

  for (const img of images) {
    const imgEl = img.element;
    if (!img.src.startsWith('data:')) continue;
    const w = MAX_WIDTH;
    const h = Math.ceil(MAX_WIDTH * (imgEl.naturalHeight / imgEl.naturalWidth));
    canvas.width = w;
    canvas.height = h;
    ctx.drawImage(imgEl, 0, 0, w, h);
    const imgFileName = join(EDITOR_IMG_DIR, img.name);
    const blob = await getBlob(canvas);
    const buffer = await blob.arrayBuffer();
    await fs.writeBinaryFile(imgFileName, buffer);
    imgEl.src = imgFileName.replace(DOCUMENT_ROOT, '');
    imgEl.setAttribute('origin-size', `${w},${h}`);
  }
};

I call getImagesInfo() to list all images in the editor, check if the src attribute is a dataURL and, if it is, I use a <canvas> element to decode it and save it as a file, scaled down to a width no larger than MAX_WIDTH and finally I change the src attribute in the editor to point to this newly saved image now stored locally in the app which runs on NeutralinoJS.

It mostly works. The HTML string I get from editor.getContents() shows the <img> element with the changes from this code. Inspecting the HTML within the Suneditor div in the browser shows the same changes as well. I can exit the app and load the same altered file later on and it will work fine.

However, the editor doesn't seem to like my tampering with its HTML. I am probably triggering some event the editor is listening to and it eventually crashes the app. It is clearly detecting the changes to the <img> element. If I change the src attribute before the file is actually written, it detects the still missing file and generates an error.

Is there a proper way to change the src attribute without getting the editor mad, or telling it the change is fine? Is there any other way I could fix it?

Earlier on, I tried to use onImageUploadBefore but I was unable to prevent the image turning into a data URL. I was able to download the file and point the callback to the local copy, but it would still convert it to a data:URL.

I need the images to be stored separately from the HTML because I need to be able to change the images over time, and I can't do that if they are embedded in the HTML of the pages themselves. Those images must also become part of the gallery to be shared by future documents. I must have a single source for all the images in the various documents, I can't allow data:URLs within the documents, they must point to the single library of images.

Thanks in advance for your help.