{/* Apply CSS from Style tab */}
+
${this.props.style} ` }} />
{/* Render pages from Markdown tab */}
diff --git a/client/homebrew/brewRenderer/brewRenderer.less b/client/homebrew/brewRenderer/brewRenderer.less
index 231e3301e..abb80fc5f 100644
--- a/client/homebrew/brewRenderer/brewRenderer.less
+++ b/client/homebrew/brewRenderer/brewRenderer.less
@@ -1,19 +1,11 @@
@import (multiple, less) 'shared/naturalcrit/styles/reset.less';
-& {@import (multiple, less) './client/homebrew/phbStyle/phb.styleLegacy.less';} //&{} keeps internal variables locally-scoped
-& {@import (multiple, less) './client/homebrew/phbStyle/phb.style.less';}
.brewRenderer{
will-change : transform;
overflow-y : scroll;
.pages{
margin : 30px 0px;
- &>.phb{
- margin-right : auto;
- margin-bottom : 30px;
- margin-left : auto;
- box-shadow : 1px 4px 14px #000;
- }
- &>.phb3{
+ &>.page{
margin-right : auto;
margin-bottom : 30px;
margin-left : auto;
diff --git a/client/homebrew/editor/snippetbar/snippets/magic.gen.js b/client/homebrew/editor/snippetbar/snippets/magic.gen.js
index a7765e979..caea3c4af 100644
--- a/client/homebrew/editor/snippetbar/snippets/magic.gen.js
+++ b/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',
- `- **Range:** ${_.sample(['Self', 'Touch', '30 feet', '60 feet'])}`,
- `- **Components:** ${components}`,
- `- **Duration:** ${_.sample(['Until dispelled', '1 round', 'Instantaneous', 'Concentration, up to 10 minutes', '1 hour'])}`,
+ '',
+ '**Casting Time:** :: 1 action',
+ `**Range:** :: ${_.sample(['Self', 'Touch', '30 feet', '60 feet'])}`,
+ `**Components:** :: ${components}`,
+ `**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. ',
diff --git a/client/homebrew/editor/snippetbar/snippets/monsterblock.gen.js b/client/homebrew/editor/snippetbar/snippets/monsterblock.gen.js
index c455e90f5..4db3019ea 100644
--- a/client/homebrew/editor/snippetbar/snippets/monsterblock.gen.js
+++ b/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)
- : **Hit Points** : ${_.random(1, 150)}(1d4 + 5)
- : **Speed** : ${_.random(0, 50)}ft.
+ **Armor Class** :: ${_.random(10, 20)} (chain mail, shield)
+ **Hit Points** :: ${_.random(1, 150)}(1d4 + 5)
+ **Speed** :: ${_.random(0, 50)}ft.
___
| STR | DEX | CON | INT | WIS | CHA |
|:-----:|:-----:|:-----:|:-----:|:-----:|:-----:|
${getStats()}
___
- : **Condition Immunities** : ${genList(['groggy', 'swagged', 'weak-kneed', 'buzzed', 'groovy', 'melancholy', 'drunk'], 3)}
- : **Senses** : darkvision 60 ft., passive Perception ${_.random(3, 20)}
- : **Languages** : ${genList(['Common', 'Pottymouth', 'Gibberish', 'Latin', 'Jive'], 2)}
- : **Challenge** : ${_.random(0, 15)} (${_.random(10, 10000)} XP)
+ **Condition Immunities** :: ${genList(['groggy', 'swagged', 'weak-kneed', 'buzzed', 'groovy', 'melancholy', 'drunk'], 3)}
+ **Senses** :: darkvision 60 ft., passive Perception ${_.random(3, 20)}
+ **Languages** :: ${genList(['Common', 'Pottymouth', 'Gibberish', 'Latin', 'Jive'], 2)}
+ **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')}
diff --git a/client/homebrew/editor/snippetbar/snippets/snippets.js b/client/homebrew/editor/snippetbar/snippets/snippets.js
index f72817c7a..6ecae9429 100644
--- a/client/homebrew/editor/snippetbar/snippets/snippets.js
+++ b/client/homebrew/editor/snippetbar/snippets/snippets.js
@@ -27,18 +27,34 @@ module.exports = [
},
{
name : 'Vertical Spacing',
- icon : 'fas fa-times-circle',
- gen : ''
+ icon : 'fas fa-arrows-alt-v',
+ gen : '\n::::\n'
+ },
+ {
+ name : 'Horizontal Spacing',
+ icon : 'fas fa-arrows-alt-h',
+ gen : ' {{width="100px"}} '
},
{
name : 'Wide Block',
- icon : 'fas fa-times-circle',
- gen : ''
+ icon : 'fas fa-window-maximize',
+ gen : dedent`\n
+ {{wide
+ Everything in here will be extra wide. Tables, text, everything!
+ Beware though, CSS columns can behave a bit weird sometimes. You may
+ have to rely on the automatic column-break rather than \`\column\` if
+ you mix columns and wide blocks on the same page.
+ }}
+ \n`
},
{
name : 'Image',
- icon : 'fas fa-times-circle',
- gen : ''
+ icon : 'fas fa-image',
+ gen : dedent`
+ 
+ Credit: Kyounghwan Kim`
},
{
name : 'Background Image',
@@ -130,26 +146,28 @@ module.exports = [
name : 'Note',
icon : 'fas fa-sticky-note',
gen : function(){
- return [
- '> ##### Time to Drop Knowledge',
- '> Use notes to point out some interesting information. ',
- '> ',
- '> **Tables and lists** both work within a note.'
- ].join('\n');
+ return dedent`
+ {{note
+ ##### Time to Drop Knowledge
+ Use notes to point out some interesting information.
+
+ **Tables and lists** both work within a note.
+ }}
+ \n`;
},
},
{
name : 'Descriptive Text Box',
icon : 'fas fa-comment-alt',
gen : function(){
- return [
- '
+ Credit: Kyounghwan Kim`
},
{
name : 'Background Image',
@@ -130,26 +146,28 @@ module.exports = [
name : 'Note',
icon : 'fas fa-sticky-note',
gen : function(){
- return [
- '> ##### Time to Drop Knowledge',
- '> Use notes to point out some interesting information. ',
- '> ',
- '> **Tables and lists** both work within a note.'
- ].join('\n');
+ return dedent`
+ {{note
+ ##### Time to Drop Knowledge
+ Use notes to point out some interesting information.
+
+ **Tables and lists** both work within a note.
+ }}
+ \n`;
},
},
{
name : 'Descriptive Text Box',
icon : 'fas fa-comment-alt',
gen : function(){
- return [
- '',
- '##### Time to Drop Knowledge',
- 'Use notes to point out some interesting information. ',
- '',
- '**Tables and lists** both work within a note.',
- '
'
- ].join('\n');
+ return dedent`
+ {{descriptive
+ ##### Time to Drop Knowledge
+ Use descriptive boxes to highlight text that should be read aloud.
+
+ **Tables and lists** both work within a descriptive box.
+ }}
+ \n`;
},
},
{
diff --git a/client/homebrew/editor/snippetbar/snippets/tableOfContents.gen.js b/client/homebrew/editor/snippetbar/snippets/tableOfContents.gen.js
index 8a03b0530..f0964e582 100644
--- a/client/homebrew/editor/snippetbar/snippets/tableOfContents.gen.js
+++ b/client/homebrew/editor/snippetbar/snippets/tableOfContents.gen.js
@@ -1,4 +1,5 @@
const _ = require('lodash');
+const dedent = require('dedent-tabs').default;
const getTOC = (pages)=>{
const add1 = (title, page)=>{
@@ -9,7 +10,7 @@ const getTOC = (pages)=>{
});
};
const add2 = (title, page)=>{
- if(!_.last(res)) add1('', page);
+ if(!_.last(res)) add1(null, page);
_.last(res).children.push({
title : title,
page : page + 1,
@@ -17,8 +18,8 @@ const getTOC = (pages)=>{
});
};
const add3 = (title, page)=>{
- if(!_.last(res)) add1('', page);
- if(!_.last(_.last(res).children)) add2('', page);
+ if(!_.last(res)) add1(null, page);
+ if(!_.last(_.last(res).children)) add2(null, page);
_.last(_.last(res).children).children.push({
title : title,
page : page + 1,
@@ -51,13 +52,21 @@ module.exports = function(brew){
const pages = brew.text.split('\\page');
const TOC = getTOC(pages);
const markdown = _.reduce(TOC, (r, g1, idx1)=>{
- r.push(`- **[${idx1 + 1} ${g1.title}](#p${g1.page})**`);
+ if(g1.title !== null) {
+ r.push(`\t\t- ### [{{ ${g1.title}}}{{ ${g1.page}}}](#p${g1.page})`);
+ }
if(g1.children.length){
_.each(g1.children, (g2, idx2)=>{
- r.push(` - [${idx1 + 1}.${idx2 + 1} ${g2.title}](#p${g2.page})`);
+ if(g2.title !== null) {
+ r.push(`\t\t - #### [{{ ${g2.title}}}{{ ${g2.page}}}](#p${g2.page})`);
+ }
if(g2.children.length){
_.each(g2.children, (g3, idx3)=>{
- r.push(` - [${idx1 + 1}.${idx2 + 1}.${idx3 + 1} ${g3.title}](#p${g3.page})`);
+ if(g2.title !== null) {
+ r.push(`\t\t - [{{ ${g3.title}}}{{ ${g3.page}}}](#p${g3.page})`);
+ } else { // Don't over-indent if no level-2 parent entry
+ r.push(`\t\t - [{{ ${g3.title}}}{{ ${g3.page}}}](#p${g3.page})`);
+ }
});
}
});
@@ -65,8 +74,11 @@ module.exports = function(brew){
return r;
}, []).join('\n');
- return `
-##### Table Of Contents
+ return dedent`
+ {{toc,wide
+ # Table Of Contents
+
${markdown}
-
\n`;
+ }}
+ \n`;
};
diff --git a/client/homebrew/navbar/recent.navitem.jsx b/client/homebrew/navbar/recent.navitem.jsx
index d12389948..f55817df0 100644
--- a/client/homebrew/navbar/recent.navitem.jsx
+++ b/client/homebrew/navbar/recent.navitem.jsx
@@ -80,7 +80,8 @@ const RecentItems = createClass({
componentDidUpdate : function(prevProps) {
if(prevProps.brew && this.props.brew.editId !== prevProps.brew.editId) {
- if(this.props.storageKey == 'edit') {
+ let edited = JSON.parse(localStorage.getItem(EDIT_KEY) || '[]');
+ if(this.props.storageKey == 'edit') {
let prevEditId = prevProps.brew.editId;
if(prevProps.brew.googleId){
prevEditId = `${prevProps.brew.googleId}${prevProps.brew.editId}`;
diff --git a/client/homebrew/pages/printPage/printPage.jsx b/client/homebrew/pages/printPage/printPage.jsx
index ffd11841c..d4f15c91b 100644
--- a/client/homebrew/pages/printPage/printPage.jsx
+++ b/client/homebrew/pages/printPage/printPage.jsx
@@ -59,6 +59,7 @@ const PrintPage = createClass({
render : function(){
return
+
{/* Apply CSS from Style tab */}
${this.props.brew.style} ` }} />
{this.renderPages()}
diff --git a/client/homebrew/pages/userPage/userPage.jsx b/client/homebrew/pages/userPage/userPage.jsx
index e6b7530b8..6527c3993 100644
--- a/client/homebrew/pages/userPage/userPage.jsx
+++ b/client/homebrew/pages/userPage/userPage.jsx
@@ -53,6 +53,7 @@ const UserPage = createClass({
const brews = this.getSortedBrews();
return
+
${text}\n`;
};
-// Mustache-style Divs {{class \n content ... \n}}
-let blockCount = 0;
-const blockRegex = /^ *{{(?:="[\w,\-. ]*"|[^"'\s])*$|^ *}}$/gm;
-const inlineFullRegex = /{{[^\n]*}}/g;
-const inlineRegex = /{{(?:="[\w,\-. ]*"|[^"'{}}\s])*\s*|}}/g;
-
-renderer.text = function(text){
- const newText = text.replaceAll('"', '"');
- 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(`{
- 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(`
`);
- blockCount++;
- } else if(block == '}}' && blockCount !== 0){
- r.push('
');
- blockCount--;
- }
-
- matchIndex++;
-
- return r;
- }, []).join('');
- return res;
- } else {
- if(!matches) {
- return `${text}`;
+ 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) {
+ return `