r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Fixes #712 (#718)

Browse source 
* added matchbrackets

* Added css for matching brackets
This commit is contained in:
Meru Patel 2018-10-08 22:44:59 +05:30 committed by Cassie Tarakajian
parent e83654f6ad
commit 19bffe58cf
4 changed files with 9 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/modules/IDE/components/Editor.jsx
View file

@ -19,6 +19,7 @@ import 'codemirror/addon/search/searchcursor';
import 'codemirror/addon/search/matchesonscrollbar'; import 'codemirror/addon/search/matchesonscrollbar';
import 'codemirror/addon/search/match-highlighter'; import 'codemirror/addon/search/match-highlighter';
import 'codemirror/addon/search/jump-to-line'; import 'codemirror/addon/search/jump-to-line';
import 'codemirror/addon/edit/matchbrackets';
import { JSHINT } from 'jshint'; import { JSHINT } from 'jshint';
import { CSSLint } from 'csslint'; import { CSSLint } from 'csslint';
@ -87,6 +88,7 @@ class Editor extends React.Component {
gutters: ['CodeMirror-foldgutter', 'CodeMirror-lint-markers'], gutters: ['CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
keyMap: 'sublime', keyMap: 'sublime',
highlightSelectionMatches: true, // highlight current search match highlightSelectionMatches: true, // highlight current search match
matchBrackets: true,
lint: { lint: {
onUpdateLinting: ((annotations) => { onUpdateLinting: ((annotations) => {
this.props.hideRuntimeErrorWarning(); this.props.hideRuntimeErrorWarning();

4
client/styles/components/_p5-contrast-codemirror-theme.scss
View file

@ -97,8 +97,8 @@ $p5-contrast-activeline: #999999;
} }
.cm-s-p5-contrast .CodeMirror-matchingbracket { .cm-s-p5-contrast .CodeMirror-matchingbracket {
outline: 1px solid $p5-contrast-darkgray; outline: 1px solid $p5-contrast-lightgray;
color: black !important; color: $p5-contrast-white !important;
} }
.cm-s-p5-contrast .cm-qualifier { .cm-s-p5-contrast .cm-qualifier {

4
client/styles/components/_p5-dark-codemirror-theme.scss
View file

@ -100,8 +100,8 @@ $p5-dark-activeline: rgb(207, 207, 207);
} }
.cm-s-p5-dark .CodeMirror-matchingbracket { .cm-s-p5-dark .CodeMirror-matchingbracket {
outline: 1px solid $p5-dark-darkgray; outline: 1px solid $p5-dark-gray;
color: black !important; color: $p5-dark-white !important;
} }
.cm-s-p5-dark .cm-qualifier { .cm-s-p5-dark .cm-qualifier {

6
client/styles/components/_p5-light-codemirror-theme.scss
View file

@ -21,7 +21,7 @@ $p5-light-white: #FDFDFD;
$p5-light-orange: #EE9900; $p5-light-orange: #EE9900;
$p5-light-lightgray: #E0D7D1; $p5-light-lightgray: #E0D7D1;
$p5-light-darkgray: #666666; $p5-light-darkgray: #666666;
$p5-light-green: #58a10b; $p5-light-green: #58a10b;
$p5-light-gutter: #f4f4f4; $p5-light-gutter: #f4f4f4;
$p5-light-number: #b5b5b5; $p5-light-number: #b5b5b5;
@ -98,8 +98,8 @@ $p5-light-activeline: rgb(207, 207, 207);
} }
.cm-s-p5-light .CodeMirror-matchingbracket { .cm-s-p5-light .CodeMirror-matchingbracket {
outline: 1px solid $p5-light-number; outline: 1px solid $p5-light-gray;
color: black !important; color: $p5-light-black !important;
} }
.cm-s-p5-light .cm-qualifier { .cm-s-p5-light .cm-qualifier {