From 38d8764f15da5b707ce93614ed5b4fbf912c0d3e Mon Sep 17 00:00:00 2001 From: Charlie Humphreys Date: Mon, 20 Dec 2021 00:42:53 -0600 Subject: [PATCH] Disable code folding in style tab, disable active line highlight and whitespace visibility --- client/homebrew/editor/editor.jsx | 1 + shared/naturalcrit/codeEditor/codeEditor.jsx | 89 +++++++++++-------- shared/naturalcrit/codeEditor/codeEditor.less | 16 ++-- 3 files changed, 59 insertions(+), 47 deletions(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 6eefc183f..9b7c27c34 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -208,6 +208,7 @@ const Editor = createClass({ view={this.state.view} value={this.props.brew.style ?? DEFAULT_STYLE_TEXT} onChange={this.props.onStyleChange} + enableFolding={false} rerenderParent={this.rerenderParent} /> ; } diff --git a/shared/naturalcrit/codeEditor/codeEditor.jsx b/shared/naturalcrit/codeEditor/codeEditor.jsx index 0956521f4..6d756fd6f 100644 --- a/shared/naturalcrit/codeEditor/codeEditor.jsx +++ b/shared/naturalcrit/codeEditor/codeEditor.jsx @@ -27,9 +27,9 @@ if(typeof navigator !== 'undefined'){ require('codemirror/addon/search/matchesonscrollbar.js'); require('codemirror/addon/dialog/dialog.js'); //Trailing space highlighting - require('codemirror/addon/edit/trailingspace.js'); + // require('codemirror/addon/edit/trailingspace.js'); //Active line highlighting - require('codemirror/addon/selection/active-line.js'); + // require('codemirror/addon/selection/active-line.js'); //Auto-closing //XML code folding is a requirement of the auto-closing tag feature and is not enabled require('codemirror/addon/fold/xml-fold.js'); @@ -42,10 +42,11 @@ if(typeof navigator !== 'undefined'){ const CodeEditor = createClass({ getDefaultProps : function() { return { - language : '', - value : '', - wrap : true, - onChange : ()=>{} + language : '', + value : '', + wrap : true, + onChange : ()=>{}, + enableFolding : true }; }, @@ -81,6 +82,12 @@ const CodeEditor = createClass({ } else if(this.codeMirror?.getValue() != this.props.value) { //update editor contents if brew.text is changed from outside this.codeMirror.setValue(this.props.value); } + + if(this.props.enableFolding) { + this.codeMirror.setOption('foldOptions', this.foldOptions(this.codeMirror)); + } else { + this.codeMirror.setOption('foldOptions', false); + } }, buildEditor : function() { @@ -139,39 +146,19 @@ const CodeEditor = createClass({ 'Ctrl-]' : this.unfoldAllCode, 'Cmd-]' : this.unfoldAllCode }, - foldGutter : true, - foldOptions : { - scanUp : true, - rangeFinder : CodeMirror.fold.homebrewery, - widget : (from, to)=>{ - let text = ''; - let currentLine = from.line; - const maxLength = 50; - while (currentLine <= to.line && text.length <= maxLength) { - text += this.codeMirror.getLine(currentLine); - if(currentLine < to.line) - text += ' '; - currentLine += 1; - } - - text = text.trim(); - if(text.length > maxLength) - text = `${text.substr(0, maxLength)}...`; - - return `\u21A4 ${text} \u21A6`; - } - }, - gutters : ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'], - autoCloseTags : true, - styleActiveLine : true, - showTrailingSpace : true, - specialChars : / /, - specialCharPlaceholder : function(char) { - const el = document.createElement('span'); - el.className = 'cm-space'; - el.innerHTML = ' '; - return el; - } + foldGutter : true, + foldOptions : this.foldOptions(this.codeMirror), + gutters : ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'], + autoCloseTags : true, + styleActiveLine : true, + showTrailingSpace : false, + // specialChars : / /, + // specialCharPlaceholder : function(char) { + // const el = document.createElement('span'); + // el.className = 'cm-space'; + // el.innerHTML = ' '; + // return el; + // } }); closeTag.autoCloseCurlyBraces(CodeMirror, this.codeMirror); @@ -355,6 +342,30 @@ const CodeEditor = createClass({ historySize : function(){ return this.codeMirror.doc.historySize(); }, + + foldOptions : function(cm){ + return { + scanUp : true, + rangeFinder : CodeMirror.fold.homebrewery, + widget : (from, to)=>{ + let text = ''; + let currentLine = from.line; + const maxLength = 50; + while (currentLine <= to.line && text.length <= maxLength) { + text += this.codeMirror.getLine(currentLine); + if(currentLine < to.line) + text += ' '; + currentLine += 1; + } + + text = text.trim(); + if(text.length > maxLength) + text = `${text.substr(0, maxLength)}...`; + + return `\u21A4 ${text} \u21A6`; + } + }; + }, //----------------------// render : function(){ diff --git a/shared/naturalcrit/codeEditor/codeEditor.less b/shared/naturalcrit/codeEditor/codeEditor.less index 037a326bc..bf36293ed 100644 --- a/shared/naturalcrit/codeEditor/codeEditor.less +++ b/shared/naturalcrit/codeEditor/codeEditor.less @@ -10,13 +10,13 @@ font-weight: 600; } - .cm-tab { - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAQAAACOs/baAAAARUlEQVR4nGJgIAG8JkXxUAcCtDWemcGR1lY4MvgzCEKY7jSBjgxBDAG09UEQzAe0AMwMHrSOAwEGRtpaMIwAAAAA//8DAG4ID9EKs6YqAAAAAElFTkSuQmCC) no-repeat right; - } + //.cm-tab { + // background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAQAAACOs/baAAAARUlEQVR4nGJgIAG8JkXxUAcCtDWemcGR1lY4MvgzCEKY7jSBjgxBDAG09UEQzAe0AMwMHrSOAwEGRtpaMIwAAAAA//8DAG4ID9EKs6YqAAAAAElFTkSuQmCC) no-repeat right; + //} - .cm-trailingspace { - .cm-space { - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAQAgMAAABW5NbuAAAACVBMVEVHcEwAAAAAAAAWawmTAAAAA3RSTlMAPBJ6PMxpAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAFUlEQVQI12NgwACcCQysASAEZGAAACMuAX06aCQUAAAAAElFTkSuQmCC) no-repeat right; - } - } + //.cm-trailingspace { + // .cm-space { + // background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAQAgMAAABW5NbuAAAACVBMVEVHcEwAAAAAAAAWawmTAAAAA3RSTlMAPBJ6PMxpAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAFUlEQVQI12NgwACcCQysASAEZGAAACMuAX06aCQUAAAAAElFTkSuQmCC) no-repeat right; + // } + //} } \ No newline at end of file