Merge pull request #1449 from naturalcrit/DefinitionListsToMarkedExtension

Definition lists to marked extension

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

@@ -82,11 +82,11 @@ module.exports = {
 		return [
 			`#### ${_.sample(spellNames)}`,
 			`*${_.sample(level)}-level ${_.sample(spellSchools)}*`,
-			'___',
+			'',
-			'- **Casting Time:** 1 action',
+			'**Casting Time:** :: 1 action',
-			`- **Range:** ${_.sample(['Self', 'Touch', '30 feet', '60 feet'])}`,
+			`**Range:**        :: ${_.sample(['Self', 'Touch', '30 feet', '60 feet'])}`,
-			`- **Components:** ${components}`,
+			`**Components:**   :: ${components}`,
-			`- **Duration:** ${_.sample(['Until dispelled', '1 round', 'Instantaneous', 'Concentration, up to 10 minutes', '1 hour'])}`,
+			`**Duration:**     :: ${_.sample(['Until dispelled', '1 round', 'Instantaneous', 'Concentration, up to 10 minutes', '1 hour'])}`,
 			'',
 			'A flame, equivalent in brightness to a torch, springs from an object that you touch. ',
 			'The effect look like a regular flame, but it creates no heat and doesn\'t use oxygen. ',

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

@@ -146,18 +146,18 @@ module.exports = {
 			## ${getMonsterName()}
 			*${getType()}, ${getAlignment()}*
 			___
-			: **Armor Class** : ${_.random(10, 20)} (chain mail, shield)
+			**Armor Class** :: ${_.random(10, 20)} (chain mail, shield)
-			: **Hit Points**  : ${_.random(1, 150)}(1d4 + 5)
+			**Hit Points**  :: ${_.random(1, 150)}(1d4 + 5)
-			: **Speed**       : ${_.random(0, 50)}ft.
+			**Speed**       :: ${_.random(0, 50)}ft.
 			___
 			|  STR  |  DEX  |  CON  |  INT  |  WIS  |  CHA  |
 			|:-----:|:-----:|:-----:|:-----:|:-----:|:-----:|
 			${getStats()}
 			___
-			: **Condition Immunities** : ${genList(['groggy', 'swagged', 'weak-kneed', 'buzzed', 'groovy', 'melancholy', 'drunk'], 3)}
+			**Condition Immunities** :: ${genList(['groggy', 'swagged', 'weak-kneed', 'buzzed', 'groovy', 'melancholy', 'drunk'], 3)}
-			: **Senses**               : darkvision 60 ft., passive Perception ${_.random(3, 20)}
+			**Senses**               :: darkvision 60 ft., passive Perception ${_.random(3, 20)}
-			: **Languages**            : ${genList(['Common', 'Pottymouth', 'Gibberish', 'Latin', 'Jive'], 2)}
+			**Languages**            :: ${genList(['Common', 'Pottymouth', 'Gibberish', 'Latin', 'Jive'], 2)}
-			: **Challenge**            : ${_.random(0, 15)} (${_.random(10, 10000)} XP)
+			**Challenge**            :: ${_.random(0, 15)} (${_.random(10, 10000)} XP)
 			___
 			:
 			${_.times(_.random(genLines, genLines + 2), function(){return genAbilities();}).join('\n\t\t\t\n\t\t\t')}

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

@@ -146,26 +146,28 @@ module.exports = [
 				name : 'Note',
 				icon : 'fas fa-sticky-note',
 				gen  : function(){
-					return [
+					return dedent`
-						'> ##### Time to Drop Knowledge',
+						{{note
-						'> Use notes to point out some interesting information. ',
+						##### Time to Drop Knowledge',
-						'> ',
+						Use notes to point out some interesting information.
-						'> **Tables and lists** both work within a note.'
+
-					].join('\n');
+						**Tables and lists** both work within a note.
+						}}
+						\n`;
 				},
 			},
 			{
 				name : 'Descriptive Text Box',
 				icon : 'fas fa-comment-alt',
 				gen  : function(){
-					return [
+					return dedent`
-						'<div class=\'descriptive\'>',
+						{{descriptive
-						'##### Time to Drop Knowledge',
+						##### Time to Drop Knowledge
-						'Use notes to point out some interesting information. ',
+						Use descriptive boxes to highlight text that should be read aloud.
-						'',
+						
-						'**Tables and lists** both work within a note.',
+						**Tables and lists** both work within a descriptive box.
-						'</div>'
+						}}
-					].join('\n');
+						\n`;
 				},
 			},
 			{

shared/naturalcrit/markdown.js

@@ -74,7 +74,7 @@ const mustacheSpans = {
 const mustacheDivs = {
 	name  : 'mustacheDivs',
 	level : 'block',
-	start(src) { return src.match(/^ *{{[^{]/)?.index; },  // Hint to Marked.js to stop and check for a match
+	start(src) { return src.match(/^ *{{[^{]/m)?.index; },  // Hint to Marked.js to stop and check for a match
 	tokenizer(src, tokens) {
 		const completeBlock = /^ *{{.*\n *}}/s;                // Regex for the complete token
 		const blockRegex = /^ *{{(?:="[\w,\-. ]*"|[^"'{}\s])*$|^ *}}$/gm;
@@ -116,7 +116,43 @@ const mustacheDivs = {
 	}
 };
 
-Markdown.use({ extensions: [mustacheSpans, mustacheDivs] });
+const definitionLists = {
+	name  : 'definitionLists',
+	level : 'block',
+	start(src) { return src.match(/^.*?::.*/m)?.index; },  // Hint to Marked.js to stop and check for a match
+	tokenizer(src, tokens) {
+		const regex = /^([^\n]*?)::([^\n]*)/ym;
+		let match;
+		let endIndex = 0;
+		const definitions = [];
+		//if(!src.match(/^[^\n]*?::/)) {console.log('return'); return;}
+		while (match = regex.exec(src)) {
+			definitions.push({
+				dt : this.inlineTokens(match[1].trim()),
+				dd : this.inlineTokens(match[2].trim())
+			});
+			//console.log(regexl)
+			endIndex = regex.lastIndex;
+		}
+		if(definitions.length) {
+			return {
+				type : 'definitionLists',
+				raw  : src.slice(0, endIndex),
+				definitions
+			};
+		}
+	},
+	renderer(token) {
+		return `<dl>
+						${token.definitions.reduce((html, def)=>{
+		return `${html}<dt>${this.parseInline(def.dt)}</dt>`
+									 				+ `<dd>${this.parseInline(def.dd)}</dd>\n`;
+	}, '')}
+		 				</dl>`;
+	}
+};
+
+Markdown.use({ extensions: [mustacheSpans, mustacheDivs, definitionLists] });
 
 //Fix local links in the Preview iFrame to link inside the frame
 renderer.link = function (href, title, text) {
@@ -216,8 +252,6 @@ module.exports = {
 	render : (rawBrewText)=>{
 		rawBrewText = rawBrewText.replace(/^\\column$/gm, `<div class='columnSplit'></div>`)
 														 .replace(/^(:+)$/gm, (match)=>`${`<div class='blank'></div>`.repeat(match.length)}\n`)
-														 .replace(/(?:^|>) *:([^:\n]*):([^\n]*)\n/gm, (match, term, def)=>`<dt>${Markdown.parseInline(term)}</dt><dd>${def}</dd>`)
-														 .replace(/(<dt>.*<\/dt><dd>.*<\/dd>\n?)+/gm, `<dl>$1</dl>\n\n`)
 		                         .replace(/^}}/gm, '\n}}')
 		                         .replace(/^({{[^\n]*)$/gm, '$1\n');
 		return Markdown(

themes/5ePhb.style.less

@@ -19,9 +19,12 @@ body {
 	font-family : ScalySansRemake;
 	font-size   : 0.325cm;
 	line-height : 1.2em;
-	p,dl,ul {
+	p,dl,ul,ol {
 		line-height : 1.2em;
 	}
+	ul, ol {
+		padding-left : 1em;
+	}
 	em{
 		font-style  : italic;
 	}
@@ -64,10 +67,10 @@ body {
 	// *****************************/
 	p{
 		overflow-wrap : break-word;		//TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS
-		margin-bottom : 1em;
+		margin-bottom : 0.8em;
 		line-height   : 1.3em;
 		&+p{
-			margin-top  : -1em;
+			margin-top  : -0.8em;
 		}
 	}
 	ul{
@@ -194,31 +197,75 @@ body {
 	//*****************************
 	// *            NOTE
 	// *****************************/
-	blockquote{
+	.note{
+		&::before{
+			content             : "";
+			box-sizing          : border-box;
+			border-style        : solid;
+			border-width        : 11px;
+			border-image        : @noteBorderImage 12;
+			border-image-outset : 9px 0px;
+			box-shadow          : 1px 4px 14px #888;
+			position            : absolute;
+			width               : 100%;
+			height              : 100%;
+			top                 : 0;
+			left                : 0;
+		}
 		.useSansSerif();
-		box-sizing          : border-box;
+		position            : relative;
-		margin-bottom       : 1em;
+		margin-top          : 1.3em;
-		padding             : 5px 10px;
+		margin-left         : -0.1em;
+		margin-right        : -0.1em;
 		background-color    : @noteGreen;
-		border-style        : solid;
+		padding             : 0.5em 0.6em;
-		border-width        : 11px;
+		& + * {
-		border-image        : @noteBorderImage 11;
+			margin-top : 1.3em;
-		border-image-outset : 9px 0px;
+		}
-		box-shadow          : 1px 4px 14px #888;
+		p{
-		-webkit-transform   : translateZ(0); //Prevents shadows from breaking across columns
+			display        : block;
-		p, ul{
+			padding-bottom : 0px;
-			font-size   : 0.352cm;
+		}
-			line-height : 1.1em;
+		p + p {
+			padding-top : .8em;
+		}
+		:last-child {
+			margin-bottom : 0em;
 		}
 	}
-	//If a note starts a column, give it space at the top to render border
+	//************************************
-	pre+blockquote, h2+blockquote, h3+blockquote, h4+blockquote, h5+blockquote {
+	// *       DESCRIPTIVE TEXT BOX
-		margin-top : 13px;
+	// ************************************/
+	.descriptive{
+		.useSansSerif();
+		display             : block-inline;
+		margin-top          : 1.4em;
+		background-color    : #faf7ea;
+		font-family         : ScalySansRemake;
+		border-style        : solid;
+		border-width        : 7px;
+		border-image        : @descriptiveBoxImage 12 stretch;
+		border-image-outset : 4px;
+		box-shadow          : 0px 0px 6px #faf7ea;
+		padding             : 0.1em;
+		& + * {
+			margin-top : 1.4em;
+		}
+		p{
+			display        : block;
+			padding-bottom : 0px;
+			line-height    : 1.5em;
+		}
+		p + p {
+			padding-top : .8em;
+		}
+		:last-child {
+			margin-bottom : 0em;
+		}
 	}
 	//*****************************
 	// *    MONSTER STAT BLOCK
 	// *****************************/
-
 	.monster {
 		&.frame {
 			border-style          : solid;
@@ -283,11 +330,6 @@ body {
 		dl {
 			.useSansSerif();
 			color        : @headerText;
-			padding-left :1.3em;
-			text-indent  :-1.3em;
-		}
-		dd {
-			text-indent  : 0px;
 		}
 
 		// Monster Ability table
@@ -464,40 +506,6 @@ body {
 		margin-bottom : 10px;
 	}
 }
-//************************************
-// *       DESCRIPTIVE TEXT BOX
-// ************************************/
-.page .descriptive{
-	display             : block-inline;
-	margin-bottom       : 1em;
-	background-color    : #faf7ea;
-	font-family         : ScalySansRemake;
-	border-style        : solid;
-	border-width        : 7px;
-	border-image        : @descriptiveBoxImage 12 stretch;
-	border-image-outset : 4px;
-	box-shadow          : 0px 0px 6px #faf7ea;
-	p{
-		display        : block;
-		padding-bottom : 0px;
-		line-height    : 1.5em;
-	}
-	p + p {
-		padding-top : .8em;
-	}
-	em {
-		font-family : ScalySansRemake;
-		font-style  : italic;
-	}
-	strong {
-		font-family    : ScalySansRemake;
-		font-weight    : 800;
-		letter-spacing : -0.02em;
-	}
-}
-.page pre+.descriptive{
-	margin-top : 8px;
-}
 //*****************************
 // *      TABLE OF CONTENTS
 // *****************************/
@@ -568,6 +576,7 @@ body {
 .page {
 	.block {
 		break-inside : avoid;
+		-webkit-transform   : translateZ(0); //Prevents shadows from breaking across columns
 	}
 	.inline {
 		display : inline-block;
@@ -581,17 +590,26 @@ body {
 // *    DEFINITION LISTS
 // *****************************/
 .page {
-	// dl {
+	dl {
-  // 	margin-top: 10px;
+		line-height  : 1.3em;
-  // }
+		padding-left : 1em;
+		text-indent  : -1em;
+	}
+	dl + p {
+  	margin-top: 0.5em;
+  }
+	p + dl {
+		margin-top: -0.5em;
+	}
   dt {
     float: left;
     //clear: left;  //Doesn't seem necessary
     margin-right: 5px;
   }
-  // dd {
+  dd {
-  //   margin-left: 0px;
+		margin-left : 0px;
-  // }
+		text-indent : 0px;
+  }
 }
 
 //*****************************