Merge branch 'master' of https://github.com/naturalcrit/homebrewery into pdf-tools

client/admin/brewCleanup/brewCleanup.jsx

@@ -1,7 +1,6 @@
 require('./brewCleanup.less');
 const React       = require('react');
 const createClass = require('create-react-class');
-const cx          = require('classnames');
 
 const request = require('superagent');
 

client/admin/brewCompress/brewCompress.jsx

@@ -1,7 +1,6 @@
 require('./brewCompress.less');
 const React       = require('react');
 const createClass = require('create-react-class');
-const cx          = require('classnames');
 
 const request = require('superagent');
 

client/components/combobox.jsx

@@ -1,7 +1,6 @@
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
-const cx = require('classnames');
 require('./combobox.less');
 
 const Combobox = createClass({

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -14,6 +14,7 @@ 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 { printCurrentBrew } = require('../../../shared/helpers.js');
 
 const DOMPurify = require('dompurify');
 const purifyConfig = { FORCE_BODY: true, SANITIZE_DOM: false };
@@ -173,6 +174,16 @@ const BrewRenderer = (props)=>{
 		return renderedPages;
 	};
 
+	const handleControlKeys = (e)=>{
+		if(!(e.ctrlKey || e.metaKey)) return;
+		const P_KEY = 80;
+		if(e.keyCode == P_KEY && props.allowPrint) printCurrentBrew();
+		if(e.keyCode == P_KEY) {
+			e.stopPropagation();
+			e.preventDefault();
+		}
+	};
+
 	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
 			updateSize();
@@ -239,6 +250,8 @@ const BrewRenderer = (props)=>{
 				<ToolBar updateZoom={updateZoom} />
 				<div className={'brewRenderer'}
 					onScroll={handleScroll}
+					onKeyDown={handleControlKeys}
+					tabIndex={-1}
 					style={{ height: state.height }}>
 
 					<ErrorBar errors={props.errors} />

client/homebrew/brewRenderer/brewRenderer.less

@@ -64,3 +64,16 @@
 	color            : white;
 	background-color : #333333;
 }
+
+@media print {
+	.brewRenderer {
+		height: 100%;
+		overflow-y: unset;
+		.pages {
+			margin: 0px;
+			&>.page {
+				box-shadow: unset;
+			}
+		}
+	}
+}

client/homebrew/brewRenderer/errorBar/errorBar.jsx

@@ -2,7 +2,6 @@ require('./errorBar.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
-const cx    = require('classnames');
 
 const ErrorBar = createClass({
 	displayName     : 'ErrorBar',

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -2,7 +2,6 @@ require('./notificationPopup.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
-const cx    = require('classnames');	//Unused variable
 
 const DISMISS_KEY = 'dismiss_notification12-04-23';
 
@@ -26,8 +25,8 @@ const NotificationPopup = createClass({
 				<>
 					<li key='psa'>
 						<em>Don't store IMAGES in Google Drive</em><br />
-						Google Drive is not an image service, and will block images from being used 
-						in brews if they get more views than expected. Google has confirmed they won't fix 
+						Google Drive is not an image service, and will block images from being used
+						in brews if they get more views than expected. Google has confirmed they won't fix
 						this, so we recommend you look for another image hosting service such as imgur, ImgBB or Google Photos.
 					</li>
 

client/homebrew/editor/editor.jsx

@@ -48,6 +48,9 @@ const Editor = createClass({
 		};
 	},
 
+	editor     : React.createRef(null),
+	codeEditor : React.createRef(null),
+
 	isText  : function() {return this.state.view == 'text';},
 	isStyle : function() {return this.state.view == 'style';},
 	isMeta  : function() {return this.state.view == 'meta';},
@@ -80,15 +83,15 @@ const Editor = createClass({
 	},
 
 	updateEditorSize : function() {
-		if(this.refs.codeEditor) {
-			let paneHeight = this.refs.main.parentNode.clientHeight;
+		if(this.codeEditor.current) {
+			let paneHeight = this.editor.current.parentNode.clientHeight;
 			paneHeight -= SNIPPETBAR_HEIGHT;
-			this.refs.codeEditor.codeMirror.setSize(null, paneHeight);
+			this.codeEditor.current.codeMirror.setSize(null, paneHeight);
 		}
 	},
 
 	handleInject : function(injectText){
-		this.refs.codeEditor?.injectText(injectText, false);
+		this.codeEditor.current?.injectText(injectText, false);
 	},
 
 	handleViewChange : function(newView){
@@ -99,7 +102,7 @@ const Editor = createClass({
 	},
 
 	getCurrentPage : function(){
-		const lines = this.props.brew.text.split('\n').slice(0, this.refs.codeEditor.getCursorPosition().line + 1);
+		const lines = this.props.brew.text.split('\n').slice(0, this.codeEditor.current.getCursorPosition().line + 1);
 		return _.reduce(lines, (r, line)=>{
 			if(
 				(this.props.renderer == 'legacy' && line.indexOf('\\page') !== -1)
@@ -111,9 +114,9 @@ const Editor = createClass({
 	},
 
 	highlightCustomMarkdown : function(){
-		if(!this.refs.codeEditor) return;
+		if(!this.codeEditor.current) return;
 		if(this.state.view === 'text')  {
-			const codeMirror = this.refs.codeEditor.codeMirror;
+			const codeMirror = this.codeEditor.current.codeMirror;
 
 			codeMirror.operation(()=>{ // Batch CodeMirror styling
 				//reset custom text styles
@@ -302,23 +305,23 @@ const Editor = createClass({
 
 				targetLine = lineCount - 1; //Scroll to `\page`, which is one line back.
 
-				let currentY = this.refs.codeEditor.codeMirror.getScrollInfo().top;
-				let targetY  = this.refs.codeEditor.codeMirror.heightAtLine(targetLine, 'local', true);
+				let currentY = this.codeEditor.current.codeMirror.getScrollInfo().top;
+				let targetY  = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true);
 
 				//Scroll 1/10 of the way every 10ms until 1px off.
 				const incrementalScroll = setInterval(()=>{
 					currentY += (targetY - currentY) / 10;
-					this.refs.codeEditor.codeMirror.scrollTo(null, currentY);
+					this.codeEditor.current.codeMirror.scrollTo(null, currentY);
 
 					// Update target: target height is not accurate until within +-10 lines of the visible window
 					if(Math.abs(targetY - currentY > 100))
-						targetY = this.refs.codeEditor.codeMirror.heightAtLine(targetLine, 'local', true);
+						targetY = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true);
 
 					// End when close enough
 					if(Math.abs(targetY - currentY) < 1) {
-						this.refs.codeEditor.codeMirror.scrollTo(null, targetY);  // Scroll any remaining difference
-						this.refs.codeEditor.setCursorPosition({ line: targetLine + 1, ch: 0 });
-						this.refs.codeEditor.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
+						this.codeEditor.current.codeMirror.scrollTo(null, targetY);  // Scroll any remaining difference
+						this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
+						this.codeEditor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
 						clearInterval(incrementalScroll);
 					}
 				}, 10);
@@ -328,7 +331,7 @@ const Editor = createClass({
 
 	//Called when there are changes to the editor's dimensions
 	update : function(){
-		this.refs.codeEditor?.updateSize();
+		this.codeEditor.current?.updateSize();
 	},
 
 	updateEditorTheme : function(newTheme){
@@ -347,7 +350,7 @@ const Editor = createClass({
 		if(this.isText()){
 			return <>
 				<CodeEditor key='codeEditor'
-					ref='codeEditor'
+					ref={this.codeEditor}
 					language='gfm'
 					view={this.state.view}
 					value={this.props.brew.text}
@@ -359,7 +362,7 @@ const Editor = createClass({
 		if(this.isStyle()){
 			return <>
 				<CodeEditor key='codeEditor'
-					ref='codeEditor'
+					ref={this.codeEditor}
 					language='css'
 					view={this.state.view}
 					value={this.props.brew.style ?? DEFAULT_STYLE_TEXT}
@@ -384,28 +387,28 @@ const Editor = createClass({
 	},
 
 	redo : function(){
-		return this.refs.codeEditor?.redo();
+		return this.codeEditor.current?.redo();
 	},
 
 	historySize : function(){
-		return this.refs.codeEditor?.historySize();
+		return this.codeEditor.current?.historySize();
 	},
 
 	undo : function(){
-		return this.refs.codeEditor?.undo();
+		return this.codeEditor.current?.undo();
 	},
 
 	foldCode : function(){
-		return this.refs.codeEditor?.foldAllCode();
+		return this.codeEditor.current?.foldAllCode();
 	},
 
 	unfoldCode : function(){
-		return this.refs.codeEditor?.unfoldAllCode();
+		return this.codeEditor.current?.unfoldAllCode();
 	},
 
 	render : function(){
 		return (
-			<div className='editor' ref='main'>
+			<div className='editor' ref={this.editor}>
 				<SnippetBar
 					brew={this.props.brew}
 					view={this.state.view}
@@ -421,7 +424,7 @@ const Editor = createClass({
 					historySize={this.historySize()}
 					currentEditorTheme={this.state.editorTheme}
 					updateEditorTheme={this.updateEditorTheme}
-					cursorPos={this.refs.codeEditor?.getCursorPosition() || {}} />
+					cursorPos={this.codeEditor.current?.getCursorPosition() || {}} />
 
 				{this.renderEditor()}
 			</div>

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -3,7 +3,6 @@ require('./metadataEditor.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
-const cx    = require('classnames');
 const request = require('../../utils/request-middleware.js');
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Combobox = require('client/components/combobox.jsx');

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -161,7 +161,7 @@ const Snippetbar = createClass({
 						onClick={this.props.unfoldCode} >
 						<i className='fas fa-expand-alt' />
 					</div>
-				</>
+				</>;
 
 		}
 
@@ -181,7 +181,7 @@ const Snippetbar = createClass({
 				<i className='fas fa-palette' />
 				{this.state.themeSelector && this.renderThemeSelector()}
 			</div>
-			
+
 			<div className='divider'></div>
 			<div className={cx('text', { selected: this.props.view === 'text' })}
 				 onClick={()=>this.props.onViewChange('text')}>

client/homebrew/homebrew.jsx

@@ -10,7 +10,6 @@ const UserPage = require('./pages/userPage/userPage.jsx');
 const SharePage = require('./pages/sharePage/sharePage.jsx');
 const NewPage = require('./pages/newPage/newPage.jsx');
 const ErrorPage = require('./pages/errorPage/errorPage.jsx');
-const PrintPage = require('./pages/printPage/printPage.jsx');
 const AccountPage = require('./pages/accountPage/accountPage.jsx');
 
 const WithRoute = (props)=>{
@@ -72,15 +71,13 @@ const Homebrew = createClass({
 						<Route path='/new/:id' element={<WithRoute el={NewPage} brew={this.props.brew} />} />
 						<Route path='/new' element={<WithRoute el={NewPage}/>} />
 						<Route path='/user/:username' element={<WithRoute el={UserPage} brews={this.props.brews} />} />
-						<Route path='/print/:id' element={<WithRoute el={PrintPage} brew={this.props.brew} />} />
-						<Route path='/print' element={<WithRoute el={PrintPage} />} />
 						<Route path='/changelog' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
 						<Route path='/faq' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
 						<Route path='/account' element={<WithRoute el={AccountPage} brew={this.props.brew} accountDetails={this.props.brew.accountDetails} />} />
 						<Route path='/legacy' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
 						<Route path='/error' element={<WithRoute el={ErrorPage} brew={this.props.brew} />} />
-					  	<Route path='/' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
-					  	<Route path='/*' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
+						<Route path='/' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
+						<Route path='/*' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
 					</Routes>
 				</div>
 			</Router>
@@ -88,15 +85,4 @@ const Homebrew = createClass({
 	}
 });
 
-module.exports = Homebrew;
-
-//TODO: Nicer Error page instead of just "cant get that"
-// 	'/share/:id' : (args)=>{
-// 		if(!this.props.brew.shareId){
-// 			return <ErrorPage errorId={args.id}/>;
-// 		}
-//
-// 		return <SharePage
-// 			id={args.id}
-// 			brew={this.props.brew} />;
-// 	},
+module.exports = Homebrew;

client/homebrew/navbar/error-navitem.jsx

@@ -42,7 +42,7 @@ const ErrorNavItem = createClass({
 				</div>
 			</Nav.item>;
 		}
-		
+
 		if(status === 412) {
 			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 				Oops!
@@ -51,7 +51,7 @@ const ErrorNavItem = createClass({
 				</div>
 			</Nav.item>;
 		}
-		
+
 		if(HBErrorCode === '04') {
 			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 				Oops!
@@ -76,10 +76,10 @@ const ErrorNavItem = createClass({
 		if(response.body?.errors?.[0].reason == 'storageQuotaExceeded') {
 			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 			Oops!
-			<div className='errorContainer' onClick={clearError}>
+				<div className='errorContainer' onClick={clearError}>
 				Can't save because your Google Drive seems to be full!
-			</div>
-		</Nav.item>;
+				</div>
+			</Nav.item>;
 		}
 
 		if(response.req.url.match(/^\/api.*Google.*$/m)){

client/homebrew/navbar/help.navitem.jsx

@@ -1,6 +1,4 @@
 const React = require('react');
-const createClass = require('create-react-class');
-const _ = require('lodash');
 const dedent = require('dedent-tabs').default;
 
 const Nav = require('naturalcrit/nav/nav.jsx');

client/homebrew/navbar/metadata.navitem.jsx

@@ -1,6 +1,5 @@
 const React = require('react');
 const createClass = require('create-react-class');
-const _ = require('lodash');
 const Moment = require('moment');
 
 const Nav = require('naturalcrit/nav/nav.jsx');

client/homebrew/navbar/newbrew.navitem.jsx

@@ -7,58 +7,58 @@ const BREWKEY  = 'homebrewery-new';
 const STYLEKEY = 'homebrewery-new-style';
 const METAKEY  = 'homebrewery-new-meta';
 
-const NewBrew = () => {   
-    const handleFileChange = (e) => {
-        const file = e.target.files[0];
-        if (file) {
-            const reader = new FileReader();
-            reader.onload = (e) => {
-                const fileContent = e.target.result;
-                const newBrew = {
-                    text: fileContent,
-                    style: ''
-                };
-                if(fileContent.startsWith('```metadata')) {
-                    splitTextStyleAndMetadata(newBrew); // Modify newBrew directly
-                    localStorage.setItem(BREWKEY, newBrew.text);
-                    localStorage.setItem(STYLEKEY, newBrew.style);
-                    localStorage.setItem(METAKEY, JSON.stringify(_.pick(newBrew, ['title', 'description', 'tags', 'systems', 'renderer', 'theme', 'lang'])));
-                    window.location.href = '/new';
-                } else {
-                    alert('This file is invalid, please, enter a valid file');
-                }
-            };
-            reader.readAsText(file);
-        }
-    };
+const NewBrew = ()=>{
+	const handleFileChange = (e)=>{
+		const file = e.target.files[0];
+		if(file) {
+			const reader = new FileReader();
+			reader.onload = (e)=>{
+				const fileContent = e.target.result;
+				const newBrew = {
+					text  : fileContent,
+					style : ''
+				};
+				if(fileContent.startsWith('```metadata')) {
+					splitTextStyleAndMetadata(newBrew); // Modify newBrew directly
+					localStorage.setItem(BREWKEY, newBrew.text);
+					localStorage.setItem(STYLEKEY, newBrew.style);
+					localStorage.setItem(METAKEY, JSON.stringify(_.pick(newBrew, ['title', 'description', 'tags', 'systems', 'renderer', 'theme', 'lang'])));
+					window.location.href = '/new';
+				} else {
+					alert('This file is invalid, please, enter a valid file');
+				}
+			};
+			reader.readAsText(file);
+		}
+	};
 
-    return (
-        <Nav.dropdown>
-            <Nav.item
-                className='new'
-                color='purple'
-                icon='fa-solid fa-plus-square'>
+	return (
+		<Nav.dropdown>
+			<Nav.item
+				className='new'
+				color='purple'
+				icon='fa-solid fa-plus-square'>
                 new
-            </Nav.item>
-            <Nav.item
-                className='fromBlank'
-                href='/new'
-                newTab={true}
-                color='purple'
-                icon='fa-solid fa-file'>
+			</Nav.item>
+			<Nav.item
+				className='fromBlank'
+				href='/new'
+				newTab={true}
+				color='purple'
+				icon='fa-solid fa-file'>
                 from blank
-            </Nav.item>
+			</Nav.item>
 
-            <Nav.item
-                className='fromFile'
-                color='purple'
-                icon='fa-solid fa-upload'
-                onClick={() => { document.getElementById('uploadTxt').click(); }}>
-                <input id="uploadTxt" className='newFromLocal' type="file" onChange={handleFileChange} style={{ display: 'none' }} />
+			<Nav.item
+				className='fromFile'
+				color='purple'
+				icon='fa-solid fa-upload'
+				onClick={()=>{ document.getElementById('uploadTxt').click(); }}>
+				<input id='uploadTxt' className='newFromLocal' type='file' onChange={handleFileChange} style={{ display: 'none' }} />
                 from file
-            </Nav.item>
-        </Nav.dropdown>
-    );
+			</Nav.item>
+		</Nav.dropdown>
+	);
 };
 
 module.exports = NewBrew;

client/homebrew/navbar/print.navitem.jsx

@@ -1,9 +1,9 @@
 const React = require('react');
-const createClass = require('create-react-class');
 const Nav = require('naturalcrit/nav/nav.jsx');
+const { printCurrentBrew } = require('../../../shared/helpers.js');
 
-module.exports = function(props){
-	return <Nav.item newTab={true} href={`/print/${props.shareId}?dialog=true`} color='purple' icon='far fa-file-pdf'>
+module.exports = function(){
+	return <Nav.item onClick={printCurrentBrew} color='purple' icon='far fa-file-pdf'>
 		get PDF
 	</Nav.item>;
 };

client/homebrew/navbar/reddit.navitem.jsx

@@ -1,9 +1,7 @@
 const React = require('react');
 const createClass = require('create-react-class');
-const cx = require('classnames');
 const Nav = require('naturalcrit/nav/nav.jsx');
 
-const MAX_URL_SIZE = 2083;
 const MAIN_URL = 'https://www.reddit.com/r/UnearthedArcana/submit?selftext=true';
 
 

client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx

@@ -1,8 +1,6 @@
 require('./brewItem.less');
 const React = require('react');
 const createClass = require('create-react-class');
-const _     = require('lodash');
-const cx    = require('classnames');
 const moment = require('moment');
 const request = require('../../../../utils/request-middleware.js');
 

client/homebrew/pages/basePages/listPage/listPage.jsx

@@ -262,8 +262,8 @@ const ListPage = createClass({
 	render : function(){
 		return <div className='listPage sitePage'>
 			{/*<style>@layer V3_5ePHB, bundle;</style>*/}
-			<link href='/themes/V3/Blank/style.css' type="text/css" rel='stylesheet'/>
-			<link href='/themes/V3/5ePHB/style.css' type="text/css" rel='stylesheet'/>
+			<link href='/themes/V3/Blank/style.css' type='text/css' rel='stylesheet'/>
+			<link href='/themes/V3/5ePHB/style.css' type='text/css' rel='stylesheet'/>
 			{this.props.navItems}
 			{this.renderSortOptions()}
 			{this.renderTagsOptions()}

client/homebrew/pages/editPage/editPage.jsx

@@ -11,7 +11,7 @@ const Navbar = require('../../navbar/navbar.jsx');
 
 const NewBrew = require('../../navbar/newbrew.navitem.jsx');
 const HelpNavItem = require('../../navbar/help.navitem.jsx');
-const PrintLink = require('../../navbar/print.navitem.jsx');
+const PrintNavItem = require('../../navbar/print.navitem.jsx');
 const ErrorNavItem = require('../../navbar/error-navitem.jsx');
 const Account = require('../../navbar/account.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
@@ -23,6 +23,7 @@ const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 const Markdown = require('naturalcrit/markdown.js');
 
 const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
+const { printCurrentBrew } = require('../../../../shared/helpers.js');
 
 const googleDriveIcon = require('../../googleDrive.svg');
 
@@ -54,6 +55,8 @@ const EditPage = createClass({
 			currentEditorPage      : 0
 		};
 	},
+
+	editor    : React.createRef(null),
 	savedBrew : null,
 
 	componentDidMount : function(){
@@ -93,7 +96,7 @@ const EditPage = createClass({
 		const S_KEY = 83;
 		const P_KEY = 80;
 		if(e.keyCode == S_KEY) this.trySave(true);
-		if(e.keyCode == P_KEY) window.open(`/print/${this.processShareId()}?dialog=true`, '_blank').focus();
+		if(e.keyCode == P_KEY) printCurrentBrew();
 		if(e.keyCode == P_KEY || e.keyCode == S_KEY){
 			e.stopPropagation();
 			e.preventDefault();
@@ -101,7 +104,7 @@ const EditPage = createClass({
 	},
 
 	handleSplitMove : function(){
-		this.refs.editor.update();
+		this.editor.current.update();
 	},
 
 	handleTextChange : function(text){
@@ -113,7 +116,7 @@ const EditPage = createClass({
 			brew              : { ...prevState.brew, text: text },
 			isPending         : true,
 			htmlErrors        : htmlErrors,
-			currentEditorPage : this.refs.editor.getCurrentPage() - 1 //Offset index since Marked starts pages at 0
+			currentEditorPage : this.editor.current.getCurrentPage() - 1 //Offset index since Marked starts pages at 0
 		}), ()=>{if(this.state.autoSave) this.trySave();});
 	},
 
@@ -376,7 +379,7 @@ const EditPage = createClass({
 						post to reddit
 					</Nav.item>
 				</Nav.dropdown>
-				<PrintLink shareId={this.processShareId()} />
+				<PrintNavItem />
 				<RecentNavItem brew={this.state.brew} storageKey='edit' />
 				<Account />
 			</Nav.section>
@@ -390,9 +393,9 @@ const EditPage = createClass({
 			{this.renderNavbar()}
 
 			<div className='content'>
-				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
+				<SplitPane onDragFinish={this.handleSplitMove}>
 					<Editor
-						ref='editor'
+						ref={this.editor}
 						brew={this.state.brew}
 						onTextChange={this.handleTextChange}
 						onStyleChange={this.handleStyleChange}
@@ -408,6 +411,7 @@ const EditPage = createClass({
 						errors={this.state.htmlErrors}
 						lang={this.state.brew.lang}
 						currentEditorPage={this.state.currentEditorPage}
+						allowPrint={true}
 					/>
 				</SplitPane>
 			</div>

client/homebrew/pages/errorPage/errors/errorIndex.js

@@ -95,7 +95,7 @@ const errorIndex = (props)=>{
 		**Current Authors:** ${props.brew.authors?.map((author)=>{return `[${author}](/user/${author})`;}).join(', ') || 'Unable to list authors'}
 
 		[Click here to be redirected to the brew's share page.](/share/${props.brew.shareId})`,
-		
+
 
 		// Brew load error
 		'05' : dedent`

client/homebrew/pages/hijackPrint.js

@@ -1,12 +0,0 @@
-//TODO: Depricate
-
-module.exports = function(shareId){
-	return function(event){
-		event = event || window.event;
-		if((event.ctrlKey || event.metaKey) && event.keyCode == 80){
-			const win = window.open(`/homebrew/print/${shareId}?dialog=true`, '_blank');
-			win.focus();
-			event.preventDefault();
-		}
-	};
-};

client/homebrew/pages/homePage/homePage.jsx

@@ -37,6 +37,9 @@ const HomePage = createClass({
 			currentEditorPage : 0
 		};
 	},
+
+	editor : React.createRef(null),
+
 	handleSave : function(){
 		request.post('/api')
 			.send(this.state.brew)
@@ -50,12 +53,12 @@ const HomePage = createClass({
 			});
 	},
 	handleSplitMove : function(){
-		this.refs.editor.update();
+		this.editor.current.update();
 	},
 	handleTextChange : function(text){
 		this.setState((prevState)=>({
 			brew              : { ...prevState.brew, text: text },
-			currentEditorPage : this.refs.editor.getCurrentPage() - 1 //Offset index since Marked starts pages at 0
+			currentEditorPage : this.editor.current.getCurrentPage() - 1 //Offset index since Marked starts pages at 0
 		}));
 	},
 	renderNavbar : function(){
@@ -79,9 +82,9 @@ const HomePage = createClass({
 			{this.renderNavbar()}
 
 			<div className='content'>
-				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
+				<SplitPane onDragFinish={this.handleSplitMove}>
 					<Editor
-						ref='editor'
+						ref={this.editor}
 						brew={this.state.brew}
 						onTextChange={this.handleTextChange}
 						renderer={this.state.brew.renderer}

client/homebrew/pages/newPage/newPage.jsx

@@ -2,12 +2,12 @@
 require('./newPage.less');
 const React = require('react');
 const createClass = require('create-react-class');
-const _ = require('lodash');
 const request = require('../../utils/request-middleware.js');
 
 const Markdown = require('naturalcrit/markdown.js');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
+const PrintNavItem = require('../../navbar/print.navitem.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 const AccountNavItem = require('../../navbar/account.navitem.jsx');
 const ErrorNavItem = require('../../navbar/error-navitem.jsx');
@@ -19,6 +19,7 @@ const Editor = require('../../editor/editor.jsx');
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
 const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js');
+const { printCurrentBrew } = require('../../../../shared/helpers.js');
 
 const BREWKEY  = 'homebrewery-new';
 const STYLEKEY = 'homebrewery-new-style';
@@ -47,6 +48,8 @@ const NewPage = createClass({
 		};
 	},
 
+	editor : React.createRef(null),
+
 	componentDidMount : function() {
 		document.addEventListener('keydown', this.handleControlKeys);
 
@@ -88,7 +91,7 @@ const NewPage = createClass({
 		const S_KEY = 83;
 		const P_KEY = 80;
 		if(e.keyCode == S_KEY) this.save();
-		if(e.keyCode == P_KEY) this.print();
+		if(e.keyCode == P_KEY) printCurrentBrew();
 		if(e.keyCode == P_KEY || e.keyCode == S_KEY){
 			e.stopPropagation();
 			e.preventDefault();
@@ -96,7 +99,7 @@ const NewPage = createClass({
 	},
 
 	handleSplitMove : function(){
-		this.refs.editor.update();
+		this.editor.current.update();
 	},
 
 	handleTextChange : function(text){
@@ -107,7 +110,7 @@ const NewPage = createClass({
 		this.setState((prevState)=>({
 			brew              : { ...prevState.brew, text: text },
 			htmlErrors        : htmlErrors,
-			currentEditorPage : this.refs.editor.getCurrentPage() - 1 //Offset index since Marked starts pages at 0
+			currentEditorPage : this.editor.current.getCurrentPage() - 1 //Offset index since Marked starts pages at 0
 		}));
 		localStorage.setItem(BREWKEY, text);
 	},
@@ -179,16 +182,6 @@ const NewPage = createClass({
 		}
 	},
 
-	print : function(){
-		window.open('/print?dialog=true&local=print', '_blank');
-	},
-
-	renderLocalPrintButton : function(){
-		return <Nav.item color='purple' icon='far fa-file-pdf' onClick={this.print}>
-			get PDF
-		</Nav.item>;
-	},
-
 	renderNavbar : function(){
 		return <Navbar>
 
@@ -201,7 +194,7 @@ const NewPage = createClass({
 					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
 					this.renderSaveButton()
 				}
-				{this.renderLocalPrintButton()}
+				<PrintNavItem />
 				<HelpNavItem />
 				<RecentNavItem />
 				<AccountNavItem />
@@ -213,9 +206,9 @@ const NewPage = createClass({
 		return <div className='newPage sitePage'>
 			{this.renderNavbar()}
 			<div className='content'>
-				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
+				<SplitPane onDragFinish={this.handleSplitMove}>
 					<Editor
-						ref='editor'
+						ref={this.editor}
 						brew={this.state.brew}
 						onTextChange={this.handleTextChange}
 						onStyleChange={this.handleStyleChange}
@@ -230,6 +223,7 @@ const NewPage = createClass({
 						errors={this.state.htmlErrors}
 						lang={this.state.brew.lang}
 						currentEditorPage={this.state.currentEditorPage}
+						allowPrint={true}
 					/>
 				</SplitPane>
 			</div>

client/homebrew/pages/printPage/printPage.jsx

@@ -1,113 +0,0 @@
-require('./printPage.less');
-const React = require('react');
-const createClass = require('create-react-class');
-const _     = require('lodash');
-const cx    = require('classnames');
-const { Meta } = require('vitreum/headtags');
-const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
-const Markdown = require('naturalcrit/markdown.js');
-
-const Themes = require('themes/themes.json');
-
-const BREWKEY = 'homebrewery-new';
-const STYLEKEY = 'homebrewery-new-style';
-const METAKEY = 'homebrewery-new-meta';
-
-const PrintPage = createClass({
-	displayName     : 'PrintPage',
-	getDefaultProps : function() {
-		return {
-			query : {},
-			brew  : {
-				text     : '',
-				style    : '',
-				renderer : 'legacy',
-				lang     : ''
-			}
-		};
-	},
-
-	getInitialState : function() {
-		return {
-			brew : {
-				text     : this.props.brew.text     || '',
-				style    : this.props.brew.style    || undefined,
-				renderer : this.props.brew.renderer || 'legacy',
-				theme    : this.props.brew.theme    || '5ePHB',
-				lang	 : this.props.brew.lang     || 'en'
-			}
-		};
-	},
-
-	componentDidMount : function() {
-		if(this.props.query.local == 'print'){
-			const brewStorage  = localStorage.getItem(BREWKEY);
-			const styleStorage = localStorage.getItem(STYLEKEY);
-			const metaStorage = JSON.parse(localStorage.getItem(METAKEY));
-
-			this.setState((prevState, prevProps)=>{
-				return {
-					brew : {
-						text     : brewStorage,
-						style    : styleStorage,
-						renderer : metaStorage?.renderer || 'legacy',
-						theme    : metaStorage?.theme    || '5ePHB',
-						lang	 : metaStorage?.lang	 || 'en'
-					}
-				};
-			});
-		}
-
-		if(this.props.query.dialog) window.print();
-	},
-
-	renderStyle : function() {
-		if(!this.state.brew.style) return;
-		//return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.state.brew.style}\n} </style>` }} />;
-		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>\n${this.state.brew.style}\n</style>` }} />;
-	},
-
-	renderPages : function(){
-		if(this.state.brew.renderer == 'legacy') {
-			return _.map(this.state.brew.text.split('\\page'), (pageText, index)=>{
-				return <div
-					className='phb page'
-					id={`p${index + 1}`}
-					dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(pageText) }}
-					key={index} />;
-			});
-		} else {
-			return _.map(this.state.brew.text.split(/^\\page$/gm), (pageText, index)=>{
-				pageText += `\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(pageText) }} />
-					</div>
-				);
-			});
-		}
-
-	},
-
-	render : function(){
-		const rendererPath = this.state.brew.renderer == 'V3' ? 'V3' : 'Legacy';
-		const themePath    = this.state.brew.theme ?? '5ePHB';
-		const baseThemePath = Themes[rendererPath][themePath].baseTheme;
-
-		return <div>
-			<Meta name='robots' content='noindex, nofollow' />
-			<link href={`/themes/${rendererPath}/Blank/style.css`} type="text/css" rel='stylesheet'/>
-			{baseThemePath &&
-				<link href={`/themes/${rendererPath}/${baseThemePath}/style.css`} type="text/css" rel='stylesheet'/>
-			}
-			<link href={`/themes/${rendererPath}/${themePath}/style.css`} type="text/css" rel='stylesheet'/>
-			{/* Apply CSS from Style tab */}
-			{this.renderStyle()}
-			<div className='pages' ref='pages' lang={this.state.brew.lang}>
-				{this.renderPages()}
-			</div>
-		</div>;
-	}
-});
-
-module.exports = PrintPage;

client/homebrew/pages/printPage/printPage.less

@@ -1,3 +0,0 @@
-.printPage{
-
-}

client/homebrew/pages/sharePage/sharePage.jsx

@@ -6,14 +6,13 @@ const { Meta } = require('vitreum/headtags');
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 const MetadataNav = require('../../navbar/metadata.navitem.jsx');
-const PrintLink = require('../../navbar/print.navitem.jsx');
+const PrintNavItem = require('../../navbar/print.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const Account = require('../../navbar/account.navitem.jsx');
-
-
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
 const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
+const { printCurrentBrew } = require('../../../../shared/helpers.js');
 
 const SharePage = createClass({
 	displayName     : 'SharePage',
@@ -35,7 +34,7 @@ const SharePage = createClass({
 		if(!(e.ctrlKey || e.metaKey)) return;
 		const P_KEY = 80;
 		if(e.keyCode == P_KEY){
-			window.open(`/print/${this.processShareId()}?dialog=true`, '_blank').focus();
+			if(e.keyCode == P_KEY) printCurrentBrew();
 			e.stopPropagation();
 			e.preventDefault();
 		}
@@ -57,7 +56,7 @@ const SharePage = createClass({
 
 		return 	<Nav.item color='orange' icon='fas fa-pencil-alt' href={`/edit/${editLink}`}>
 					edit
-				</Nav.item>;
+		</Nav.item>;
 	},
 
 	render : function(){
@@ -72,7 +71,7 @@ const SharePage = createClass({
 
 				<Nav.section>
 					{this.props.brew.shareId && <>
-						<PrintLink shareId={this.processShareId()} />
+						<PrintNavItem/>
 						<Nav.dropdown>
 							<Nav.item color='red' icon='fas fa-code'>
 								source
@@ -95,7 +94,13 @@ const SharePage = createClass({
 			</Navbar>
 
 			<div className='content'>
-				<BrewRenderer text={this.props.brew.text} style={this.props.brew.style} renderer={this.props.brew.renderer} theme={this.props.brew.theme} />
+				<BrewRenderer
+					text={this.props.brew.text}
+					style={this.props.brew.style}
+					renderer={this.props.brew.renderer}
+					theme={this.props.brew.theme}
+					allowPrint={true}
+				/>
 			</div>
 		</div>;
 	}

client/homebrew/pages/userPage/userPage.jsx

@@ -1,7 +1,6 @@
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
-const cx    = require('classnames');
 
 const ListPage = require('../basePages/listPage/listPage.jsx');