Playground can choose between JS and PHP

php/markdown.php

@@ -2361,7 +2361,9 @@ class MDAbbreviationReader extends MDReader {
 					if ($index === false) continue;
 					$prefix = substr($text, 0, $index);
 					$suffix = substr($text, $index + strlen($abbreviation));
-					array_splice($elems, $i, 1, [$prefix, new MDAbbreviationNode($abbreviation, $definition), $suffix]);
+					array_splice($elems, $i, 1, [$prefix,
+						new MDAbbreviationNode($abbreviation, $definition),
+						$suffix]);
 					$i = -1; // start over
 					$changed = true;
 					break;
@@ -2441,7 +2443,9 @@ class MDSimplePairInlineReader extends MDReader {
 	 *   content string instead of parsed `MDNode`s
 	 * @return bool  `true` if substitution was performed, `false` if not
 	 */
-	public function attemptPair(MDState $state, int $pass, array &$tokens, string $nodeClass, MDTokenType $delimiter, int $count=1, bool $plaintext=false): bool {
+	public function attemptPair(MDState $state, int $pass, array &$tokens,
+			string $nodeClass, MDTokenType $delimiter, int $count=1,
+			bool $plaintext=false): bool {
 		// We do four passes. #1: doubles without inner tokens, #2: singles
 		// without inner tokens, #3: doubles with paired inner tokens,
 		// #4: singles with paired inner tokens
@@ -2449,9 +2453,11 @@ class MDSimplePairInlineReader extends MDReader {
 		if ($count > 1 && $pass != 1 && $pass != 3) return false;
 		$delimiters = array_fill(0, $count, $delimiter);
 		$isFirstOfMultiplePasses = $this->substitutionPassCount() > 1 && $pass == 1;
-		$match = MDToken::findPairedTokens($tokens, $delimiters, $delimiters, function($content) use ($nodeClass, $isFirstOfMultiplePasses, $delimiter) {
+		$match = MDToken::findPairedTokens($tokens, $delimiters, $delimiters,
+			function($content) use ($nodeClass, $isFirstOfMultiplePasses, $delimiter) {
 			$firstType = $content[0] instanceof MDToken ? $content[0]->type : null;
-			$lastType = $content[sizeof($content) - 1] instanceof MDToken ? $content[sizeof($content) - 1]->type : null;
+			$lastType = $content[sizeof($content) - 1] instanceof MDToken ?
+				$content[sizeof($content) - 1]->type : null;
 			if ($firstType == MDTokenType::Whitespace) return false;
 			if ($lastType == MDTokenType::Whitespace) return false;
 			foreach ($content as $token) {
@@ -2470,7 +2476,8 @@ class MDSimplePairInlineReader extends MDReader {
 		if ($match === null) return false;
 		$state->checkExecutionTime();
 		if ($plaintext) {
-			$content = implode('', array_map(fn($token) => $token instanceof MDToken ? $token->original : $token->toPlaintext($state), $match->contentTokens));
+			$content = implode('', array_map(fn($token) => $token instanceof MDToken ?
+				$token->original : $token->toPlaintext($state), $match->contentTokens));
 		} else {
 			$content = $state->tokensToNodes($match->contentTokens);
 		}
@@ -2683,19 +2690,23 @@ class MDLinkReader extends MDReader {
 	}
 
 	public function substituteTokens(MDState $state, int $pass, array &$tokens): bool {
-		if ($match = MDToken::findFirstTokens($tokens, [ MDTokenType::Label, MDTokenType::META_OptionalWhitespace, MDTokenType::URL ])) {
+		if ($match = MDToken::findFirstTokens($tokens, [ MDTokenType::Label,
+				MDTokenType::META_OptionalWhitespace, MDTokenType::URL ])) {
 			$text = $match->tokens[0]->content;
 			$url = $match->tokens[sizeof($match->tokens) - 1]->content;
 			$title = $match->tokens[sizeof($match->tokens) - 1]->extra;
-			array_splice($tokens, $match->index, sizeof($match->tokens), [new MDLinkNode($url, $state->inlineMarkdownToNode($text), $title)]);
+			array_splice($tokens, $match->index, sizeof($match->tokens),
+				[new MDLinkNode($url, $state->inlineMarkdownToNode($text), $title)]);
 			return true;
 		}
-		if ($match = MDToken::findFirstTokens($tokens, [ MDTokenType::Label, MDTokenType::META_OptionalWhitespace, MDTokenType::Email ])) {
+		if ($match = MDToken::findFirstTokens($tokens, [ MDTokenType::Label,
+				MDTokenType::META_OptionalWhitespace, MDTokenType::Email ])) {
 			$text = $match->tokens[0]->content;
 			$email = $match->tokens[sizeof($match->tokens) - 1]->content;
 			$url = "mailto:{$email}";
 			$title = $match->tokens[sizeof($match->tokens) - 1]->extra;
-			array_splice($tokens, $match->index, sizeof($match->tokens), [new MDLinkNode($url, $state->inlineMarkdownToNodes($text), $title)]);
+			array_splice($tokens, $match->index, sizeof($match->tokens),
+				[new MDLinkNode($url, $state->inlineMarkdownToNodes($text), $title)]);
 			return true;
 		}
 		if ($match = MDToken::findFirstTokens($tokens, [ MDTokenType::SimpleEmail ])) {
@@ -2745,10 +2756,12 @@ class MDReferencedLinkReader extends MDLinkReader {
 	}
 
 	public function substituteTokens(MDState $state, int $pass, array &$tokens): bool {
-		if ($match = MDToken::findFirstTokens($tokens, [ MDTokenType::Label, MDTokenType::META_OptionalWhitespace, MDTokenType::Label ])) {
+		if ($match = MDToken::findFirstTokens($tokens, [ MDTokenType::Label,
+				MDTokenType::META_OptionalWhitespace, MDTokenType::Label ])) {
 			$text = $match->tokens[0]->content;
 			$ref = $match->tokens[sizeof($match->tokens) - 1]->content;
-			array_splice($tokens, $match->index, sizeof($match->tokens), [new MDReferencedLinkNode($ref, $state->inlineMarkdownToNodes($text))]);
+			array_splice($tokens, $match->index, sizeof($match->tokens),
+				[new MDReferencedLinkNode($ref, $state->inlineMarkdownToNodes($text))]);
 			return true;
 		}
 		return false;
@@ -2768,7 +2781,8 @@ class MDImageReader extends MDLinkReader {
 	}
 
 	public function substituteTokens(MDState $state, int $pass, array &$tokens): bool {
-		if ($match = MDToken::findFirstTokens($tokens, [ MDTokenType::Bang, MDTokenType::Label, MDTokenType::META_OptionalWhitespace, MDTokenType::URL ])) {
+		if ($match = MDToken::findFirstTokens($tokens, [ MDTokenType::Bang,
+				MDTokenType::Label, MDTokenType::META_OptionalWhitespace, MDTokenType::URL ])) {
 			$alt = $match->tokens[1]->content;
 			$url = $match->tokens[sizeof($match->tokens) - 1]->content;
 			$title = $match->tokens[sizeof($match->tokens) - 1]->extra;
@@ -2804,10 +2818,12 @@ class MDReferencedImageReader extends MDReferencedLinkReader {
 	}
 
 	public function substituteTokens(MDState $state, int $pass, array &$tokens): bool {
-		if ($match = MDToken::findFirstTokens($tokens, [ MDTokenType::Bang, MDTokenType::Label, MDTokenType::META_OptionalWhitespace, MDTokenType::Label ])) {
+		if ($match = MDToken::findFirstTokens($tokens, [ MDTokenType::Bang,
+				MDTokenType::Label, MDTokenType::META_OptionalWhitespace, MDTokenType::Label ])) {
 			$alt = $match->tokens[1]->content;
 			$ref = $match->tokens[sizeof($match->tokens) - 1]->content;
-			array_splice($tokens, $match->index, sizeof($match->tokens), [new MDReferencedImageNode($ref, $alt)]);
+			array_splice($tokens, $match->index, sizeof($match->tokens),
+				[new MDReferencedImageNode($ref, $alt)]);
 			return true;
 		}
 		return false;
@@ -2933,7 +2949,8 @@ class MDNode {
 				if (!($elem instanceof MDNode)) {
 					$thisClassName = MDUtils::typename($this);
 					$elemClassName = MDUtils::typename($elem);
-					throw new Error("{$thisClassName} expects children of type MDNode[] or MDNode, got array with {$elemClassName} element");
+					throw new Error("{$thisClassName} expects children of type " .
+						"MDNode[] or MDNode, got array with {$elemClassName} element");
 				}
 			}
 			$this->children = $children;
@@ -2942,7 +2959,8 @@ class MDNode {
 		} else {
 			$thisClassName = MDUtils::typename($this);
 			$elemClassName = MDUtils::typename($children);
-			throw new Error("{$thisClassName} expects children of type MDNode[] or MDNode, got {$elemClassName}");
+			throw new Error("{$thisClassName} expects children of type MDNode[] " .
+				"or MDNode, got {$elemClassName}");
 		}
 	}
 
@@ -3418,11 +3436,13 @@ class MDFootnoteListNode extends MDBlockNode {
 			if (!$content) continue;
 			$footnoteId = $this->footnoteId($state, $symbol);
 			$contentHTML = MDNode::arrayToHTML($content, $state);
-			$html .= "<li value=\"{$footnoteId}\" id=\"{$state->root()->elementIdPrefix}footnote_{$footnoteId}\">{$contentHTML}";
+			$html .= "<li value=\"{$footnoteId}\" id=\"" .
+				"{$state->root()->elementIdPrefix}footnote_{$footnoteId}\">{$contentHTML}";
 			$uniques = $footnoteUniques[$symbol] ?? null;
 			if ($uniques) {
 				foreach ($uniques as $unique) {
-					$html .= " <a href=\"#{$state->root()->elementIdPrefix}footnoteref_{$unique}\" class=\"footnote-backref\">↩︎</a>";
+					$html .= " <a href=\"#{$state->root()->elementIdPrefix}footnoteref_{$unique}\"" .
+						" class=\"footnote-backref\">↩︎</a>";
 				}
 			}
 			$html .= "</li>\n";
@@ -3597,8 +3617,10 @@ class MDFootnoteNode extends MDInlineNode {
 
 	public function toHTML(MDState $state): string {
 		if ($this->footnoteId !== null) {
-			return "<sup class=\"footnote\" id=\"{$state->root()->elementIdPrefix}footnoteref_{$this->occurrenceId}\"" . $this->htmlAttributes() . ">" .
-				"<a href=\"#{$state->root()->elementIdPrefix}footnote_{$this->footnoteId}\">" . htmlentities($this->displaySymbol ?? $this->symbol) . "</a></sup>";
+			return "<sup class=\"footnote\" id=\"{$state->root()->elementIdPrefix}footnoteref_{$this->occurrenceId}\"" .
+				$this->htmlAttributes() . ">" .
+				"<a href=\"#{$state->root()->elementIdPrefix}footnote_{$this->footnoteId}\">" .
+				htmlentities($this->displaySymbol ?? $this->symbol) . "</a></sup>";
 		}
 		return "<!--FNREF:{{$this->symbol}}-->";
 	}

markdownjs.html → playground.html

@@ -60,6 +60,17 @@
 				padding: 4px 20px;
 				font-family: sans-serif;
 			}
+			.codeswitch-cont {
+				position: absolute;
+				top: 0;
+				right: 0;
+				height: 31px;
+				z-index: 2;
+				background-color: var(--toolbar-background);
+				color: var(--toolbar-text);
+				padding: 3px 10px;
+				box-sizing: border-box;
+			}
 			#readercontainer {
 				overflow-y: scroll;
 			}
@@ -298,14 +309,74 @@
 				parser = new Markdown(activeReaders);
 				document.getElementById('markdowninput').addEventListener('input', onMarkdownChange);
 				populateReaderCheckboxes();
+				document.getElementById('sendbutton').addEventListener('click', () => {
+					handleSendClicked();
+				});
+				document.getElementById('code-js').addEventListener('change', onMarkdownChange);
+				document.getElementById('code-php').addEventListener('change', onMarkdownChange);
 				setTimeout(onMarkdownChange, 0);
 			}
 			function onMarkdownChange() {
+				if (document.getElementById('code-php').checked) {
+					debouncedSendPreviewRequest();
+				} else if (document.getElementById('code-js').checked) {
+					updatePreviewLocally();
+				}
+			}
+			function updatePreviewLocally() {
 				const textarea = document.getElementById('markdowninput');
 				let markdown = textarea.value;
 				let html = parser.toHTML(markdown, 'foo-');
 				document.getElementById('preview').innerHTML = html;
 			}
+			var debounceTimer = null;
+			var needsUpdate = false;
+			function debouncedSendPreviewRequest() {
+				if (debounceTimer) {
+					needsUpdate = true;
+				} else {
+					debounceTimer = setInterval(() => {
+						if (needsUpdate) {
+							needsUpdate = false;
+							sendPreviewRequest();
+						} else {
+							clearTimeout(debounceTimer);
+							debounceTimer = null;
+						}
+					}, 500);
+					sendPreviewRequest();
+				}
+			}
+			function sendPreviewRequest() {
+				const markdown = document.getElementById('markdowninput').value;
+				const readers = activeReaders.map((r) => r.constructor.name);
+				const request = new XMLHttpRequest();
+				var formData = encodeForm({
+					'markdown': markdown,
+					'readers': readers,
+				});
+				request.open('POST', 'playgroundapi.php', true);
+				request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+				request.onreadystatechange = () => {
+					if (request.readyState == 4 && request.status == 200) {
+						document.getElementById('preview').innerHTML = request.responseText;
+					}
+				};
+				request.send(formData);
+			}
+			function encodeForm(values) {
+				var pairs = [];
+				for (const [key, value] of Object.entries(values)) {
+					if (value instanceof Array) {
+						for (const v of value) {
+							pairs.push(`${encodeURIComponent(key + '[]')}=${encodeURIComponent(v)}`);
+						}
+					} else {
+						pairs.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
+					}
+				}
+				return pairs.join('&');
+			}
 			function populateReaderCheckboxes() {
 				const container = document.getElementById('readercontainer');
 				var header = document.createElement('div');
@@ -356,7 +427,6 @@
 				return div;
 			}
 			function handleCheckChanged(readerClass, check) {
-				console.info(`${readerClass.name}: ${check.checked}`);
 				if (check.checked) {
 					activeReaders.push(new readerClass());
 				} else {
@@ -365,7 +435,9 @@
 				parser = new Markdown(activeReaders);
 				onMarkdownChange();
 			}
-
+			function handleSendClicked() {
+				sendPreviewRequest();
+			}
 			document.addEventListener('DOMContentLoaded', onDocumentLoad);
 		</script>
 	</head>
@@ -379,6 +451,13 @@
 					<div id="readercontainer"></div>
 				</details>
 			</div>
+			<div class="codeswitch-cont">
+				<input type="radio" id="code-js" name="code" value="js" checked>
+				<label for="code-js">Javascript</label>
+				<input type="radio" id="code-php" name="code" value="php">
+				<label for="code-php">PHP</label>
+			</div>
+			<div id="sendbuttoncont"><button id="sendbutton">Send</button></div>
 			<textarea id="markdowninput">## Block Formats {#top}
 
 A regular paragraph.

playgroundapi.php

@@ -0,0 +1,56 @@
+<?php
+if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+	http_response_code(405); // method not allowed
+	exit();
+}
+
+$readerNames = $_POST['readers'];
+$markdown = $_POST['markdown'];
+
+$permittedReaders = [
+	'MDUnderlinedHeadingReader' => true,
+	'MDHashHeadingReader' => true,
+	'MDSubtextReader' => true,
+	'MDBlockQuoteReader' => true,
+	'MDUnorderedListReader' => true,
+	'MDOrderedListReader' => true,
+	'MDFencedCodeBlockReader' => true,
+	'MDIndentedCodeBlockReader' => true,
+	'MDHorizontalRuleReader' => true,
+	'MDTableReader' => true,
+	'MDDefinitionListReader' => true,
+	'MDFootnoteReader' => true,
+	'MDAbbreviationReader' => true,
+	'MDParagraphReader' => true,
+
+	'MDEmphasisReader' => true,
+	'MDStrongReader' => true,
+	'MDStrikethroughReader' => true,
+	'MDUnderlineReader' => true,
+	'MDHighlightReader' => true,
+	'MDCodeSpanReader' => true,
+	'MDSubscriptReader' => true,
+	'MDSuperscriptReader' => true,
+	'MDLinkReader' => true,
+	'MDReferencedLinkReader' => true,
+	'MDImageReader' => true,
+	'MDReferencedImageReader' => true,
+	'MDLineBreakReader' => true,
+	'MDHTMLTagReader' => true,
+	'MDModifierReader' => true,
+];
+
+include 'php/markdown.php';
+$readers = [];
+foreach ($readerNames as $readerName) {
+	if ($permittedReaders[$readerName] ?? false) {
+		$ref = new ReflectionClass($readerName);
+		$reader = $ref->newInstanceArgs([]);
+		array_push($readers, $reader);
+	}
+}
+$parser = new Markdown($readers);
+$html = $parser->toHTML($markdown);
+header('Content-Type: text/html');
+print($html);
+?>