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}