Legacy renderer (#1184)

* 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

client/homebrew/editor/snippetbar/snippets/snippets.js

@@ -12,73 +12,58 @@ module.exports = [
 
 	{
 		groupName : 'Editor',
-		icon      : 'fa-pencil',
+		icon      : 'fas fa-pencil-alt',
 		snippets  : [
 			{
 				name : 'Column Break',
-				icon : 'fa-columns',
-				gen  : '```\n```\n\n'
+				icon : 'fas fa-columns',
+				gen  : '\n\\column\n'
 			},
 			{
 				name : 'New Page',
-				icon : 'fa-file-text',
-				gen  : '\\page\n\n'
+				icon : 'fas fa-file-alt',
+				gen  : '\n\\page\n'
 			},
 			{
 				name : 'Vertical Spacing',
-				icon : 'fa-arrows-v',
-				gen  : '<div style=\'margin-top:140px\'></div>\n\n'
+				icon : 'fas fa-times-circle',
+				gen  : ''
 			},
 			{
 				name : 'Wide Block',
-				icon : 'fa-arrows-h',
-				gen  : '<div class=\'wide\'>\nEverything in here will be extra wide. Tables, text, everything! Beware though, CSS columns can behave a bit weird sometimes.\n</div>\n'
+				icon : 'fas fa-times-circle',
+				gen  : ''
 			},
 			{
 				name : 'Image',
-				icon : 'fa-image',
-				gen  : [
-					'<img ',
-					'  src=\'https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg\' ',
-					'  style=\'width:325px\' />',
-					'Credit: Kyounghwan Kim'
-				].join('\n')
+				icon : 'fas fa-times-circle',
+				gen  : ''
 			},
 			{
 				name : 'Background Image',
-				icon : 'fa-tree',
-				gen  : [
-					'<img ',
-					'  src=\'http://i.imgur.com/hMna6G0.png\' ',
-					'  style=\'position:absolute; top:50px; right:30px; width:280px\' />'
-				].join('\n')
+				icon : 'fas fa-times-circle',
+				gen  : ''
 			},
-
 			{
 				name : 'Page Number',
-				icon : 'fa-bookmark',
-				gen  : '<div class=\'pageNumber\'>1</div>\n<div class=\'footnote\'>PART 1 | FANCINESS</div>\n\n'
+				icon : 'fas fa-bookmark',
+				gen  : '{{pageNumber\n1\n}}\n{{footnote\nPART 1 | FANCINESS\n}}\n\n'
 			},
-
 			{
 				name : 'Auto-incrementing Page Number',
-				icon : 'fa-sort-numeric-asc',
-				gen  : '<div class=\'pageNumber auto\'></div>\n'
+				icon : 'fas fa-sort-numeric-down',
+				gen  : '{{\npageNumber,auto\n}}\n\n'
 			},
-
 			{
 				name : 'Link to page',
-				icon : 'fa-link',
+				icon : 'fas fa-link',
 				gen  : '[Click here](#p3) to go to page 3\n'
 			},
-
 			{
 				name : 'Table of Contents',
-				icon : 'fa-book',
+				icon : 'fas fa-book',
 				gen  : TableOfContentsGen
 			},
-
-
 		]
 	},
 
@@ -87,26 +72,26 @@ module.exports = [
 
 	{
 		groupName : 'PHB',
-		icon      : 'fa-book',
+		icon      : 'fas fa-book',
 		snippets  : [
 			{
 				name : 'Spell',
-				icon : 'fa-magic',
+				icon : 'fas fa-magic',
 				gen  : MagicGen.spell,
 			},
 			{
 				name : 'Spell List',
-				icon : 'fa-list',
+				icon : 'fas fa-scroll',
 				gen  : MagicGen.spellList,
 			},
 			{
 				name : 'Class Feature',
-				icon : 'fa-trophy',
+				icon : 'fas fa-mask',
 				gen  : ClassFeatureGen,
 			},
 			{
 				name : 'Note',
-				icon : 'fa-sticky-note',
+				icon : 'fas fa-sticky-note',
 				gen  : function(){
 					return [
 						'> ##### Time to Drop Knowledge',
@@ -118,7 +103,7 @@ module.exports = [
 			},
 			{
 				name : 'Descriptive Text Box',
-				icon : 'fa-sticky-note-o',
+				icon : 'fas fa-comment-alt',
 				gen  : function(){
 					return [
 						'<div class=\'descriptive\'>',
@@ -132,17 +117,17 @@ module.exports = [
 			},
 			{
 				name : 'Monster Stat Block',
-				icon : 'fa-bug',
+				icon : 'fas fa-spider',
 				gen  : MonsterBlockGen.half,
 			},
 			{
 				name : 'Wide Monster Stat Block',
-				icon : 'fa-paw',
+				icon : 'fas fa-dragon',
 				gen  : MonsterBlockGen.full,
 			},
 			{
 				name : 'Cover Page',
-				icon : 'fa-file-word-o',
+				icon : 'fas fa-file-word',
 				gen  : CoverPageGen,
 			},
 		]
@@ -154,21 +139,21 @@ module.exports = [
 
 	{
 		groupName : 'Tables',
-		icon      : 'fa-table',
+		icon      : 'fas fa-table',
 		snippets  : [
 			{
 				name : 'Class Table',
-				icon : 'fa-table',
+				icon : 'fas fa-table',
 				gen  : ClassTableGen.full,
 			},
 			{
 				name : 'Half Class Table',
-				icon : 'fa-list-alt',
+				icon : 'fas fa-list-alt',
 				gen  : ClassTableGen.half,
 			},
 			{
 				name : 'Table',
-				icon : 'fa-th-list',
+				icon : 'fas fa-th-list',
 				gen  : function(){
 					return [
 						'##### Cookie Tastiness',
@@ -184,7 +169,7 @@ module.exports = [
 			},
 			{
 				name : 'Wide Table',
-				icon : 'fa-list',
+				icon : 'fas fa-list',
 				gen  : function(){
 					return [
 						'<div class=\'wide\'>',
@@ -202,7 +187,7 @@ module.exports = [
 			},
 			{
 				name : 'Split Table',
-				icon : 'fa-th-large',
+				icon : 'fas fa-th-large',
 				gen  : function(){
 					return [
 						'<div style=\'column-count:2\'>',
@@ -238,11 +223,11 @@ module.exports = [
 
 	{
 		groupName : 'Print',
-		icon      : 'fa-print',
+		icon      : 'fas fa-print',
 		snippets  : [
 			{
 				name : 'A4 PageSize',
-				icon : 'fa-file-o',
+				icon : 'far fa-file',
 				gen  : ['<style>',
 					'  .phb{',
 					'    width : 210mm;',
@@ -253,7 +238,7 @@ module.exports = [
 			},
 			{
 				name : 'Ink Friendly',
-				icon : 'fa-tint',
+				icon : 'fas fa-tint',
 				gen  : ['<style>',
 					'  .phb{ background : white;}',
 					'  .phb img{ display : none;}',