widget approach

Author: trangdoan982

apps/obsidian/src/index.ts

@@ -17,6 +17,10 @@ import {
   openConvertImageToNodeModal,
 } from "~/utils/editorMenuUtils";
 import { createImageEmbedHoverExtension } from "~/utils/imageEmbedHoverIcon";
+import {
+  createWikilinkDragExtension,
+  wikilinkDragPostProcessor,
+} from "~/utils/wikilinkDragHandler";
 import { registerCommands } from "~/utils/registerCommands";
 import { DiscourseContextView } from "~/components/DiscourseContextView";
 import { VIEW_TYPE_TLDRAW_DG_PREVIEW, FRONTMATTER_KEY } from "~/constants";
@@ -232,6 +236,9 @@ export default class DiscourseGraphPlugin extends Plugin {
       }),
     );
 
+    // Make wikilinks draggable so they can be dropped onto tldraw canvases
+    this.registerMarkdownPostProcessor(wikilinkDragPostProcessor(this));
+
     // Register editor keydown listener for node tag hotkey
     this.setupNodeTagHotkey();
   }
@@ -281,6 +288,9 @@ export default class DiscourseGraphPlugin extends Plugin {
 
     // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     this.registerEditorExtension(createImageEmbedHoverExtension(this));
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    this.registerEditorExtension(createWikilinkDragExtension(this));
   }
 
   private createStyleElement() {

apps/obsidian/src/utils/wikilinkDragHandler.ts

@@ -0,0 +1,205 @@
+import {
+  type PluginValue,
+  ViewPlugin,
+  type ViewUpdate,
+  WidgetType,
+  Decoration,
+  type DecorationSet,
+  EditorView,
+} from "@codemirror/view";
+import type { Range } from "@codemirror/state";
+import { TFile } from "obsidian";
+import type DiscourseGraphPlugin from "~/index";
+
+const DRAG_ATTR = "data-dg-draggable";
+const DRAG_HANDLE_CLASS = "dg-wikilink-drag-handle";
+
+const buildObsidianUrl = (vaultName: string, filePath: string): string => {
+  return `obsidian://open?vault=${encodeURIComponent(vaultName)}&file=${encodeURIComponent(filePath)}`;
+};
+
+const resolveFileFromLinkText = (
+  linkText: string,
+  plugin: DiscourseGraphPlugin,
+): TFile | null => {
+  const activeFile = plugin.app.workspace.getActiveFile();
+  if (!activeFile) return null;
+
+  const resolved = plugin.app.metadataCache.getFirstLinkpathDest(
+    linkText,
+    activeFile.path,
+  );
+  return resolved instanceof TFile ? resolved : null;
+};
+
+const setDragData = (
+  e: DragEvent,
+  file: TFile,
+  plugin: DiscourseGraphPlugin,
+): void => {
+  const vaultName = plugin.app.vault.getName();
+  const url = buildObsidianUrl(vaultName, file.path);
+  e.dataTransfer?.setData("text/uri-list", url);
+  e.dataTransfer?.setData("text/plain", url);
+};
+
+// --- Reading view ---
+
+const makeReadingLinkDraggable = (
+  linkEl: HTMLAnchorElement,
+  plugin: DiscourseGraphPlugin,
+): void => {
+  if (linkEl.hasAttribute(DRAG_ATTR)) return;
+  linkEl.setAttribute(DRAG_ATTR, "true");
+  linkEl.draggable = true;
+
+  linkEl.addEventListener("dragstart", (e) => {
+    const href = linkEl.getAttr("data-href") ?? linkEl.getAttr("href");
+    if (!href) {
+      e.preventDefault();
+      return;
+    }
+
+    const file = resolveFileFromLinkText(href, plugin);
+    if (!file) {
+      e.preventDefault();
+      return;
+    }
+
+    setDragData(e, file, plugin);
+  });
+};
+
+/**
+ * Markdown post-processor that makes wikilinks draggable in Reading view.
+ */
+export const wikilinkDragPostProcessor = (
+  plugin: DiscourseGraphPlugin,
+): ((el: HTMLElement) => void) => {
+  return (el: HTMLElement) => {
+    const links = el.querySelectorAll<HTMLAnchorElement>(
+      "a.internal-link:not(.internal-embed)",
+    );
+    for (const link of links) {
+      makeReadingLinkDraggable(link, plugin);
+    }
+  };
+};
+
+// --- Live Preview ---
+
+/**
+ * Extract the file path from a link match.
+ * Handles wikilinks (`[[path]]`, `[[path|alias]]`) and
+ * markdown links (`[text](path.md)`), decoding URL-encoded paths.
+ */
+const extractLinkPath = (match: string): string => {
+  // Wikilink: [[path]] or [[path|alias]]
+  if (match.startsWith("[[")) {
+    const inner = match.slice(2, -2);
+    const pipeIndex = inner.indexOf("|");
+    return pipeIndex >= 0 ? inner.slice(0, pipeIndex) : inner;
+  }
+
+  // Markdown link: [text](path)
+  const parenOpen = match.lastIndexOf("(");
+  const rawPath = match.slice(parenOpen + 1, -1);
+  return decodeURIComponent(rawPath);
+};
+
+/**
+ * Widget that renders a small drag handle next to an internal link.
+ * CM6 widgets get `ignoreEvent() → true` by default, which means
+ * the editor completely ignores mouse events on them — native drag works.
+ */
+class WikilinkDragHandleWidget extends WidgetType {
+  constructor(
+    private linkPath: string,
+    private plugin: DiscourseGraphPlugin,
+  ) {
+    super();
+  }
+
+  eq(other: WikilinkDragHandleWidget): boolean {
+    return this.linkPath === other.linkPath;
+  }
+
+  toDOM(): HTMLElement {
+    const handle = document.createElement("span");
+    handle.className = DRAG_HANDLE_CLASS;
+    handle.draggable = true;
+    handle.setAttribute("aria-label", "Drag to canvas");
+    handle.textContent = "⠿";
+
+    handle.addEventListener("dragstart", (e) => {
+      const file = resolveFileFromLinkText(this.linkPath, this.plugin);
+      if (!file) {
+        e.preventDefault();
+        return;
+      }
+      setDragData(e, file, this.plugin);
+    });
+
+    return handle;
+  }
+}
+
+// Matches wikilinks [[...]] (not embeds ![[...]]) and markdown links [text](path)
+const INTERNAL_LINK_RE =
+  /(?<!!)\[\[([^\]]+)\]\]|(?<!!)\[([^\]]+)\]\(([^)]+\.md)\)/g;
+
+const buildWidgetDecorations = (
+  view: EditorView,
+  plugin: DiscourseGraphPlugin,
+): DecorationSet => {
+  const widgets: Range<Decoration>[] = [];
+
+  for (const { from, to } of view.visibleRanges) {
+    const text = view.state.doc.sliceString(from, to);
+    let match: RegExpExecArray | null;
+    INTERNAL_LINK_RE.lastIndex = 0;
+
+    while ((match = INTERNAL_LINK_RE.exec(text)) !== null) {
+      const matchEnd = from + match.index + match[0].length;
+      const linkPath = extractLinkPath(match[0]);
+      const widget = new WikilinkDragHandleWidget(linkPath, plugin);
+      widgets.push(Decoration.widget({ widget, side: 1 }).range(matchEnd));
+    }
+  }
+
+  // Decorations must be sorted by position
+  widgets.sort((a, b) => a.from - b.from);
+  return Decoration.set(widgets);
+};
+
+/**
+ * CM6 ViewPlugin that adds a draggable grip icon after each internal link
+ * in Live Preview. Matches both wikilinks (`[[...]]`) and markdown links
+ * (`[text](path.md)`), inserting a widget decoration after each match.
+ */
+export const createWikilinkDragExtension = (
+  plugin: DiscourseGraphPlugin,
+): ViewPlugin<PluginValue> => {
+  return ViewPlugin.fromClass(
+    class {
+      decorations: DecorationSet;
+
+      constructor(view: EditorView) {
+        this.decorations = buildWidgetDecorations(view, plugin);
+      }
+
+      update(update: ViewUpdate): void {
+        if (
+          update.docChanged ||
+          update.viewportChanged ||
+          update.selectionSet
+        ) {
+          this.decorations = buildWidgetDecorations(update.view, plugin);
+        }
+      }
+    },
+    {
+      decorations: (v) => v.decorations,
+    },
+  );
+};

apps/obsidian/styles.css

@@ -35,6 +35,27 @@
   background: var(--interactive-accent-hover);
 }
 
+/* Drag handle next to wikilinks in Live Preview */
+.dg-wikilink-drag-handle {
+  display: inline-block;
+  cursor: grab;
+  opacity: 0;
+  font-size: 10px;
+  vertical-align: middle;
+  margin-left: 2px;
+  color: var(--text-muted);
+  transition: opacity 0.15s ease;
+  user-select: none;
+}
+
+.cm-line:hover .dg-wikilink-drag-handle {
+  opacity: 0.6;
+}
+
+.dg-wikilink-drag-handle:hover {
+  opacity: 1 !important;
+}
+
 /* Neutralize host button styling inside our editor */
 .tldraw__editor button {
   background: transparent !important;