diff --git a/client/components/codeEditor/codeEditor.jsx b/client/components/codeEditor/codeEditor.jsx
index 3ec986689..cd140ad07 100644
--- a/client/components/codeEditor/codeEditor.jsx
+++ b/client/components/codeEditor/codeEditor.jsx
@@ -12,6 +12,7 @@ const CodeEditor = createReactClass({
 	getDefaultProps : function() {
 		return {
 			language      : '',
+			tab           : 'brewText',
 			value         : '',
 			wrap          : true,
 			onChange      : ()=>{},
@@ -186,6 +187,22 @@ const CodeEditor = createReactClass({
 		this.updateSize();
 	},
 
+	// Use for GFM tabs that use common hot-keys
+	isGFM : function() {
+		if((this.isGFM()) || (this.props.tab === 'brewSnippets')) return true;
+		return false;
+	},
+
+	isBrewText : function() {
+		if(this.isGFM()) return true;
+		return false;
+	},
+
+	isBrewSnippets : function() {
+		if(this.props.tab === 'brewSnippets') return true;
+		return false;
+	},
+
 	indent : function () {
 		const cm = this.codeMirror;
 		if(cm.somethingSelected()) {
@@ -200,6 +217,7 @@ const CodeEditor = createReactClass({
 	},
 
 	makeHeader : function (number) {
+		if(!this.isGFM()) return;
 		const selection = this.codeMirror?.getSelection();
 		const header = Array(number).fill('#').join('');
 		this.codeMirror?.replaceSelection(`${header} ${selection}`, 'around');
@@ -208,6 +226,7 @@ const CodeEditor = createReactClass({
 	},
 
 	makeBold : function() {
+		if(!this.isGFM()) return;
 		const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 2) === '**' && selection.slice(-2) === '**';
 		this.codeMirror?.replaceSelection(t ? selection.slice(2, -2) : `**${selection}**`, 'around');
 		if(selection.length === 0){
@@ -217,7 +236,8 @@ const CodeEditor = createReactClass({
 	},
 
 	makeItalic : function() {
-		const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 1) === '*' && selection.slice(-1) === '*';
+		if(!this.isGFM()) return;
+		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 1) === '*' && selection.slice(-1) === '*';
 		this.codeMirror?.replaceSelection(t ? selection.slice(1, -1) : `*${selection}*`, 'around');
 		if(selection.length === 0){
 			const cursor = this.codeMirror?.getCursor();
@@ -226,7 +246,8 @@ const CodeEditor = createReactClass({
 	},
 
 	makeSuper : function() {
-		const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 1) === '^' && selection.slice(-1) === '^';
+		if(!this.isGFM()) return;
+		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 1) === '^' && selection.slice(-1) === '^';
 		this.codeMirror?.replaceSelection(t ? selection.slice(1, -1) : `^${selection}^`, 'around');
 		if(selection.length === 0){
 			const cursor = this.codeMirror?.getCursor();
@@ -235,7 +256,8 @@ const CodeEditor = createReactClass({
 	},
 
 	makeSub : function() {
-		const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 2) === '^^' && selection.slice(-2) === '^^';
+		if(!this.isGFM()) return;
+		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '^^' && selection.slice(-2) === '^^';
 		this.codeMirror?.replaceSelection(t ? selection.slice(2, -2) : `^^${selection}^^`, 'around');
 		if(selection.length === 0){
 			const cursor = this.codeMirror?.getCursor();
@@ -245,10 +267,12 @@ const CodeEditor = createReactClass({
 
 
 	makeNbsp : function() {
+		if(!this.isGFM()) return;
 		this.codeMirror?.replaceSelection(' ', 'end');
 	},
 
 	makeSpace : function() {
+		if(!this.isGFM()) return;
 		const selection = this.codeMirror?.getSelection();
 		const t = selection.slice(0, 8) === '{{width:' && selection.slice(0 -4) === '% }}';
 		if(t){
@@ -260,6 +284,7 @@ const CodeEditor = createReactClass({
 	},
 
 	removeSpace : function() {
+		if(!this.isGFM()) return;
 		const selection = this.codeMirror?.getSelection();
 		const t = selection.slice(0, 8) === '{{width:' && selection.slice(0 -4) === '% }}';
 		if(t){
@@ -269,10 +294,12 @@ const CodeEditor = createReactClass({
 	},
 
 	newColumn : function() {
+		if(!this.isGFM()) return;
 		this.codeMirror?.replaceSelection('\n\\column\n\n', 'end');
 	},
 
 	newPage : function() {
+		if(!this.isGFM()) return;
 		this.codeMirror?.replaceSelection('\n\\page\n\n', 'end');
 	},
 
@@ -286,7 +313,8 @@ const CodeEditor = createReactClass({
 	},
 
 	makeUnderline : function() {
-		const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 3) === '<u>' && selection.slice(-4) === '</u>';
+		if(!this.isGFM()) return;
+		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 3) === '<u>' && selection.slice(-4) === '</u>';
 		this.codeMirror?.replaceSelection(t ? selection.slice(3, -4) : `<u>${selection}</u>`, 'around');
 		if(selection.length === 0){
 			const cursor = this.codeMirror?.getCursor();
@@ -295,7 +323,8 @@ const CodeEditor = createReactClass({
 	},
 
 	makeSpan : function() {
-		const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}';
+		if(!this.isGFM()) return;
+		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}';
 		this.codeMirror?.replaceSelection(t ? selection.slice(2, -2) : `{{ ${selection}}}`, 'around');
 		if(selection.length === 0){
 			const cursor = this.codeMirror?.getCursor();
@@ -304,7 +333,8 @@ const CodeEditor = createReactClass({
 	},
 
 	makeDiv : function() {
-		const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}';
+		if(!this.isGFM()) return;
+		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}';
 		this.codeMirror?.replaceSelection(t ? selection.slice(2, -2) : `{{\n${selection}\n}}`, 'around');
 		if(selection.length === 0){
 			const cursor = this.codeMirror?.getCursor();
@@ -317,7 +347,7 @@ const CodeEditor = createReactClass({
 		let cursorPos;
 		let newComment;
 		const selection = this.codeMirror?.getSelection();
-		if(this.props.language === 'gfm'){
+		if(this.isGFM()){
 			regex = /^\s*(<!--\s?)(.*?)(\s?-->)\s*$/gs;
 			cursorPos = 4;
 			newComment = `<!-- ${selection} -->`;
@@ -334,6 +364,7 @@ const CodeEditor = createReactClass({
 	},
 
 	makeLink : function() {
+		if(!this.isGFM()) return;
 		const isLink = /^\[(.*)\]\((.*)\)$/;
 		const selection = this.codeMirror?.getSelection().trim();
 		let match;
@@ -351,7 +382,8 @@ const CodeEditor = createReactClass({
 	},
 
 	makeList : function(listType) {
-		const selectionStart = this.codeMirror?.getCursor('from'), selectionEnd = this.codeMirror?.getCursor('to');
+		if(!this.isGFM()) return;
+		const selectionStart = this.codeMirror.getCursor('from'), selectionEnd = this.codeMirror.getCursor('to');
 		this.codeMirror?.setSelection(
 			{ line: selectionStart.line, ch: 0 },
 			{ line: selectionEnd.line, ch: this.codeMirror?.getLine(selectionEnd.line).length }
diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx
index 6970c78e3..9707fe84f 100644
--- a/client/homebrew/editor/editor.jsx
+++ b/client/homebrew/editor/editor.jsx
@@ -86,9 +86,9 @@ const Editor = createReactClass({
 			});
 		}
 		const snippetBar = document.querySelector('.editor > .snippetBar');
-		if (!snippetBar) return;
+		if(!snippetBar) return;
 
-		this.resizeObserver = new ResizeObserver(entries => {
+		this.resizeObserver = new ResizeObserver(entries=>{
 			const height = document.querySelector('.editor > .snippetBar').offsetHeight;
 			this.setState({ snippetBarHeight: height });
 		});
@@ -117,7 +117,7 @@ const Editor = createReactClass({
 	},
 
 	componentWillUnmount() {
-		if (this.resizeObserver) this.resizeObserver.disconnect();
+		if(this.resizeObserver) this.resizeObserver.disconnect();
 	},
 
 	handleControlKeys : function(e){
@@ -337,7 +337,7 @@ const Editor = createReactClass({
 		const brewRenderer = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer')[0];
 		const currentPos = brewRenderer.scrollTop;
 		const targetPos = window.frames['BrewRenderer'].contentDocument.getElementById(`p${targetPage}`).getBoundingClientRect().top;
-		
+
 		let scrollingTimeout;
 		const checkIfScrollComplete = ()=>{	// Prevent interrupting a scroll in progress if user clicks multiple times
 			clearTimeout(scrollingTimeout);   // Reset the timer every time a scroll event occurs
@@ -392,7 +392,7 @@ const Editor = createReactClass({
 
 		isJumping = true;
 		checkIfScrollComplete();
-		if (this.codeEditor.current?.codeMirror) {
+		if(this.codeEditor.current?.codeMirror) {
 			this.codeEditor.current.codeMirror?.on('scroll', checkIfScrollComplete);
 		}
 
@@ -442,6 +442,7 @@ const Editor = createReactClass({
 				<CodeEditor key='codeEditor'
 					ref={this.codeEditor}
 					language='gfm'
+					tab='brewText'
 					view={this.state.view}
 					value={this.props.brew.text}
 					onChange={this.props.onBrewChange('text')}
@@ -455,6 +456,7 @@ const Editor = createReactClass({
 				<CodeEditor key='codeEditor'
 					ref={this.codeEditor}
 					language='css'
+					tab='brewStyles'
 					view={this.state.view}
 					value={this.props.brew.style ?? DEFAULT_STYLE_TEXT}
 					onChange={this.props.onBrewChange('style')}
@@ -484,6 +486,7 @@ const Editor = createReactClass({
 				<CodeEditor key='codeEditor'
 					ref={this.codeEditor}
 					language='gfm'
+					tab='brewSnippets'
 					view={this.state.view}
 					value={this.props.brew.snippets}
 					onChange={this.props.onBrewChange('snippets')}