Merge branch 'addShareDropDown' of https://github.com/G-Ambatte/homebrewery into addShareDropDown

client/homebrew/editor/editor.jsx

@@ -3,17 +3,26 @@ const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
 const cx = require('classnames');
+const dedent = require('dedent-tabs').default;
 
 const CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx');
 const SnippetBar = require('./snippetbar/snippetbar.jsx');
 const MetadataEditor = require('./metadataEditor/metadataEditor.jsx');
 
+const SNIPPETBAR_HEIGHT = 25;
+const DEFAULT_STYLE_TEXT = dedent`
+				/*=======---  Example CSS styling  ---=======*/
+				/* Any CSS here will apply to your document! */
+
+				.myExampleClass {
+					color: black;
+				}`;
 
 const splice = function(str, index, inject){
 	return str.slice(0, index) + inject + str.slice(index);
 };
 
-const SNIPPETBAR_HEIGHT = 25;
+
 
 const Editor = createClass({
 	getDefaultProps : function() {
@@ -176,7 +185,7 @@ const Editor = createClass({
 			return <CodeEditor key='style'
 				ref='codeEditor'
 				language='css'
-				value={this.props.brew.style}
+				value={this.props.brew.style ?? DEFAULT_STYLE_TEXT}
 				onChange={this.props.onStyleChange} />;
 		}
 		if(this.isMeta()){

client/homebrew/pages/newPage/newPage.jsx

@@ -1,9 +1,9 @@
+/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
 require('./newPage.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
 const request = require('superagent');
-const dedent = require('dedent-tabs').default;
 
 const Markdown = require('naturalcrit/markdown.js');
 
@@ -17,20 +17,15 @@ const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
 const Editor = require('../../editor/editor.jsx');
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
-const KEY = 'homebrewery-new';
+const BREWKEY = 'homebrewery-new';
+const STYLEKEY = 'homebrewery-new-style';
+
 
 const NewPage = createClass({
 	getDefaultProps : function() {
 		return {
 			brew : {
-				text  : '',
+				text      : '',
-				style : dedent`
-										/*=======---  Example CSS styling  ---=======*/
-										/* Any CSS here will apply to your document! */
-										
-										.myExampleClass {
-							 			  color: black;
-										}`,
 				shareId   : null,
 				editId    : null,
 				createdAt : null,
@@ -51,7 +46,6 @@ const NewPage = createClass({
 		return {
 			brew : {
 				text        : this.props.brew.text || '',
-				style       : this.props.brew.style || '',
 				gDrive      : false,
 				title       : this.props.brew.title || '',
 				description : this.props.brew.description || '',
@@ -70,10 +64,15 @@ const NewPage = createClass({
 	},
 
 	componentDidMount : function() {
-		const storage = localStorage.getItem(KEY);
+		const brewStorage  = localStorage.getItem(BREWKEY);
-		if(!this.props.brew.text && storage){
+		const styleStorage = localStorage.getItem(STYLEKEY);
+
+		if(!this.props.brew.text || !this.props.brew.style){
 			this.setState({
-				brew : { text: storage }
+				brew : {
+					text  : this.props.brew.text  || (brewStorage  ?? ''),
+					style : this.props.brew.style || (styleStorage ?? undefined)
+				}
 			});
 		}
 
@@ -112,13 +111,14 @@ const NewPage = createClass({
 			brew       : _.merge({}, prevState.brew, { text: text }),
 			htmlErrors : htmlErrors
 		}));
-		localStorage.setItem(KEY, text);
+		localStorage.setItem(BREWKEY, text);
 	},
 
 	handleStyleChange : function(style){
 		this.setState((prevState)=>({
 			brew : _.merge({}, prevState.brew, { style: style }),
 		}));
+		localStorage.setItem(STYLEKEY, style);
 	},
 
 	handleMetaChange : function(metadata){
@@ -135,10 +135,18 @@ const NewPage = createClass({
 
 		console.log('saving new brew');
 
+		const brew = this.state.brew;
+		// Split out CSS to Style if CSS codefence exists
+		if(brew.text.startsWith('```css') && brew.text.indexOf('```\n\n') > 0) {
+			const index = brew.text.indexOf('```\n\n');
+			brew.style = `${brew.style ? `${brew.style}\n` : ''}${brew.text.slice(7, index - 1)}`;
+			brew.text = brew.text.slice(index + 5);
+		};
+
 		if(this.state.saveGoogle) {
 			const res = await request
 			.post('/api/newGoogle/')
-			.send(this.state.brew)
+			.send(brew)
 			.catch((err)=>{
 				console.log(err.status === 401
 					? 'Not signed in!'
@@ -148,11 +156,12 @@ const NewPage = createClass({
 			});
 
 			const brew = res.body;
-			localStorage.removeItem(KEY);
+			localStorage.removeItem(BREWKEY);
+			localStorage.removeItem(STYLEKEY);
 			window.location = `/edit/${brew.googleId}${brew.editId}`;
 		} else {
 			request.post('/api')
-			.send(this.state.brew)
+			.send(brew)
 			.end((err, res)=>{
 				if(err){
 					this.setState({
@@ -162,7 +171,8 @@ const NewPage = createClass({
 				}
 				window.onbeforeunload = function(){};
 				const brew = res.body;
-				localStorage.removeItem(KEY);
+				localStorage.removeItem(BREWKEY);
+				localStorage.removeItem(STYLEKEY);
 				window.location = `/edit/${brew.editId}`;
 			});
 		}

server.js

@@ -9,7 +9,6 @@ const GoogleActions = require('./server/googleActions.js');
 const serveCompressedStaticAssets = require('./server/static-assets.mv.js');
 const sanitizeFilename = require('sanitize-filename');
 const asyncHandler = require('express-async-handler');
-const dedent = require('dedent-tabs').default;
 
 const brewAccessTypes = ['edit', 'share', 'raw'];
 
@@ -37,14 +36,6 @@ const getBrewFromId = asyncHandler(async (id, accessType)=>{
 		const index = brew.text.indexOf('```\n\n');
 		brew.style = brew.text.slice(7, index - 1);
 		brew.text = brew.text.slice(index + 5);
-	} else {
-		brew.style = dedent`
-			/*=======---  Example CSS styling  ---=======*/
-			/* Any CSS here will apply to your document! */
-
-			.myExampleClass {
-				color: black;
-			}`;
 	}
 	return brew;
 });

server/homebrew.api.js

@@ -20,10 +20,12 @@ const getGoodBrewTitle = (text)=>{
 };
 
 const mergeBrewText = (text, style)=>{
-	text = `\`\`\`css\n` +
+	if(typeof style !== 'undefined') {
-		   	 `${style}\n` +
+		text = `\`\`\`css\n` +
-				 `\`\`\`\n\n` +
+					 `${style}\n` +
-				 `${text}`;
+					 `\`\`\`\n\n` +
+					 `${text}`;
+	}
 	return text;
 };