Alpha release as intermediate step for new Obisidian API.

.eslintrc.json

@@ -0,0 +1,26 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "overrides": [
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "quotes": ["error", "single"],
+        "semi": ["error", "always"],
+        "indent": ["error", 4],
+        "no-multi-space": ["error"]
+    }
+}

README.md

@@ -40,7 +40,7 @@ e.g.
 ![[my_long_photo|autox200]]
 ```
 
-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.
+You can now resize both internally and externally embeded images with caption. However, delimeters must be used to distinguish the caption text if it is present.
 
 e.g. If `"` is the caption delimeter.
 
@@ -82,4 +82,5 @@ By turning this option on your captions will be inserted into the document as HT
 
 ## Known issues
 
-(none at the moment)
++ Some captions missing.
++ Not compatible with Pandocs for exporting.

manifest.json

@@ -1,8 +1,8 @@
 {
 	"id": "obsidian-image-caption",
 	"name": "Image Caption",
-	"version": "0.0.14",
-	"minAppVersion": "0.15.6",
+	"version": "0.0.15.alpha",
+	"minAppVersion": "1.0.0",
 	"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.14",
+    "version": "0.0.15.alpha",
     "description": "Add captions to images in Obsidian.",
     "main": "main.js",
     "scripts": {
@@ -10,13 +10,18 @@
     "keywords": [],
     "author": "",
     "license": "MIT",
-    "devDependencies": {
+    "dependencies": {
+        "@codemirror/language": "6.0",
+        "@codemirror/view": "6.0",
         "@types/node": "^18.0",
         "esbuild": "0.14",
-        "tslib": "2.4",
-        "typescript": "4.7",
         "obsidian": "^0.15",
-        "@codemirror/view": "6.0",
-        "@codemirror/language": "6.0"
+        "tslib": "2.4",
+        "typescript": "4.7"
+    },
+    "devDependencies": {
+        "@typescript-eslint/eslint-plugin": "^5.36.1",
+        "@typescript-eslint/parser": "^5.36.1",
+        "eslint": "^8.23.0"
     }
 }

src/common.ts

@@ -5,12 +5,49 @@ import {
 import ImageCaptionPlugin from './main';
 
 
-interface ImageSize {
+// *************
+// *** types ***
+// *************
+
+export interface ImageSize {
 	width: number;
 	height: number;
 }
 
 
+export interface ParsedCaption {
+	text?: string;
+	size?: ImageSize;
+}
+
+
+// *****************
+// *** functions ***
+// *****************
+
+
+/**
+ * Get the nearest sibling matching the selector.
+ * 
+ * @param {Element} elm - Element to start searching from.
+ * @param {string} selector - Selector string.
+ * @param {number} direction - Direction to search.
+ * 		Negative to search previous, otherwise searches next.
+ * @returns {Element} First element matching selector in the given direction.
+ */
+export function closestSibling(
+	elm: Element,
+	selector: string,
+	direction?: number
+): Element {
+	const prev = (direction < 0);
+	let sibling =  prev ? elm.previousElementSibling : elm.nextElementSibling;
+	while ( sibling && ! sibling.matches(selector) ) {
+		sibling = prev ? sibling.previousElementSibling : sibling.nextElementSibling;
+	}
+
+	return sibling;
+}
 
 /**
  * Parses text to extract the caption and size for the image.
@@ -20,7 +57,7 @@ interface ImageSize {
  * @returns { { caption: string, size?: ImageSize } }
  * 		An obect containing the caption text and size.
  */
-export function parseCaptionText( text: string, delimeter: string[] ): {text: string, size?: ImageSize} | null {
+export function parseCaptionText( text: string, delimeter: string[] ): ParsedCaption | null {
     if ( ! text ) {
         return null;
     }
@@ -82,7 +119,7 @@ export function parseCaptionText( text: string, delimeter: string[] ): {text: st
 
 	// size
 	let size = parseSize( remaining_text[ 0 ] );
-	if ( ! size ) {
+	if ( ! size && remaining_text[ 1 ] ) {
 		size = parseSize( remaining_text[ 1 ] );
 	}
 
@@ -139,6 +176,13 @@ export function addCaption(
 
 	target.appendChild( caption );
 
+	const style = getComputedStyle(target);
+	if ( style.getPropertyValue('display') == 'inline' ) {
+		target.style.display = 'inline-block';
+	}
+
+	target.addClass('image-caption-captioned');
+
 	return new MarkdownRenderChild( caption );
 }
 

src/index_widget.ts

@@ -0,0 +1,34 @@
+import {
+	EditorView,
+	WidgetType
+} from '@codemirror/view';
+
+import { ParsedImage } from './state_parser';
+
+
+export class ImageIndexWidget extends WidgetType {
+	index: number;
+	info: ParsedImage;
+
+	constructor(index: number, info: ParsedImage) {
+		super();
+
+		this.index = index;
+		this.info = info;
+	}
+
+	toDOM(view: EditorView): HTMLElement {
+		const container = document.createElement('data');
+		container.addClass('image-caption-data')
+		container.setAttribute('data-image-caption-index', this.index.toString());
+
+		return container;
+	}
+
+	eq(other: ImageIndexWidget): boolean {
+		return (
+			(other.index === this.index)
+			&& (other.info.embed_type === this.info.embed_type)
+		);
+	}
+}

src/main.ts

@@ -12,6 +12,7 @@ import {
 } from './md_processor';
 
 import { processPreviewImageCaption } from './preview_processor';
+import { viewObserver } from './view_observer';
 
 interface ImageCaptionSettings {
 	css: string;
@@ -42,13 +43,16 @@ export default class ImageCaptionPlugin extends Plugin {
 		await this.loadSettings();
 
         // register processors for preview mode
-        const previewProcessor = processPreviewImageCaption( this );
-        this.registerEditorExtension( previewProcessor );
+        // const previewProcessor = processPreviewImageCaption( this );
+        // this.registerEditorExtension( previewProcessor );
+
+        const viewObs = viewObserver(this);
+		this.registerEditorExtension(viewObs);
 
         // register processors for read mode
 		this.caption_observers = [];
-		this.registerMarkdownPostProcessor( processInternalImageCaption( this ) );
-		this.registerMarkdownPostProcessor( processExternalImageCaption( this ) );
+		// this.registerMarkdownPostProcessor( processInternalImageCaption( this ) );
+		// this.registerMarkdownPostProcessor( processExternalImageCaption( this ) );
 
 		this.addStylesheet();
 		this.addSettingTab( new ImageCaptionSettingTab( this.app, this ) );
@@ -59,8 +63,8 @@ export default class ImageCaptionPlugin extends Plugin {
             this.stylesheet.remove();
         }
 
-		this.clearObservers();
-		this.removeCaptions();
+		// this.clearObservers();
+		// this.removeCaptions();
 	}
 
 	async loadSettings() {
@@ -90,10 +94,10 @@ export default class ImageCaptionPlugin extends Plugin {
 	}
 
 	addStylesheet() {
-		this.stylesheet = document.createElement( 'style' );
-		this.stylesheet.setAttribute( 'type', 'text/css' );
+		this.stylesheet = document.createElement('style');
+		this.stylesheet.setAttribute('type', 'text/css');
 		this.updateStylesheet();
-		document.head.append( this.stylesheet );
+		document.head.append(this.stylesheet);
 	}
 
 	updateStylesheet() {
@@ -103,7 +107,7 @@ export default class ImageCaptionPlugin extends Plugin {
 		if ( label ) {
 			// replace all unescaped hashtags with image index
 			const number_pattern = /(^|[^\\])#/g;
-			label = label.replace( number_pattern, "$1' attr(data-image-caption-index) '" );  // inner quotes used to kill string and insert attr. + between strings breaks it.
+			label = label.replace( number_pattern, "$1' attr(data-image-caption-fignum) '" );  // inner quotes used to kill string and insert attr. + between strings breaks it.
 
 			// Replace escaped hashtags with hashtags
 			label = label.replace( '\\#', '#' );