Merge branch 'master' into pr/3132

2025-12-26 16:02:38 +00:00 · 2023-12-04 22:26:05 -05:00
parent 0db6ffe340 5942bfece1
commit db0f75c852
10 changed files with 744 additions and 651 deletions
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -1,9 +1,8 @@
 /*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
 require('./brewRenderer.less');
 const React = require('react');
-const createClass = require('create-react-class');
+const { useState, useRef, useEffect } = React;
 const _ = require('lodash');
-const cx = require('classnames');

 const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
 const Markdown = require('naturalcrit/markdown.js');
@@ -13,244 +12,214 @@ const ErrorBar = require('./errorBar/errorBar.jsx');
 const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx');
 const NotificationPopup = require('./notificationPopup/notificationPopup.jsx');
 const Frame = require('react-frame-component').default;
+const dedent = require('dedent-tabs').default;

 const Themes = require('themes/themes.json');

 const PAGE_HEIGHT = 1056;
-const PPR_THRESHOLD = 50;

-const BrewRenderer = createClass({
-	displayName     : 'BrewRenderer',
-	getDefaultProps : function() {
-		return {
-			text     : '',
-			style    : '',
-			renderer : 'legacy',
-			theme    : '5ePHB',
-			lang     : '',
-			errors   : []
-		};
-	},
-	getInitialState : function() {
-		let pages;
-		if(this.props.renderer == 'legacy') {
-			pages = this.props.text.split('\\page');
-		} else {
-			pages = this.props.text.split(/^\\page$/gm);
-		}
+const INITIAL_CONTENT = dedent`
+	<!DOCTYPE html><html><head>
+	<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
+	<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
+	<link href='/homebrew/bundle.css' rel='stylesheet' />
+	<base target=_blank>
+	</head><body style='overflow: hidden'><div></div></body></html>`;

-		return {
-			viewablePageNumber : 0,
-			height             : 0,
-			isMounted          : false,
+//v=====----------------------< Brew Page Component >---------------------=====v//
+const BrewPage = (props)=>{
+	props = {
+		contents : '',
+		index    : 0,
+		...props
+	};
+	return <div className={props.className} id={`p${props.index + 1}`} >
+	         <div className='columnWrapper' dangerouslySetInnerHTML={{ __html: props.contents }} />
+	       </div>;
+};

-			pages          : pages,
-			usePPR         : pages.length >= PPR_THRESHOLD,
-			visibility     : 'hidden',
-			initialContent : `<!DOCTYPE html><html><head>
-												<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
-												<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
-												<link href='/homebrew/bundle.css' rel='stylesheet' />
-												<base target=_blank>
-												</head><body style='overflow: hidden'><div></div></body></html>`
-		};
-	},
-	height     : 0,
-	lastRender : <div></div>,

-	componentWillUnmount : function() {
-		window.removeEventListener('resize', this.updateSize);
-	},
+//v=====--------------------< Brew Renderer Component >-------------------=====v//
+const renderedPages = [];
+let rawPages      = [];

-	componentDidUpdate : function(prevProps) {
-		if(prevProps.text !== this.props.text) {
-			let pages;
-			if(this.props.renderer == 'legacy') {
-				pages = this.props.text.split('\\page');
-			} else {
-				pages = this.props.text.split(/^\\page$/gm);
-			}
-			this.setState({
-				pages  : pages,
-				usePPR : pages.length >= PPR_THRESHOLD
-			});
-		}
-	},
+const BrewRenderer = (props)=>{
+	props = {
+		text     : '',
+		style    : '',
+		renderer : 'legacy',
+		theme    : '5ePHB',
+		lang     : '',
+		errors   : [],
+		...props
+	};

-	updateSize : function() {
-		this.setState({
-			height : this.refs.main.parentNode.clientHeight,
-		});
-	},
+	const [state, setState] = useState({
+		viewablePageNumber : 0,
+		height             : PAGE_HEIGHT,
+		isMounted          : false,
+		visibility         : 'hidden',
+	});

-	handleScroll : function(e){
-		const target = e.target;
-		this.setState((prevState)=>({
-			viewablePageNumber : Math.floor(target.scrollTop / target.scrollHeight * prevState.pages.length)
+	const mainRef  = useRef(null);
+
+	if(props.renderer == 'legacy') {
+		rawPages = props.text.split('\\page');
+	} else {
+		rawPages = props.text.split(/^\\page$/gm);
+	}
+
+	useEffect(()=>{ // Unmounting steps
+		return ()=>{window.removeEventListener('resize', updateSize);};
+	}, []);
+
+	const updateSize = ()=>{
+		setState((prevState)=>({
+			...prevState,
+			height : mainRef.current.parentNode.clientHeight,
 		}));
-	},
+	};

-	shouldRender : function(pageText, index){
-		if(!this.state.isMounted) return false;
+	const handleScroll = (e)=>{
+		const target = e.target;
+		setState((prevState)=>({
+			...prevState,
+			viewablePageNumber : Math.floor(target.scrollTop / target.scrollHeight * rawPages.length)
+		}));
+	};

-		const viewIndex = this.state.viewablePageNumber;
-		if(index == viewIndex - 3) return true;
-		if(index == viewIndex - 2) return true;
-		if(index == viewIndex - 1) return true;
-		if(index == viewIndex)     return true;
-		if(index == viewIndex + 1) return true;
-		if(index == viewIndex + 2) return true;
-		if(index == viewIndex + 3) return true;
+	const shouldRender = (index)=>{
+		if(!state.isMounted) return false;

-		//Check for style tages
-		if(pageText.indexOf('<style>') !== -1) return true;
+		if(Math.abs(index - state.viewablePageNumber) <= 3)
+			return true;

 		return false;
-	},
+	};

-	sanitizeScriptTags : function(content) {
+	const sanitizeScriptTags = (content)=>{
 		return content
 			.replace(/<script/ig, '&lt;script')
 			.replace(/<\/script>/ig, '&lt;/script&gt;');
-	},
+	};

-	renderPageInfo : function(){
-		return <div className='pageInfo' ref='main'>
+	const renderPageInfo = ()=>{
+		return <div className='pageInfo' ref={mainRef}>
 			<div>
-				{this.props.renderer}
+				{props.renderer}
 			</div>
 			<div>
-				{this.state.viewablePageNumber + 1} / {this.state.pages.length}
+				{state.viewablePageNumber + 1} / {rawPages.length}
 			</div>
 		</div>;
-	},
+	};

-	renderPPRmsg : function(){
-		if(!this.state.usePPR) return;
-
-		return <div className='ppr_msg'>
-			Partial Page Renderer is enabled, because your brew is so large. May affect rendering.
-		</div>;
-	},
-
-	renderDummyPage : function(index){
+	const renderDummyPage = (index)=>{
 		return <div className='phb page' id={`p${index + 1}`} key={index}>
 			<i className='fas fa-spinner fa-spin' />
 		</div>;
-	},
+	};

-	renderStyle : function() {
-		if(!this.props.style) return;
-		const cleanStyle = this.sanitizeScriptTags(this.props.style);
-		//return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.sanitizeScriptTags(this.props.style)}\n} </style>` }} />;
+	const renderStyle = ()=>{
+		if(!props.style) return;
+		const cleanStyle = sanitizeScriptTags(props.style);
+		//return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${sanitizeScriptTags(props.style)}\n} </style>` }} />;
 		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style> ${cleanStyle} </style>` }} />;
-	},
+	};

-	renderPage : function(pageText, index){
-		let cleanPageText = this.sanitizeScriptTags(pageText);
-		if(this.props.renderer == 'legacy')
-			return <div className='phb page' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(cleanPageText) }} key={index} />;
-		else {
+	const renderPage = (pageText, index)=>{
+		let cleanPageText = sanitizeScriptTags(pageText);
+		if(props.renderer == 'legacy') {
+			const html = MarkdownLegacy.render(cleanPageText);
+			return <BrewPage className='page phb' index={index} key={index} contents={html} />;
+		} else {
 			cleanPageText += `\n\n&nbsp;\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
-			return (
-				<div className='page' id={`p${index + 1}`} key={index} >
-					<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: Markdown.render(cleanPageText) }} />
-				</div>
-			);
+			const html = Markdown.render(cleanPageText);
+			return <BrewPage className='page' index={index} key={index} contents={html} />;
 		}
-	},
+	};

-	renderPages : function(){
-		if(this.state.usePPR){
-			return _.map(this.state.pages, (page, index)=>{
-				if(this.shouldRender(page, index) && typeof window !== 'undefined'){
-					return this.renderPage(page, index);
-				} else {
-					return this.renderDummyPage(index);
-				}
-			});
-		}
-		if(this.props.errors && this.props.errors.length) return this.lastRender;
-		this.lastRender = _.map(this.state.pages, (page, index)=>{
-			if(typeof window !== 'undefined') {
-				return this.renderPage(page, index);
-			} else {
-				return this.renderDummyPage(index);
+	const renderPages = ()=>{
+		if(props.errors && props.errors.length)
+			return renderedPages;
+
+		_.forEach(rawPages, (page, index)=>{
+			if((shouldRender(index) || !renderedPages[index]) && typeof window !== 'undefined'){
+				renderedPages[index] = renderPage(page, index); // Render any page not yet rendered, but only re-render those in PPR range
 			}
 		});
-		return this.lastRender;
-	},
+		return renderedPages;
+	};

-	frameDidMount : function(){	//This triggers when iFrame finishes internal "componentDidMount"
+	const frameDidMount = ()=>{	//This triggers when iFrame finishes internal "componentDidMount"
 		setTimeout(()=>{	//We still see a flicker where the style isn't applied yet, so wait 100ms before showing iFrame
-			this.updateSize();
-			window.addEventListener('resize', this.updateSize);
-			this.renderPages(); //Make sure page is renderable before showing
-			this.setState({
+			updateSize();
+			window.addEventListener('resize', updateSize);
+			renderPages(); //Make sure page is renderable before showing
+			setState((prevState)=>({
+				...prevState,
 				isMounted  : true,
 				visibility : 'visible'
-			});
+			}));
 		}, 100);
-	},
+	};

-	emitClick : function(){
-		// console.log('iFrame clicked');
+	const emitClick = ()=>{ // Allow clicks inside iFrame to interact with dropdowns, etc. from outside
 		if(!window || !document) return;
 		document.dispatchEvent(new MouseEvent('click'));
-	},
+	};

-	render : function(){
-		//render in iFrame so broken code doesn't crash the site.
-		//Also render dummy page while iframe is mounting.
-		const rendererPath = this.props.renderer == 'V3' ? 'V3' : 'Legacy';
-		const themePath    = this.props.theme ?? '5ePHB';
-		const baseThemePath = Themes[rendererPath][themePath].baseTheme;
-		return (
-			<React.Fragment>
-				{!this.state.isMounted
-					? <div className='brewRenderer' onScroll={this.handleScroll}>
-						<div className='pages' ref='pages'>
-							{this.renderDummyPage(1)}
-						</div>
+	const rendererPath  = props.renderer == 'V3' ? 'V3' : 'Legacy';
+	const themePath     = props.theme ?? '5ePHB';
+	const baseThemePath = Themes[rendererPath][themePath].baseTheme;
+
+	return (
+		<>
+			{/*render dummy page while iFrame is mounting.*/}
+			{!state.isMounted
+				? <div className='brewRenderer' onScroll={handleScroll}>
+					<div className='pages'>
+						{renderDummyPage(1)}
 					</div>
-	        : null}
+				</div>
+				: null}

-				<Frame id='BrewRenderer' initialContent={this.state.initialContent}
-					style={{ width: '100%', height: '100%', visibility: this.state.visibility }}
-					contentDidMount={this.frameDidMount}
-					onClick={()=>{this.emitClick();}}
-				>
-					<div className={'brewRenderer'}
-						onScroll={this.handleScroll}
-						style={{ height: this.state.height }}>
+			{/*render in iFrame so broken code doesn't crash the site.*/}
+			<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}
+				style={{ width: '100%', height: '100%', visibility: state.visibility }}
+				contentDidMount={frameDidMount}
+				onClick={()=>{emitClick();}}
+			>
+				<div className={'brewRenderer'}
+					onScroll={handleScroll}
+					style={{ height: state.height }}>

-						<ErrorBar errors={this.props.errors} />
-						<div className='popups'>
-							<RenderWarnings />
-							<NotificationPopup />
-						</div>
-						<link href={`/themes/${rendererPath}/Blank/style.css`} rel='stylesheet'/>
-						{baseThemePath &&
-							<link href={`/themes/${rendererPath}/${baseThemePath}/style.css`} rel='stylesheet'/>
-						}
-						<link href={`/themes/${rendererPath}/${themePath}/style.css`} rel='stylesheet'/>
-						{/* Apply CSS from Style tab and render pages from Markdown tab */}
-						{this.state.isMounted
-							&&
-							<>
-								{this.renderStyle()}
-								<div className='pages' ref='pages' lang={`${this.props.lang || 'en'}`}>
-									{this.renderPages()}
-								</div>
-							</>
-						}
+					<ErrorBar errors={props.errors} />
+					<div className='popups'>
+						<RenderWarnings />
+						<NotificationPopup />
 					</div>
-				</Frame>
-				{this.renderPageInfo()}
-				{this.renderPPRmsg()}
-			</React.Fragment>
-		);
-	}
-});
+					<link href={`/themes/${rendererPath}/Blank/style.css`} rel='stylesheet'/>
+					{baseThemePath &&
+						<link href={`/themes/${rendererPath}/${baseThemePath}/style.css`} rel='stylesheet'/>
+					}
+					<link href={`/themes/${rendererPath}/${themePath}/style.css`} rel='stylesheet'/>
+
+					{/* Apply CSS from Style tab and render pages from Markdown tab */}
+					{state.isMounted
+						&&
+						<>
+							{renderStyle()}
+							<div className='pages' lang={`${props.lang || 'en'}`}>
+								{renderPages()}
+							</div>
+						</>
+					}
+				</div>
+			</Frame>
+			{renderPageInfo()}
+		</>
+	);
+};

 module.exports = BrewRenderer;
--- a/client/homebrew/brewRenderer/brewRenderer.less
+++ b/client/homebrew/brewRenderer/brewRenderer.less
@@ -1,46 +1,44 @@
@import (multiple, less) 'shared/naturalcrit/styles/reset.less';

-.brewRenderer{
+.brewRenderer {
 	will-change : transform;
 	overflow-y  : scroll;
-	.pages{
+	.pages {
 		margin : 30px 0px;
-		&>.page{
+		& > .page {
+			width         : 215.9mm;
+			height        : 279.4mm;
 			margin-right  : auto;
 			margin-bottom : 30px;
 			margin-left   : auto;
-			box-shadow    : 1px 4px 14px #000;
+			box-shadow    : 1px 4px 14px #000000;
 		}
 	}
 }
-.pane{
-	position : relative;
-}
-.pageInfo{
+.pane { position : relative; }
+.pageInfo {
 	position         : absolute;
 	right            : 17px;
 	bottom           : 0;
 	z-index          : 1000;
-	background-color : #333;
 	font-size        : 10px;
 	font-weight      : 800;
 	color            : white;
+	background-color : #333333;
 	div {
-		display: inline-block;
+		display          : inline-block;
 		padding          : 8px 10px;
-		&:not(:last-child){
-			border-right: 1px solid #666;
-		}
+		&:not(:last-child) { border-right : 1px solid #666666; }
 	}
 }
-.ppr_msg{
+.ppr_msg {
 	position         : absolute;
-	left             : 0px;
 	bottom           : 0;
+	left             : 0px;
 	z-index          : 1000;
 	padding          : 8px 10px;
-	background-color : #333;
 	font-size        : 10px;
 	font-weight      : 800;
 	color            : white;
+	background-color : #333333;
 }
--- a/client/homebrew/editor/editor.jsx
+++ b/client/homebrew/editor/editor.jsx
@@ -160,6 +160,24 @@ const Editor = createClass({
 							}
 						}

+						// Superscript
+						if(line.includes('\^')) {
+							const regex = /\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^/g;
+							let match;
+							while ((match = regex.exec(line)) != null) {
+								codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[1]) - 1 }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length + 1 }, { className: 'superscript' });
+							}
+						}
+
+						// Subscript
+						if(line.includes('^^')) {
+							const regex = /\^\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^\^/g;
+							let match;
+							while ((match = regex.exec(line)) != null) {
+								codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[1]) - 2 }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length + 2 }, { className: 'subscript' });
+							}
+						}
+
 						// Highlight injectors {style}
 						if(line.includes('{') && line.includes('}')){
 							const regex = /(?:^|[^{\n])({(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\2})/gm;
--- a/client/homebrew/editor/editor.less
+++ b/client/homebrew/editor/editor.less
@@ -43,6 +43,18 @@
 			font-weight : bold;
 			color       : green;
 		}
+		.superscript:not(.cm-comment) {
+			font-weight    : bold;
+			color          : goldenrod;
+			vertical-align : super;
+			font-size      : 0.9em;
+		}
+		.subscript:not(.cm-comment) {
+			font-weight    : bold;
+			color          : rgb(123, 123, 15);
+			vertical-align : sub;
+			font-size      : 0.9em;
+		}
 	}

 	.brewJump {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -79,10 +79,10 @@
    ]
  },
  "dependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/plugin-transform-runtime": "^7.23.2",
-    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-react": "^7.22.15",
+    "@babel/core": "^7.23.5",
+    "@babel/plugin-transform-runtime": "^7.23.4",
+    "@babel/preset-env": "^7.23.5",
+    "@babel/preset-react": "^7.23.3",
    "@googleapis/drive": "^8.4.0",
    "body-parser": "^1.20.2",
    "classnames": "^2.3.2",
@@ -93,38 +93,37 @@
    "express": "^4.18.2",
    "express-async-handler": "^1.2.0",
    "express-static-gzip": "2.1.7",
-    "fs": "^0.0.1-security",
-    "fs-extra": "11.1.1",
+    "fs-extra": "11.2.0",
    "js-yaml": "^4.1.0",
    "jwt-simple": "^0.5.6",
    "less": "^3.13.1",
    "lodash": "^4.17.21",
    "marked": "5.1.1",
    "marked-extended-tables": "^1.0.7",
-    "marked-gfm-heading-id": "^3.1.0",
+    "marked-gfm-heading-id": "^3.1.2",
    "marked-smartypants-lite": "^1.0.1",
    "markedLegacy": "npm:marked@^0.3.19",
    "moment": "^2.29.4",
-    "mongoose": "^8.0.0",
+    "mongoose": "^8.0.2",
    "nanoid": "3.3.4",
    "nconf": "^0.12.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-frame-component": "^4.1.3",
-    "react-router-dom": "6.18.0",
+    "react-router-dom": "6.20.1",
    "sanitize-filename": "1.6.3",
    "superagent": "^8.1.2",
    "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
  },
  "devDependencies": {
-    "eslint": "^8.53.0",
+    "eslint": "^8.55.0",
    "eslint-plugin-jest": "^27.6.0",
    "eslint-plugin-react": "^7.33.2",
    "jest": "^29.7.0",
    "jest-expect-message": "^1.1.3",
    "postcss-less": "^6.0.0",
    "stylelint": "^15.11.0",
-    "stylelint-config-recess-order": "^4.3.0",
+    "stylelint-config-recess-order": "^4.4.0",
    "stylelint-config-recommended": "^13.0.0",
    "stylelint-stylistic": "^0.4.3",
    "supertest": "^6.3.3"
--- a/shared/naturalcrit/codeEditor/codeEditor.jsx
+++ b/shared/naturalcrit/codeEditor/codeEditor.jsx
@@ -112,6 +112,10 @@ const CodeEditor = createClass({
 				'Shift-Tab'        : this.dedent,
 				'Ctrl-B'           : this.makeBold,
 				'Cmd-B'            : this.makeBold,
+				'Shift-Ctrl-='     : this.makeSuper,
+				'Shift-Cmd-='      : this.makeSuper,
+				'Ctrl-='           : this.makeSub,
+				'Cmd-='            : this.makeSub,
 				'Ctrl-I'           : this.makeItalic,
 				'Cmd-I'            : this.makeItalic,
 				'Ctrl-U'           : this.makeUnderline,
@@ -219,6 +223,25 @@ const CodeEditor = createClass({
 		}
 	},

+	makeSuper : function() {
+		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 1) === '^' && selection.slice(-1) === '^';
+		this.codeMirror.replaceSelection(t ? selection.slice(1, -1) : `^${selection}^`, 'around');
+		if(selection.length === 0){
+			const cursor = this.codeMirror.getCursor();
+			this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 1 });
+		}
+	},
+
+	makeSub : function() {
+		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '^^' && selection.slice(-2) === '^^';
+		this.codeMirror.replaceSelection(t ? selection.slice(2, -2) : `^^${selection}^^`, 'around');
+		if(selection.length === 0){
+			const cursor = this.codeMirror.getCursor();
+			this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 2 });
+		}
+	},
+
+
 	makeNbsp : function() {
 		this.codeMirror.replaceSelection('&nbsp;', 'end');
 	},
--- a/shared/naturalcrit/markdown.js
+++ b/shared/naturalcrit/markdown.js
@@ -206,6 +206,34 @@ const mustacheInjectBlock = {
 	}
 };

+const superSubScripts = {
+	name  : 'superSubScript',
+	level : 'inline',
+	start(src) { return src.match(/\^/m)?.index; },  // Hint to Marked.js to stop and check for a match
+	tokenizer(src, tokens) {
+		const superRegex = /^\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^/m;
+		const subRegex   = /^\^\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^\^/m;
+		let isSuper = false;
+		let match = subRegex.exec(src);
+		if(!match){
+			match = superRegex.exec(src);
+			if(match)
+				isSuper = true;
+		}
+		if(match?.length) {
+			return {
+				type   : 'superSubScript', // Should match "name" above
+				raw    : match[0],          // Text to consume from the source
+				tag    : isSuper ? 'sup' : 'sub',
+				tokens : this.lexer.inlineTokens(match[1])
+			};
+		}
+	},
+	renderer(token) {
+		return `<${token.tag}>${this.parser.parseInline(token.tokens)}</${token.tag}>`;
+	}
+};
+
 const definitionLists = {
 	name  : 'definitionLists',
 	level : 'block',
@@ -238,7 +266,7 @@ const definitionLists = {
 	}
 };

-Marked.use({ extensions: [mustacheSpans, mustacheDivs, mustacheInjectInline, definitionLists] });
+Marked.use({ extensions: [mustacheSpans, mustacheDivs, mustacheInjectInline, definitionLists, superSubScripts] });
 Marked.use(mustacheInjectBlock);
 Marked.use({ renderer: renderer, mangle: false });
 Marked.use(MarkedExtendedTables(), MarkedGFMHeadingId(), MarkedSmartypantsLite());
--- a/themes/Legacy/5ePHB/style.less
+++ b/themes/Legacy/5ePHB/style.less
@@ -40,7 +40,7 @@ body {
 	-webkit-column-gap   : 1cm;
 	-moz-column-gap      : 1cm;
 }
-.phb{
+.phb, .page{
 	.useColumns();
 	counter-increment : phb-page-numbers;
 	position          : relative;
@@ -59,6 +59,9 @@ body {
 	page-break-before : always;
 	page-break-after  : always;
 	contain           : size;
+}
+
+.phb{
 	//*****************************
 	// *            BASE
 	// *****************************/
--- a/themes/V3/5ePHB/style.less
+++ b/themes/V3/5ePHB/style.less
@@ -443,6 +443,8 @@ body { counter-reset : phb-page-numbers; }
 			tr { background-color : transparent; }
 			td,th { padding : 0px; }
 		}
+		//indent fix after bulleted lists
+		:is(ul,ol) + p { text-indent : 0; }

 		:last-child { margin-bottom : 0; }
 	}