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;