Markdown playground lets readers be changed on the fly

js/markdown.js

@@ -585,19 +585,19 @@ class MDState {
 	 * Array of `MDReader`s sorted by block reading priority.
 	 * @type {MDReader[]}
 	 */
-	#readersByBlockPriority = [];
+	readersByBlockPriority = [];
 
 	/**
 	 * Array of `MDReader`s sorted by tokenization priority.
 	 * @type {MDReader[]}
 	 */
-	#readersByTokenPriority = [];
+	readersByTokenPriority = [];
 
 	/**
 	 * Tuples of `pass:number` and `MDReader` sorted substitution priority.
 	 * @type {Array}
 	 */
-	#readersBySubstitutePriority = [];
+	readersBySubstitutePriority = [];
 
 	/**
 	 * Mapping of reference symbols to URLs.
@@ -631,9 +631,9 @@ class MDState {
 		tagFilter=null) {
 		this.#lines = lines;
 		this.config = config;
-		this.#readersByBlockPriority = readersByBlockPriority
-		this.#readersByTokenPriority = readersByTokenPriority
-		this.#readersBySubstitutePriority = readersBySubstitutePriority
+		this.readersByBlockPriority = readersByBlockPriority
+		this.readersByTokenPriority = readersByTokenPriority
+		this.readersBySubstitutePriority = readersBySubstitutePriority
 		this.tagFilter = tagFilter;
 	}
 
@@ -707,7 +707,7 @@ class MDState {
 			this.p++;
 		}
 		if (!this.hasLines(1)) return null;
-		for (const reader of this.root.#readersByBlockPriority) {
+		for (const reader of this.root.readersByBlockPriority) {
 			const startP = this.p;
 			const block = reader.readBlock(this);
 			if (block) {
@@ -767,7 +767,7 @@ class MDState {
 				continue;
 			}
 			var found = false;
-			for (const reader of this.root.#readersByTokenPriority) {
+			for (const reader of this.root.readersByTokenPriority) {
 				const token = reader.readToken(this, remainder);
 				if (token === null) continue;
 				if (token === undefined) {
@@ -827,7 +827,7 @@ class MDState {
 		var anyChanges = false;
 		do {
 			anyChanges = false;
-			for (const readerTuple of this.root.#readersBySubstitutePriority) {
+			for (const readerTuple of this.root.readersBySubstitutePriority) {
 				/** @type {number} */
 				const pass = readerTuple[0];
 				/** @type {MDReader} */
@@ -1154,7 +1154,7 @@ class MDUnderlinedHeadingReader extends MDReader {
 		if (!state.hasLines(2)) return null;
 		var modifier;
 		let contentLine = state.lines[p++].trim();
-		[contentLine, modifier] = MDTagModifier.fromLine(contentLine);
+		[contentLine, modifier] = MDTagModifier.fromLine(contentLine, state);
 		let underLine = state.lines[p++].trim();
 		if (contentLine == '') return null;
 		if (/^=+$/.exec(underLine)) {
@@ -1196,7 +1196,7 @@ class MDHashHeadingReader extends MDReader {
 		var p = state.p;
 		let line = state.lines[p++];
 		var modifier;
-		[line, modifier] = MDTagModifier.fromLine(line);
+		[line, modifier] = MDTagModifier.fromLine(line, state);
 		var groups = MDHashHeadingReader.#hashHeadingRegex.exec(line);
 		if (groups === null) return null;
 		state.p = p;
@@ -1215,7 +1215,7 @@ class MDSubtextReader extends MDReader {
 		var p = state.p;
 		let line = state.lines[p++];
 		var modifier;
-		[line, modifier] = MDTagModifier.fromLine(line);
+		[line, modifier] = MDTagModifier.fromLine(line, state);
 		var groups = MDSubtextReader.#subtextRegex.exec(line);
 		if (groups === null) return null;
 		state.p = p;
@@ -1446,7 +1446,7 @@ class MDFencedCodeBlockReader extends MDReader {
 		var p = state.p;
 		let openFenceLine = state.lines[p++];
 		var modifier;
-		[openFenceLine, modifier] = MDTagModifier.fromLine(openFenceLine);
+		[openFenceLine, modifier] = MDTagModifier.fromLine(openFenceLine, state);
 		const match = /^```\s*([a-z0-9]*)\s*$/.exec(openFenceLine);
 		if (match === null) return null;
 		const language = match[1].length > 0 ? match[1] : null;
@@ -1516,7 +1516,7 @@ class MDHorizontalRuleReader extends MDReader {
 		var p = state.p;
 		let line = state.lines[p++];
 		var modifier;
-		[line, modifier] = MDTagModifier.fromLine(line);
+		[line, modifier] = MDTagModifier.fromLine(line, state);
 		if (MDHorizontalRuleReader.#horizontalRuleRegex.exec(line)) {
 			state.p = p;
 			let block = new MDHorizontalRuleNode();
@@ -1603,7 +1603,7 @@ class MDTableReader extends MDReader {
 		if (!state.hasLines(2)) return null;
 		let startP = state.p;
 		let firstLine = state.lines[startP];
-		var modifier = MDTagModifier.fromLine(firstLine)[1];
+		var modifier = MDTagModifier.fromLine(firstLine, state)[1];
 		let headerRow = this.#readTableRow(state, true);
 		if (headerRow === null) {
 			state.p = startP;
@@ -2210,17 +2210,11 @@ class MDImageReader extends MDLinkReader {
 			tokens.splice(match.index, match.tokens.length, node);
 			return true;
 		}
-		if (match = MDToken.findFirstTokens(tokens, [ MDTokenType.Bang, MDTokenType.Label, MDTokenType.META_OptionalWhitespace, MDTokenType.Label ])) {
-			let alt = match.tokens[1].content;
-			let ref = match.tokens[match.tokens.length - 1].content;
-			tokens.splice(match.index, match.tokens.length, new MDReferencedImageNode(ref, alt));
-			return true;
-		}
 		return false;
 	}
 
 	compareSubstituteOrdering(other, pass) {
-		if (other instanceof MDLinkReader) {
+		if (other.constructor === MDLinkReader || other.constructor === MDReferencedLinkReader) {
 			return -1;
 		}
 		return 0;
@@ -2228,10 +2222,26 @@ class MDImageReader extends MDLinkReader {
 }
 
 class MDReferencedImageReader extends MDReferencedLinkReader {
-	readBlock(state) { return null; }
+	readToken(state, line) {
+		const s = super.readToken(state, line);
+		if (s) return s;
+		if (line.startsWith('!')) return new MDToken('!', MDTokenType.Bang);
+		return null;
+	}
+
+	substituteTokens(state, pass, tokens) {
+		var match;
+		if (match = MDToken.findFirstTokens(tokens, [ MDTokenType.Bang, MDTokenType.Label, MDTokenType.META_OptionalWhitespace, MDTokenType.Label ])) {
+			let alt = match.tokens[1].content;
+			let ref = match.tokens[match.tokens.length - 1].content;
+			tokens.splice(match.index, match.tokens.length, new MDReferencedImageNode(ref, alt));
+			return true;
+		}
+		return false;
+	}
 
 	compareSubstituteOrdering(other, pass) {
-		if (other instanceof MDLinkReader) {
+		if (other.constructor === MDLinkReader || other.constructor === MDReferencedLinkReader) {
 			return -1;
 		}
 		return 0;
@@ -2286,7 +2296,7 @@ class MDSuperscriptReader extends MDSimplePairInlineReader {
 
 class MDHTMLTagReader extends MDReader {
 	readToken(state, line) {
-		const tag = MDHTMLTag.fromLineStart(line)
+		const tag = MDHTMLTag.fromLineStart(line, state);
 		if (tag === null) return null;
 		if (!state.root.tagFilter.isValidTagName(tag.tagName)) return null;
 		state.root.tagFilter.scrubTag(tag);
@@ -2943,7 +2953,8 @@ class MDReferencedLinkNode extends MDLinkNode {
 	 */
 	toHTML(state) {
 		if (this.href === '') {
-			this.href = state.urlForReference(this.reference);
+			const url = state.urlForReference(this.reference);
+			if (url) this.href = url;
 			const title = state.urlTitleForReference(this.reference);
 			if (title) this.attributes['title'] = title;
 		}
@@ -3693,9 +3704,20 @@ class MDTagModifier {
 	/**
 	 * Extracts modifier from line.
 	 * @param {string} line
+	 * @param {MDState} state
 	 * @returns {Array} Tuple with remaining line and MDTagModifier.
 	 */
-	static fromLine(line) {
+	static fromLine(line, state) {
+		if (state) {
+			var found = false;
+			for (const reader of state.root.readersByBlockPriority) {
+				if (reader instanceof MDModifierReader) {
+					found = true;
+					break;
+				}
+			}
+			if (!found) return [ line, null ];
+		}
 		let groups = this.#trailingClassRegex.exec(line);
 		if (groups === null) return [ line, null ];
 		let bareLine = groups[1];

js/spreadsheet.js

@@ -1642,8 +1642,8 @@ class CellExpression {
 		if (tokens[start + 1].type != CellExpressionTokenType.Colon) return null;
 		if (!tokens[end].type.isPotentialAddress()) return null;
 		const last = tokens[end].content.toUpperCase();
-		const firstAddress = new CellAddress(first);
-		const lastAddress = new CellAddress(last);
+		const firstAddress = CellAddress.fromString(first);
+		const lastAddress = CellAddress.fromString(last);
 		const range = new CellAddressRange(firstAddress, lastAddress);
 		return new CellExpression(CellExpressionOperation.Range, [ range ]);
 	}

markdownjs.html

@@ -22,16 +22,6 @@
 				background-color: var(--color-background);
 				color: var(--color-text);
 			}
-/* body {
-    width: 87.5%;
-    margin-left: auto;
-    margin-right: auto;
-    padding-left: 12.5%;
-    background-color: #fffff8;
-    color: #111;
-    max-width: 1400px;
-    counter-reset: sidenote-counter;
-} */
 			.inputhalf {
 				position: absolute;
 				width: 50%;
@@ -54,15 +44,44 @@
 				margin: 0 auto;
 				max-width: 600px;
 			}
+			.toolbar {
+				position: absolute;
+				z-index: 1;
+				background-color: #eee;
+				min-height: 32px;
+				/* max-height: 300px; */
+				width: 100%;
+				color: black;
+				border-bottom: 1px solid black;
+				box-sizing: border-box;
+				padding: 4px 20px;
+			}
+			#readercontainer {
+				overflow-y: scroll;
+			}
+			.reader-header {
+				margin-top: 0.25em;
+				font-weight: bold;
+			}
+			.reader-check {
+				display: inline-block;
+				padding: 4px 8px;
+				border: 1px dotted gray;
+				margin: 4px;
+			}
 			#markdowninput {
+				position: absolute;
+				top: 32px;
+				margin-top: 32px;
 				width: 100%;
-				height: 100%;
+				height: calc(100% - 32px);
 				box-sizing: border-box;
 				margin: 0;
 				padding: 0.5em;
 				border: 0;
 				background-color: var(--color-editor-background);
 				color: var(--color-editor-text);
+				box-sizing: border-box;
 			}
 			.calculated {
 				background-color: var(--color-calculated-background);
@@ -203,6 +222,7 @@
 			var parser = new Markdown([ ...Markdown.allReaders, new MDSpreadsheetReader() ]);
 			function onDocumentLoad() {
 				document.getElementById('markdowninput').addEventListener('input', onMarkdownChange);
+				populateReaderCheckboxes();
 				setTimeout(onMarkdownChange, 0);
 			}
 			function onMarkdownChange() {
@@ -210,6 +230,94 @@
 				let html = parser.toHTML(markdown);
 				document.getElementById('preview').innerHTML = html;
 			}
+			var blockReaderClasses = {
+				'Heading (underline)': MDUnderlinedHeadingReader,
+				'Heading (hash)': MDHashHeadingReader,
+				'Subtext': MDSubtextReader,
+				'Block quote': MDBlockQuoteReader,
+				'Unordered list': MDUnorderedListReader,
+				'Ordered list': MDOrderedListReader,
+				'Code block (fenced)': MDFencedCodeBlockReader,
+				'Code block (indented)': MDIndentedCodeBlockReader,
+				'Horizontal rule': MDHorizontalRuleReader,
+				'Table': MDTableReader,
+				'Definition list': MDDefinitionListReader,
+				'Paragraph': MDParagraphReader,
+				'Spreadsheets': MDSpreadsheetReader,
+			};
+			var inlineReaderClasses = {
+				'Emphasis': MDEmphasisReader,
+				'Strong': MDStrongReader,
+				'Strikethrough': MDStrikethroughReader,
+				'Underline': MDUnderlineReader,
+				'Highlight': MDHighlightReader,
+				'Links': MDLinkReader,
+				'Referenced links': MDReferencedLinkReader,
+				'Images': MDImageReader,
+				'Referenced images': MDReferencedImageReader,
+				'Code span': MDCodeSpanReader,
+				'Subscript': MDSubscriptReader,
+				'Superscript': MDSuperscriptReader,
+				'Footnotes': MDFootnoteReader,
+				'Abbrevations': MDAbbreviationReader,
+				'HTML tags': MDHTMLTagReader,
+				'Modifiers': MDModifierReader,
+			};
+			var activeReaders = [];
+			function populateReaderCheckboxes() {
+				const container = document.getElementById('readercontainer');
+				var header = document.createElement('div');
+				header.classList.add('reader-header');
+				header.append(document.createTextNode('Block Readers'));
+				container.append(header);
+				const blockContainer = document.createElement('div');
+				container.append(blockContainer);
+				for (const name of Object.keys(blockReaderClasses).sort()) {
+					const readerClass = blockReaderClasses[name];
+					activeReaders.push(new readerClass());
+					const checkbox = makeReaderCheckbox(name, readerClass);
+					blockContainer.append(checkbox);
+				}
+				header = document.createElement('div');
+				header.classList.add('reader-header');
+				header.append(document.createTextNode('Inline Readers'));
+				container.append(header);
+				const inlineContainer = document.createElement('div');
+				container.append(inlineContainer);
+				for (const name of Object.keys(inlineReaderClasses).sort()) {
+					const readerClass = inlineReaderClasses[name];
+					activeReaders.push(new readerClass());
+					const checkbox = makeReaderCheckbox(name, readerClass);
+					inlineContainer.append(checkbox);
+				}
+			}
+			function makeReaderCheckbox(name, readerClass) {
+				const check = document.createElement('input');
+				check.type = 'checkbox';
+				check.checked = true;
+				check.addEventListener('change', () => {
+					handleCheckChanged(readerClass, check);
+				});
+				check.id = `reader-${readerClass.name}`;
+				const label = document.createElement('label');
+				label.htmlFor = check.id;
+				label.append(document.createTextNode(name));
+				const div = document.createElement('div');
+				div.classList.add('reader-check');
+				div.append(check);
+				div.append(label);
+				return div;
+			}
+			function handleCheckChanged(readerClass, check) {
+				console.info(`${readerClass.name}: ${check.checked}`);
+				if (check.checked) {
+					activeReaders.push(new readerClass());
+				} else {
+					activeReaders = activeReaders.filter((reader) => reader.constructor.name !== readerClass.name);
+				}
+				parser = new Markdown(activeReaders);
+				onMarkdownChange();
+			}
 
 			document.addEventListener('DOMContentLoaded', onDocumentLoad);
 		</script>
@@ -217,15 +325,85 @@
 
 	<body>
 		<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.
-
-Duis gravida convallis nisi ullamcorper tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum varius arcu non molestie. Ut cursus, lorem nec pellentesque interdum, augue risus pellentesque ligula, at vehicula turpis mi vitae nisi. Vivamus pulvinar eget lorem non lacinia. Pellentesque pretium ex at metus elementum semper. Donec tincidunt metus ac ex aliquam, ac iaculis purus facilisis. Phasellus iaculis scelerisque nisl, eu molestie dui sollicitudin sed. Suspendisse ut felis porttitor, sollicitudin urna in, venenatis neque. Donec nec mi ultrices, molestie quam quis, iaculis libero.
-
-Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut congue consequat vestibulum. Etiam luctus, leo placerat ullamcorper venenatis, nunc metus fringilla sapien, id elementum tellus nulla eu nunc. Integer pulvinar egestas scelerisque. Sed accumsan libero eget pretium sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla pretium egestas elit id cursus. Morbi euismod elementum eros ut eleifend. Praesent velit sem, faucibus sed sapien sit amet, pellentesque fermentum nibh. Nulla consequat turpis nec lacus consequat, sed congue magna consectetur. Nam id urna rhoncus, consectetur eros ac, tempor nisl.
+			<div class="toolbar">
+				<details>
+					<summary>Readers</summary>
 
-Curabitur fermentum nunc sed dapibus feugiat. Etiam volutpat viverra eros sit amet tristique. Suspendisse cursus venenatis accumsan. Suspendisse venenatis vehicula lectus, sed venenatis augue pretium eu. Cras dui eros, iaculis in dictum hendrerit, tincidunt ut sapien. Ut nec nulla ut mauris cursus tincidunt. Suspendisse interdum pulvinar elit sit amet auctor. Donec id lacus tincidunt, varius elit non, tempor felis.
+					<div id="readercontainer"></div>
+				</details>
+			</div>
+			<textarea id="markdowninput">## Block Formats {#top}
 
-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. 
+				* Unordered
+				* Lists
+				  * Sub list
+				
+				1. Ordered
+				2. Lists
+				  6. Sub list
+				
+				&gt; A block quote lorem ipsum dolor sit amet
+				
+				A regular paragraph
+				
+				word
+				: a unit of meaning in a sentence
+				sentence
+				: a collection of words
+				
+				```javascript
+				function foo() {
+					return 'Fenced code block';
+				}
+				```
+				
+					function bar() {
+						return 'Indented code';
+					}
+				
+				### Heading, hash style
+				
+				Heading, underline style
+				---
+				
+				### Modified Heading {style=color:red;}
+				
+				-# Sub text
+				
+				| Unit Price | Qty | Subtotal |
+				| ---: | ---: | ---: |
+				| $1.23 | 2 | =A*B FILL |
+				| $4.99 | 6 | |
+				| Total | | =SUM(C:C) |
+				
+				---
+				
+				## Inline Formats
+				
+				Normal, **double asterisk,** __double underscore,__ *asterisks,* _underscores,_ ~~double tildes,~~ ~single tildes,~ ^carets,^ ==double equals==, ``double backticks``, `single backticks`.
+				
+				Lorem ipsum dolor sit amet,[^1] consectetur adipiscing elit.[^abc] Sed sodales in odio eget porta. Proin et erat sit amet erat semper mollis vitae ut turpis.[^foo] Ut ipsum dui, maximus sit amet suscipit at, dictum id nulla.[^bar] Aenean efficitur rhoncus nulla non fermentum.
+				
+				[^1]: Donec ut felis volutpat, gravida ipsum scelerisque, accumsan est.
+				[^abc]: Cras dictum rutrum quam.
+				[^foo]: Donec maximus bibendum lorem.
+				[^bar]: Praesent consectetur tristique leo. Morbi nec nisi sit amet quam imperdiet vehicula eu feugiat tortor. 
+				
+				The HTML on the WWW is often full of JS and CSS.
+				
+				*[HTML]: Hypertext Markup Language
+				*[WWW]: World Wide Web
+				*[JS]: JavaScript
+				*[CSS]: Cascading Style Sheets
+				
+				Click [here](#top) to return to the top. Referenced link to [Google][google title="I prefer Duck Duck Go"].
+				
+				![alt text](https://picsum.photos/100/75) ![alt text](https://picsum.photos/101/75 "With a title") ![][testimage]
+				
+				[testimage]: https://picsum.photos/102/75
+				[google]: https://google.com
+				
+				Some verbatim &lt;span style="color:green;"&gt;HTML&lt;/span&gt;. A script tag will be ignored. &lt;script&gt;&lt;/script&gt;
 			</textarea>
 		</div>
 		<div class="previewhalf half">

testjs.html

@@ -1763,6 +1763,30 @@
 					const result = this.md(markdown);
 					this.assertEqual(result, expected);
 				}
+
+				test_observedError1() {
+					// Saw "Uncaught Error: columnIndex must be number, got string" from this
+					const markdown = '| Unit Price | Qty | Subtotal |\n| ---: | ---: | ---: |\n| $1.23 | 2 | =A*B FILL |\n| $4.99 | 6 | |\n| Total | | =SUM(C:C) |';
+					const expected = '<table> <thead> <tr> ' +
+						'<th style="text-align: right;">Unit Price</th> ' +
+						'<th style="text-align: right;">Qty</th> ' +
+						'<th>Subtotal</th> ' +
+						'</tr> </thead> <tbody> <tr> ' +
+						'<td class="spreadsheet-type-currency" style="text-align: right;" data-numeric-value="1.23" data-string-value="1.23">$1.23</td> ' +
+						'<td class="spreadsheet-type-number" style="text-align: right;" data-numeric-value="2" data-string-value="2">2</td> ' +
+						'<td class="calculated spreadsheet-type-currency" data-numeric-value="2.46" data-string-value="2.46">$2.46</td> ' +
+						'</tr> <tr> ' +
+						'<td class="spreadsheet-type-currency" style="text-align: right;" data-numeric-value="4.99" data-string-value="4.99">$4.99</td> ' +
+						'<td class="spreadsheet-type-number" style="text-align: right;" data-numeric-value="6" data-string-value="6">6</td> ' +
+						'<td class="calculated spreadsheet-type-currency" data-numeric-value="29.94" data-string-value="29.94">$29.94</td> ' +
+						'</tr> <tr> ' +
+						'<td class="spreadsheet-type-string" style="text-align: right;" data-string-value="Total">Total</td> ' +
+						'<td class="spreadsheet-type-blank" style="text-align: right;" data-numeric-value="0" data-string-value=""></td> ' +
+						'<td class="calculated spreadsheet-type-currency" data-numeric-value="32.4" data-string-value="32.4">$32.40</td> ' +
+						'</tr> </tbody> </table>';
+					const result = this.md(markdown);
+					this.assertEqual(result, expected);
+				}
 			}
 		</script>
 	</head>