Use embed registry instead of embed decoration/post processor

joethei · Apr 26, 2024 · 6d523b7 · 6d523b7
1 parent 4df1c87
commit 6d523b7
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 190 deletions.
diff --git a/src/debouncedProcessors.ts b/src/debouncedProcessors.ts
@@ -7,7 +7,7 @@ export class DebouncedProcessors implements Processor {
 
     SECONDS_TO_MS_FACTOR = 1000;
 
-    debounceMap = new Map<string, Debouncer<[string, HTMLElement, MarkdownPostProcessorContext]>>();
+    debounceMap = new Map<string, Debouncer<[string, HTMLElement, MarkdownPostProcessorContext], unknown>>();
 
     debounceTime: number;
     plugin: PlantumlPlugin;
@@ -38,7 +38,7 @@ export class DebouncedProcessors implements Processor {
         if (el.dataset.plantumlDebounce) {
             const debounceId = el.dataset.plantumlDebounce;
             if (this.debounceMap.has(debounceId)) {
-                await this.debounceMap.get(debounceId)(source, el, ctx);
+                this.debounceMap.get(debounceId)(source, el, ctx);
             }
         } else {
             const func = debounce(processor, this.debounceTime, true);
@@ -52,7 +52,7 @@ export class DebouncedProcessors implements Processor {
             await processor(source, el, ctx);
             el.addEventListener('contextmenu', (event) => {
 
-                const menu = new Menu(this.plugin.app)
+                const menu = new Menu()
                     .addItem(item => {
                         item
                             .setTitle('Copy diagram source')
@@ -61,7 +61,6 @@ export class DebouncedProcessors implements Processor {
                                 await navigator.clipboard.writeText(originalSource);
                             })
                     })
-
                     .addItem(item => {
                         item
                             .setTitle('Copy diagram')
@@ -230,4 +229,4 @@ export class DebouncedProcessors implements Processor {
             console.error(error);
         }
     }
-}
+}
diff --git a/src/decorations/EmbedDecoration.ts b/src/decorations/EmbedDecoration.ts
diff --git a/src/embed.ts b/src/embed.ts
@@ -0,0 +1,21 @@
+import {Component, EmbedChild, EmbedContext, TFile} from "obsidian";
+import PlantumlPlugin from "./main";
+
+export class PumlEmbed extends Component implements EmbedChild {
+    plugin: PlantumlPlugin;
+    ctx: EmbedContext;
+    file: TFile;
+
+    constructor(plugin: PlantumlPlugin, file: TFile, ctx: EmbedContext) {
+        super();
+        this.plugin = plugin;
+        this.file = file;
+        this.ctx = ctx;
+    }
+
+    async loadFile() {
+        const data = await this.plugin.app.vault.cachedRead(this.file);
+        await this.plugin.getProcessor().png(data, this.ctx.containerEl, null);
+    }
+
+}
diff --git a/src/main.ts b/src/main.ts
@@ -1,5 +1,5 @@
 import {
-    addIcon, Platform,
+    addIcon, Component, Platform,
     Plugin, TFile
 } from 'obsidian';
 import {DEFAULT_SETTINGS, PlantUMLSettings, PlantUMLSettingsTab} from "./settings";
@@ -10,9 +10,8 @@ import {Processor} from "./processor";
 import {ServerProcessor} from "./serverProcessor";
 import {Replacer} from "./functions";
 import {PumlView, VIEW_TYPE} from "./PumlView";
-import {Prec} from "@codemirror/state";
-import {asyncDecoBuilderExt} from "./decorations/EmbedDecoration";
 import localforage from "localforage";
+import {PumlEmbed} from "./embed";
 
 declare module "obsidian" {
     interface Workspace {
@@ -22,6 +21,21 @@ declare module "obsidian" {
             ctx?: any,
         ): EventRef;
     }
+    interface App {
+        embedRegistry: EmbedRegistry;
+    }
+    interface EmbedRegistry extends Events {
+        registerExtensions(extensions: string[], embedCreator: EmbedCreator): void;
+        unregisterExtensions(extensions: string[]): void;
+    }
+    interface EmbedChild extends Component {
+        loadFile(): Promise<void>;
+    }
+    type EmbedCreator = (context: EmbedContext, file: TFile, path?: string) => Component;
+    interface EmbedContext {
+        app: App;
+        containerEl: HTMLElement;
+    }
 }
 
 export default class PlantumlPlugin extends Plugin {
@@ -69,7 +83,6 @@ export default class PlantumlPlugin extends Plugin {
             return new PumlView(leaf, this);
         });
         this.registerExtensions(["puml", "pu"], VIEW_TYPE);
-        this.registerEditorExtension(Prec.lowest(asyncDecoBuilderExt(this)));
 
         this.registerMarkdownCodeBlockProcessor("plantuml", processor.png);
         this.registerMarkdownCodeBlockProcessor("plantuml-ascii", processor.ascii);
@@ -81,6 +94,8 @@ export default class PlantumlPlugin extends Plugin {
         //keep this processor for backwards compatibility
         this.registerMarkdownCodeBlockProcessor("plantuml-map", processor.png);
 
+        this.app.embedRegistry.registerExtensions(['puml', 'pu'], (ctx, file, subpath) => new PumlEmbed(this, file, ctx));
+
         this.cleanupLocalStorage();
         localforage.config({
             name: 'puml',
@@ -142,35 +157,6 @@ export default class PlantumlPlugin extends Plugin {
         }));
 
         this.observer.observe(document, {childList: true, subtree: true});
-
-        //embed handling
-        this.registerMarkdownPostProcessor(async (element, context) => {
-            const embeddedItems = element.querySelectorAll(".internal-embed");
-            if (embeddedItems.length === 0) {
-                return;
-            }
-
-            for (const key in embeddedItems) {
-                const item = embeddedItems[key];
-                if (typeof item.getAttribute !== "function") return;
-
-                const filename = item.getAttribute("src");
-                const file = this.app.metadataCache.getFirstLinkpathDest(filename.split("#")[0], context.sourcePath);
-                if (file && file instanceof TFile && (file.extension === "puml" || file.extension === "pu")) {
-                    const fileContent = await this.app.vault.read(file);
-
-                    const div = createDiv();
-                    if(this.settings.defaultProcessor === "png") {
-                        await this.getProcessor().png(fileContent, div, context);
-                    }else {
-                        await this.getProcessor().svg(fileContent, div, context);
-                    }
-
-                    item.parentElement.replaceChild(div, item);
-                }
-            }
-
-        });
     }
 
     async cleanupCache() {
@@ -202,6 +188,7 @@ export default class PlantumlPlugin extends Plugin {
     async onunload(): Promise<void> {
         console.log('unloading plugin plantuml');
         this.observer.disconnect();
+        this.app.embedRegistry.unregisterExtensions(['puml', 'pu']);
     }
 
     async loadSettings(): Promise<void> {