Added delimeters.

README.md

@@ -21,6 +21,16 @@ For automatic numbering use '#'. If a '#' character is meant to be output, escap
 + **CSS:** Apply custom CSS styling to the image captions.<br/>
 Captions are indexed from 1 using the 'data-image-caption-index' attribute for styling based on figure number.
 
++ **Delimeter:** Indicates the caption text.<br/>
+A delimeter is a set of characters that identify the caption text to use.
+ + If blank, the entire text is used.
+ + A single delimeter can be used.<br/>
+    e.g. `"` -> `"My caption"` or `!!` -> `!!My caption!!`
+ + A start and end delimter can be used by separating them with a comma (,).<br/>
+    e.g. `{, }` -> `{My caption}` or `<<, >>` -> `<<My caption>>`
+ + **Note:** Whitespace is trimmed from the delimeter character sets.
+ + **Note:** Only the first and last delimeters are matched, so the delimeter character can be used in the caption without special consideration, such as escaping.
+
 ## FAQ
 
 + **My captions aren't showing up:** Captions are only added if the image is rerendered. Try changing the caption (needs to be more than a trialing space) and trying again. If this fixes the issue then change it back, otherwise open an Issue.

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-image-caption",
 	"name": "Image Caption",
-	"version": "0.0.6",
+	"version": "0.0.7",
 	"minAppVersion": "0.12.19",
 	"description": "Add captions to images.",
 	"author": "bicarlsen",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "obsidian-image-caption",
-    "version": "0.0.6",
+    "version": "0.0.7",
     "description": "Add captions to images in Obsidian.",
     "main": "main.js",
     "scripts": {

src/main.ts

@@ -14,11 +14,13 @@ import {
 interface ImageCaptionSettings {
 	css: string;
 	label: string;
+	delimeter: string[];
 }
 
 const DEFAULT_SETTINGS: ImageCaptionSettings = {
 	css: '',
-	label: ''
+	label: '',
+	delimeter: []
 }
 
 export default class ImageCaptionPlugin extends Plugin {
@@ -119,7 +121,7 @@ class ImageCaptionSettingTab extends PluginSettingTab {
 				.setPlaceholder( 'Label' )
 				.setValue( this.plugin.settings.label )
 				.onChange( async ( value ) => {
-					this.plugin.settings.label = value;
+					this.plugin.settings.label = value.trim();
 					await this.plugin.saveSettings();
 					this.plugin.updateStylesheet();
 				} )
@@ -137,5 +139,50 @@ class ImageCaptionSettingTab extends PluginSettingTab {
 					this.plugin.updateStylesheet();
 				} )
 			);
+
+		// delimeter
+		const delimeter = new Setting( containerEl )
+			.setName( 'Delimeter' )
+			.setDesc(
+				'Identify the caption by surrounding it with the delimeter. ' +
+				'Start and end delimeters mays be specified by separation with a comma (,).'
+			)
+			.setTooltip(
+				'If no delimeter is provided the entire alt text is taken to be the caption. ' +
+				'If a single delimeter is specified it must indicate the start and end of the caption. ' +
+				'If two delimeters are specified, by separation with a comma, the caption is taken to be ' +
+				'the text between the start and end delimeters.'
+			);
+
+		delimeter.addText( ( text ) => text
+			.setPlaceholder( 'Delimeter' )
+			.setValue( this.plugin.settings.delimeter.join( ', ' ) )
+			.onChange( async ( value ) => {
+				let delimeters = value.split( ',' ).map( d => d.trim() );
+
+				// validate setting
+				if ( delimeters.length > 2 ) {
+					// too many delimeters
+					delimeter.controlEl.addClass( 'setting-error' );
+					return;
+				}
+
+				if ( delimeters.length === 2 && delimeters.some( d => !d ) ) {
+					// empty delimeter
+					delimeter.controlEl.addClass( 'setting-error' );
+					return;
+				}
+
+				// delimeters valid
+				if ( delimeters.length === 1 && delimeters[ 0 ] === '' ) {
+					// no delimeter specified
+					delimeters = [];
+				}
+
+				delimeter.controlEl.removeClass( 'setting-error' );
+				this.plugin.settings.delimeter = delimeters;
+				await this.plugin.saveSettings();
+			} )
+		);
 	}
 }

src/md_processor.ts

@@ -16,7 +16,7 @@ export function captionObserver( plugin: Plugin ) {
 				continue;
 			}
 
-			const caption_text = mutation.target.getAttribute( 'alt' );
+			let caption_text = mutation.target.getAttribute( 'alt' );
 			if ( caption_text === mutation.target.getAttribute( 'src' ) ) {
 				// default caption, skip
 				continue;
@@ -27,7 +27,10 @@ export function captionObserver( plugin: Plugin ) {
 				continue;
 			}
 
-			addCaption( mutation.target, caption_text );
+			caption_text = parseCaptionText( caption_text, plugin.settings.delimeter );
+			if ( caption_text !== null ) {
+				addCaption( mutation.target, caption_text );
+			}
 		}  // end for..of
 
 		updateFigureIndices();
@@ -36,6 +39,38 @@ export function captionObserver( plugin: Plugin ) {
 	} );
 }
 
+function parseCaptionText( text: string, delimeter: string[] ): string | null {
+	if ( delimeter.length === 0 ) {
+		return text;
+	}
+
+	let start, end;
+	if ( delimeter.length == 1 ) {
+		// single delimeter character
+		delimeter = delimeter[ 0 ];
+		start = text.indexOf( delimeter );
+		end = text.lastIndexOf( delimeter );
+	}
+	else if ( delimeter.length === 2 ) {
+		// separate start and end delimeter
+		start = text.indexOf( delimeter[ 0 ] );
+		end = text.lastIndexOf( delimeter[ 1 ] );
+	}
+	else {
+		// error
+		return null;
+	}
+
+	if ( start === -1 || end === -1 ) {
+		return null;
+	}
+	if ( start === end ) {
+		return '';
+	}
+
+	const start_offset = delimeter[ 0 ].length; // exclude starting delimeter
+	return text.slice( start + start_offset, end );
+} 
 
 function addCaption(
 	target: HTMLElement,

styles.css

@@ -0,0 +1,3 @@
+.setting-item-control.setting-error input {
+	border-color: #990000;
+}

versions.json

@@ -1,4 +1,5 @@
 {
+	"0.0.7": "0.12.19",
 	"0.0.6": "0.12.19",
 	"0.0.5": "0.12.19",
 	"0.0.4": "0.12.19",