Added tables, all span class defs

js/markdown.js

@@ -20,6 +20,265 @@
 // - Footnote (inline)   [^1]: footnote text
 // - Abbreviation (inline)
 
+class _MDHAlign {
+	static Left = new _MDHAlign('Left');
+	static Center = new _MDHAlign('Center');
+	static Right = new _MDHAlign('Right');
+
+	constructor(name) {
+		this.name = name;
+	}
+
+	toString() {
+		return `_MDHAlign.${this.name}`;
+	}
+
+	static toHTMLAttribute(align) {
+		switch (align) {
+			case _MDHAlign.Left: return ' align="left"';
+			case _MDHAlign.Center: return ' align="center"';
+			case _MDHAlign.Right: return ' align="right"';
+		}
+		return '';
+	}
+}
+
+class _MDSpan {
+	toHTML(config) {
+		throw new Error(self.constructor.name + ".toHTML not implemented");
+	}
+
+	static toHTML(spans, config) {
+		return spans.map((span) => span.toHTML(config)).join("");
+	}
+}
+class _MDMultiSpan extends _MDSpan {
+	/** @var {_MDSpan[]} */
+	content;
+	/**
+	 * @param {_MDSpan[]} content
+	 */
+	constructor(content) {
+		super();
+		this.content = content;
+	}
+	toHTML() {
+		return _MDSpan.toHTML(this.content);
+	}
+}
+class _MDTextSpan extends _MDSpan {
+	/** @param {String} text */
+	text;
+	/**
+	 * @param {String} text
+	 */
+	constructor(text) {
+		super();
+		this.text = text;
+	}
+	toHTML(config) {
+		return this.text.replace('<', '&lt;');
+	}
+}
+class _MDHTMLSpan extends _MDSpan {
+	/** @param {String} html */
+	html;
+	/**
+	 * @param {String} html
+	 */
+	constructor(html) {
+		super();
+		this.html = html;
+	}
+	toHTML(config) {
+		return this.html;
+	}
+}
+class _MDLink extends _MDSpan {
+	/** @var {String} */
+	link;
+	/** @var {String|null} */
+	target = null;
+	/** @var {_MDSpan} */
+	content;
+
+	/**
+	 * @param {String} link
+	 * @param {_MDSpan} content
+	 */
+	constructor(link, content) {
+		super();
+		this.link = link;
+		this.content = content;
+	}
+
+	toHTML(config) {
+		let escapedLink = this.link.replace('"', '&quot;');
+		var html = `<a href="${escapedLink}"`;
+		if (target) {
+			let escapedTarget = this.target.replace('"', '&quot;');
+			html += ` target="${escapedTarget}"`;
+		}
+		html += '>' + this.content.toHTML(config) + '</a>';
+		return html;
+	}
+}
+class _MDReferencedLink extends _MDLink {
+	/** @var {String} id */
+	id;
+	constructor(id, content) {
+		super(null, content);
+		this.id = id;
+	}
+	toHTML(config) {
+		if (this.link) {
+			return super.toHTML(config);
+		} else {
+			let contentHTML = this.content.toHTML(config);
+			return `[${contentHTML}][${this.id}]`;
+		}
+	}
+}
+class _MDEmphasis extends _MDSpan {
+	/** @var {_MDSpan} content */
+	#content;
+	/**
+	 * @param {_MDSpan} content
+	 */
+	constructor(content) {
+		super();
+		this.#content = content;
+	}
+	toHTML(config) {
+		let contentHTML = this.#content.toHTML(config);
+		return `<em>${contentHTML}</em>`;
+	}
+}
+class _MDStrong extends _MDSpan {
+	/** @var {_MDSpan} content */
+	#content;
+	/**
+	 * @param {_MDSpan} content
+	 */
+	constructor(content) {
+		super();
+		this.#content = content;
+	}
+	toHTML(config) {
+		let contentHTML = this.#content.toHTML(config);
+		return `<strong>${contentHTML}</strong>`;
+	}
+}
+class _MDStrikethrough extends _MDSpan {
+	/** @var {_MDSpan} content */
+	#content;
+	/**
+	 * @param {_MDSpan} content
+	 */
+	constructor(content) {
+		super();
+		this.#content = content;
+	}
+	toHTML(config) {
+		let contentHTML = this.#content.toHTML(config);
+		return `<strike>${contentHTML}</strike>`;
+	}
+}
+class _MDInlineCode extends _MDSpan {
+	/** @var {_MDSpan} content */
+	#content;
+	/**
+	 * @param {_MDSpan} content
+	 */
+	constructor(content) {
+		super();
+		this.#content = content;
+	}
+	toHTML(config) {
+		let contentHTML = this.#content.toHTML(config);
+		return `<code>${contentHTML}</code>`;
+	}
+}
+class _MDImage extends _MDSpan {
+	/** @var {String} */
+	source;
+	/** @var {String|null} */
+	alt;
+	/**
+	 * @param {String} source
+	 */
+	constructor(source, alt) {
+		super();
+		this.source = source;
+		this.alt = alt;
+	}
+	toHTML(config) {
+		let escapedSource = this.source.replace('"', '&quot;');
+		let html = `<img src="${escapedSource}"`;
+		if (this.alt) {
+			let altEscaped = this.alt.replace('"', '&quot');
+			html += ` alt="${altEscaped}"`;
+		}
+		html += '>';
+		return html;
+	}
+}
+class _MDReferencedImage extends _MDImage {
+	/** @var {String} */
+	id;
+	/**
+	 * @param {String} id
+	 */
+	constructor(id, alt) {
+		super(null, alt);
+		this.id = id;
+	}
+	toHTML(config) {
+		if (this.source) {
+			return super.toHTML(config);
+		} else {
+			let altEscaped = this.alt.replace('"', '&quot;');
+			let idEscaped = this.id.replace('"', '&quot;');
+			return `![${altEscaped}][${idEscaped}]`;
+		}
+	}
+}
+class _MDFootnoteReference extends _MDSpan {
+	/** @var {String} */
+	symbol;
+	/** @var {Number} */
+	differentiator = 0;
+	/**
+	 * @param {String} symbol
+	 */
+	constructor(symbol) {
+		super();
+		this.symbol = symbol;
+	}
+	toHTML(config) {
+		return `<sup id="fnref-${this.symbol}-${this.differentiator}"><a href="#fndef-${this.symbol}">${this.symbol}</a></sup>`;
+	}
+}
+class _MDAbbreviationReference extends _MDSpan {
+	/** @var {_MDSpan} content */
+	#content;
+	/** @var {String} definition */
+	#definition;
+	/**
+	 * @param {_MDSpan} content
+	 */
+	constructor(content, definition) {
+		super();
+		this.#content = content;
+		this.#definition = definition;
+	}
+	toHTML(config) {
+		let contentHTML = this.#content.toHTML(config);
+		let definitionEscaped = this.#definition.replace('"', '&quot;');
+		return `<abbr title="${definitionEscaped}">${contentHTML}</em>`;
+	}
+}
+
 class _MDBlock {
 	toHTML(config) {
 		throw new Error(self.constructor.name + ".toHTML not implemented");
@@ -176,9 +435,11 @@ class _MDHorizontalRule extends _MDBlock {
 	}
 }
 
-class _MDTableHeaderCell extends _MDBlock {
+class _MDTableCell extends _MDBlock {
 	/** @var {_MDBlock} */
 	#content;
+	/** @var {_MDHAlign|null} */
+	align = null;
 	/**
 	 * @param {_MDBlock} content
 	 */
@@ -188,23 +449,16 @@ class _MDTableHeaderCell extends _MDBlock {
 	}
 	toHTML(config) {
 		let contentHTML = this.#content.toHTML(config);
-		return `<th>${contentHTML}</th>`;
+		let alignAttribute = _MDHAlign.toHTMLAttribute(this.align);
+		return `<td${alignAttribute}>${contentHTML}</td>`;
 	}
 }
 
-class _MDTableCell extends _MDBlock {
-	/** @var {_MDBlock} */
-	#content;
-	/**
-	 * @param {_MDBlock} content
-	 */
-	constructor(content) {
-		super();
-		this.#content = content;
-	}
+class _MDTableHeaderCell extends _MDTableCell {
 	toHTML(config) {
-		let contentHTML = this.#content.toHTML(config);
-		return `<th>${contentHTML}</th>`;
+		let html = super.toHTML(config);
+		let groups = /^<td(.*)td>$/.exec(html);
+		return `<th${groups[1]}th>`;
 	}
 }
 
@@ -218,8 +472,18 @@ class _MDTableRow extends _MDBlock {
 		super();
 		this.#cells = cells;
 	}
+	/**
+	 * @param {_MDHAlign[]} alignments
+	 */
+	applyAlignments(alignments) {
+		for (var i = 0; i < this.#cells.length; i++) {
+			let cell = this.#cells[i];
+			let align = i < alignments.length ? alignments[i] : null;
+			cell.align = align;
+		}
+	}
 	toHTML(config) {
-		cellsHTML = _MDBlock.toHTML(this.#cells, config);
+		let cellsHTML = _MDBlock.toHTML(this.#cells, config);
 		return `<tr>\n${cellsHTML}\n</tr>`;
 	}
 }
@@ -229,6 +493,15 @@ class _MDTable extends _MDBlock {
 	#headerRow;
 	/** @var {_MDTableRow[]} */
 	#bodyRows;
+	/**
+	 * @param {_MDTableRow} headerRow
+	 * @param {_MDTableRow[]} bodyRows
+	 */
+	constructor(headerRow, bodyRows) {
+		super();
+		this.#headerRow = headerRow;
+		this.#bodyRows = bodyRows;
+	}
 	toHTML(config) {
 		let headerRowHTML = this.#headerRow.toHTML(config);
 		let bodyRowsHTML = _MDBlock.toHTML(this.#bodyRows);
@@ -284,21 +557,6 @@ class _MDDefinitionDefinition extends _MDBlock {
 	}
 }
 
-class _MDFootnoteReference extends _MDBlock {
-	/** @var {String} */
-	#id;
-	/**
-	 * @param {String} id
-	 */
-	constructor(id) {
-		super();
-		this.#id = id;
-	}
-	toHTML(config) {
-		return `<sup><a href="#footnote${this.#id}">${this.#id}</a></sup>`;
-	}
-}
-
 class _MDFootnoteContent extends _MDBlock {
 	/** @var {String} */
 	#id;
@@ -411,8 +669,9 @@ class _MDState {
 		this.p = other.p;
 	}
 
-	hasLines(minCount) {
-		return this.p + minCount <= this.lines.length;
+	hasLines(minCount, p=-1) {
+		let relativeTo = (p < 0) ? this.p : p;
+		return relativeTo + minCount <= this.lines.length;
 	}
 }
 
@@ -424,8 +683,31 @@ class Markdown {
 	/**
 	 * @param {String} line
 	 */
-	static #stripIndent(line) {
-		return line.replace(/^(?: {1,4}|\t)/, '');
+	static #stripIndent(line, count=1) {
+		let regex = new RegExp(`^(: {1,4}|\\t){${count}}`);
+		return line.replace(regex, '');
+	}
+
+	/**
+	 * @param {String} line
+	 * @param {Boolean} fullIndentsOnly
+	 * @returns {Number} indent count
+	 */
+	static #countIndents(line, fullIndentsOnly=false) {
+		var count = 0;
+		var lastLine = line;
+		while (line.length > 0) {
+			line = (fullIndentsOnly)
+				? line.replace(/^(?: {4}|\t)/, '')
+				: line.replace(/^(?: {1,4}|\t)/, '');
+			if (line != lastLine) {
+				count++;
+			} else {
+				break;
+			}
+			lastLine = line;
+		}
+		return count;
 	}
 
 	/**
@@ -487,6 +769,8 @@ class Markdown {
 	 * @returns {_MDBlock}
 	 */
 	static #readInteriorContent(state, firstLineStartPos, stopRegex) {
+		// FIXME: When reading <li> content need to detect nested list without
+		// a blank line
 		var p = state.p;
 		var seenBlankLine = false;
 		var needsBlocks = false;
@@ -614,7 +898,6 @@ class Markdown {
 	 * @returns {_MDBlock|null}
 	 */
 	static #readUnorderedList(state) {
-		var p = state.p;
 		var items = [];
 		var item = null;
 		do {
@@ -627,10 +910,29 @@ class Markdown {
 
 	/**
 	 * @param {_MDState} state
+	 * @returns {_MDListItem|null}
+	 */
+	static #readOrderedListItem(state) {
+		var p = state.p;
+		let line = state.lines[p];
+		let groups = /^(\d+\.\s+)(.*)$/.exec(line);
+		if (groups === null) return null;
+		return new _MDListItem(this.#readInteriorContent(state, groups[1].length, /^\d+\.\s+/));
+	}
+
+	/**
+	 * @param {_MDState} state
 	 * @returns {_MDBlock|null}
 	 */
 	static #readOrderedList(state) {
-		return null;
+		var items = [];
+		var item = null;
+		do {
+			item = this.#readOrderedListItem(state);
+			if (item) items.push(item);
+		} while (item);
+		if (items.length == 0) return null;
+		return new _MDOrderedList(items);
 	}
 
 	/**
@@ -638,6 +940,17 @@ class Markdown {
 	 * @returns {_MDBlock|null}
 	 */
 	static #readFencedCodeBlock(state) {
+		var p = state.p;
+		if (state.lines[p++].trim() != '```') return null;
+		var codeLines = [];
+		while (state.hasLines(1, p)) {
+			let line = state.lines[p++];
+			if (line.trim() == '```') {
+				state.p = p;
+				return new _MDCodeBlock(codeLines.join("\n"));
+			}
+			codeLines.push(line);
+		}
 		return null;
 	}
 
@@ -646,7 +959,19 @@ class Markdown {
 	 * @returns {_MDBlock|null}
 	 */
 	static #readIndentedCodeBlock(state) {
-		return null;
+		var p = state.p;
+		var codeLines = [];
+		while (state.hasLines(1, p)) {
+			let line = state.lines[p++];
+			if (this.#countIndents(line, true) < 1) {
+				p--;
+				break;
+			}
+			codeLines.push(this.#stripIndent(line));
+		}
+		if (codeLines.length == 0) return null;
+		state.p = p;
+		return new _MDCodeBlock(codeLines.join("\n"));
 	}
 
 	/**
@@ -665,10 +990,75 @@ class Markdown {
 
 	/**
 	 * @param {_MDState} state
+	 * @param {Boolean} isHeader
+	 * @return {_MDTableRow|null}
+	 */
+	static #readTableRow(state, isHeader) {
+		if (!state.hasLines(1)) return null;
+		var p = state.p;
+		let line = state.lines[p++].trim();
+		if (/.*\|.*/.exec(line) === null) return null;
+		if (line.startsWith('|')) line = line.substring(1);
+		if (line.endsWith('|')) line = line.substring(0, line.length - 1);
+		let cellTokens = line.split('|');
+		let cells = cellTokens.map(function(token) {
+			let content = Markdown.#readInline(state, token);
+			return isHeader ? new _MDTableHeaderCell(content) : new _MDTableCell(content);
+		});
+		state.p = p;
+		return new _MDTableRow(cells);
+	}
+
+	/**
+	 * @param {String} line
+	 * @returns {_MDHAlign[]}
+	 */
+	static #parseColumnAlignments(line) {
+		line = line.trim();
+		if (line.startsWith('|')) line = line.substring(1);
+		if (line.endsWith('|')) line = line.substring(0, line.length - 1);
+		return line.split('|').map(function(token) {
+			token = token.trim();
+			if (token.startsWith(':')) {
+				if (token.endsWith(':')) {
+					return _MDHAlign.Center;
+				}
+				return _MDHAlign.Left;
+			} else if (token.endsWith(':')) {
+				return _MDHAlign.Right;
+			}
+			return null;
+		});
+	}
+
+	/**
+	 * @param {_MDState} state
 	 * @returns {_MDBlock|null}
 	 */
 	static #readTable(state) {
-		return null;
+		if (!state.hasLines(2)) return null;
+		let startP = state.p;
+		let headerRow = this.#readTableRow(state, true);
+		if (headerRow === null) {
+			state.p = startP;
+			return null;
+		}
+		let dividerLine = state.lines[state.p++];
+		let dividerGroups = /^\s*[|]?(?:\s*[:]?-+[:]?\s*\|)(?:\s*[:]?-+[:]?\s*)[|]?\s*$/.exec(dividerLine);
+		if (dividerGroups === null) {
+			state.p = startP;
+			return null;
+		}
+		let columnAlignments = this.#parseColumnAlignments(dividerLine);
+		headerRow.applyAlignments(columnAlignments);
+		var bodyRows = [];
+		while (state.hasLines(1)) {
+			let row = this.#readTableRow(state, false);
+			if (row === null) break;
+			row.applyAlignments(columnAlignments);
+			bodyRows.push(row);
+		}
+		return new _MDTable(headerRow, bodyRows);
 	}
 
 	/**
@@ -676,6 +1066,7 @@ class Markdown {
 	 * @returns {_MDBlock|null}
 	 */
 	static #readDefinitionList(state) {
+		// TODO
 		return null;
 	}
 
@@ -684,6 +1075,7 @@ class Markdown {
 	 * @returns {_MDBlock|null}
 	 */
 	static #readFootnoteDef(state) {
+		// TODO
 		return null;
 	}
 
@@ -692,6 +1084,7 @@ class Markdown {
 	 * @returns {_MDBlock|null}
 	 */
 	static #readAbbreviationDef(state) {
+		// TODO
 		return null;
 	}
 

markdownjs.html

@@ -24,20 +24,24 @@
 				padding: 0;
 				margin: 0;
 			}
-			.previewhalf {
-				position: relative;
-				width: 100%;
-				height: 50%;
-				background-color: white;
-				overflow-y: auto;
-			}
 			.inputhalf {
-				position: relative;
-				width: 100%;
-				height: 50%;
+				position: absolute;
+				width: 50%;
+				height: 100%;
+				left: 0;
+				top: 0;
 				background-color: #0000aa;
 				color: white;
 			}
+			.previewhalf {
+				position: absolute;
+				width: 50%;
+				height: 100%;
+				left: 50%;
+				top: 0;
+				background-color: white;
+				overflow-y: auto;
+			}
 			#preview {
 				padding: 1em;
 				margin: 0 auto;
@@ -53,15 +57,20 @@
 				background-color: #0000aa;
 				color: white;
 			}
+			table {
+				border-collapse: collapse;
+			}
+			table th {
+				background-color: #ddd;
+			}
+			table td, table th {
+				border: 1px solid black;
+				padding: 0.2em 0.5em;
+			}
 		</style>
 	</head>
 
 	<body>
-		<div class="previewhalf half">
-			<div id="preview">
-				<p>Preview here</p>
-			</div>
-		</div>
 		<div class="inputhalf half">
 			<textarea id="markdowninput">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis vel metus ut tempor. Morbi dictum, velit quis venenatis consequat, ante leo dignissim magna, quis efficitur ex magna nec ex. In egestas aliquet tortor, vitae posuere dui lobortis ac. Pellentesque quis hendrerit lorem. In maximus ut sapien vel tristique. Pellentesque ut tincidunt orci. Phasellus dignissim massa sit amet tellus placerat finibus. Ut elementum tortor ex, non aliquam libero semper eu.
 
@@ -74,5 +83,10 @@ Curabitur fermentum nunc sed dapibus feugiat. Etiam volutpat viverra eros sit am
 Quisque posuere, libero ac elementum maximus, lacus nulla lobortis nibh, id aliquam tortor lacus vel quam. Nunc eget dolor non nunc sagittis varius. Proin viverra vestibulum placerat. Fusce placerat interdum diam quis sollicitudin. Praesent sed tincidunt orci. Suspendisse lectus lorem, porta vel quam sit amet, pharetra interdum purus. Suspendisse ac lacus consequat, dapibus nunc in, porttitor purus. Nam dictum elit eget massa tincidunt tempus. Vestibulum blandit, lorem et accumsan tristique, orci dolor vulputate magna, et posuere lorem sapien non sapien. Vivamus nulla justo, eleifend et metus sit amet, gravida iaculis erat. Fusce lacinia cursus accumsan. 
 			</textarea>
 		</div>
+		<div class="previewhalf half">
+			<div id="preview">
+				<p>Preview here</p>
+			</div>
+		</div>
 	</body>
 </html>