Referenced URLs working. Clickable images working.

js/markdown.js

@@ -1,5 +1,3 @@
-// TODO: Linked image not parsed correctly.  [![](image.jpg)](link.html)
-// TODO: Referenced URL definitions
 // TODO: HTML tags probably need better handling. Consider whether interior of matched tags should be interpreted as markdown.
 // TODO: {.class #cssid lang=fr}
 //     # Header {.class}
@@ -213,24 +211,30 @@ class _MDLinkSpan extends _MDSpan {
 	target = null;
 	/** @var {_MDSpan} */
 	content;
+	/** @var {String|null} */
+	title = null;
 
 	/**
 	 * @param {String} link
 	 * @param {_MDSpan} content
 	 */
-	constructor(link, content) {
+	constructor(link, content, title=null) {
 		super();
 		this.link = link;
 		this.content = content;
+		this.title = title;
 	}
 
 	toHTML(state) {
 		let escapedLink = this.link.replace('"', '"');
 		var html = `<a href="${escapedLink}"`;
-		if (target) {
+		if (this.target) {
 			let escapedTarget = this.target.replace('"', '&quot;');
 			html += ` target="${escapedTarget}"`;
 		}
+		if (this.title) {
+			html += ` title="${this.title.replace('"', '&quot;')}"`;
+		}
 		html += this.htmlAttributes();
 		html += '>' + this.content.toHTML(state) + '</a>';
 		return html;
@@ -246,7 +250,16 @@ class _MDReferencedLinkSpan extends _MDLinkSpan {
 		this.id = id;
 	}
 
+	/**
+	 * @param {_MDState} state
+	 */
 	toHTML(state) {
+		if (!this.link) {
+			let url = state.urls[this.id.toLowerCase()];
+			let title = state.urlTitles[this.id.toLowerCase()];
+			this.link = url;
+			this.title = title || this.title;
+		}
 		if (this.link) {
 			return super.toHTML(state);
 		} else {
@@ -376,6 +389,12 @@ class _MDReferencedImageSpan extends _MDImageSpan {
 	}
 
 	toHTML(state) {
+		if (!this.source) {
+			let url = state.urls[this.id.toLowerCase()];
+			let title = state.urlTitles[this.id.toLowerCase()];
+			this.source = url;
+			this.title = title || this.title;
+		}
 		if (this.source) {
 			return super.toHTML(state);
 		} else {
@@ -791,6 +810,12 @@ class _MDState {
 	/** @var {Object} */
 	#footnotes = {};
 
+	/** @var {Object} */
+	#urlDefinitions = {};
+
+	/** @var {Object} */
+	#urlTitles = {};
+
 	/** @var {number} */
 	p = 0;
 
@@ -812,6 +837,16 @@ class _MDState {
 		return (this.#parent) ? this.#parent.footnotes : this.#footnotes;
 	}
 
+	/** @var {Object} */
+	get urls() {
+		return (this.#parent) ? this.#parent.urls : this.#urlDefinitions;
+	}
+
+	/** @var {Object} */
+	get urlTitles() {
+		return (this.#parent) ? this.#parent.urlTitles : this.#urlTitles;
+	}
+
 	/**
 	 * @param {String[]} lines
 	 */
@@ -849,6 +884,17 @@ class _MDState {
 		}
 	}
 
+	defineURL(symbol, url, title=null) {
+		if (this.#parent) {
+			this.#parent.defineURL(symbol, url, title);
+		} else {
+			this.#urlDefinitions[symbol.toLowerCase()] = url;
+			if (title !== null) {
+				this.#urlTitles[symbol.toLowerCase()] = title;
+			}
+		}
+	}
+
 	hasLines(minCount, p=-1) {
 		let relativeTo = (p < 0) ? this.p : p;
 		return relativeTo + minCount <= this.lines.length;
@@ -923,6 +969,7 @@ class Markdown {
 		block = this.#readTable(state); if (block) return block;
 		block = this.#readFootnoteDef(state); if (block) return block;
 		block = this.#readAbbreviationDef(state); if (block) return block;
+		block = this.#readURLDef(state); if (block) return block;
 		block = this.#readDefinitionList(state); if (block) return block;
 		block = this.#readParagraph(state); if (block) return block;
 		return null;
@@ -1102,7 +1149,8 @@ class Markdown {
 
 	static #footnoteWithTitleRegex = /^\[\^(\d+?)\s+"(.*?)"\]/;  // 1=symbol, 2=title
 	static #footnoteRegex = /^\[\^(\d+?)\]/;  // 1=symbol
-	static #labelRegex = /^\[(.*?)\]/;  // 1=content
+	// Note: label contents have to have matching pairs of [] and (). Handles images inside links.
+	static #labelRegex = /^\[((?:[^\[\]]*\[[^\[\]]*\][^\[\]]*|[^\(\)]*\([^\(\)]*?\)[^\(\)]*|[^\[\]\(\)]*?)*)\]/;  // 1=content
 	static #urlWithTitleRegex = /^\((\S+?)\s+"(.*?)"\)/i;  // 1=URL, 2=title
 	static #urlRegex = /^\((\S+?)\)/i;  // 1=URL
 	static #emailWithTitleRegex = new RegExp("^\\(\\s*(" + this.#baseEmailRegex.source + ")\\s+\"(.*?)\"\\s*\\)", "i");  // 1=email, 2=title
@@ -1255,14 +1303,14 @@ class Markdown {
 	 */
 	static #readInline(state, line) {
 		var tokens = this.#tokenize(line);
-		return new _MDInlineBlock(this.#tokensToSpans(tokens));
+		return new _MDInlineBlock(this.#tokensToSpans(tokens, state));
 	}
 
 	/**
 	 * @param {Array} tokens
 	 * @returns {_MDSpan[]} spans
 	 */
-	static #tokensToSpans(tokens) {
+	static #tokensToSpans(tokens, state) {
 		var spans = tokens.slice(0, tokens.length);
 		var anyChanges = false;
 		var index, index0;
@@ -1275,9 +1323,10 @@ class Markdown {
 				_MDTokenType.Label,
 				_MDTokenType.URL,
 			])) !== null) {
-				let alt = spans[index + 1];
-				let url = spans[index + 2];
-				spans.splice(index, 3, new _MDImageSpan(url.content, alt.content, url.extra));
+				let alt = spans[index + 1].content;
+				let url = spans[index + 2].content;
+				let title = spans[index + 2].extra;
+				spans.splice(index, 3, new _MDImageSpan(url, alt, title));
 				anyChanges = true;
 			}
 			
@@ -1287,9 +1336,9 @@ class Markdown {
 				_MDTokenType.Label,
 				_MDTokenType.Label,
 			])) !== null) {
-				let alt = spans[index + 1];
-				let ref = spans[index + 2];
-				spans.splice(index, 3, new _MDReferencedImageSpan(ref.content, alt.content));
+				let alt = spans[index + 1].content;
+				let ref = spans[index + 2].content;
+				spans.splice(index, 3, new _MDReferencedImageSpan(ref, alt));
 				anyChanges = true;
 			}
 			
@@ -1298,9 +1347,9 @@ class Markdown {
 				_MDTokenType.Label,
 				_MDTokenType.URL,
 			])) !== null) {
-				let text = spans[index + 0];
-				let url = spans[index + 1];
-				spans.splice(index, 2, new _MDLinkSpan(url.content, this.#readInline(state, text.content)));
+				let text = spans[index + 0].content;
+				let url = spans[index + 1].content;
+				spans.splice(index, 2, new _MDLinkSpan(url, this.#readInline(state, text)));
 				anyChanges = true;
 			}
 
@@ -1309,8 +1358,8 @@ class Markdown {
 				_MDTokenType.Label,
 				_MDTokenType.Label,
 			])) !== null) {
-				let text = spans[index + 0];
-				let ref = spans[index + 1];
+				let text = spans[index + 0].content;
+				let ref = spans[index + 1].content;
 				spans.splice(index, 2, new _MDReferencedLinkSpan(ref, this.#readInline(state, text)));
 				anyChanges = true;
 			}
@@ -1319,8 +1368,8 @@ class Markdown {
 			else if ((index = this.#firstTokenIndex(spans, [
 				_MDTokenType.Footnote,
 			])) !== null) {
-				let symbol = spans[index];
-				spans.splice(index, 1, new _MDFootnoteReferenceSpan(symbol.content));
+				let symbol = spans[index].content;
+				spans.splice(index, 1, new _MDFootnoteReferenceSpan(symbol));
 				anyChanges = true;
 			}
 		} while (anyChanges);
@@ -1349,7 +1398,7 @@ class Markdown {
 					}
 					if (hasNewStart) continue;
 				}
-				let contentSpans = Markdown.#tokensToSpans(contentTokens);
+				let contentSpans = Markdown.#tokensToSpans(contentTokens, state);
 				return {
 					startIndex: startIndex,
 					toDelete: endIndex - startIndex + delimiter.length + 1,
@@ -1812,6 +1861,35 @@ class Markdown {
 	 * @param {_MDState} state
 	 * @returns {_MDBlock|null}
 	 */
+	static #readURLDef(state) {
+		var p = state.p;
+		let line = state.lines[p++];
+		var symbol;
+		var url;
+		var title = null;
+		let groups = /^\s*\[(.+?)]:\s*(\S+)\s+"(.*?)"\s*$/.exec(line);
+		if (groups) {
+			symbol = groups[1];
+			url = groups[2];
+			title = groups[3];
+		} else {
+			groups = /^\s*\[(.+?)]:\s*(\S+)\s*$/.exec(line);
+			if (groups) {
+				symbol = groups[1];
+				url = groups[2];
+			} else {
+				return null;
+			}
+		}
+		state.defineURL(symbol, url, title);
+		state.p = p;
+		return new _MDInlineBlock([]);
+	}
+
+	/**
+	 * @param {_MDState} state
+	 * @returns {_MDBlock|null}
+	 */
 	static #readParagraph(state) {
 		var paragraphLines = [];
 		var p = state.p;
@@ -1866,7 +1944,6 @@ class Markdown {
 		}
 		html += '</ol>';
 		html += '</div>';
-		// <!--FNREF:{symbol}-->
 		return html;
 	}