Fonto Why & How: How do I add a shortcut to an operation?!

Fonto Why & How: How do I add a shortcut to an operation?!

A question that was raised by a Fonto developer, how it was resolved and why Fonto behaved like that in the first place. This week, a partner tries to set up a keybinding to a different operation than the one they want to show it for!

A support request came in from a partner. It went a bit like this:

Hello Fonto team,

We added a contextual delete-node operation to an image node that has a couple of children (like the title and the actual mage). This was easy, but we also want to add a keybinding to the operation. The operation works from the context menu, but the system does not respond if I press the shortcut!

I attached the operation to the ticket!

Kind regards, A Fonto partner

The operation looked like this:

{
    "delete-this": {
        "label": "Delete",
        "description": "Delete this node",
        "icon": "cross",
        "keyBinding": "ctrl+alt+w",
        "steps": {
            "type": "operation/delete-node"
            
        }
    }  
}

The first thing that looks off is that the operation is just calling delete-node, which needs to be told what it will remove. It needs a NodeId to be passed. This contextNodeId argument is passed automatically if the operation is used in a context menu. If we start this operation with setting a contextNodeId to something related to the selection, we can direct the next step:

{
    // An example for a contextual operation but only needed if you want to customize the one or more properties of the original delete-node operation.
    "contextual-delete-this": {
        "label": "Delete",
        "description": "Delete this node",
        "icon": "cross",
        "steps": {
            "type": "operation/delete-node"
        }
    },
    // An example of an operation using a keybinding and looks for the element to delete using the cursor selection.
    "delete-this": {
        "label": "Delete",
        "description": "Delete this node",
        "icon": "cross",
        "keyBinding": "ctrl+alt+w",
        "steps": [
            {
                "type": "transform/setContextNodeIdToSelectionAncestor",
                "data": {
                    "selectionAncestorNodeSpec": "self::image-container"
                }
            },
            {
                "type": "operation/delete-node" // Or call contextual-delete-this instead.
            }
        ]
    }
}

This worked! But there’s one small additional thing to do: it would be nice if the operation in the context menu (contextual-delete-this) would display the keybinding next to it, but still call the other operation if an author actually pressed the shortcut!

By adding the keyBindingDisabled next to the actual keybinding for an operation, we can display the keybinding in the UI, but not actually react to it. Historically, we have used this property to display the keybinding for paste, while still letting the browser initiate the paste.

I hope this explained how Fonto works and why it works like that. During the years we built quite the product, and we are aware some parts work in unexpected ways for those who have not been with it from the start. If you have any points of Fonto you would like some focus on, we are always ready and willing to share! Reach out on Twitter to Martin Middel or file a support issue!

Stay up-to-dateFonto Why & How posts direct in your inbox

Receive updates on new Fonto Why & How blog posts by email

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top