From 63ba9f4fb9a6a963d2669f0bb6e9e4b9090f48a7 Mon Sep 17 00:00:00 2001
From: Trevor Buckner <calculuschild@gmail.com>
Date: Sat, 10 Jul 2021 19:01:27 -0400
Subject: [PATCH] Change {{ span to Marked.js extension

---
 shared/naturalcrit/markdown.js | 84 ++++++++++++++++++++++------------
 1 file changed, 56 insertions(+), 28 deletions(-)

diff --git a/shared/naturalcrit/markdown.js b/shared/naturalcrit/markdown.js
index 317c8fdc0..3bc6c7693 100644
--- a/shared/naturalcrit/markdown.js
+++ b/shared/naturalcrit/markdown.js
@@ -19,12 +19,62 @@ renderer.paragraph = function(text){
 	let match;
 	if(text.startsWith('<div') || text.startsWith('</div'))
 		return `${text}`;
-	else if(match = text.match(/(^|^.*?\n)<span class="inline([^>]*><\/span>)$/))
-		return `<p>${match[1]}</p><span class="inline-block"${match[2]}`;
+	else if(match = text.match(/(^|^.*?\n)<span class="inline(.*?<\/span>)$/)) {
+		return `${match[1].trim() ? `<p>${match[1]}</p>` : ''}<span class="inline-block${match[2]}`; }
 	else
 		return `<p>${text}</p>\n`;
 };
 
+const mustacheSpans = {
+  name: 'mustacheSpans',
+  level: 'inline',                                    // Is this a block-level or inline-level tokenizer?
+  start(src) { return src.match(/{{[^{]/)?.index; },  // Hint to Marked.js to stop and check for a match
+  tokenizer(src, tokens) {
+    const completeSpan = /^{{[^\n]*}}/;               // Regex for the complete token
+		const inlineRegex = /{{(?:="[\w,\-. ]*"|[^"'{}}\s])*\s*|}}/g;
+    const match = completeSpan.exec(src);
+    if (match) {
+			//Find closing delimiter
+			let blockCount = 0;
+			let tags = '';
+			let endIndex = 0;
+			let delim;
+			while (delim = inlineRegex.exec(match[0])) {
+				if(delim[0].startsWith('{{')) {
+					tags = tags || ' ' + processStyleTags(delim[0].substring(2));
+					blockCount++;
+				}
+				else if(delim[0] == '}}' && blockCount !== 0) {
+					blockCount--;
+					if(blockCount == 0) {
+						endIndex = inlineRegex.lastIndex;
+						break;
+					}
+				}
+			}
+
+			if(endIndex) {
+				const raw = src.slice(0, endIndex);
+				const text = raw.slice((raw.indexOf(' ')+1) || -2, -2)
+
+				return {                                        // Token to generate
+					type: 'mustacheSpans',                        // Should match "name" above
+					raw: raw,                                     // Text to consume from the source
+					text: text,                                   // Additional custom properties
+					tags: tags,
+					tokens: this.inlineTokens(text)    // inlineTokens to process **bold**, *italics*, etc.
+				}
+			}
+    }
+  },
+  renderer(token) {
+		console.log(token);
+    return `<span class="inline${token.tags}>${this.parseInline(token.tokens)}</span>`; // parseInline to turn child tokens into HTML
+  }
+};
+
+Markdown.use({extensions : [mustacheSpans]});
+
 // Mustache-style Divs {{class \n content ... \n}}
 let blockCount = 0;
 const blockRegex = /^ *{{(?:="[\w,\-. ]*"|[^"'\s])*$|^ *}}$/gm;
@@ -35,32 +85,10 @@ renderer.text = function(text){
 	const newText = text.replaceAll('&quot;', '"');
 	let matches;
 
-	if(matches = newText.match(inlineFullRegex)) {
-
-		//SPAN - INLINE
-		matches = newText.match(inlineRegex);
-		let matchIndex = 0;
-		const res =  _.reduce(newText.split(inlineRegex), (r, splitText)=>{
-
-			if(splitText) r.push(Markdown.parseInline(splitText, { renderer: renderer }));
-
-			const block = matches[matchIndex] ? matches[matchIndex].trimLeft() : '';
-			if(block && block.startsWith('{{')) {
-				const values = processStyleTags(block.substring(2));
-				r.push(`<span class="inline ${values}>`);
-				blockCount++;
-			} else if(block == '}}' && blockCount !== 0){
-				r.push('</span>');
-				blockCount--;
-			}
-
-			matchIndex++;
-
-			return r;
-		}, []).join('');
-		return `${res}`;
-	} else if(matches = newText.match(blockRegex)) {
+	if(matches = newText.match(blockRegex)) {
 		//DIV - BLOCK-LEVEL
+		console.log({match: matches});
+		console.log({newText: newText});
  		let matchIndex = 0;
  		const res =  _.reduce(newText.split(blockRegex), (r, splitText)=>{
  			if(splitText) r.push(Markdown.parseInline(splitText, { renderer: renderer }));
@@ -177,7 +205,7 @@ const processStyleTags = (string)=>{
 	const id      = _.remove(tags, (tag)=>tag.startsWith('#')).map((tag)=>tag.slice(1))[0];
 	const classes = _.remove(tags, (tag)=>!tag.includes('"'));
 	const styles  = tags.map((tag)=>tag.replace(/="(.*)"/g, ':$1;'));
-	return `${classes.join(' ')}" ${id ? `id="${id}"` : ''} ${styles ? `style="${styles.join(' ')}"` : ''}`;
+	return `${classes.join(' ')}" ${id ? `id="${id}"` : ''} ${styles.length ? `style="${styles.join(' ')}"` : ''}`;
 };
 
 module.exports = {