WOrking snippet editor - menu population regression

client/homebrew/editor/editor.jsx

@@ -21,6 +21,7 @@ const DEFAULT_STYLE_TEXT = dedent`
 					color: black;
 				}`;
 
+const DEFAULT_SNIPPET_TEXT = ``;
 let isJumping = false;
 
 const Editor = createClass({
@@ -35,6 +36,7 @@ const Editor = createClass({
 			onTextChange  : ()=>{},
 			onStyleChange : ()=>{},
 			onMetaChange  : ()=>{},
+			onSnipChange  : ()=>{},
 			reportError   : ()=>{},
 
 			onCursorPageChange : ()=>{},
@@ -51,7 +53,7 @@ const Editor = createClass({
 	getInitialState : function() {
 		return {
 			editorTheme : this.props.editorTheme,
-			view        : 'text' //'text', 'style', 'meta'
+			view        : 'text' //'text', 'style', 'meta', 'snip'
 		};
 	},
 
@@ -61,6 +63,7 @@ const Editor = createClass({
 	isText  : function() {return this.state.view == 'text';},
 	isStyle : function() {return this.state.view == 'style';},
 	isMeta  : function() {return this.state.view == 'meta';},
+	isSnip  : function() {return this.state.view == 'snip';},
 
 	componentDidMount : function() {
 
@@ -459,6 +462,20 @@ const Editor = createClass({
 					userThemes={this.props.userThemes}/>
 			</>;
 		}
+
+		if(this.isSnip()){
+			return <>
+				<CodeEditor key='codeEditor'
+					ref={this.codeEditor}
+					language='gfm'
+					view={this.state.view}
+					value={this.props.brew.snippets ?? DEFAULT_SNIPPET_TEXT}
+					onChange={this.props.onSnipChange}
+					enableFolding={true}
+					editorTheme={this.state.editorTheme}
+					rerenderParent={this.rerenderParent} />
+			</>;
+		}
 	},
 
 	redo : function(){

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -41,6 +41,7 @@ const Snippetbar = createClass({
 			unfoldCode        : ()=>{},
 			updateEditorTheme : ()=>{},
 			cursorPos         : {},
+			themeBundle       : [],
 			updateBrew        : ()=>{}
 		};
 	},
@@ -64,7 +65,7 @@ const Snippetbar = createClass({
 	},
 
 	componentDidUpdate : async function(prevProps, prevState) {
-		if(prevProps.renderer != this.props.renderer || prevProps.theme != this.props.theme || prevProps.snippetBundle != this.props.snippetBundle) {
+		if(prevProps.renderer != this.props.renderer || prevProps.theme != this.props.theme || prevProps.themeBundle != this.props.themeBundle) {
 			this.setState({
 				snippets : this.compileSnippets()
 			});
@@ -101,15 +102,12 @@ const Snippetbar = createClass({
 	},
 
 	compileSnippets : function() {
-		console.log('compileSnippets');
 		let compiledSnippets = [];
 
 		let oldSnippets = _.keyBy(compiledSnippets, 'groupName');
 
-		console.log(this.props.themesBundle);
-
-		if( this.props.themesBundle) {
-			for (let snippets of this.props?.themesBundle?.snippets) {
+		if(this.props.themeBundle.snippets) {
+			for (let snippets of this.props.themeBundle.snippets) {
 				if(typeof(snippets) == 'string')	// load staticThemes as needed; they were sent as just a file name
 					snippets = ThemeSnippets[snippets];
 
@@ -119,8 +117,8 @@ const Snippetbar = createClass({
 				oldSnippets = _.keyBy(compiledSnippets, 'groupName');
 			}
 		}
-		console.log(this.props.themesBundle);
-		const userSnippetsasJSON = brewSnippetsToJSON(this.props.brew.title, this.props.brew.snippets, this.props?.themesBundle?.snippets);
+
+		const userSnippetsasJSON = brewSnippetsToJSON(this.props.brew.title, this.props.brew.snippets, this.props.themeBundle.snippets);
 		compiledSnippets.push(userSnippetsasJSON);
 
 		return compiledSnippets;
@@ -266,6 +264,10 @@ const Snippetbar = createClass({
 					onClick={()=>this.props.onViewChange('meta')}>
 					<i className='fas fa-info-circle' />
 				</div>
+				<div className={cx('snip', { selected: this.props.view === 'snip' })}
+					onClick={()=>this.props.onViewChange('snip')}>
+					<i className='fas fa-th-list' />
+				</div>
 			</div>
 
 		</div>;

client/homebrew/editor/snippetbar/snippetbar.less

@@ -48,6 +48,9 @@
 				&.meta {
 					.tooltipLeft('Properties');
 				}
+				&.snip {
+					.tooltipLeft('Snippets');
+				}
 				&.undo {
 					.tooltipLeft('Undo');
 					font-size : 0.75em;

client/homebrew/pages/editPage/editPage.jsx

@@ -61,7 +61,6 @@ const EditPage = createClass({
 			currentEditorCursorPageNum : 1,
 			currentBrewRendererPageNum : 1,
 			displayLockMessage         : this.props.brew.lock || false,
-			snippetsBundle             : {},
 			themeBundle                : {}
 		};
 	},
@@ -143,6 +142,19 @@ const EditPage = createClass({
 		}), ()=>{if(this.state.autoSave) this.trySave();});
 	},
 
+	handleSnipChange : function(snippet){
+		console.log('Snip Change!');
+		//If there are errors, run the validator on every change to give quick feedback
+		let htmlErrors = this.state.htmlErrors;
+		if(htmlErrors.length) htmlErrors = Markdown.validate(snippet);
+
+		this.setState((prevState)=>({
+			brew       : { ...prevState.brew, snippets: snippet },
+			isPending  : true,
+			htmlErrors : htmlErrors,
+		}), ()=>{if(this.state.autoSave) this.trySave();});
+	},
+
 	handleStyleChange : function(style){
 		this.setState((prevState)=>({
 			brew      : { ...prevState.brew, style: style },
@@ -438,11 +450,12 @@ const EditPage = createClass({
 					onTextChange={this.handleTextChange}
 					onStyleChange={this.handleStyleChange}
 					onMetaChange={this.handleMetaChange}
+					onSnipChange={this.handleSnipChange}
 					reportError={this.errorReported}
 					renderer={this.state.brew.renderer}
 					userThemes={this.props.userThemes}
 					snippets={this.props.snippets}
-					snippetBundle={this.state.themeBundle.snippets}
+					themeBundle={this.state.themeBundle}
 					updateBrew={this.updateBrew}
 					onCursorPageChange={this.handleEditorCursorPageChange}
 					onViewPageChange={this.handleEditorViewPageChange}

server/homebrew.api.js

@@ -304,7 +304,9 @@ const api = {
 			}
 			//=== Static Themes ===//
 			else {
+				const localSnippets = `${req.params.renderer}_${req.params.id}`; // Just log the name for loading on client
 				const localStyle    = `@import url(\"/themes/${req.params.renderer}/${req.params.id}/style.css\");`;
+				completeSnippets.push(localSnippets);
 				completeStyles.push(`/* From Theme ${req.params.id} */\n\n${localStyle}`);
 
 				req.params.id = Themes[req.params.renderer][req.params.id].baseTheme;

shared/helpers.js

@@ -8,29 +8,26 @@ const brewSnippetsToJSON = (menuTitle, userBrewSnippets, themeBundleSnippets)=>{
 	const textSplit  = /^\\page/gm;
 	const mpAsSnippets = [];
 	// Snippets from Themes first.
-	//console.log(themeBundleSnippets);
 	if(themeBundleSnippets) {
-		console.log('Looping!');
 		for (let themes of themeBundleSnippets) {
-			const userSnippets = [];
-			console.log(themes);
-			for (let snips of themes.snippets.split(textSplit)) {
-				const name = snips.split('\n')[0];
+			if(typeof themes !== 'string') {
+				const userSnippets = [];
+				const name = themes.snippets.split('\n')[0];
 				if(name.length != 0) {
 					userSnippets.push({
-						name : name,
+						name : name.slice('\snippets '.length),
 						icon : '',
-						gen  : snips.split('\n').slice(0),
+						gen  : themes.snippets.slice(name.length + 1),
+					});
+				}
+				if(userSnippets.length > 0) {
+					mpAsSnippets.push({
+						name        : themes.name,
+						icon        : '',
+						gen         : '',
+						subsnippets : userSnippets
 					});
 				}
-			}
-			if(userSnippets.length > 0) {
-				mpAsSnippets.push({
-					name        : themes.name,
-					icon        : '',
-					gen         : '',
-					subsnippets : userSnippets
-				});
 			}
 		}
 	}