use cmd+shift+v to paste adjacent

Author: abdel-17

packages/svelte-file-tree/src/lib/components/Tree.svelte

@@ -259,11 +259,7 @@
 		item: TreeItemState<TFile, TFolder>,
 		predicate: (ancestor: TreeItemState<TFile, TFolder, TFolder>) => boolean,
 	) {
-		for (let ancestor = item.parent; ancestor !== undefined; ancestor = ancestor.parent) {
-			if (predicate(ancestor)) {
-				return ancestor;
-			}
-		}
+		return getNearestAncestor(item, predicate) !== undefined;
 	}
 
 	function isItemSelected(item: TreeItemState<TFile, TFolder>) {
@@ -804,38 +800,46 @@
 						break;
 					}
 
-					const dropDestinationItem = getDropDestinationItem(item);
-					if (dropDestinationItem === undefined) {
-						// Pasting at the root level is always allowed.
-						paste(root);
-						break;
+					let pasteDestinationItem: TreeItemState<TFile, TFolder, TFolder> | undefined;
+					switch (item.node.type) {
+						case "file": {
+							pasteDestinationItem = item.parent;
+							break;
+						}
+						case "folder": {
+							if (event.shiftKey) {
+								pasteDestinationItem = item.parent;
+							} else {
+								pasteDestinationItem = item as TreeItemState<TFile, TFolder, TFolder>;
+							}
+							break;
+						}
 					}
 
-					if (clipboard.operation === "cut") {
-						if (dropDestinationItem.inClipboard) {
-							// Pasting an item inside itself is not allowed.
+					if (pasteDestinationItem !== undefined && clipboard.operation === "cut") {
+						if (pasteDestinationItem.inClipboard) {
 							onCircularReference({
-								source: dropDestinationItem,
-								destination: dropDestinationItem.node,
+								source: pasteDestinationItem,
+								destination: pasteDestinationItem.node,
 							});
 							break;
 						}
 
 						const nearestCopiedAncestor = getNearestAncestor(
-							dropDestinationItem,
+							pasteDestinationItem,
 							isItemInClipboard,
 						);
 						if (nearestCopiedAncestor !== undefined) {
-							// Pasting an item inside itself is not allowed.
 							onCircularReference({
 								source: nearestCopiedAncestor,
-								destination: dropDestinationItem.node,
+								destination: pasteDestinationItem.node,
 							});
 							break;
 						}
 					}
 
-					paste(dropDestinationItem.node).then((didPaste) => {
+					const pasteDestination = pasteDestinationItem?.node ?? root;
+					paste(pasteDestination).then((didPaste) => {
 						if (didPaste) {
 							event.currentTarget.focus();
 						}

packages/svelte-file-tree/src/lib/components/types.ts

@@ -53,7 +53,7 @@ export type OnCircularReferenceArgs<
 	TFile extends FileNode = FileNode,
 	TFolder extends FolderNode<TFile | TFolder> = DefaultTFolder<TFile>,
 > = {
-	source: TreeItemState<TFile, TFolder>;
+	source: TreeItemState<TFile, TFolder, TFolder>;
 	destination: TFolder;
 };
 

sites/preview/src/lib/components/Tree.svelte

@@ -2,24 +2,19 @@
 	import { Tree, type FolderNode } from "svelte-file-tree";
 	import { flip } from "svelte/animate";
 	import { SvelteSet } from "svelte/reactivity";
-	import { isControlOrMeta } from "$lib/helpers.js";
 	import TreeItem from "./TreeItem.svelte";
 	import type { TreeProps } from "./types.js";
 
 	const { root }: TreeProps = $props();
 
 	const expandedIds = new SvelteSet<string>();
 	let dropDestination: FolderNode | undefined = $state.raw();
-
-	let tree: Tree | null = $state.raw(null);
 </script>
 
 <div class="flex min-h-svh p-2">
 	<Tree
 		{root}
 		{expandedIds}
-		bind:this={tree}
-		tabindex={0}
 		class={[
 			"relative grow p-6 focus-visible:outline-2 focus-visible:outline-current",
 			{
@@ -35,12 +30,6 @@
 		onDropDestinationChange={(args) => {
 			dropDestination = args.dropDestination;
 		}}
-		onkeydown={(event) => {
-			if (event.key === "v" && isControlOrMeta(event)) {
-				event.preventDefault();
-				tree!.paste(root);
-			}
-		}}
 	>
 		{#snippet children({ items })}
 			{#each items.filter((item) => item.visible) as item (item.node.id)}