[ENG-1368] Drag and drop links from Base and File explorer into canvas

[trangdoan982]

https://www.loom.com/share/f0520b78435c4caabac0f6b6871b4fa3

---

[linear]

ENG-1368 Ability to drag and drop files from Obsidian file system to tldraw Canvas

[supabase]

This pull request has been ignored for the connected project zytfjzqyijgagqxrzbmz because there are no changes detected in packages/database/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[devin-ai-integration]

Devin Review found 1 potential issue.

View 6 additional findings in Devin Review.

[devin-ai-integration]

Devin Review found 1 new potential issue.

View 8 additional findings in Devin Review.

[devin-ai-integration]

🔴 External content handler discards promise with void, breaking tldraw's async handler contract

The registerExternalContentHandler callback uses void handleExternalUrlContent(...) which discards the returned promise, causing the handler to return undefined synchronously instead of a Promise<void>.

Root Cause and Impact

Tldraw's registerExternalContentHandler expects the handler to return a Promise<void> so it can await the handler's completion. By using void (TldrawViewComponent.tsx:271), the promise from handleExternalUrlContent is discarded and the callback returns undefined synchronously.

When tldraw does await handler(content), it gets undefined, which resolves immediately. This means tldraw will consider the content handling "done" before the async work actually completes. Concretely:

1. For obsidian:// URLs: ensureBlockRefForFile at externalContentHandlers.ts:170 is async and must complete before the shape can be created. Since tldraw isn't waiting, drag indicators and other UI may dismiss before the node appears on canvas.
2. For non-obsidian URLs: The fallback call to defaultHandleExternalUrlContent at externalContentHandlers.ts:145 also runs fire-and-forget, so bookmark/embed creation may not complete properly.
3. Error handling: Errors thrown after the first await inside handleExternalUrlContent become unhandled promise rejections instead of being caught by tldraw's error handling.

The fix is to return the promise instead of discarding it, e.g. return handleExternalUrlContent(...) instead of void handleExternalUrlContent(...).

Suggested change

	editor.registerExternalContentHandler("url", (externalContent) => {
	void handleExternalUrlContent({
	editor,
	url: externalContent.url,
	point: externalContent.point,
	plugin,
	canvasFile: file,
	defaultHandlerOpts: {
	toasts: {
	addToast: (t: Omit<TLUiToast, "id"> & { id?: string }) => {
	new Notice(t.description ?? t.title ?? "Error");
	return "";
	},
	removeToast: () => "",
	clearToasts: () => {},
	toasts: { get: () => [], update: () => {} },
	},
	msg: (key?: string) => key ?? "",
	} as unknown as TLDefaultExternalContentHandlerOpts,
	});
	});
	editor.registerExternalContentHandler("url", (externalContent) => {
	return handleExternalUrlContent({
	editor,
	url: externalContent.url,
	point: externalContent.point,
	plugin,
	canvasFile: file,
	defaultHandlerOpts: {
	toasts: {
	addToast: (t: Omit<TLUiToast, "id"> & { id?: string }) => {
	new Notice(t.description ?? t.title ?? "Error");
	return "";
	},
	removeToast: () => "",
	clearToasts: () => {},
	toasts: { get: () => [], update: () => {} },
	},
	msg: (key?: string) => key ?? "",
	} as unknown as TLDefaultExternalContentHandlerOpts,
	});
	});

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[mdroidian]

👍
Feel free to merge after dealing with #780 (comment)