[manifest, versions, package] Updated version. [README] Included docs…

… for resizing. [md_processor] Cleanded up code and docs. Added resizing functionality.

README.md

@@ -11,6 +11,7 @@
 Use the pipe (|) after the the source of an embeded image to display the text as a caption of the figure.
 
 e.g.
+
 ```markdown
 ![[my_amazing_image.png|Check out this amazing picture.]]
 ```
@@ -19,11 +20,38 @@ e.g.
 
 Use alt text to display as a caption.
 
+Allows resizing of images, exactly how internal embeds work. (See below)
+
 e.g.
+
 ```markdown
 ![Another beautiful picture.](https://prettypicture.com/image01.png)
 ```
 
+
+**Resizing**
+When resizing internally embedded images one can normally use the `<width>x<height>` after the pipe (`|`) character.
+
+e.g.
+
+```markdown
+![[my_amazing_image.png|50x50]]
+```
+
+You can now resize both internally and externally embeded images with caption. However, delimeters must be used to distinguis the caption text if it is present.
+
+e.g. If `"` is the caption delimeter.
+
+```markdown
+![[my_amazing_image.png|50x50]]
+
+![[my_amazing_image.png|50x50 "Look at my caption ma!"]]
+
+!["I can caption anything!" 100x150](https://prettypicture.com/image01.png)
+
+![100x150](https://prettypicture.com/image01.png)
+```
+
 ## Settings
 
 + **Label:** Text that prepends all captions.<br/>

manifest.json

@@ -1,8 +1,8 @@
 {
 	"id": "obsidian-image-caption",
 	"name": "Image Caption",
-	"version": "0.0.9",
-	"minAppVersion": "0.12.19",
+	"version": "0.0.10",
+	"minAppVersion": "0.13.19",
 	"description": "Add captions to images.",
 	"author": "Brian Carlsen",
 	"authorUrl": "https://github.com/bicarlsen",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "obsidian-image-caption",
-    "version": "0.0.9",
+    "version": "0.0.10",
     "description": "Add captions to images in Obsidian.",
     "main": "main.js",
     "scripts": {
@@ -13,7 +13,7 @@
     "devDependencies": {
         "@types/node": "^16.11.1",
         "esbuild": "0.13.8",
-        "obsidian": "^0.12.19",
+        "obsidian": "^0.13.19",
         "tslib": "2.3.1",
         "typescript": "4.4.4"
     }

src/md_processor.ts

@@ -8,14 +8,20 @@ import {
 import ImageCaptionPlugin from './main';
 
 
+interface ImageSize {
+	width: number;
+	height: number
+}
+
+
 /**
  * Registers a Mutation Observer on an image to add a caption.
  * The observer is unregistered after the caption has been added.
  * Meant to be used for internal embeds.
  *  
- * @param plugin [Plugin]
- * @param ctx [MarkdownPostProcessorContext]
- * @returns [MutationObserver]
+ * @param plugin {Plugin}
+ * @param ctx {MarkdownPostProcessorContext}
+ * @returns {MutationObserver}
  */
 export function internalCaptionObserver(
 	plugin: Plugin,
@@ -38,11 +44,18 @@ export function internalCaptionObserver(
 				continue;
 			}
 
-			caption_text = parseCaptionText( caption_text, plugin.settings.delimeter );
-			if ( caption_text !== null ) {
+			const parsed = parseCaptionText( caption_text, plugin.settings.delimeter );
+			const size = parsed.size;
+			caption_text = parsed.text;
+
+			if ( caption_text ) {
 				const caption = addCaption( mutation.target, caption_text );
 				ctx.addChild( caption );
 			}
+
+			if ( size ) {
+				setSize( mutation.target, size );
+			}
 		}  // end for..of
 
 		updateFigureIndices();
@@ -57,8 +70,8 @@ export function internalCaptionObserver(
  * The observer is unregistered after the caption has been added.
  * Meant to be used for external embeds.
  *  
- * @param plugin [Plugin]
- * @returns [MutationObserver]
+ * @param plugin {Plugin}
+ * @returns {MutationObserver}
  */
 export function externalCaptionObserver(
 	plugin: Plugin
@@ -87,52 +100,107 @@ export function externalCaptionObserver(
 
 
 /**
- * Parses text to extract the caption.
+ * Parses text to extract the caption and size for the image.
  * 
- * @param text [string] Text to parse.
- * @param delimeter [string[]] Delimeter(s) used to indeicate caption text.
- * @returns [string] Caption text.
+ * @param text {string} Text to parse.
+ * @param delimeter {string[]} Delimeter(s) used to indeicate caption text.
+ * @returns { { caption: string, size?: ImageSize } }
+ * 		An obect containing the caption text and size.
  */
 function parseCaptionText( text: string, delimeter: string[] ): string | null {
+	let start, end;
+	let start_delim, end_delim;
 	if ( delimeter.length === 0 ) {
-		return text;
+		start_delim = '';
+		end_delim = '';
+
+		start = 0;
+		end = text.length - 1;
 	}
-
-	let start, end;
-	if ( delimeter.length == 1 ) {
+	else if ( delimeter.length == 1 ) {
 		// single delimeter character
-		delimeter = delimeter[ 0 ];
-		start = text.indexOf( delimeter );
-		end = text.lastIndexOf( delimeter );
+		start_delim = delimeter[ 0 ];
+		end_delim = delimeter[ 0 ];
+
+		start = text.indexOf( start_delim );
+		end = text.lastIndexOf( end_delim );
 	}
 	else if ( delimeter.length === 2 ) {
 		// separate start and end delimeter
-		start = text.indexOf( delimeter[ 0 ] );
-		end = text.lastIndexOf( delimeter[ 1 ] );
+		start_delim = delimeter[ 0 ];
+		end_delim = delimeter[ 1 ];
+
+		start = text.indexOf( start_delim );
+		end = text.lastIndexOf( end_delim );
 	}
 	else {
 		// error
-		return null;
+		return {
+			text: undefined,
+			size: undefined
+		};
 	}
 
-	if ( start === -1 || end === -1 ) {
-		return null;
+	// caption text
+	let caption, remaining_text;
+	if (
+		start === -1 ||
+		end === -1 ||
+		start === end 
+	) {
+		caption = undefined;
+		remaining_text = [ text ];
 	}
-	if ( start === end ) {
-		return '';
+	else {
+		// exclude delimeters
+		const start_offset = start_delim.length;
+		const end_offset = end_delim.length
+
+		caption = text.slice( start + start_offset, end );
+		remaining_text = [
+			text.slice( 0, start ),
+			text.slice( end + end_offset )
+		];
 	}
 
-	const start_offset = delimeter[ 0 ].length;  // exclude starting delimeter
-	return text.slice( start + start_offset, end );
+	// size
+	let size = parseSize( remaining_text[ 0 ] );
+	if ( ! size ) {
+		size = parseSize( remaining_text[ 1 ] );
+	}
+
+	return { text: caption, size };
 } 
 
 
+/**
+ * Searches for a size parameter of the form
+ * <width>x<height> returning the parameters if found.
+ * 
+ * @param {string} text - Text to parse.
+ * @returns {ImageSize|undefined} - Object representing the image size,
+ * 		or undefined if not found.
+ */
+function parseSize( text: string ) {
+	const size_pattern = /(\d+)x(\d+)/i;
+	const match = text.match( size_pattern );
+	if ( ! match ) {
+		return undefined;
+	}
+
+	return {
+		width: match[ 1 ],
+		height: match[ 2 ]
+	};
+}
+
+
 /**
  * Adds a caption to an image.
  * 
- * @param target [HTMLElement] Parent element for the caption.
- * @param caption_text [string] Text to add for the caption.
- * @returns [MarkdownRenderChild] Caption element that was added to the target as the caption.
+ * @param {HTMLElement} target - Parent element for the caption.
+ * @param {string} caption_text - Text to add for the caption.
+ * @returns {MarkdownRenderChild} - Caption element that was added to the target as the caption.
  */
 function addCaption(
 	target: HTMLElement,
@@ -147,6 +215,26 @@ function addCaption(
 }
 
 
+/**
+ * Sets the width and height for an image.
+ * 
+ * @param {HTMLElement} target - Parent element of the image.
+ * @param {ImageSize} size - Width and height values.
+ */
+function setSize(
+	target: HTMLElement,
+	size: ImageSize
+) {
+	const { width, height } = size;
+	const img = target.querySelector( 'img' );
+
+	target.setAttribute( 'width', width );
+	target.setAttribute( 'height', height );
+	img.setAttribute( 'width', width );
+	img.setAttribute( 'height', height );
+}
+
+
 /**
  * Updates index data for images.
  */
@@ -168,8 +256,9 @@ function updateFigureIndices() {
 /**
  * Registers MutationObservers on internal images.
  * 
- * @param plugin [Plugin]
- * @returns [(HTMLElement, MarkdownPostProcessorContext) => void] Function that registers internal images to have a caption added to them.
+ * @param {Plugin} plugin
+ * @returns {(HTMLElement, MarkdownPostProcessorContext) => void}
+ * 		Function that registers internal images to have a caption added to them.
  */
 export function processInternalImageCaption(
 	plugin: Plugin
@@ -199,8 +288,9 @@ export function processInternalImageCaption(
 /**
  * Adds caption to external images.
  * 
- * @param plugin [Plugin]
- * @returns [(HTMLElement, MarkdownPostProcessorContext) => void] Function that registers external images to have a caption added to them.
+ * @param {Plugin} plugin
+ * @returns {(HTMLElement, MarkdownPostProcessorContext) => void}
+ * 		Function that registers external images to have a caption added to them.
  */
 export function processExternalImageCaption(
 	plugin: Plugin
@@ -224,14 +314,18 @@ export function processExternalImageCaption(
 				}
 
 				let caption_text = img.getAttribute( 'alt' );
-				caption_text = parseCaptionText( caption_text, plugin.settings.delimeter );
-				if ( caption_text === null ) {
-					// empty caption
+				const parsed = parseCaptionText(
+					caption_text,
+					plugin.settings.delimeter
+				);
+
+				const size = parsed.size;
+				caption_text = parsed.text;
+				if ( !( caption_text || size ) ) {
 					return;
 				}
 
 				// create container
-				// const parent = img.parentNode;
 				const container = document.createElement( 'span' );
 				container.addClass( container_css_class );
 
@@ -249,11 +343,17 @@ export function processExternalImageCaption(
 				container.appendChild( img );
 
 				// add caption
-				const caption = addCaption( container, caption_text );
+				if ( caption_text ) {
+					const caption = addCaption( container, caption_text );
 
-				ctx.addChild( new MarkdownRenderChild( container ) );
-				ctx.addChild( caption );
-				// setTimeout(	updateFigureIndices, 5 );
+					ctx.addChild( new MarkdownRenderChild( container ) );
+					ctx.addChild( caption );
+				}
+
+				// set size
+				if ( size ) {
+					setSize( container, size );
+				}
 			}
 		);
 	};

versions.json

@@ -1,4 +1,5 @@
 {
+	"0.0.10": "0.13.19",
 	"0.0.9": "0.12.19",
 	"0.0.8": "0.12.19",
 	"0.0.7": "0.12.19",