Initial commit

main.ts

@@ -1,85 +1,31 @@
-import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian';
+import { Plugin, MarkdownPostProcessorContext, MarkdownView, PluginSettingTab, Setting, App } from 'obsidian';
+import * as pako from 'pako';
 
-// Remember to rename these classes and interfaces!
+interface MermaidLinksSettings {
-
+    editLinkText: string;
-interface MyPluginSettings {
+    fullscreenLinkText: string;
-	mySetting: string;
 }
 
-const DEFAULT_SETTINGS: MyPluginSettings = {
+const DEFAULT_SETTINGS: MermaidLinksSettings = {
-	mySetting: 'default'
+    editLinkText: 'Edit',
-}
+    fullscreenLinkText: 'Full Screen'
+};
 
-export default class MyPlugin extends Plugin {
+export default class MermaidLinksPlugin extends Plugin {
-	settings: MyPluginSettings;
+    settings: MermaidLinksSettings;
 
     async onload() {
+        console.log('Loading MermaidLinks plugin');
+        
         await this.loadSettings();
         
-		// This creates an icon in the left ribbon.
+        this.addSettingTab(new MermaidLinksSettingTab(this.app, this));
-		const ribbonIconEl = this.addRibbonIcon('dice', 'Sample Plugin', (evt: MouseEvent) => {
-			// Called when the user clicks the icon.
-			new Notice('This is a notice!');
-		});
-		// Perform additional things with the ribbon
-		ribbonIconEl.addClass('my-plugin-ribbon-class');
         
-		// This adds a status bar item to the bottom of the app. Does not work on mobile apps.
+        this.registerMarkdownPostProcessor(this.processMermaidDiagrams.bind(this));
-		const statusBarItemEl = this.addStatusBarItem();
-		statusBarItemEl.setText('Status Bar Text');
-
-		// This adds a simple command that can be triggered anywhere
-		this.addCommand({
-			id: 'open-sample-modal-simple',
-			name: 'Open sample modal (simple)',
-			callback: () => {
-				new SampleModal(this.app).open();
-			}
-		});
-		// This adds an editor command that can perform some operation on the current editor instance
-		this.addCommand({
-			id: 'sample-editor-command',
-			name: 'Sample editor command',
-			editorCallback: (editor: Editor, view: MarkdownView) => {
-				console.log(editor.getSelection());
-				editor.replaceSelection('Sample Editor Command');
-			}
-		});
-		// This adds a complex command that can check whether the current state of the app allows execution of the command
-		this.addCommand({
-			id: 'open-sample-modal-complex',
-			name: 'Open sample modal (complex)',
-			checkCallback: (checking: boolean) => {
-				// Conditions to check
-				const markdownView = this.app.workspace.getActiveViewOfType(MarkdownView);
-				if (markdownView) {
-					// If checking is true, we're simply "checking" if the command can be run.
-					// If checking is false, then we want to actually perform the operation.
-					if (!checking) {
-						new SampleModal(this.app).open();
-					}
-
-					// This command will only show up in Command Palette when the check function returns true
-					return true;
-				}
-			}
-		});
-
-		// This adds a settings tab so the user can configure various aspects of the plugin
-		this.addSettingTab(new SampleSettingTab(this.app, this));
-
-		// If the plugin hooks up any global DOM events (on parts of the app that doesn't belong to this plugin)
-		// Using this function will automatically remove the event listener when this plugin is disabled.
-		this.registerDomEvent(document, 'click', (evt: MouseEvent) => {
-			console.log('click', evt);
-		});
-
-		// When registering intervals, this function will automatically clear the interval when the plugin is disabled.
-		this.registerInterval(window.setInterval(() => console.log('setInterval'), 5 * 60 * 1000));
     }
 
     onunload() {
-
+        console.log('Unloading MermaidLinks plugin');
     }
 
     async loadSettings() {
@@ -89,45 +35,104 @@ export default class MyPlugin extends Plugin {
     async saveSettings() {
         await this.saveData(this.settings);
     }
+
+    processMermaidDiagrams(el: HTMLElement, ctx: MarkdownPostProcessorContext) {
+        // Find all pre > code.language-mermaid elements
+        const mermaidBlocks = el.querySelectorAll('pre > code.language-mermaid');
+        mermaidBlocks.forEach(mermaidBlock => {
+            const preElement = mermaidBlock.parentElement;
+            if (!preElement) return;
+            
+            // Get the Mermaid diagram content
+            const mermaidContent = mermaidBlock.textContent;
+            if (!mermaidContent) return;
+
+			console.log("VJA2 processing mermaid diagram", mermaidContent);
+            // Generate PAKO compressed content
+            const compressed = this.compressMermaid(mermaidContent);
+            
+            // Create links container
+            const linksContainer = document.createElement('div');
+            linksContainer.className = 'mermaid-links';
+            linksContainer.style.textAlign = 'right';
+            linksContainer.style.marginTop = '5px';
+            
+            // Create edit link
+            const editLink = document.createElement('a');
+            editLink.href = `https://mermaid.live/edit#pako:${compressed}`;
+            editLink.textContent = this.settings.editLinkText;
+            editLink.target = '_blank';
+            editLink.className = 'mermaid-edit-link';
+            editLink.style.marginRight = '10px';
+            
+            // Create full screen link
+            const fullScreenLink = document.createElement('a');
+            fullScreenLink.href = `https://mermaid.live/view#pako:${compressed}`;
+            fullScreenLink.textContent = this.settings.fullscreenLinkText;
+            fullScreenLink.target = '_blank';
+            fullScreenLink.className = 'mermaid-fullscreen-link';
+            
+            // Add links to container
+            linksContainer.appendChild(editLink);
+            linksContainer.appendChild(fullScreenLink);
+            
+            // Insert links after the pre element
+            preElement.parentNode?.insertBefore(linksContainer, preElement.nextSibling);
+        });
     }
 
-class SampleModal extends Modal {
+    compressMermaid(mermaidCode: string): string {
-	constructor(app: App) {
+        // Compress the Mermaid code using PAKO
-		super(app);
+		const graph = {
+			"code": mermaidCode,
+			"mermaid": {"theme": "default"}
 		}
+        const textEncoder = new TextEncoder();
+        const uint8Array = textEncoder.encode(JSON.stringify(graph));
+        const compressedData = pako.deflate(uint8Array);
         
-	onOpen() {
+        // Convert to base64
-		const {contentEl} = this;
+        return btoa(
-		contentEl.setText('Woah!');
+            Array.from(compressedData)
-	}
+                .map(byte => String.fromCharCode(byte))
-
+                .join('')
-	onClose() {
+        )
-		const {contentEl} = this;
+            .replace(/\+/g, '-')
-		contentEl.empty();
+            .replace(/\//g, '_');
     }
 }
 
-class SampleSettingTab extends PluginSettingTab {
+class MermaidLinksSettingTab extends PluginSettingTab {
-	plugin: MyPlugin;
+    plugin: MermaidLinksPlugin;
 
-	constructor(app: App, plugin: MyPlugin) {
+    constructor(app: App, plugin: MermaidLinksPlugin) {
         super(app, plugin);
         this.plugin = plugin;
     }
 
     display(): void {
         const { containerEl } = this;
-
         containerEl.empty();
 
+        containerEl.createEl('h2', { text: 'Mermaid Links Settings' });
+
         new Setting(containerEl)
-			.setName('Setting #1')
+            .setName('Edit Link Text')
-			.setDesc('It\'s a secret')
+            .setDesc('The text to display for the edit link')
             .addText(text => text
-				.setPlaceholder('Enter your secret')
+                .setValue(this.plugin.settings.editLinkText)
-				.setValue(this.plugin.settings.mySetting)
                 .onChange(async (value) => {
-					this.plugin.settings.mySetting = value;
+                    this.plugin.settings.editLinkText = value;
+                    await this.plugin.saveSettings();
+                }));
+
+        new Setting(containerEl)
+            .setName('Full Screen Link Text')
+            .setDesc('The text to display for the full screen link')
+            .addText(text => text
+                .setValue(this.plugin.settings.fullscreenLinkText)
+                .onChange(async (value) => {
+                    this.plugin.settings.fullscreenLinkText = value;
                     await this.plugin.saveSettings();
                 }));
     }

manifest.json

@@ -1,11 +1,11 @@
 {
-	"id": "sample-plugin",
+	"id": "obsidian-mermaid-links",
-	"name": "Sample Plugin",
+	"name": "Obsidian Mermaid Links",
 	"version": "1.0.0",
 	"minAppVersion": "0.15.0",
-	"description": "Demonstrates some of the capabilities of the Obsidian API.",
+	"description": "Add view & edit links to all mermaid diagrams.",
 	"author": "Obsidian",
-	"authorUrl": "https://obsidian.md",
+	"authorUrl": "https://github.com/vinayaugustine",
-	"fundingUrl": "https://obsidian.md/pricing",
+	"fundingUrl": "https://github.com/vinayaugustine",
 	"isDesktopOnly": false
 }

package.json

@@ -11,14 +11,18 @@
 	"keywords": [],
 	"author": "",
 	"license": "MIT",
+	"dependencies": {
+		"pako": "^2.0.4"
+	},
 	"devDependencies": {
 		"@types/node": "^16.11.6",
+		"@types/pako": "^2.0.3",
 		"@typescript-eslint/eslint-plugin": "5.29.0",
 		"@typescript-eslint/parser": "5.29.0",
 		"builtin-modules": "3.3.0",
 		"esbuild": "0.17.3",
 		"obsidian": "latest",
 		"tslib": "2.4.0",
-		"typescript": "4.7.4"
+		"typescript": "^4.7.4"
 	}
 }