Merge pull request #938 from naturalcrit/update-Marked-renderer

Update marked renderer

.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
 	},
 	env : {
 		browser : true,
+		node: true
 	},
 	plugins : ['react'],
 	rules   : {
@@ -66,7 +67,7 @@ module.exports = {
 			multiLine  : { beforeColon: true, afterColon: true, align: 'colon' },
 			singleLine : { beforeColon: false, afterColon: true }
 		}],
-		'linebreak-style'               : ['warn', 'unix'],
+		'linebreak-style'               : 'off',
 		'no-trailing-spaces'            : 'warn',
 		'no-whitespace-before-property' : 'warn',
 		'object-curly-spacing'          : ['warn', 'always'],
@@ -74,4 +75,4 @@ module.exports = {
 		'space-in-parens'               : ['warn', 'never'],
 		'template-curly-spacing'        : ['warn', 'never'],
 	}
-};
+};

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -4,7 +4,7 @@ const createClass = require('create-react-class');
 const _     = require('lodash');
 const cx    = require('classnames');	//Unused variable
 
-const DISMISS_KEY = 'dismiss_notification7-24-19';
+const DISMISS_KEY = 'dismiss_notification5-8-2020';
 
 const NotificationPopup = createClass({
 	getInitialState : function() {
@@ -21,19 +21,24 @@ const NotificationPopup = createClass({
 	},
 	notifications : {
 		psa : function(){
-			return <li key='psa'>
+			return <li key='markdown'>
-				<em>Known bug: Grey Shadow Boxes </em> <br />
+				<em>Markdown library update </em> <br />
-				The shadows around certain brew elements such as notes and statblocks might appear as a solid grey box when generating a PDF.  &nbsp;
+				We have updated the library that converts your brews from markdown to
-				<a target='_blank' href='https://old.reddit.com/r/homebrewery/comments/ch3v0d/psa_grey_boxesshadows_around_notes_stat_blocks_etc/'>
+				HTML for security reasons. We have made every effort to make sure your
-					See this Reddit post
+				homebrews appear just as they did before, but there's always a chance we
-				</a> for updates and possible workarounds.
+				missed something. If your homebrew has started rendering incorrectly
+				since your last visit,&nbsp;
+				<a target='_blank' href={`https://www.reddit.com/r/homebrewery/submit?selftext=true&title=${encodeURIComponent('[Issue] Describe Your Issue Here')}`}>
+					please let us know
+				</a>
+				&nbsp;and we will try to fix your issue as soon as possible.
 			</li>;
 		},
 		faq : function(){
 			return <li key='faq'>
 				<em>Protect your work! </em> <br />
 				At the moment we do not save a history of your projects, so please make frequent backups of your brews!  &nbsp;
-				<a target='_blank' href='https://www.reddit.com/r/homebrewery/comments/adh6lh/faqs_psas_announcements/'>
+				<a target='_blank' href='https://www.reddit.com/r/homebrewery/comments/fwhl3n/faq_psas_announcements/'>
 					See the FAQ
 				</a> to learn how to avoid losing your work!
 			</li>;

client/homebrew/phbStyle/phb.style.less

@@ -177,6 +177,12 @@ body {
 		}
 	}
 	//*****************************
+	// *       SPLIT TABLE
+	// *****************************/
+	div table+pre {
+		display: none;
+	}
+	//*****************************
 	// *            NOTE
 	// *****************************/
 	blockquote{
@@ -330,9 +336,8 @@ body {
 	//Column Break
 	pre, code{
 		visibility                 : hidden;
-		-webkit-column-break-after : always;
+		break-after                : column;
-		break-after                : always;
+		min-height                 : 1px;
-		-moz-column-break-after    : always;
 	}
 	//Avoid breaking up
 	p,blockquote,table{

package.json

@@ -46,7 +46,7 @@
     "express": "^4.17.1",
     "jwt-simple": "^0.5.6",
     "lodash": "^4.17.15",
-    "marked": "^0.3.19",
+    "marked": "^1.0.0",
     "moment": "^2.25.3",
     "mongoose": "^5.9.12",
     "nconf": "^0.10.0",

shared/naturalcrit/markdown.js

@@ -1,18 +1,119 @@
 const _ = require('lodash');
 const Markdown = require('marked');
-const renderer = new Markdown.Renderer();
 
-//Processes the markdown within an HTML block if it's just a class-wrapper
+// Copied directly from Marked helpers.js source with permission
-renderer.html = function (html) {
+const splitCells = function(tableRow, count) {
-	if(_.startsWith(_.trim(html), '<div') && _.endsWith(_.trim(html), '</div>')){
+	// ensure that every cell-delimiting pipe has a space
-		const openTag = html.substring(0, html.indexOf('>')+1);
+	// before it to distinguish it from an escaped pipe
-		html = html.substring(html.indexOf('>')+1);
+	const row = tableRow.replace(/\|/g, (match, offset, str)=>{
-		html = html.substring(0, html.lastIndexOf('</div>'));
+			let escaped = false,
-		return `${openTag} ${Markdown(html)} </div>`;
+				curr = offset;
+			while (--curr >= 0 && str[curr] === '\\') escaped = !escaped;
+			if(escaped) {
+				// odd number of slashes means | is escaped
+				// so we leave it alone
+				return '|';
+			} else {
+				// add space before unescaped |
+				return ' |';
+			}
+		}),
+		cells = row.split(/ \|/);
+	let i = 0;
+
+	if(cells.length > count) {
+		cells.splice(count);
+	} else {
+		while (cells.length < count) cells.push('');
 	}
-	return html;
+
+	for (; i < cells.length; i++) {
+		// leading or trailing whitespace is ignored per the gfm spec
+		cells[i] = cells[i].trim().replace(/\\\|/g, '|');
+	}
+	return cells;
 };
 
+const renderer = {
+	// Adjust the way html is handled
+	html(html) {
+		html = _.trim(html);
+
+		// Process the markdown within Divs
+		if(_.startsWith(html, '<div') && html.includes('>')) {
+			const openTag = html.substring(0, html.indexOf('>')+1);
+			html = html.substring(html.indexOf('>')+1);
+			return `${openTag} ${Markdown(html)}`;
+		}
+
+		// Don't require a blank line after HTML to parse Markdown
+		if(html.includes('\n')) {
+			if(_.startsWith(html, '<style') || _.startsWith(html, '<pre') || _.startsWith(html, '<img')) {
+				if(html.includes('>')) {
+					const openTag = html.substring(0, html.lastIndexOf('>')+1);
+					html = html.substring(html.lastIndexOf('>')+1);
+					return `${openTag} ${Markdown(html)}`;
+				}
+				return html; // Style, Pre, and Img tags should not parse Markdown
+			}
+			const openTag = html.substring(0, html.indexOf('\n')+1);
+			html = html.substring(html.indexOf('\n')+1);
+			return `${openTag} ${Markdown(html)}`;
+		}
+
+		return html;
+	}
+};
+
+const tokenizer = {
+	//Adjust tables to work even if columns are uneven
+	table(src) {
+		const cap = this.rules.block.table.exec(src);
+		if(cap) {
+			const item = {
+				type   : 'table',
+				header : splitCells(cap[1].replace(/^ *| *\| *$/g, '')),
+				align  : cap[2].replace(/^ *|\| *$/g, '').split(/ *\| */),
+				cells  : cap[3] ? cap[3].replace(/\n$/, '').split('\n') : []
+			};
+
+			item.raw = cap[0];
+
+			let l = item.align.length;
+			let i;
+			for (i = 0; i < l; i++) {
+				if(/^ *-+: *$/.test(item.align[i])) {
+					item.align[i] = 'right';
+				} else if(/^ *:-+: *$/.test(item.align[i])) {
+					item.align[i] = 'center';
+				} else if(/^ *:-+ *$/.test(item.align[i])) {
+					item.align[i] = 'left';
+				} else {
+					item.align[i] = null;
+				}
+			}
+
+			l = item.cells.length;
+			for (i = 0; i < l; i++) {
+				item.cells[i] = splitCells(
+					item.cells[i].replace(/^ *\| *| *\| *$/g, ''),
+					item.header.length);
+			}
+
+			return item;
+		}
+	}
+};
+
+/*renderer.code = function (code, infostring, escaped) {
+	if(code == ''){
+		return '<pre><code>\n</code></pre>';
+	}
+	return code;
+}*/
+
+Markdown.use({ renderer, tokenizer });
+
 const sanatizeScriptTags = (content)=>{
 	return content
 		.replace(/<script/ig, '&lt;script')
@@ -30,9 +131,7 @@ module.exports = {
 	marked : Markdown,
 	render : (rawBrewText)=>{
 		return Markdown(
-			sanatizeScriptTags(rawBrewText),
+			sanatizeScriptTags(rawBrewText));
-			{ renderer: renderer }
-		);
 	},
 
 	validate : (rawBrewText)=>{
@@ -87,4 +186,3 @@ module.exports = {
 		return errors;
 	},
 };
-