diff --git a/shared/naturalcrit/codeEditor/codeEditor.jsx b/shared/naturalcrit/codeEditor/codeEditor.jsx
index 6858d5840..6d5685cd7 100644
--- a/shared/naturalcrit/codeEditor/codeEditor.jsx
+++ b/shared/naturalcrit/codeEditor/codeEditor.jsx
@@ -53,6 +53,12 @@ const CodeEditor = createClass({
 				'Cmd-I'        : this.makeItalic,
 				'Ctrl-U'       : this.makeUnderline,
 				'Cmd-U'        : this.makeUnderline,
+				'Ctrl-.'       : this.makeNbsp,
+				'Cmd-.'        : this.makeNbsp,
+				'Shift-Ctrl-.' : this.makeSpace,
+				'Shift-Cmd-.'  : this.makeSpace,
+				'Shift-Ctrl-,' : this.removeSpace,
+				'Shift-Cmd-,'  : this.removeSpace,
 				'Ctrl-M'       : this.makeSpan,
 				'Cmd-M'        : this.makeSpan,
 				'Shift-Ctrl-M' : this.makeDiv,
@@ -85,6 +91,30 @@ const CodeEditor = createClass({
 		}
 	},
 
+	makeNbsp : function() {
+		this.codeMirror.replaceSelection(' ', 'end');
+	},
+
+	makeSpace : function() {
+		const selection = this.codeMirror.getSelection();
+		const t = selection.slice(0, 8) === '{{width:' && selection.slice(0 -4) === '% }}';
+		if(t){
+			const percent = parseInt(selection.slice(8, -4)) + 10;
+			this.codeMirror.replaceSelection(percent < 90 ? `{{width:${percent}% }}` : '{{width:100% }}', 'around');
+		} else {
+			this.codeMirror.replaceSelection(`{{width:10% }}`, 'around');
+		}
+	},
+
+	removeSpace : function() {
+		const selection = this.codeMirror.getSelection();
+		const t = selection.slice(0, 8) === '{{width:' && selection.slice(0 -4) === '% }}';
+		if(t){
+			const percent = parseInt(selection.slice(8, -4)) - 10;
+			this.codeMirror.replaceSelection(percent > 10 ? `{{width:${percent}% }}` : '', 'around');
+		}
+	},
+
 	makeUnderline : function() {
 		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');