WIP

src/view/vtt/app/main.ts

@@ -1,4 +1,4 @@
-import { Menu, MenuItem, TFile, TFolder, Vault } from "obsidian";
+import { App, Menu, MenuItem, TFile, TFolder, Vault } from "obsidian";
 import { Board } from "./board";
 import { Deck } from "./deck";
 import { Dnd } from "./dnd";
@@ -8,6 +8,7 @@ import tarotImages from "src/icons/tarot";
 import { Dice } from "./dice";
 import { trim } from "src/utils";
 import { identity } from "./utils";
+import { VttMediaModal } from "./media_modal";
 
 export class VttApp {
   board: Board;
@@ -29,7 +30,7 @@ export class VttApp {
     svg: "svg",
   };
 
-  constructor(el: Element, public vault: Vault, private fileData: string) {
+  constructor(el: Element, public app: App, private fileData: string) {
     this.dnd = new Dnd();
     this.el = el as HTMLElement;
 
@@ -47,6 +48,12 @@ export class VttApp {
       this.diceSubmenu = item.setSubmenu();
     });
     this.addDefaultDice();
+    this.menu.addSeparator();
+    this.menu.addItem((item: MenuItem) => {
+      item.setTitle("Add media from web").onClick(() => {
+        new VttMediaModal(this.app).open();
+      });
+    });
     this.el.oncontextmenu = (event: MouseEvent) => {
       this.board.setMenuPosition();
       this.menu.showAtMouseEvent(event);
@@ -79,7 +86,7 @@ export class VttApp {
 
   parseCustomDecks() {
     const customDeckRoot = "Assets/Decks";
-    const folder = this.vault.getFolderByPath(customDeckRoot);
+    const folder = this.app.vault.getFolderByPath(customDeckRoot);
     if (!folder?.children?.length) return;
 
     this.deckSubmenu.addSeparator();
@@ -144,10 +151,10 @@ export class VttApp {
     for (const child of folder.children) {
       if (child instanceof TFile) {
         if (child.extension in this.supportedExtensions) {
-          const image = this.vault.getResourcePath(child);
+          const image = this.app.vault.getResourcePath(child);
           deck.addCard({ image });
         } else if (child.extension === "md") {
-          const content = await this.vault.cachedRead(child);
+          const content = await this.app.vault.cachedRead(child);
           if (!content) continue;
 
           const lines = content.split("\n").map(trim).filter(identity);

src/view/vtt/app/media_modal.ts

@@ -0,0 +1,18 @@
+import { Notice, SuggestModal } from "obsidian";
+
+export class VttMediaModal extends SuggestModal<string> {
+  getSuggestions(query: string): string[] {
+    console.log("getSuggestions", query);
+    return [];
+  }
+
+  // Renders each suggestion item.
+  renderSuggestion(text: string, el: HTMLElement) {
+    el.createEl("div", { text });
+  }
+
+  // Perform action on the selected suggestion.
+  onChooseSuggestion(text: string, _event: MouseEvent | KeyboardEvent) {
+    new Notice(`Selected ${text}`);
+  }
+}

src/view/vtt/view.ts

@@ -65,7 +65,7 @@ export class VttView extends TextFileView {
     if (this.root) {
       this.root.update(fileData);
     } else {
-      this.root = new VttApp(container, this.app.vault, fileData);
+      this.root = new VttApp(container, this.app, fileData);
     }
   }
 }