Paste clipboard data to panel, not document

[Niknab0417]

I've set up a function to handle pasting images from the clipboard to a canvas element inside my extension. It works fine on sites like jsfiddle or codepen, but Photoshop CC hijacks the event instead and content gets pasted to the active document as a new layer - the default behavior.

I assume I need to add some sort of if statement to prevent the default action if the panel has focus, but I don't know how to go about doing that. I'm not even sure what library/platform/thing I should be using for this. I have tabs open for CEP, ExtendScript, and CSXSLibrary, and I'm not sure which of these I need in this case.

Here's the main.js paste function:

pasteImage = function (e) {
            var items = e.originalEvent.clipboardData.items;
            // 1885434740 = charIDToTypeID( "past" ) = paste  
            e.preventDefault();
            e.stopPropagation();
            canvas.remove(introTxt);
            //Loop through files
            for (var i = 0; i < items.length; i++) {
                if (items.type.indexOf('image') == -1) {
                    var file = items,
                        //type = items.type,
                        imageData = file.getAsFile(),
                        URLobj = window.URL || window.webkitURL,
                        img = new Image();
                    img.src = URLobj.createObjectURL(imageData);
                    fabric.Image.fromURL(img.src, function (imgInst) {
                        imgInst.scaleToWidth(350);
                        canvas.add(imgInst).centerObject(imgInst);
                        imgInst.setCoords();
                        canvas.renderAll();
                    }, imgAttrs);
                }
            }
        }

As sort of a Hail Mary, I added this to my jsx file:

function stopPaste() {
    var doc = app.activeDocument;
    doc.paste(false);
}

and this event listener back in main.js:

function pasteListener() {
        if (canvas.is(':focus')) {
            csInterface.evalScript('stopPaste()');
        }
    }
    csInterface.addEventListener('PhotoshopCallback', pasteListener);

[Niknab0417]

After more hunting around, I decided to try using the info in this post from last year, but I'm getting a "csInterface.registerKeyEventsInterest is not a function" error message, now.

var keyCodes = [
            {
                "keyCode": 56,
                "ctrlKey": true
                }
            ];
csInterface.registerKeyEventsInterest(JSON.stringify(keyCodes));
        $(window).keydown(function (e) {
            e.preventDefault();
            if (e.keyCode == 56 && e.ctrlKey) {
                pasteImage();
            }
        });

[Niknab0417 · Accepted solution]

It turns out the Brackets extension builder plugin I used to start this project was using CEP 5. So, I was getting the "not a function" error message because registerKeyEventsInterest() wasn't in the CSInterface.js file I was using.

It started working after I updated the files (I can tell the pasteImage() function is being registered because the canvas.remove(introTxt); action is applied), but the content still isn't being pasted to the panel.

Edit (because I don't feel like making another comment):

Turns out the reason the function paste function wasn't working was because I removed an if-continue line from my code early on and forgot to put it back. The full paste function is this:

pasteImage = function (e) {
            var items = e.originalEvent.clipboardData.items;
            e.preventDefault();
            e.stopPropagation();
            canvas.remove(introTxt);
            //Loop through files
            for (var i = 0; i < items.length; i++) {
                if (items.type.indexOf('image') == -1) {
                    continue;
                }
                var file = items,
                    imageData = file.getAsFile(),
                    URLobj = window.URL || window.webkitURL,
                    img = new Image();
                img.src = URLobj.createObjectURL(imageData);
                fabric.Image.fromURL(img.src, function (imgInst) {
                    imgInst.scaleToWidth(350);
                    canvas.add(imgInst).centerObject(imgInst);
                    imgInst.setCoords();
                    canvas.renderAll();
                }, imgAttrs);
            }
        };
$(window).on('paste', pasteImage);

So, aside from an outdated plugin, most of the issues were user error. Well, that only took me 3 weeks to fix...

[Trevor:]

Congrats on finding and posting the solution.

Adding the extra comment in this case would have been preferable as it let's the forums "followers" know you got it sorted out.

(I was about to look into it now 🙂