allow pasting at the root

Author: abdel-17

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

@@ -1,6 +1,6 @@
 <script
 	lang="ts"
-	generics="TFile extends FileNode, TFolder extends FolderNode<TFile | TFolder> = DefaultTFolder<TFile>"
+	generics="TFile extends FileNode = FileNode, TFolder extends FolderNode<TFile | TFolder> = DefaultTFolder<TFile>"
 >
 	import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 	import { DEV } from "esm-env";

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

@@ -1,6 +1,6 @@
 <script
 	lang="ts"
-	generics="TFile extends FileNode, TFolder extends FolderNode<TFile | TFolder> = DefaultTFolder<TFile>"
+	generics="TFile extends FileNode = FileNode, TFolder extends FolderNode<TFile | TFolder> = DefaultTFolder<TFile>"
 >
 	import {
 		draggable,

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

@@ -2,48 +2,61 @@
 	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>
 
-<Tree
-	{root}
-	{expandedIds}
-	class={[
-		"min-h-svh p-8",
-		{
-			"before:pointer-events-none before:absolute before:inset-2 before:border-2 before:border-red-500":
-				dropDestination === root,
-		},
-	]}
-	onChildrenChange={(args) => {
-		if (args.operation === "insert") {
-			args.children.sort((a, b) => a.name.localeCompare(b.name));
-		}
-	}}
-	onDropDestinationChange={(args) => {
-		dropDestination = args.dropDestination;
-	}}
->
-	{#snippet children({ items })}
-		{#each items.filter((item) => item.visible) as item (item.node.id)}
-			<div animate:flip={{ duration: 300 }}>
-				<TreeItem
-					{item}
-					{dropDestination}
-					onExpand={() => {
-						expandedIds.add(item.node.id);
-					}}
-					onCollapse={() => {
-						expandedIds.delete(item.node.id);
-					}}
-				/>
-			</div>
-		{/each}
-	{/snippet}
-</Tree>
+<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",
+			{
+				"before:pointer-events-none before:absolute before:inset-0 before:border-2 before:border-red-500":
+					dropDestination === root,
+			},
+		]}
+		onChildrenChange={(args) => {
+			if (args.operation === "insert") {
+				args.children.sort((a, b) => a.name.localeCompare(b.name));
+			}
+		}}
+		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)}
+				<div animate:flip={{ duration: 300 }}>
+					<TreeItem
+						{item}
+						{dropDestination}
+						onExpand={() => {
+							expandedIds.add(item.node.id);
+						}}
+						onCollapse={() => {
+							expandedIds.delete(item.node.id);
+						}}
+					/>
+				</div>
+			{/each}
+		{/snippet}
+	</Tree>
+</div>

sites/preview/src/lib/helpers.ts

@@ -0,0 +1,9 @@
+/**
+ * @link https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform#examples
+ */
+export function isControlOrMeta(event: KeyboardEvent | MouseEvent) {
+	if (navigator.platform.startsWith("Mac") || navigator.platform === "iPhone") {
+		return event.metaKey;
+	}
+	return event.ctrlKey;
+}