Update Production (#1249)

* 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 * Legacy renderer (#1229) * 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 * Give user styles higher priority to still allow overrides * Apply style priority to *all* user styles * Change .legacy .v3 to .phb, .phb3 * Revert accidental color change * Fix brew styles overwriting each other. (#1230) * Fix /page not working in legacy mode. (#1233) * Fix brew styles overwriting each other. * Word wrapping, start fixing spacing on Title letter * Fix \page in legacy brews when not at line start * Default 'legacy' if not set. Auto-change styles. * Fix brew styles overwriting each other. * Word wrapping, start fixing spacing on Title letter * Fix \page in legacy brews when not at line start * Fix Page Padding * Set 'legacy' as default value if not set in brew saved file. * Apply Legacy\v3 renderer to print page (#1235)
2026-01-07 22:52:39 +00:00 · 2021-02-19 17:47:56 -05:00
parent 6a2e39355c
commit d57df84a59
53 changed files with 2068 additions and 190 deletions
--- a/client/homebrew/pages/editPage/editPage.jsx
+++ b/client/homebrew/pages/editPage/editPage.jsx
@@ -41,17 +41,18 @@ const EditPage = createClass({
 				tags        : '',
 				published   : false,
 				authors     : [],
-				systems     : []
+				systems     : [],
+				renderer    : 'legacy'
 			}
 		};
 	},

 	getInitialState : function() {
 		return {
-			brew : this.props.brew,
-
+			brew                  : this.props.brew,
 			isSaving              : false,
 			isPending             : false,
+			alertRenderChange     : false,
 			saveGoogle            : this.props.brew.googleId ? true : false,
 			confirmGoogleTransfer : false,
 			errors                : null,
@@ -66,6 +67,8 @@ const EditPage = createClass({
 			url : window.location.href
 		});

+		this.savedBrew = JSON.parse(JSON.stringify(this.props.brew)); //Deep copy
+
 		this.trySave();
 		window.onbeforeunload = ()=>{
 			if(this.state.isSaving || this.state.isPending){
@@ -101,6 +104,11 @@ const EditPage = createClass({
 	},

 	handleMetadataChange : function(metadata){
+		if(metadata.renderer != this.savedBrew.renderer){
+			this.setState({
+				alertRenderChange : true
+			});
+		}
 		this.setState((prevState)=>({
 			brew      : _.merge({}, prevState.brew, metadata),
 			isPending : true,
@@ -122,8 +130,7 @@ const EditPage = createClass({
 	},

 	hasChanges : function(){
-		const savedBrew = this.savedBrew ? this.savedBrew : this.props.brew;
-		return !_.isEqual(this.state.brew, savedBrew);
+		return !_.isEqual(this.state.brew, this.savedBrew);
 	},

 	trySave : function(){
@@ -142,6 +149,12 @@ const EditPage = createClass({
 		this.clearErrors();
 	},

+	closeAlerts : function(){
+		this.setState({
+			alertRenderChange : false
+		});
+	},
+
 	toggleGoogleStorage : function(){
 		this.setState((prevState)=>({
 			saveGoogle : !prevState.saveGoogle,
@@ -294,7 +307,7 @@ const EditPage = createClass({
 			} catch (e){}

 			if(this.state.errors.status == '401'){
-				return <Nav.item className='save error' icon='fa-warning'>
+				return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 					Oops!
 					<div className='errorContainer' onClick={this.clearErrors}>
 					You must be signed in to a Google account
@@ -312,7 +325,7 @@ const EditPage = createClass({
 				</Nav.item>;
 			}

-			return <Nav.item className='save error' icon='fa-warning'>
+			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 				Oops!
 				<div className='errorContainer'>
 					Looks like there was a problem saving. <br />
@@ -325,16 +338,25 @@ const EditPage = createClass({
 		}

 		if(this.state.isSaving){
-			return <Nav.item className='save' icon='fa-spinner fa-spin'>saving...</Nav.item>;
+			return <Nav.item className='save' icon='fas fa-spinner fa-spin'>saving...</Nav.item>;
 		}
 		if(this.state.isPending && this.hasChanges()){
-			return <Nav.item className='save' onClick={this.save} color='blue' icon='fa-save'>Save Now</Nav.item>;
+			return <Nav.item className='save' onClick={this.save} color='blue' icon='fas fa-save'>Save Now</Nav.item>;
 		}
 		if(!this.state.isPending && !this.state.isSaving){
 			return <Nav.item className='save saved'>saved.</Nav.item>;
 		}
 	},

+	// {this.state.alertRenderChange &&
+	// 	<div className='errorContainer' onClick={this.closeAlerts}>
+	// 	Rendering mode for this brew has been changed! Refresh the page to load the new renderer.<br />
+	// 		<div className='confirm'>
+	// 			OK
+	// 		</div>
+	// 	</div>
+	// }
+
 	processShareId : function() {
 		return this.state.brew.googleId ?
 					 this.state.brew.googleId + this.state.brew.shareId :
@@ -351,7 +373,7 @@ const EditPage = createClass({
 				{this.renderGoogleDriveIcon()}
 				{this.renderSaveButton()}
 				<ReportIssue />
-				<Nav.item newTab={true} href={`/share/${this.processShareId()}`} color='teal' icon='fa-share-alt'>
+				<Nav.item newTab={true} href={`/share/${this.processShareId()}`} color='teal' icon='fas fa-share-alt'>
 					Share
 				</Nav.item>
 				<PrintLink shareId={this.processShareId()} />
@@ -374,8 +396,9 @@ const EditPage = createClass({
 						onChange={this.handleTextChange}
 						metadata={this.state.brew}
 						onMetadataChange={this.handleMetadataChange}
+						renderer={this.state.brew.renderer}
 					/>
-					<BrewRenderer text={this.state.brew.text} errors={this.state.htmlErrors} />
+					<BrewRenderer text={this.state.brew.text} errors={this.state.htmlErrors} renderer={this.state.brew.renderer} />
 				</SplitPane>
 			</div>
 		</div>;
--- a/client/homebrew/pages/editPage/editPage.less
+++ b/client/homebrew/pages/editPage/editPage.less
@@ -1,8 +1,14 @@
-
+@keyframes glideDown {
+	0%   {transform : translate(-50% + 3px, 0px);
+				opacity   : 0;}
+	100% {transform : translate(-50% + 3px, 10px);
+				opacity   : 1;}
+}
 .editPage{
 	.navItem.save{
 		width      : 106px;
 		text-align : center;
+		position   : relative;
 		&.saved{
 			cursor : initial;
 			color  : #666;
@@ -21,12 +27,15 @@
 		margin  : -5px;
 	}
 	.errorContainer{
+		animation-name: glideDown;
+		animation-duration: 0.4s;
 		position         : absolute;
 		top              : 100%;
 		left             : 50%;
-		z-index          : 1000;
+		z-index          : 100000;
 		width            : 140px;
 		padding          : 3px;
+		color            : white;
 		background-color : #333;
 		border           : 3px solid #444;
 		border-radius    : 5px;