[ENG-1368] Drag and drop links from Base and File explorer into canvas (#780)

* feature finished

* Update apps/obsidian/src/components/canvas/utils/externalContentHandlers.ts

Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>

---------

Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>

Author: trangdoan982

apps/obsidian/src/components/canvas/TldrawViewComponent.tsx

@@ -13,6 +13,8 @@ import {
   defaultBindingUtils,
   TLPointerEventInfo,
   DefaultSharePanel,
+  type TLDefaultExternalContentHandlerOpts,
+  type TLUiToast,
 } from "tldraw";
 import "tldraw/tldraw.css";
 import {
@@ -27,7 +29,7 @@ import {
   TLDATA_DELIMITER_END,
   TLDATA_DELIMITER_START,
 } from "~/constants";
-import { TFile } from "obsidian";
+import { Notice, TFile } from "obsidian";
 import { ObsidianTLAssetStore } from "~/components/canvas/stores/assetStore";
 import {
   createDiscourseNodeUtil,
@@ -52,6 +54,7 @@ import {
   openFileInNewLeaf,
   resolveDiscourseNodeFile,
 } from "./utils/openFileUtils";
+import { handleExternalUrlContent } from "./utils/externalContentHandlers";
 type TldrawPreviewProps = {
   store: TLStore;
   file: TFile;
@@ -264,6 +267,28 @@ export const TldrawPreviewComponent = ({
     editorRef.current = editor;
     setIsEditorMounted(true);
 
+    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.on("event", (event) => {
       // Handle pointer events
       if (event.type !== "pointer") return;

apps/obsidian/src/components/canvas/overlays/RelationPanel.tsx

@@ -1,7 +1,10 @@
 import { useEffect, useMemo, useState } from "react";
 import type { TFile } from "obsidian";
 import type DiscourseGraphPlugin from "~/index";
-import { DiscourseNodeShape } from "~/components/canvas/shapes/DiscourseNodeShape";
+import {
+  buildDiscourseNodeShapeRecord,
+  type DiscourseNodeShape,
+} from "~/components/canvas/shapes/DiscourseNodeShape";
 import {
   ensureBlockRefForFile,
   resolveLinkedFileFromSrc,
@@ -229,37 +232,25 @@ export const RelationsPanel = ({
 
     if (existing) return existing;
 
-    // Create a new node shape near the selected node
     const newId = createShapeId();
     const src = `asset:obsidian.blockref.${blockRef}`;
     const x = nodeShape.x + nodeShape.props.w + 80;
     const y = nodeShape.y;
-
     const nodeTypeId = getFrontmatterForFile(plugin.app, file)
       ?.nodeTypeId as string;
 
-    const created: DiscourseNodeShape = {
+    const created = buildDiscourseNodeShapeRecord(editor, {
       id: newId,
-      typeName: "shape",
-      type: "discourse-node",
       x,
       y,
-      rotation: 0,
-      index: editor.getHighestIndexForParent(editor.getCurrentPageId()),
-      parentId: editor.getCurrentPageId(),
-      isLocked: false,
-      opacity: 1,
-      meta: {},
       props: {
-        w: 200,
-        h: 100,
         src,
         title: file.basename,
-        nodeTypeId: nodeTypeId,
+        nodeTypeId,
         size: "m",
         fontFamily: "sans",
       },
-    };
+    });
 
     editor.createShape(created);
     return created;

apps/obsidian/src/components/canvas/shapes/DiscourseNodeShape.tsx

@@ -1,10 +1,12 @@
 import {
   BaseBoxShapeUtil,
+  Editor,
   HTMLContainer,
   resizeBox,
   T,
   TLBaseShape,
   TLResizeInfo,
+  TLShapeId,
   useEditor,
   useValue,
   DefaultSizeStyle,
@@ -52,6 +54,54 @@ export type DiscourseNodeUtilOptions = {
   canvasFile: TFile;
 };
 
+/** Default props for new discourse node shapes. Used by getDefaultProps and buildDiscourseNodeShapeRecord. */
+export const DEFAULT_DISCOURSE_NODE_PROPS: DiscourseNodeShape["props"] = {
+  w: 200,
+  h: 100,
+  src: null,
+  title: "",
+  nodeTypeId: "",
+  imageSrc: undefined,
+  size: "s",
+  fontFamily: "sans",
+};
+
+export type BuildDiscourseNodeShapeRecordParams = {
+  id: TLShapeId;
+  x: number;
+  y: number;
+  props: Partial<DiscourseNodeShape["props"]> &
+    Pick<DiscourseNodeShape["props"], "src" | "title" | "nodeTypeId">;
+};
+
+/**
+ * Build a full DiscourseNodeShape record for editor.createShape.
+ * Merges given props with DEFAULT_DISCOURSE_NODE_PROPS.
+ */
+export const buildDiscourseNodeShapeRecord = (
+  editor: Editor,
+  { id, x, y, props: propsPartial }: BuildDiscourseNodeShapeRecordParams,
+): DiscourseNodeShape => {
+  const props: DiscourseNodeShape["props"] = {
+    ...DEFAULT_DISCOURSE_NODE_PROPS,
+    ...propsPartial,
+  };
+  return {
+    id,
+    typeName: "shape",
+    type: "discourse-node",
+    x,
+    y,
+    rotation: 0,
+    index: editor.getHighestIndexForParent(editor.getCurrentPageId()),
+    parentId: editor.getCurrentPageId(),
+    isLocked: false,
+    opacity: 1,
+    meta: {},
+    props,
+  };
+};
+
 export class DiscourseNodeUtil extends BaseBoxShapeUtil<DiscourseNodeShape> {
   static type = "discourse-node" as const;
   declare options: DiscourseNodeUtilOptions;
@@ -68,16 +118,7 @@ export class DiscourseNodeUtil extends BaseBoxShapeUtil<DiscourseNodeShape> {
   };
 
   getDefaultProps(): DiscourseNodeShape["props"] {
-    return {
-      w: 200,
-      h: 100,
-      src: null,
-      title: "",
-      nodeTypeId: "",
-      imageSrc: undefined,
-      size: "s",
-      fontFamily: "sans",
-    };
+    return { ...DEFAULT_DISCOURSE_NODE_PROPS };
   }
 
   override isAspectRatioLocked = () => false;