Custom component handlers

[danisal]

Hi 👋

I'm trying to implement a custom component to render inside the cells. basically, it's to render an array of images. That's working and everything works as expected, copy-past, drag to copy, all of that. But I would like to override a couple of commands. e.g.: be able to select some images (I'm doing that with a local state) and then do cmd + c to copy only the selected images, or backspace to delete only those selected images...

Of course, this doesn't work because we have the default cell behavior, of clearing the cell or copying the entire cell.

Is there a way that I can achieve this?

Already tried with a couple of solutions, passing a custom component to the column and passing a custom function to the keyColumn function but didn't manage to achieve the desired behavior 😞

[nick-keller]

Hi @danisal ,
Note that there are two different states for a cell:

• focused: when you are editing the cell's content
• not focused: when you are just selecting cells, not editing their content

When a cell is not focused, doing a CMD+C will copy the cell's content, you can control what is copied exactly. You can also control what is deleted exactly when you cut or clear a cell.

When a cell is focused, it is up to the component to control what happens when you copy or delete something. For instance, in a text input cell, you can select and copy just part of the text.

[danisal]

hey @nick-keller , thanks for clarifying 👍

But I still can't capture the keyboard event inside the component, the cell is marked as focused and when clicking the keyboard, I can't capture the event. I've added both useEffect and useLayoutEffect and nothing... I've the feeling I'm missing something here...

useLayoutEffect(() => {
            function listener(event) {
                console.log("keyboard event", event, focus);
            }

            document.addEventListener("onKeyDown", listener, false);

            return () => {
                document.removeEventListener("onKeyDown", listener, false);
            };
        }, [focus]);

        useEffect(() => {
            function listener(event) {
                console.log("keyboard event", event, focus);
            }

            document.addEventListener("onKeyDown", listener, false);

            return () => {
                document.removeEventListener("onKeyDown", listener, false);
            };
        }, [focus]);

This is the cell example:

I'm rendering an array of images, inside of the cell, and when clicking an image, I just mark that image as selected inside a state and put an outline on it just to know that is selected. When that case happens the focus: true but I can't capture the CMD + C command in the effects...

[danisal]

Found the problem... keydown not onKeyDown 🤦