diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 7cbd6bb20..12cb0aa37 100644 --- a/client/homebrew/editor/editor.jsx +++ b/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 ; } if(this.isMeta()){ diff --git a/client/homebrew/pages/newPage/newPage.jsx b/client/homebrew/pages/newPage/newPage.jsx index 14f14a987..dcaff6a31 100644 --- a/client/homebrew/pages/newPage/newPage.jsx +++ b/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 : '', - style : dedent` - /*=======--- Example CSS styling ---=======*/ - /* Any CSS here will apply to your document! */ - - .myExampleClass { - color: black; - }`, + text : '', 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); - if(!this.props.brew.text && storage){ + const brewStorage = localStorage.getItem(BREWKEY); + 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}`; }); } diff --git a/server.js b/server.js index b7e71794d..45e073065 100644 --- a/server.js +++ b/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; }); diff --git a/server/homebrew.api.js b/server/homebrew.api.js index 51c9903db..1f988761d 100644 --- a/server/homebrew.api.js +++ b/server/homebrew.api.js @@ -20,10 +20,12 @@ const getGoodBrewTitle = (text)=>{ }; const mergeBrewText = (text, style)=>{ - text = `\`\`\`css\n` + - `${style}\n` + - `\`\`\`\n\n` + - `${text}`; + if(typeof style !== 'undefined') { + text = `\`\`\`css\n` + + `${style}\n` + + `\`\`\`\n\n` + + `${text}`; + } return text; };