From dd091b9bb2d7529aef81e2b7e73652165c7635c6 Mon Sep 17 00:00:00 2001 From: David Bolack Date: Tue, 28 Oct 2025 12:32:53 -0500 Subject: [PATCH 1/2] Disable some codeEditor hotkeys if not in a gfm langauge editor. This might not be the most elegant way to do this. I was not able to find, in quick searches, a method of adding/removing extraKeys outside of instantiation. --- shared/naturalcrit/codeEditor/codeEditor.jsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/shared/naturalcrit/codeEditor/codeEditor.jsx b/shared/naturalcrit/codeEditor/codeEditor.jsx index fb69b6dcf..a530d6659 100644 --- a/shared/naturalcrit/codeEditor/codeEditor.jsx +++ b/shared/naturalcrit/codeEditor/codeEditor.jsx @@ -207,6 +207,7 @@ const CodeEditor = createClass({ }, makeHeader : function (number) { + if(this.props.language !== 'gfm') return; const selection = this.codeMirror.getSelection(); const header = Array(number).fill('#').join(''); this.codeMirror.replaceSelection(`${header} ${selection}`, 'around'); @@ -215,6 +216,7 @@ const CodeEditor = createClass({ }, makeBold : function() { + if(this.props.language !== 'gfm') 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){ @@ -224,6 +226,7 @@ const CodeEditor = createClass({ }, makeItalic : function() { + if(this.props.language !== 'gfm') 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){ @@ -233,6 +236,7 @@ const CodeEditor = createClass({ }, makeSuper : function() { + if(this.props.language !== 'gfm') 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){ @@ -242,6 +246,7 @@ const CodeEditor = createClass({ }, makeSub : function() { + if(this.props.language !== 'gfm') 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){ @@ -252,10 +257,12 @@ const CodeEditor = createClass({ makeNbsp : function() { + if(this.props.language !== 'gfm') return; this.codeMirror.replaceSelection(' ', 'end'); }, makeSpace : function() { + if(this.props.language !== 'gfm') return; const selection = this.codeMirror.getSelection(); const t = selection.slice(0, 8) === '{{width:' && selection.slice(0 -4) === '% }}'; if(t){ @@ -267,6 +274,7 @@ const CodeEditor = createClass({ }, removeSpace : function() { + if(this.props.language !== 'gfm') return; const selection = this.codeMirror.getSelection(); const t = selection.slice(0, 8) === '{{width:' && selection.slice(0 -4) === '% }}'; if(t){ @@ -276,10 +284,12 @@ const CodeEditor = createClass({ }, newColumn : function() { + if(this.props.language !== 'gfm') return; this.codeMirror.replaceSelection('\n\\column\n\n', 'end'); }, newPage : function() { + if(this.props.language !== 'gfm') return; this.codeMirror.replaceSelection('\n\\page\n\n', 'end'); }, @@ -293,6 +303,7 @@ const CodeEditor = createClass({ }, makeUnderline : function() { + if(this.props.language !== 'gfm') return; const selection = this.codeMirror.getSelection(), t = selection.slice(0, 3) === '' && selection.slice(-4) === ''; this.codeMirror.replaceSelection(t ? selection.slice(3, -4) : `${selection}`, 'around'); if(selection.length === 0){ @@ -302,6 +313,7 @@ const CodeEditor = createClass({ }, makeSpan : function() { + if(this.props.language !== 'gfm') 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){ @@ -311,6 +323,7 @@ const CodeEditor = createClass({ }, makeDiv : function() { + if(this.props.language !== 'gfm') 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){ @@ -341,6 +354,7 @@ const CodeEditor = createClass({ }, makeLink : function() { + if(this.props.language !== 'gfm') return; const isLink = /^\[(.*)\]\((.*)\)$/; const selection = this.codeMirror.getSelection().trim(); let match; @@ -358,6 +372,7 @@ const CodeEditor = createClass({ }, makeList : function(listType) { + if(this.props.language !== 'gfm') return; const selectionStart = this.codeMirror.getCursor('from'), selectionEnd = this.codeMirror.getCursor('to'); this.codeMirror.setSelection( { line: selectionStart.line, ch: 0 }, From 6b57dcf0521be60e76c230c18d258ab99f51d9f7 Mon Sep 17 00:00:00 2001 From: David Bolack Date: Mon, 29 Dec 2025 13:24:31 -0600 Subject: [PATCH 2/2] Wrapper functions --- client/components/codeEditor/codeEditor.jsx | 49 ++++++++++++++------- client/homebrew/editor/editor.jsx | 3 ++ 2 files changed, 36 insertions(+), 16 deletions(-) diff --git a/client/components/codeEditor/codeEditor.jsx b/client/components/codeEditor/codeEditor.jsx index a530d6659..0d402ae9d 100644 --- a/client/components/codeEditor/codeEditor.jsx +++ b/client/components/codeEditor/codeEditor.jsx @@ -50,6 +50,7 @@ const CodeEditor = createClass({ getDefaultProps : function() { return { language : '', + tab : 'brewText', value : '', wrap : true, onChange : ()=>{}, @@ -193,6 +194,22 @@ const CodeEditor = createClass({ this.updateSize(); }, + // Use for GFM tabs that use common hotkeys + 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()) { @@ -207,7 +224,7 @@ const CodeEditor = createClass({ }, makeHeader : function (number) { - if(this.props.language !== 'gfm') return; + if(!this.isGFM()) return; const selection = this.codeMirror.getSelection(); const header = Array(number).fill('#').join(''); this.codeMirror.replaceSelection(`${header} ${selection}`, 'around'); @@ -216,7 +233,7 @@ const CodeEditor = createClass({ }, makeBold : function() { - if(this.props.language !== 'gfm') return; + 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){ @@ -226,7 +243,7 @@ const CodeEditor = createClass({ }, makeItalic : function() { - if(this.props.language !== 'gfm') return; + 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){ @@ -236,7 +253,7 @@ const CodeEditor = createClass({ }, makeSuper : function() { - if(this.props.language !== 'gfm') return; + 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){ @@ -246,7 +263,7 @@ const CodeEditor = createClass({ }, makeSub : function() { - if(this.props.language !== 'gfm') return; + 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){ @@ -257,12 +274,12 @@ const CodeEditor = createClass({ makeNbsp : function() { - if(this.props.language !== 'gfm') return; + if(!this.isGFM()) return; this.codeMirror.replaceSelection(' ', 'end'); }, makeSpace : function() { - if(this.props.language !== 'gfm') return; + if(!this.isGFM()) return; const selection = this.codeMirror.getSelection(); const t = selection.slice(0, 8) === '{{width:' && selection.slice(0 -4) === '% }}'; if(t){ @@ -274,7 +291,7 @@ const CodeEditor = createClass({ }, removeSpace : function() { - if(this.props.language !== 'gfm') return; + if(!this.isGFM()) return; const selection = this.codeMirror.getSelection(); const t = selection.slice(0, 8) === '{{width:' && selection.slice(0 -4) === '% }}'; if(t){ @@ -284,12 +301,12 @@ const CodeEditor = createClass({ }, newColumn : function() { - if(this.props.language !== 'gfm') return; + if(!this.isGFM()) return; this.codeMirror.replaceSelection('\n\\column\n\n', 'end'); }, newPage : function() { - if(this.props.language !== 'gfm') return; + if(!this.isGFM()) return; this.codeMirror.replaceSelection('\n\\page\n\n', 'end'); }, @@ -303,7 +320,7 @@ const CodeEditor = createClass({ }, makeUnderline : function() { - if(this.props.language !== 'gfm') return; + if(!this.isGFM()) return; const selection = this.codeMirror.getSelection(), t = selection.slice(0, 3) === '' && selection.slice(-4) === ''; this.codeMirror.replaceSelection(t ? selection.slice(3, -4) : `${selection}`, 'around'); if(selection.length === 0){ @@ -313,7 +330,7 @@ const CodeEditor = createClass({ }, makeSpan : function() { - if(this.props.language !== 'gfm') return; + 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){ @@ -323,7 +340,7 @@ const CodeEditor = createClass({ }, makeDiv : function() { - if(this.props.language !== 'gfm') return; + 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){ @@ -337,7 +354,7 @@ const CodeEditor = createClass({ let cursorPos; let newComment; const selection = this.codeMirror.getSelection(); - if(this.props.language === 'gfm'){ + if(this.isGFM()){ regex = /^\s*()\s*$/gs; cursorPos = 4; newComment = ``; @@ -354,7 +371,7 @@ const CodeEditor = createClass({ }, makeLink : function() { - if(this.props.language !== 'gfm') return; + if(!this.isGFM()) return; const isLink = /^\[(.*)\]\((.*)\)$/; const selection = this.codeMirror.getSelection().trim(); let match; @@ -372,7 +389,7 @@ const CodeEditor = createClass({ }, makeList : function(listType) { - if(this.props.language !== 'gfm') return; + if(!this.isGFM()) return; const selectionStart = this.codeMirror.getCursor('from'), selectionEnd = this.codeMirror.getCursor('to'); this.codeMirror.setSelection( { line: selectionStart.line, ch: 0 }, diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 0ffd2e8a0..7bc37145d 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -440,6 +440,7 @@ const Editor = createClass({