Drag and Drop in Canvas!

2 files changed, 45 insertions, 2 deletions

diff --git a/apps/web/app/(canvas)/lib/context.tsx b/apps/web/app/(canvas)/lib/context.tsx
new file mode 100644
index 00000000..36a106cf
--- /dev/null
+++ b/apps/web/app/(canvas)/lib/context.tsx
@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+export interface DragContextType {
+  isDraggingOver: boolean;
+  setIsDraggingOver: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+
+const DragContext = createContext<DragContextType | undefined>(undefined);
+
+export default DragContext;
\ No newline at end of file
diff --git a/apps/web/app/(canvas)/lib/createEmbeds.ts b/apps/web/app/(canvas)/lib/createEmbeds.ts
index 53d81533..0db3c71b 100644
--- a/apps/web/app/(canvas)/lib/createEmbeds.ts
+++ b/apps/web/app/(canvas)/lib/createEmbeds.ts
@@ -2,8 +2,8 @@ import { AssetRecordType, Editor, TLAsset, TLAssetId, TLBookmarkShape, TLExterna
 
 export default async function createEmbedsFromUrl({url, point, sources, editor}: {
   url: string
-  point: VecLike | undefined
-  sources: TLExternalContentSource[] | undefined
+  point?: VecLike | undefined
+  sources?: TLExternalContentSource[] | undefined
   editor: Editor
 }){
 
@@ -87,6 +87,38 @@ export default async function createEmbedsFromUrl({url, point, sources, editor}:
     });
 }
 
+function isURL(str: string) {
+  try {
+    new URL(str);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+
+export function handleExternalDroppedContent({text, editor}: {text:string, editor: Editor}){
+  const position = editor.inputs.shiftKey
+  ? editor.inputs.currentPagePoint
+  : editor.getViewportPageBounds().center;
+
+  if (isURL(text)){
+    createEmbedsFromUrl({editor, url: text})
+  } else{
+    editor.createShape({
+      type: "text",
+      x: position.x - 75,
+      y: position.y - 75,
+      props: {
+        text: text,
+        size: "s",
+        textAlign: "start",
+      },
+    });
+
+  }
+}
+
 function centerSelectionAroundPoint(editor: Editor, position: VecLike) {
 	// Re-position shapes so that the center of the group is at the provided point
 	const viewportPageBounds = editor.getViewportPageBounds()