Iniital commit. Basic functionality working for internally linked ima…

…ges.

README.md

@@ -1,57 +1,26 @@
-## Obsidian Sample Plugin
+# Obsidian Image Caption
 
-This is a sample plugin for Obsidian (https://obsidian.md).
+### Add captions to your images.
 
-This project uses Typescript to provide type checking and documentation.
-The repo depends on the latest plugin API (obsidian.d.ts) in Typescript Definition format, which contains TSDoc comments describing what it does.
+![Obsidian Image Caption example](./example.png)
 
-**Note:** The Obsidian API is still in early alpha and is subject to change at any time!
+## Use
 
-This sample plugin demonstrates some of the basic functionality the plugin API can do.
-- Changes the default font color to red using `styles.css`.
-- Adds a ribbon icon, which shows a Notice when clicked.
-- Adds a command "Open Sample Modal" which opens a Modal.
-- Adds a plugin setting tab to the settings page.
-- Registers a global click event and output 'click' to the console.
-- Registers a global interval which logs 'setInterval' to the console.
+Use the pipe (|) after the the source of an embeded image to display the text as a caption of the figure.
 
-### First time developing plugins?
+e.g.
+```markdown
+![[my_amazing_image.png|Check out this amazing picture.]]
+```
 
-Quick starting guide for new plugin devs:
 
-- Make a copy of this repo as a template with the "Use this template" button (login to GitHub if you don't see it).
-- Clone your repo to a local development folder. For convenience, you can place this folder in your `.obsidian/plugins/your-plugin-name` folder.
-- Install NodeJS, then run `npm i` in the command line under your repo folder.
-- Run `npm run dev` to compile your plugin from `main.ts` to `main.js`.
-- Make changes to `main.ts` (or create new `.ts` files). Those changes should be automatically compiled into `main.js`.
-- Reload Obsidian to load the new version of your plugin.
-- Enable plugin in settings window.
-- For updates to the Obsidian API run `npm update` in the command line under your repo folder.
+## Coming soon
 
-### Releasing new releases
++ Custom styling
++ Automatic caption labels.
+  + e.g. Figure 1, Figure 2, etc.
 
-- Update your `manifest.json` with your new version number, such as `1.0.1`, and the minimum Obsidian version required for your latest release.
-- Update your `versions.json` file with `"new-plugin-version": "minimum-obsidian-version"` so older versions of Obsidian can download an older version of your plugin that's compatible.
-- Create new GitHub release using your new version number as the "Tag version". Use the exact version number, don't include a prefix `v`. See here for an example: https://github.com/obsidianmd/obsidian-sample-plugin/releases
-- Upload the files `manifest.json`, `main.js`, `styles.css` as binary attachments.
-- Publish the release.
 
-### Adding your plugin to the community plugin list
+## Known issues
 
-- Publish an initial version.
-- Make sure you have a `README.md` file in the root of your repo.
-- Make a pull request at https://github.com/obsidianmd/obsidian-releases to add your plugin.
-
-### How to use
-
-- Clone this repo.
-- `npm i` or `yarn` to install dependencies
-- `npm run dev` to start compilation in watch mode.
-
-### Manually installing the plugin
-
-- Copy over `main.js`, `styles.css`, `manifest.json` to your vault `VaultFolder/.obsidian/plugins/your-plugin-id/`.
-
-### API Documentation
-
-See https://github.com/obsidianmd/obsidian-api
++ Only works on internally linked images, not externally linked ones.

manifest.json

@@ -1,10 +1,10 @@
 {
-	"id": "obsidian-sample-plugin",
-	"name": "Sample Plugin",
-	"version": "1.0.1",
-	"minAppVersion": "0.12.0",
-	"description": "This is a sample plugin for Obsidian. This plugin demonstrates some of the capabilities of the Obsidian API.",
-	"author": "Obsidian",
-	"authorUrl": "https://obsidian.md",
+	"id": "obsidian_image_caption",
+	"name": "Image Caption",
+	"version": "0.0.1",
+	"minAppVersion": "0.12.19",
+	"description": "Add captions to images.",
+	"author": "bicarlsen",
+	"authorUrl": "https://github.com/bicarlsen",
 	"isDesktopOnly": false
 }

package.json

@@ -1,11 +1,11 @@
 {
-    "name": "obsidian-sample-plugin",
-    "version": "0.12.0",
+    "name": "obsidian_image_caption",
+    "version": "0.0.1",
     "description": "This is a sample plugin for Obsidian (https://obsidian.md)",
     "main": "main.js",
     "scripts": {
-        "dev": "esbuild main.ts --bundle --external:obsidian --outdir=.  --target=es2016 --format=cjs --sourcemap=inline --watch",
-        "build": "esbuild main.ts --bundle --external:obsidian --outdir=.  --target=es2016 --format=cjs"
+        "dev": "esbuild src/main.ts --bundle --external:obsidian --outdir=.  --target=es2016 --format=cjs --sourcemap=inline --watch",
+        "build": "esbuild src/main.ts --bundle --external:obsidian --outdir=.  --target=es2016 --format=cjs"
     },
     "keywords": [],
     "author": "",

src/main.ts

@@ -0,0 +1,70 @@
+import {
+	App,
+	Plugin,
+	PluginSettingTab,
+	Setting
+} from 'obsidian';
+
+import processImageCaption from './md_processor';
+
+
+interface ImageCaptionSettings {
+}
+
+const DEFAULT_SETTINGS: ImageCaptionSettings = {
+}
+
+export default class ImageCaptionPlugin extends Plugin {
+	settings: ImageCaptionSettings;
+
+	async onload() {
+		await this.loadSettings();
+
+		this.registerMarkdownPostProcessor( processImageCaption );
+
+		// this.addSettingTab( new ImageCaptionSettingTab( this.app, this ) );
+
+	}
+
+	onunload() {
+
+	}
+
+	async loadSettings() {
+		this.settings = Object.assign( {}, DEFAULT_SETTINGS, await this.loadData() );
+	}
+
+	async saveSettings() {
+		await this.saveData( this.settings );
+	}
+}
+
+
+class ImageCaptionSettingTab extends PluginSettingTab {
+	plugin: ImageCaptionPlugin;
+
+	constructor( app: App, plugin: ImageCaptionPlugin ) {
+		super( app, plugin );
+		this.plugin = plugin;
+	}
+
+	display(): void {
+		// let { containerEl } = this;
+
+		// containerEl.empty();
+
+		// containerEl.createEl('h2', {text: 'Settings for my awesome plugin.'});
+
+		// new Setting(containerEl)
+		// 	.setName('Setting #1')
+		// 	.setDesc('It\'s a secret')
+		// 	.addText(text => text
+		// 		.setPlaceholder('Enter your secret')
+		// 		.setValue(this.plugin.settings.mySetting)
+		// 		.onChange(async (value) => {
+		// 			console.log('Secret: ' + value);
+		// 			this.plugin.settings.mySetting = value;
+		// 			await this.plugin.saveSettings();
+		// 		}));
+	}
+}

src/md_processor.ts

@@ -0,0 +1,56 @@
+import {
+	MarkdownPostProcessor,
+	MarkdownPostProcessorContext,
+	MarkdownRenderChild
+} from 'obsidian';
+
+
+const classListener = new MutationObserver( ( mutations ) => {
+	mutations.forEach( ( mutation ) => {
+		if ( !mutation.target.matches( 'span.image-embed' ) ) {
+			return;
+		}
+
+		const caption_text = mutation.target.getAttribute( 'alt' );
+		if ( caption_text === mutation.target.getAttribute( 'src' ) ) {
+			// not user defined
+			return;
+		}
+
+		if ( mutation.target.querySelector( 'figcaption.obsidian-image-caption' ) ) {
+			// caption already added
+			return;
+		}
+
+		addCaption( mutation.target, caption_text );
+
+	} );  // end forEach
+} );
+
+
+function addCaption( target: HTMLElement, caption_text: string ): HTMLElement {
+	const caption = document.createElement( 'figcaption' );
+	caption.addClass( 'obsidian-image-caption' );
+	caption.innerText = caption_text;
+	target.appendChild( caption );
+
+	return caption;
+}
+
+
+export default function processImageCaption (
+	el: HTMLElement,
+	ctx: MarkdownPostProcessorContext
+): void {
+
+	el.querySelectorAll( 'span.internal-embed' ).forEach(
+		( container: HTMLElement ) => {
+			// must listen for class changes because images
+			// may be loaded after this run
+			classListener.observe(
+				container,
+				{ attributes: true, attributesFilter: [ 'class' ] }
+			);
+		}
+	);
+}

styles.css

@@ -1,4 +0,0 @@
-/* Sets all the text color to red! */
-body {
-    color: red;
-}

versions.json

@@ -1,4 +1,3 @@
 {
-	"1.0.1": "0.9.12",
-	"1.0.0": "0.9.7"
+	"0.0.1": "0.12.19"
 }