From 9dcce15790179faffc16c4b6959fe7e060d4d42c Mon Sep 17 00:00:00 2001 From: Rodrigo Kuerten <30464993+RKuerten@users.noreply.github.com> Date: Mon, 1 Mar 2021 01:03:50 -0300 Subject: [PATCH] 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 --- shared/naturalcrit/codeEditor/codeEditor.jsx | 29 ++++++++++++++------ 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/shared/naturalcrit/codeEditor/codeEditor.jsx b/shared/naturalcrit/codeEditor/codeEditor.jsx index 0f881883d2..0bbd6cef69 100644 --- 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,8 +48,8 @@ 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 }); @@ -53,17 +57,26 @@ const CodeEditor = createClass({ }, 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); } },