Updated extraKeys (bold and italic) and added new shortcut (for span …

…tags) (#1191) * Updated extraKeys (bold and italic) and added new shortcut (for span) * Updated makeSpan shortcut to Ctrl/Cmd-M * ESLint * Space after {{ so text appears Co-authored-by: Trevor Buckner <[email protected]>
naturalcrit · Mar 1, 2021 · 9dcce15 · 9dcce15
1 parent 481c9f0
commit 9dcce15
Showing 1 changed file with 21 additions and 8 deletions.
diff --git a/shared/naturalcrit/codeEditor/codeEditor.jsx b/shared/naturalcrit/codeEditor/codeEditor.jsx
@@ -34,7 +34,11 @@ const CodeEditor = createClass({
 			mode         : this.props.language,
 			extraKeys    : {
 				'Ctrl-B' : this.makeBold,
-				'Ctrl-I' : this.makeItalic
+				'Cmd-B'  : this.makeBold,
+				'Ctrl-I' : this.makeItalic,
+				'Cmd-I'  : this.makeItalic,
+				'Ctrl-M' : this.makeSpan,
+				'Cmd-M'  : this.makeSpan,
 			}
 		});
 
@@ -44,26 +48,35 @@ const CodeEditor = createClass({
 	},
 
 	makeBold : function() {
-		const selection = this.codeMirror.getSelection();
-		this.codeMirror.replaceSelection(`**${selection}**`, 'around');
+		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();
 			this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 2 });
 		}
 	},
 
 	makeItalic : function() {
-		const selection = this.codeMirror.getSelection();
-		this.codeMirror.replaceSelection(`*${selection}*`, 'around');
+		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();
 			this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 1 });
 		}
 	},
 
-	componentDidUpdate : function(prevProps) {
-		if(this.codeMirror && this.codeMirror.getValue() != this.props.value) {
-			this.codeMirror.setValue(this.props.value);
+	makeSpan : function() {
+		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();
+			this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 2 });
+		}
+	},
+
+	componentWillReceiveProps : function(nextProps){
+		if(this.codeMirror && nextProps.value !== undefined && this.codeMirror.getValue() != nextProps.value) {
+			this.codeMirror.setValue(nextProps.value);
 		}
 	},