Native support for copy/cut/paste functionality

[ThomasGreenspan]

Is your feature request related to a problem? Please describe.
This may just be me not knowing how to implement the feature. I've tried implementing copy/cut/paste feature via custom hotkeys but can't get the handler to fire (details below). The issue is specifically tied to using the typical hotkeys (I tried a few different things including Meta+KeyC). With other hotkeys (for example, just KeyC I can get the handlers to fire)

Describe the solution you'd like
This seems like it might be a pretty common feature that people would want. I would expect:

1. A copyPasteFeature that can be optionally added to the list of features passed in to useTree.
2. onCopy, onCut, and onPaste hooks made available in the object passed into useTree (only used when feature is included)
3. "copyItems", "cutItems", and "pasteItems" as native hotkey actions that are properly linked up to everything else.
4. [opt]: imperative functions that make the copy/cut/paste calls on the tree (i.e. tree.copySelectedItems(), tree.cutSelectedItems, treePasteItems - naming I'm not set on)

Internally, whatever is needed to properly handle taking control of the standard hotkeys would be implemented and whatever needed would be passed through via tree.getContainerProps().

Describe alternatives you've considered
I tried implementing this myself with custom hotkeys but wasn't able to get the handler to fire. I think the issue is with browsers intercepting the standard cut/copy/paste commands?

Here is an example of what I tried:

const clipboardRef = useRef<{
    items: ItemInstance<TreeNode>[];
    cut: boolean;
  } | null>(null);

const tree = useTree<TreeNode>({
  ...
  hotkeys: {
    customCopyItems: {
        hotkey: "Meta+KeyC",
        preventDefault: true,
        isEnabled: (tree) => tree.getSelectedItems().length > 0,
        handler: (_, tree) => {
          console.log(
            "copy",
            tree.getSelectedItems().map((i) => i.getId())
          );
          clipboardRef.current = { items: tree.getSelectedItems(), cut: false };
        },
      },
  },
})

I had a few attempts at trying to disable the browser copy/paste behavior on a container element but that didn't seem to work. That might still be the answer and maybe I just didn't quite get it right.

[lukasbach]

Writing a custom feature for this should work fine, I got it to work on Windows with this draft: https://codesandbox.io/p/sandbox/headless-tree-141-gjktqc

I don't have a macbook to test against though, I'm not sure how the associated keyboard events would like like on mac, I would have expected your sample to work. Can you input meta and the key c on https://keyjs.dev/ and let me know what you get for e.key and e.code? So I can make sure there isn't something wrong with the hotkey configuration?

[ThomasGreenspan]

Yeah your codesandbox example works for me but uses ctrl (which makes sense for windows) so wouldn't be likely to be potentially intercepted by the default behavior.

Per your request (from https://keyjs.dev/):

• meta key:
  • e.key: Meta
  • e.code: MetaLeft or MetaRight depending on which is used.
• c key:
  • e.key: c
  • e.code: KeyC

Not sure if this already exists but ideally there would be a way to denote either Ctrl or Meta depending on os (I was trying to get the basics to work first so didn't look into it)

Worth noting that I am still on v1.2.1 so I can try upgrading and to v1.3.0 and see if things resolve (haven't looked at the release logs).

[lukasbach]

Not sure if this already helps with this, but I've added a new alternative key name that can be used in key combinations as of the latest version, MetaOrControl. So you can now reference as hotkey MetaOrControl+KeyC.

[ThomasGreenspan]

I have upgraded to 1.3.0 and am using MetaOrControl+KeyC but it still doesn't work. To be clear on behavior:

• when I hit Meta+KeyC, the handler does not fire
• all hotkeys stop working after I hit Meta+KeyC. It seems like if I unfocus the window and then go back to it the other hotkeys work again

I don't think I mentioned the second thing above but it's been happening from the beginning