Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
julmis opened this issue Apr 20, 2023 · 1 comment

Comments

@julmis
Copy link

julmis commented Apr 20, 2023

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);
    });
     */
    ....
}
@julmis
Copy link
Author

julmis commented Apr 24, 2023

Well one could argue that there isn't any bug here. Only a really poor documentation. Since you can override all this oddly behaving copy/paste by overwriting "screenshotSaver"-option as to function which converts an array of integers to back as base64 encoded image ( although I do not know why this conversion is even made? And why src-attribute is changed to "loading" image??? I concern this as a bug).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant