Skip to content

Copying image via clipboard and then copying text via clipboard makes image disappear #553

@julmis

Description

@julmis

If you copy and paste image into editor and after that you copy and paste text image will disappear.

To reproduce this:

  1. Select an image, copy it to clipboard.
  2. Paste image into editor.
  3. Select text and copy it to clipboard.
  4. Paste text after image.

I've traced this problem to:
/src/clipboard.js

function markAndGetInlineImagesAndRemoveForbiddenOnes($editor, invalidImageSelector, fileTypes) {
    ..... // What is the point of this??? Why should original src should be changed to loadingImg???
    pngImages.forEach(function (_a) {
        var el = _a.el;
        return el.setAttribute('src', loadingImg);
    });
    return pngImages;

And /src/utils.js:

screenshotSaver: function (data) { return Promise.resolve(''); }

Which will always return empty... thus "screenShotUrl" will be empty.

function persistInlineImages($editor, screenshotSaver, invalidImageSelector, fileTypes) {
    setTimeout(function () {
        return Promise.all(markAndGetInlineImagesAndRemoveForbiddenOnes($editor, invalidImageSelector, fileTypes).map(function (data) {
            return screenshotSaver(data)
                .then(function (screenShotUrl) { return data.el.setAttribute('src', screenShotUrl);}) // screenShotUrl will always be empty!
                .catch(function (err) {
                data.el.remove();
                throw err;
            });
        })).then(function () { return $editor.trigger('input'); });
    }, 0);
}

Fix to this could be (should mention that these are done in compiled version, not raw files):

/src/utils.js
screenshotSaver: function (data) {
        if (data && data.el && data.el.getAttribute)
          return Promise.resolve(data.el.getAttribute('src'));
        else
          return Promise.resolve('');
      },

And

/src/clipboard.js
function markAndGetInlineImagesAndRemoveForbiddenOnes($editor, invalidImageSelector, fileTypes) {
    ....
    var pngImages = images.filter(function (_a) {
        var type = _a.type;
        return fileTypes.includes(type);
    });
    /* Remove this bit
    pngImages.forEach(function (_a) {
        var el = _a.el;
        return el.setAttribute('src', loadingImg);
    });
     */
    ....
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions