[ENG-1527] Handle image embeds in editor right-click convert to node (#885)

* handle image embeds in editor right-click "Turn into discourse node"

When the selected text is an image embed (wikilink, markdown, or HTML img),
open ModifyNodeModal to let the user pick a title/type, create the discourse
node, embed the image in it, and replace the selection with a link.

Closes ENG-1527

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix

* working

* lint

* pr comment + lint

* address PR comments

* Update apps/obsidian/src/utils/editorMenuUtils.ts

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

* Update apps/obsidian/src/utils/editorMenuUtils.ts

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

* Update apps/obsidian/src/utils/editorMenuUtils.ts

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

* address PR comments

* fix ci

---------

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

Author: 3 people

.gitignore

@@ -40,3 +40,4 @@ local/*
 .cursor/debug.log
 apps/tldraw-sync-worker/tsconfig.tsbuildinfo
 apps/tldraw-sync-worker/.wrangler/*
+.claude/*

apps/obsidian/src/index.ts

@@ -11,6 +11,11 @@ import {
 import { EditorView } from "@codemirror/view";
 import { SettingsTab } from "~/components/Settings";
 import { Settings, VIEW_TYPE_DISCOURSE_CONTEXT } from "~/types";
+import {
+  addConvertSubmenu,
+  isImageFile,
+  replaceImageEmbedInEditor,
+} from "~/utils/editorMenuUtils";
 import { registerCommands } from "~/utils/registerCommands";
 import { DiscourseContextView } from "~/components/DiscourseContextView";
 import { VIEW_TYPE_TLDRAW_DG_PREVIEW, FRONTMATTER_KEY } from "~/constants";
@@ -146,8 +151,53 @@ export default class DiscourseGraphPlugin extends Plugin {
     );
 
     this.registerEvent(
-      // @ts-ignore - file-menu event exists but is not in the type definitions
       this.app.workspace.on("file-menu", (menu: Menu, file: TFile) => {
+        if (isImageFile(file)) {
+          addConvertSubmenu({
+            menu,
+            label: "Convert into",
+            nodeTypes: this.settings.nodeTypes,
+            onClick: (nodeType) => {
+              new ModifyNodeModal(this.app, {
+                nodeTypes: this.settings.nodeTypes,
+                plugin: this,
+                initialTitle: "",
+                initialNodeType: nodeType,
+                onSubmit: async ({
+                  nodeType: selectedType,
+                  title,
+                  selectedExistingNode,
+                }) => {
+                  const targetFile =
+                    selectedExistingNode ??
+                    (await createDiscourseNode({
+                      plugin: this,
+                      nodeType: selectedType,
+                      text: title,
+                    }));
+
+                  if (!targetFile) return;
+
+                  const imageLink = this.app.metadataCache.fileToLinktext(
+                    file,
+                    targetFile.path,
+                  );
+                  await this.app.vault.append(
+                    targetFile,
+                    `\n![[${imageLink}]]\n`,
+                  );
+                  replaceImageEmbedInEditor({
+                    app: this.app,
+                    imageFile: file,
+                    targetFile,
+                  });
+                },
+              }).open();
+            },
+          });
+          return;
+        }
+
         const fileCache = this.app.metadataCache.getFileCache(file);
         const fileNodeType = fileCache?.frontmatter?.nodeTypeId;
 
@@ -157,36 +207,26 @@ export default class DiscourseGraphPlugin extends Plugin {
             (nodeType) => nodeType.id === fileNodeType,
           )
         ) {
-          menu.addItem((menuItem) => {
-            menuItem.setTitle("Convert into");
-            menuItem.setIcon("file-type");
-
-            // @ts-ignore - setSubmenu is not officially in the API but works
-            const submenu = menuItem.setSubmenu();
-
-            this.settings.nodeTypes.forEach((nodeType) => {
-              submenu.addItem((item: any) => {
-                item
-                  .setTitle(nodeType.name)
-                  .setIcon("file-type")
-                  .onClick(() => {
-                    new ModifyNodeModal(this.app, {
-                      nodeTypes: this.settings.nodeTypes,
-                      plugin: this,
-                      initialTitle: file.basename,
-                      initialNodeType: nodeType,
-                      onSubmit: async ({ nodeType, title }) => {
-                        await convertPageToDiscourseNode({
-                          plugin: this,
-                          file,
-                          nodeType,
-                          title,
-                        });
-                      },
-                    }).open();
+          addConvertSubmenu({
+            menu,
+            label: "Convert into",
+            nodeTypes: this.settings.nodeTypes,
+            onClick: (nodeType) => {
+              new ModifyNodeModal(this.app, {
+                nodeTypes: this.settings.nodeTypes,
+                plugin: this,
+                initialTitle: file.basename,
+                initialNodeType: nodeType,
+                onSubmit: async ({ nodeType, title }) => {
+                  await convertPageToDiscourseNode({
+                    plugin: this,
+                    file,
+                    nodeType,
+                    title,
                   });
-              });
-            });
+                },
+              }).open();
+            },
           });
         }
       }),
@@ -196,29 +236,19 @@ export default class DiscourseGraphPlugin extends Plugin {
       this.app.workspace.on("editor-menu", (menu: Menu, editor: Editor) => {
         if (!editor.getSelection()) return;
 
-        menu.addItem((menuItem) => {
-          menuItem.setTitle("Turn into discourse node");
-          menuItem.setIcon("file-type");
-
-          // Create submenu using the unofficial API pattern
-          // @ts-ignore - setSubmenu is not officially in the API but works
-          const submenu = menuItem.setSubmenu();
-
-          this.settings.nodeTypes.forEach((nodeType) => {
-            submenu.addItem((item: any) => {
-              item
-                .setTitle(nodeType.name)
-                .setIcon("file-type")
-                .onClick(async () => {
-                  await createDiscourseNode({
-                    plugin: this,
-                    editor,
-                    nodeType,
-                    text: editor.getSelection().trim() || "",
-                  });
-                });
+        const selection = editor.getSelection().trim();
+        addConvertSubmenu({
+          menu,
+          label: "Turn into discourse node",
+          nodeTypes: this.settings.nodeTypes,
+          onClick: async (nodeType) => {
+            await createDiscourseNode({
+              plugin: this,
+              editor,
+              nodeType,
+              text: selection,
             });
-          });
+          },
         });
       }),
     );

apps/obsidian/src/types/obsidian-unofficial.d.ts

@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/consistent-type-definitions */
+// Unofficial Obsidian APIs — may break on Obsidian updates.
+// Only declare what we actually use.
+import "obsidian";
+
+declare module "obsidian" {
+  // module has to be declared using interface instead of type to merge with the official types
+  interface Workspace {
+    on(
+      name: "file-menu",
+      callback: (menu: Menu, file: TFile) => void,
+    ): EventRef;
+  }
+
+  interface MenuItem {
+    setSubmenu(): Menu;
+  }
+}

apps/obsidian/src/utils/editorMenuUtils.ts

@@ -0,0 +1,73 @@
+import { App, MarkdownView, Menu, TFile } from "obsidian";
+import { DiscourseNode } from "~/types";
+
+/**
+ * Add a "Convert into" / "Turn into discourse node" submenu to a context menu,
+ * with one item per node type.
+ */
+export const addConvertSubmenu = ({
+  menu,
+  label,
+  nodeTypes,
+  onClick,
+}: {
+  menu: Menu;
+  label: string;
+  nodeTypes: DiscourseNode[];
+  onClick: (nodeType: DiscourseNode) => void | Promise<void>;
+}): void => {
+  menu.addItem((menuItem) => {
+    menuItem.setTitle(label);
+    menuItem.setIcon("file-type");
+
+    const submenu = menuItem.setSubmenu();
+
+    nodeTypes.forEach((nodeType) => {
+      submenu.addItem((item) => {
+        item
+          .setTitle(nodeType.name)
+          .setIcon("file-type")
+          .onClick(() => void onClick(nodeType));
+      });
+    });
+  });
+};
+
+/**
+ * Replace the first embed of `imageFile` in the active editor with a link to `targetFile`.
+ */
+export const replaceImageEmbedInEditor = ({
+  app,
+  imageFile,
+  targetFile,
+}: {
+  app: App;
+  imageFile: TFile;
+  targetFile: TFile;
+}): void => {
+  const activeView = app.workspace.getActiveViewOfType(MarkdownView);
+  if (!activeView?.file) return;
+
+  const cache = app.metadataCache.getFileCache(activeView.file);
+  const embed = cache?.embeds?.find((e) => {
+    const resolved = app.metadataCache.getFirstLinkpathDest(
+      e.link,
+      activeView.file!.path,
+    );
+    return resolved?.path === imageFile.path;
+  });
+  if (!embed) return;
+
+  const from = activeView.editor.offsetToPos(embed.position.start.offset);
+  const to = activeView.editor.offsetToPos(embed.position.end.offset);
+  const linkText = app.metadataCache.fileToLinktext(
+    targetFile,
+    activeView.file.path,
+  );
+  activeView.editor.replaceRange(`[[${linkText}]]`, from, to);
+};
+
+const IMAGE_EXTENSIONS = /^(png|jpe?g|gif|svg|bmp|webp|avif|tiff?)$/i;
+
+export const isImageFile = (file: TFile): boolean =>
+  IMAGE_EXTENSIONS.test(file.extension);