Injecting a Webview in the Sketch UI (not floating)

nathan-courtney

Hello All,

I am currently working with the sketch-module-webview for the plugin I am building, and would like to know any information related to adding new panels in the Sketch UI, similar to how Craft (InVision) adds their panel into the UI.

Currently, I am able to load my web app inside of the UI in a webview to the left of the inspector panel but have been experiencing issues with placing it on the right.

If you are familiar with working with the Webview, Browser Window, and Web Contents API's, what I've currently accomplished can be achieved as follows:

const options = {
    identifier: 'myId',
    width: 240,
    height: 180,
    show: false
 }
 
// Creating the browser window
const browserWindow = new BrowserWindow(options);

// web contents
const webContents = browserWindow.webContents;

webContents.on("did-finish-load", () => {

    // Finding what i've seen called as the "content" view
    const contentView = context.document.documentWindow().contentView();

    // Finding what appears to be the canvas that includes the inspector panel in its subviews - I am calling the sketch shell
    const sketchShell = contentView.subviews().objectAtIndex(0);

    // Retrieving an array of the visible UI, including the inspector panel at the end of the array 
    const sketchShellSubviews = sketchShell.subviews();

    let finalShellSubviews = [];
    let webviewAdded = false;

    sketchShellSubviews.forEach(subview => {
        finalShellSubviews.push(subview);
        
        // Injecting our browser windows webview into the array - note the underscore 
        if (!webviewAdded && subview.identifier() == 'view_canvas') {
            finalShellSubviews.push(browserWindow._webview);
            webviewAdded = true;
        }
    });
    
    // Finally, update the subviews and refresh
    sketchShell.subviews = finalShellSubviews;
    sketchShell.adjustSubviews();
});

// load our url
browserWindow.loadURL("myURL");

This will inject the webview into the sketch UI to the left of the inspector panel, and seems to function the same as Craft does it. One thing to note is that you should never call
broswerWindow.show();
Otherwise it will open a floating panel without the rendered html.

What I'm really trying to do is get the webview to the right of the inspector panel. What I can do is add my webview to the end of the array of subviews and it will push it to the right. A simple way to do that is
sketchShell.addSubview(browserWindow._webview);
but with a few problems that I can't figure out.

First, immediately when I place it at the end of the subview array, the inspector panel will have nothing rendered inside of it. But if i start dragging the inspector panel (which previously isn't able to be resized), the UI in the panel comes back.
Second, it appears that my new view in the UI inherits the original styling of the inspector panel right when that next resize event happens. I'll inject my webview into the UI, the Inspector panel gets pushed to the left, it won't have any UI in it, but I'll start dragging the inspector panel to resize and the webview I added snaps to the original width of the inspector panel and is then unable to be resized.

From my understanding, I believe sketch is listening to resize events on all the UI panels, and then taking the last view in the array and applying those styles and constraints to it, but anything in the middle of the array can be resized.

If anyone has any ideas on how to deal with this it would be greatly appreciated

Thanks!

kevgski

Definitely want to be careful when injecting UI into Sketch. It's one of the easiest ways to crash Sketch and generally is the reason why Sketch has a bad rep with updates. Most of the time its plugins like Craft that causes new updates to break because they haven't tested things with the beta releases. As such, I'd highly recommend that you consider building your plugin to be some sort of floating UI on top of Sketch so you don't have to worry about underlying Sketch structures changing between releases (which they do).

That out of the way, I don't have much experience with sketch-module-webview so I don't have any pointers there however there were a few things I noticed in your code that has tripped me up in the past.

Don't assume values are there. You'll want to "unwrap" things as much as possible with try/catch to make your plugin less prone to crashing Sketch between updates

Example:

contentView.subviews().objectAtIndex(0);

If you are pulling out an object like this then you usually want to wrap it in a try/catch

Be super careful about what native objects you are getting vs javascript objects

const sketchShellSubviews = sketchShell.subviews();

This returns an NSArray of NSViews. As such, there is no forEach method available for you to use and can crash Sketch. Sometimes you can get away with more JS-y syntax with Cocoascript but you should err on the more obj-c style approach. You'll want to use the usual for loop.

Hope those help! Sorry I don't have any specific insight into how Sketch updates its UI. You might want to digging through the headers and see if there is some sort of reload method that you can call on the inspector panel or its containing view.

nathan-courtney

kevgski

Hello, and thank you for the reply.

I've definitely encountered crashing sketch many times while developing so I understand your concerns. The floating UI panel option will work great as fall back but pushing those boundaries is why I am here!

Thanks for the coding tips as well, the code you see is more of a stripped down example of how to replicate the issue at a bare minimum. I will be implementing lots of error handling as development gets further, and this plugin will be maintained, but it is good to know that updates typically crash plugins even like Craft if a value isn't found.

That being said, I've been down the Obj-c route, where headers were created and then exported into the plugin, but I am not too familiar with the language or its caveats. Most of what you see was converted from obj-c to cocoascript, as that is how I figured out how to do this in the first place. I have't had much issues using the forEach loop as far as I know, but I heed your warning and appreciate it. for loops typically preform better anyways so I will try to use them more especially if they can be crashing sketch by iterating over native objects!

I've spent hours digging around the Sketch Headers, AppKit docs, console logging methods and functions I might be able to call, and haven't found a solution yet but will continue to look!

Again, thanks for the reply and tips! Any information is of great help!