Tidying

js/markdown.js

@@ -1,4 +1,6 @@
 // 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}
 //     Header {.class}
@@ -22,7 +24,7 @@ class _MDHAlign {
 	}
 
 	toString() {
-		return `_MDHAlign.${this.name}`;
+		return `${this.constructor.name}.${this.name}`;
 	}
 
 	static toHTMLAttribute(align) {
@@ -57,23 +59,23 @@ class _MDTokenType {
 
 	static META_AnyNonWhitespace = new _MDTokenType('METAAnyNonWhitespace');
 
-	#name;
-
-	get name() {
-		return this.#name;
-	}
+	/** @var {String} */
+	name;
 
 	constructor(name) {
-		this.#name = name;
+		this.name = name;
 	}
 
 	toString() {
-		return this.constructor.name + `.${this.#name}`;
+		return `${this.constructor.name}.${this.name}`;
 	}
 }
-class _MDToken {
 
-	/** @var {String} */
+class _MDToken {
+	/**
+	 * The original token string.
+	 * @var {String}
+	 */
 	original;
 	/** @var {_MDTokenType} */
 	type;
@@ -84,6 +86,13 @@ class _MDToken {
 	/** @var {_MDHTMLTag|null} */
 	tag;
 
+	/**
+	 * @param {String} original
+	 * @param {_MDTokenType} type
+	 * @param {String|null} content
+	 * @param {String|null} extra
+	 * @param {_MDHTMLTag|null} tag
+	 */
 	constructor(original, type, content=null, extra=null, tag=null) {
 		this.original = original;
 		this.type = type;
@@ -98,6 +107,13 @@ class _MDToken {
 
 
 class _MDSpan {
+	/** @var {String[]} */
+	cssClasses = [];
+	/** @var {String|null} */
+	id = null;
+	/** @var {Object} */
+	attributes = {};
+
 	/**
 	 * @param {_MDState} state
 	 * @returns {String} HTML
@@ -106,6 +122,21 @@ class _MDSpan {
 		throw new Error(self.constructor.name + ".toHTML not implemented");
 	}
 
+	htmlAttributes() {
+		var html = '';
+		if (this.cssClasses.length > 0) {
+			html += ` class="${this.cssClasses.join(' ')}"`;
+		}
+		if (this.id !== null) {
+			html += ` id="${this.id}"`;
+		}
+		for (const name in this.attributes) {
+			let value = this.attributes[name];
+			html += ` ${name}="${value.replace('"', '"')}"`;
+		}
+		return html;
+	}
+
 	/**
 	 * @param {_MDSpan[]} spans
 	 * @param {_MDState} state
@@ -114,9 +145,11 @@ class _MDSpan {
 		return spans.map((span) => span.toHTML(state)).join("");
 	}
 }
+
 class _MDMultiSpan extends _MDSpan {
 	/** @var {_MDSpan[]} */
 	content;
+
 	/**
 	 * @param {_MDSpan[]} content
 	 */
@@ -124,13 +157,16 @@ class _MDMultiSpan extends _MDSpan {
 		super();
 		this.content = content;
 	}
+
 	toHTML(state) {
 		return _MDSpan.toHTML(this.content, state);
 	}
 }
+
 class _MDTextSpan extends _MDSpan {
 	/** @param {String} text */
 	text;
+
 	/**
 	 * @param {String} text
 	 */
@@ -138,6 +174,7 @@ class _MDTextSpan extends _MDSpan {
 		super();
 		this.text = text;
 	}
+
 	toHTML(state) {
 		let html = this.text.replace('<', '&lt;');
 		let abbrevs = state.abbreviations;
@@ -151,9 +188,11 @@ class _MDTextSpan extends _MDSpan {
 		return html;
 	}
 }
+
 class _MDHTMLSpan extends _MDSpan {
 	/** @param {String} html */
 	html;
+
 	/**
 	 * @param {String} html
 	 */
@@ -161,10 +200,12 @@ class _MDHTMLSpan extends _MDSpan {
 		super();
 		this.html = html;
 	}
+
 	toHTML(state) {
 		return this.html;
 	}
 }
+
 class _MDLinkSpan extends _MDSpan {
 	/** @var {String} */
 	link;
@@ -190,17 +231,21 @@ class _MDLinkSpan extends _MDSpan {
 			let escapedTarget = this.target.replace('"', '&quot;');
 			html += ` target="${escapedTarget}"`;
 		}
+		html += this.htmlAttributes();
 		html += '>' + this.content.toHTML(state) + '</a>';
 		return html;
 	}
 }
+
 class _MDReferencedLinkSpan extends _MDLinkSpan {
 	/** @var {String} id */
 	id;
+
 	constructor(id, content) {
 		super(null, content);
 		this.id = id;
 	}
+
 	toHTML(state) {
 		if (this.link) {
 			return super.toHTML(state);
@@ -210,9 +255,11 @@ class _MDReferencedLinkSpan extends _MDLinkSpan {
 		}
 	}
 }
+
 class _MDEmphasisSpan extends _MDSpan {
-	/** @var {_MDSpan} content */
+	/** @var {_MDSpan} */
 	#content;
+
 	/**
 	 * @param {_MDSpan} content
 	 */
@@ -220,14 +267,17 @@ class _MDEmphasisSpan extends _MDSpan {
 		super();
 		this.#content = content;
 	}
+
 	toHTML(state) {
 		let contentHTML = this.#content.toHTML(state);
-		return `<em>${contentHTML}</em>`;
+		return `<em${this.htmlAttributes()}>${contentHTML}</em>`;
 	}
 }
+
 class _MDStrongSpan extends _MDSpan {
 	/** @var {_MDSpan} content */
 	#content;
+
 	/**
 	 * @param {_MDSpan} content
 	 */
@@ -235,14 +285,17 @@ class _MDStrongSpan extends _MDSpan {
 		super();
 		this.#content = content;
 	}
+
 	toHTML(state) {
 		let contentHTML = this.#content.toHTML(state);
-		return `<strong>${contentHTML}</strong>`;
+		return `<strong${this.htmlAttributes()}>${contentHTML}</strong>`;
 	}
 }
+
 class _MDStrikethroughSpan extends _MDSpan {
 	/** @var {_MDSpan} content */
 	#content;
+
 	/**
 	 * @param {_MDSpan} content
 	 */
@@ -250,14 +303,17 @@ class _MDStrikethroughSpan extends _MDSpan {
 		super();
 		this.#content = content;
 	}
+
 	toHTML(state) {
 		let contentHTML = this.#content.toHTML(state);
-		return `<strike>${contentHTML}</strike>`;
+		return `<strike${this.htmlAttributes()}>${contentHTML}</strike>`;
 	}
 }
+
 class _MDCodeSpan extends _MDSpan {
 	/** @var {_MDSpan} content */
 	#content;
+
 	/**
 	 * @param {_MDSpan} content
 	 */
@@ -265,11 +321,13 @@ class _MDCodeSpan extends _MDSpan {
 		super();
 		this.#content = content;
 	}
+
 	toHTML(state) {
 		let contentHTML = this.#content.toHTML(state);
-		return `<code>${contentHTML}</code>`;
+		return `<code${this.htmlAttributes()}>${contentHTML}</code>`;
 	}
 }
+
 class _MDImageSpan extends _MDSpan {
 	/** @var {String} */
 	source;
@@ -277,6 +335,7 @@ class _MDImageSpan extends _MDSpan {
 	alt;
 	/** @var {String|null} */
 	title;
+
 	/**
 	 * @param {String} source
 	 */
@@ -286,6 +345,7 @@ class _MDImageSpan extends _MDSpan {
 		this.alt = alt;
 		this.title = title;
 	}
+
 	toHTML(state) {
 		let escapedSource = this.source.replace('"', '&quot;');
 		let html = `<img src="${escapedSource}"`;
@@ -297,13 +357,16 @@ class _MDImageSpan extends _MDSpan {
 			let titleEscaped = this.title.replace('"', '&quot;');
 			html += ` title="${titleEscaped}"`;
 		}
+		html += this.htmlAttributes();
 		html += '>';
 		return html;
 	}
 }
+
 class _MDReferencedImageSpan extends _MDImageSpan {
 	/** @var {String} */
 	id;
+
 	/**
 	 * @param {String} id
 	 */
@@ -311,6 +374,7 @@ class _MDReferencedImageSpan extends _MDImageSpan {
 		super(null, alt);
 		this.id = id;
 	}
+
 	toHTML(state) {
 		if (this.source) {
 			return super.toHTML(state);
@@ -321,9 +385,11 @@ class _MDReferencedImageSpan extends _MDImageSpan {
 		}
 	}
 }
+
 class _MDFootnoteReferenceSpan extends _MDSpan {
 	/** @var {String} */
 	symbol;
+
 	/**
 	 * @param {String} symbol
 	 */
@@ -331,27 +397,9 @@ class _MDFootnoteReferenceSpan extends _MDSpan {
 		super();
 		this.symbol = symbol;
 	}
+
 	toHTML(state) {
-		return `<!--FNREF:{${this.symbol}}-->`
-	}
-}
-class _MDAbbreviationSpan extends _MDSpan {
-	/** @var {String} */
-	abbreviation;
-	/** @var {String|null} definition */
-	definition;
-	/**
-	 * @param {String} abbreviation
-	 * @param {String|null} definition
-	 */
-	constructor(abbreviation, definition=null) {
-		super();
-		this.abbreviation = abbreviation;
-		this.definition = definition;
-	}
-	toHTML(state) {
-		let definitionEscaped = this.definition.replace('"', '&quot;');
-		return `<abbr title="${definitionEscaped}">${this.abbreviation}</em>`;
+		return `<!--FNREF:{${this.symbol}}-->`;
 	}
 }
 
@@ -360,6 +408,13 @@ class _MDAbbreviationSpan extends _MDSpan {
 
 
 class _MDBlock {
+	/** @var {String[]} */
+	cssClasses = [];
+	/** @var {String|null} */
+	id = null;
+	/** @var {Object} */
+	attributes = {};
+
 	/**
 	 * @param {_MDState} state
 	 */
@@ -367,6 +422,21 @@ class _MDBlock {
 		throw new Error(self.constructor.name + ".toHTML not implemented");
 	}
 
+	htmlAttributes() {
+		var html = '';
+		if (this.cssClasses.length > 0) {
+			html += ` class="${this.cssClasses.join(' ')}"`;
+		}
+		if (this.id !== null) {
+			html += ` id="${this.id}"`;
+		}
+		for (const name in this.attributes) {
+			let value = this.attributes[name];
+			html += ` ${name}="${value.replace('"', '&quot;')}"`;
+		}
+		return html;
+	}
+
 	/**
 	 * @param {_MDBlock[]} blocks
 	 * @param {_MDState} state
@@ -406,7 +476,7 @@ class _MDParagraphBlock extends _MDBlock {
 
 	toHTML(state) {
 		let contentHTML = this.content.toHTML(state);
-		return `<p>${contentHTML}</p>\n`;
+		return `<p${this.htmlAttributes()}>${contentHTML}</p>\n`;
 	}
 }
 
@@ -428,13 +498,14 @@ class _MDHeaderBlock extends _MDBlock {
 
 	toHTML(state) {
 		let contentHTML = this.content.toHTML(state);
-		return `<h${this.level}>${contentHTML}</h${this.level}>\n`;
+		return `<h${this.level}${this.htmlAttributes()}>${contentHTML}</h${this.level}>\n`;
 	}
 }
 
 class _MDBlockquoteBlock extends _MDBlock {
 	/** @var {_MDBlock[]} */
 	content;
+
 	/**
 	 * @param {_MDBlock[]} content
 	 */
@@ -442,15 +513,17 @@ class _MDBlockquoteBlock extends _MDBlock {
 		super();
 		this.content = content;
 	}
+
 	toHTML(state) {
 		let contentHTML = _MDBlock.toHTML(this.content, state);
-		return `<blockquote>\n${contentHTML}\n</blockquote>`;
+		return `<blockquote${this.htmlAttributes()}>\n${contentHTML}\n</blockquote>`;
 	}
 }
 
 class _MDUnorderedListBlock extends _MDBlock {
 	/** @var {_MDListItemBlock[]} */
 	items;
+
 	/**
 	 * @param {_MDListItemBlock[]} items
 	 */
@@ -458,15 +531,17 @@ class _MDUnorderedListBlock extends _MDBlock {
 		super();
 		this.items = items;
 	}
+
 	toHTML(state) {
 		let contentHTML = _MDBlock.toHTML(this.items, state);
-		return `<ul>\n${contentHTML}\n</ul>`;
+		return `<ul${this.htmlAttributes()}>\n${contentHTML}\n</ul>`;
 	}
 }
 
 class _MDOrderedListBlock extends _MDBlock {
 	/** @var {_MDListItemBlock[]} */
 	items;
+
 	/**
 	 * @param {_MDListItemBlock[]} items
 	 */
@@ -474,9 +549,10 @@ class _MDOrderedListBlock extends _MDBlock {
 		super();
 		this.items = items;
 	}
+
 	toHTML(state) {
 		let contentHTML = _MDBlock.toHTML(this.items, state);
-		return `<ol>\n${contentHTML}\n</ol>`;
+		return `<ol${this.htmlAttributes()}>\n${contentHTML}\n</ol>`;
 	}
 }
 
@@ -494,13 +570,14 @@ class _MDListItemBlock extends _MDBlock {
 
 	toHTML(state) {
 		let contentHTML = this.content.toHTML(state);
-		return `<li>${contentHTML}</li>`;
+		return `<li${this.htmlAttributes()}>${contentHTML}</li>`;
 	}
 }
 
 class _MDCodeBlock extends _MDBlock {
 	/** @var {String} */
 	#code;
+
 	/**
 	 * @param {String} code
 	 */
@@ -508,14 +585,15 @@ class _MDCodeBlock extends _MDBlock {
 		super();
 		this.#code = code;
 	}
+
 	toHTML(state) {
-		return `<pre><code>${this.#code}</code></pre>`;
+		return `<pre${this.htmlAttributes()}><code>${this.#code}</code></pre>`;
 	}
 }
 
 class _MDHorizontalRuleBlock extends _MDBlock {
 	toHTML(state) {
-		return "<hr>\n";
+		return `<hr${this.htmlAttributes()}>\n`;
 	}
 }
 
@@ -524,6 +602,7 @@ class _MDTableCellBlock extends _MDBlock {
 	#content;
 	/** @var {_MDHAlign|null} */
 	align = null;
+
 	/**
 	 * @param {_MDBlock} content
 	 */
@@ -531,10 +610,16 @@ class _MDTableCellBlock extends _MDBlock {
 		super();
 		this.#content = content;
 	}
+
+	htmlAttributes() {
+		var html = super.htmlAttributes();
+		html += _MDHAlign.toHTMLAttribute(this.align);
+		return html;
+	}
+
 	toHTML(state) {
 		let contentHTML = this.#content.toHTML(state);
-		let alignAttribute = _MDHAlign.toHTMLAttribute(this.align);
-		return `<td${alignAttribute}>${contentHTML}</td>`;
+		return `<td${this.htmlAttributes()}>${contentHTML}</td>`;
 	}
 }
 
@@ -549,6 +634,7 @@ class _MDTableHeaderCellBlock extends _MDTableCellBlock {
 class _MDTableRowBlock extends _MDBlock {
 	/** @var {_MDTableCellBlock[]|_MDTableHeaderCellBlock[]} */
 	#cells;
+
 	/**
 	 * @param {_MDTableCellBlock[]|_MDTableHeaderCellBlock[]} cells
 	 */
@@ -556,6 +642,7 @@ class _MDTableRowBlock extends _MDBlock {
 		super();
 		this.#cells = cells;
 	}
+
 	/**
 	 * @param {_MDHAlign[]} alignments
 	 */
@@ -566,9 +653,10 @@ class _MDTableRowBlock extends _MDBlock {
 			cell.align = align;
 		}
 	}
+
 	toHTML(state) {
 		let cellsHTML = _MDBlock.toHTML(this.#cells, state);
-		return `<tr>\n${cellsHTML}\n</tr>`;
+		return `<tr${this.htmlAttributes()}>\n${cellsHTML}\n</tr>`;
 	}
 }
 
@@ -577,6 +665,7 @@ class _MDTableBlock extends _MDBlock {
 	#headerRow;
 	/** @var {_MDTableRowBlock[]} */
 	#bodyRows;
+
 	/**
 	 * @param {_MDTableRowBlock} headerRow
 	 * @param {_MDTableRowBlock[]} bodyRows
@@ -586,16 +675,18 @@ class _MDTableBlock extends _MDBlock {
 		this.#headerRow = headerRow;
 		this.#bodyRows = bodyRows;
 	}
+
 	toHTML(state) {
 		let headerRowHTML = this.#headerRow.toHTML(state);
 		let bodyRowsHTML = _MDBlock.toHTML(this.#bodyRows, state);
-		return `<table>\n<thead>\n${headerRowHTML}\n</thead>\n<tbody>\n${bodyRowsHTML}\n</tbody>\n</table>`;
+		return `<table${this.htmlAttributes()}>\n<thead>\n${headerRowHTML}\n</thead>\n<tbody>\n${bodyRowsHTML}\n</tbody>\n</table>`;
 	}
 }
 
 class _MDDefinitionListBlock extends _MDBlock {
 	/** @var {_MDBlock[]} */
 	#content;
+
 	/**
 	 * @param {_MDBlock[]} content
 	 */
@@ -603,15 +694,17 @@ class _MDDefinitionListBlock extends _MDBlock {
 		super();
 		this.#content = content;
 	}
+
 	toHTML(state) {
 		let contentHTML = _MDBlock.toHTML(this.#content, state);
-		return `<dl>\n${contentHTML}\n</dl>`;
+		return `<dl${this.htmlAttributes()}>\n${contentHTML}\n</dl>`;
 	}
 }
 
 class _MDDefinitionTermBlock extends _MDBlock {
 	/** @var {_MDBlock} */
 	#content;
+
 	/**
 	 * @param {_MDBlock} content
 	 */
@@ -619,15 +712,17 @@ class _MDDefinitionTermBlock extends _MDBlock {
 		super();
 		this.#content = content;
 	}
+
 	toHTML(state) {
 		let contentHTML = this.#content.toHTML(state);
-		return `<dt>${contentHTML}</dt>`;
+		return `<dt${this.htmlAttributes()}>${contentHTML}</dt>`;
 	}
 }
 
 class _MDDefinitionDefinitionBlock extends _MDBlock {
 	/** @var {_MDBlock} */
 	#content;
+
 	/**
 	 * @param {_MDBlock} content
 	 */
@@ -635,15 +730,17 @@ class _MDDefinitionDefinitionBlock extends _MDBlock {
 		super();
 		this.#content = content;
 	}
+
 	toHTML(state) {
 		let contentHTML = this.#content.toHTML(state);
-		return `<dd>${contentHTML}</dd>`;
+		return `<dd${this.htmlAttributes()}>${contentHTML}</dd>`;
 	}
 }
 
 class _MDInlineBlock extends _MDBlock {
 	/** @var {_MDSpan[]} */
 	#content;
+
 	/**
 	 * @param {_MDSpan[]} content
 	 */
@@ -758,10 +855,6 @@ class _MDState {
 	}
 }
 
-class MDConfig {
-
-}
-
 class Markdown {
 	/**
 	 * @param {String} line
@@ -1781,7 +1874,7 @@ class Markdown {
 	 * @param  {String} markdown
 	 * @returns {String} HTML
 	 */
-	static toHTML(markdown, config=new MDConfig()) {
+	static toHTML(markdown) {
 		var state = new _MDState();
 		let lines = markdown.split(/(?:\n|\r|\r\n)/);
 		state.lines = lines;