Legacy renderer (#1229)

* Include two versions of Marked.js

* Include two versions of Marked.js

* Working two different render pipelines

Adds stylesheet "styleLegacy.less"
Adds markdownHandler "markdownLegacy.js"
The BrewRenderer will switch between these and the new pipeline dependent on the "version" prop passed in.

* Mustache-style div blocks

* Legacy snippets & columnbreak

* Codemirror styling for Div Blocks

* Lint

* Codemirror highlights for inline Divs as well

These will turn red `{{class Content}}`

Multi-line divs will turn purple

```
{{class,class2
content
}}
```

No real need for these to be different colors. Just for testing.

* More lint

* Update dependencies.

* Adding Button to switch render pipelines

* Update Marked.js

* Popup alert to refresh page when renderer changed

* Don't compress files in Development (very slow)

* Block DIV or inline Span depending on {{ placement

* \column emits a Div instead of Span

* Allow share page to use new renderer

* {{ divs no longer need empty lines. Spans work in lists.

* Typo

* Typo

* Enforce \page must be at start of line. Code cleanup.

* Inject newlines after/before {{/}} to avoid needing blank lines

* Fixes issues with tables.

* Remove console.log

* Fix spacing issue for Spans

* Move things from Brewrenderer to Markdown

Try to keep all custom text fiddling in one spot.

* Rename variables

* Update Font-Awesome to v5.15. Fix style issues on popups.

* Update {{ Divs/Spans, Fix nested hilighting

* Fixed Spans/divs with no tags or just commas

* Use blacklist for {{ to allow more characters

* Update package-lock.json

* Update all icons to Font-awesome 5

* V3 hidden behind config variable

Add "globalThis.enable_v3 = true" in the console to enable.

* lint

* Give user styles higher priority to still allow overrides

* Apply style priority to *all* user styles

* Change .legacy .v3 to .phb, .phb3

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -117,7 +117,7 @@ const BrewRenderer = createClass({
 		if(this.state.renderer == 'legacy')
 			return <div className='phb' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(pageText) }} key={index} />;
 		else
-			return <div className='phb' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} key={index} />;
+			return <div className='phb3' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} key={index} />;
 	},
 
 	renderPages : function(){

client/homebrew/brewRenderer/brewRenderer.less

@@ -1,6 +1,6 @@
 @import (multiple, less) 'shared/naturalcrit/styles/reset.less';
-.V3 {@import (multiple, less) './client/homebrew/phbStyle/phb.style.less';}
-.legacy {@import (multiple, less) './client/homebrew/phbStyle/phb.styleLegacy.less';}
+@import (multiple, less) './client/homebrew/phbStyle/phb.styleLegacy.less';
+@import (multiple, less) './client/homebrew/phbStyle/phb.style.less';
 
 .brewRenderer{
 	will-change : transform;
@@ -13,6 +13,12 @@
 			margin-left   : auto;
 			box-shadow    : 1px 4px 14px #000;
 		}
+		&>.phb3{
+			margin-right  : auto;
+			margin-bottom : 30px;
+			margin-left   : auto;
+			box-shadow    : 1px 4px 14px #000;
+		}
 	}
 }
 .pane{

client/homebrew/phbStyle/phb.style.less

@@ -39,7 +39,7 @@ body {
 	-webkit-column-gap   : 1cm;
 	-moz-column-gap      : 1cm;
 }
-.phb{
+.phb3{
 	.useColumns();
 	counter-increment : phb-page-numbers;
 	position          : relative;
@@ -362,7 +362,7 @@ body {
 //*****************************
 // *         SPELL LIST
 // *****************************/
-.phb .spellList{
+.phb3 .spellList{
 	.useSansSerif();
 	column-count        : 4;
 	column-span         : all;
@@ -388,7 +388,7 @@ body {
 //*****************************
 // *         WIDE
 // *****************************/
-.phb .wide{
+.phb3 .wide{
 	column-span         : all;
 	-webkit-column-span : all;
 	-moz-column-span    : all;
@@ -396,7 +396,7 @@ body {
 //*****************************
 // *       CLASS TABLE
 // *****************************/
-.phb .classTable{
+.phb3 .classTable{
 	margin-top          : 25px;
 	margin-bottom       : 40px;
 	border-collapse     : separate;
@@ -415,7 +415,7 @@ body {
 //************************************
 // *       DESCRIPTIVE TEXT BOX
 // ************************************/
-.phb .descriptive{
+.phb3 .descriptive{
 	display             : block-inline;
 	margin-bottom       : 1em;
 	background-color    : #faf7ea;
@@ -443,13 +443,13 @@ body {
 		letter-spacing : -0.02em;
 	}
 }
-.phb pre+.descriptive{
+.phb3 pre+.descriptive{
 	margin-top : 8px;
 }
 //*****************************
 // *      TABLE OF CONTENTS
 // *****************************/
-.phb .toc{
+.phb3 .toc{
 	-webkit-column-break-inside : avoid;
 	page-break-inside           : avoid;
 	break-inside                : avoid;

shared/naturalcrit/markdown.js

@@ -11,6 +11,13 @@ renderer.html = function (html) {
 		html = html.substring(0, html.lastIndexOf('</div>'));
 		return `${openTag} ${Markdown(html)} </div>`;
 	}
+	// if(_.startsWith(_.trim(html), '<style') && _.endsWith(_.trim(html), '</style>')){
+	// 	const openTag = html.substring(0, html.indexOf('>')+1);
+	// 	html = html.substring(html.indexOf('>')+1);
+	// 	html = html.substring(0, html.lastIndexOf('</style>'));
+	// 	html = html.replaceAll(/\s(\.[^{]*)/gm, '.V3 $1');
+	// 	return `${openTag} ${html} </style>`;
+	// }
 	return html;
 };
 

shared/naturalcrit/markdownLegacy.js

@@ -10,6 +10,13 @@ renderer.html = function (html) {
 		html = html.substring(0, html.lastIndexOf('</div>'));
 		return `${openTag} ${Markdown(html)} </div>`;
 	}
+	// if(_.startsWith(_.trim(html), '<style') && _.endsWith(_.trim(html), '</style>')){
+	// 	const openTag = html.substring(0, html.indexOf('>')+1);
+	// 	html = html.substring(html.indexOf('>')+1);
+	// 	html = html.substring(0, html.lastIndexOf('</style>'));
+	// 	html = html.replaceAll(/\s(\.[^{]*)/gm, '.legacy $1');
+	// 	return `${openTag} ${html} </style>`;
+	// }
 	return html;
 };