Skip to content
Permalink
Browse files

fix(deps): Migrate to react-codemirror2 (#75)

  • Loading branch information...
michaeltaranto committed Jul 23, 2019
1 parent b2f3bc6 commit fa28632b9c64308068bf36fe8207aa741925dd4e
Showing with 203 additions and 427 deletions.
  1. +10 −3 .travis.yml
  2. +4 −1 cypress.json
  3. +2 −2 cypress/integration/smokeTest.spec.js
  4. +2 −5 cypress/support/utils.js
  5. +7 −7 package.json
  6. +17 −23 src/Playroom/Playroom.js
  7. +1 −1 src/Playroom/Playroom.less
  8. +160 −385 yarn.lock
@@ -1,10 +1,17 @@
language: node_js
notifications:
email: false
before_script:
- npm prune
addons:
apt:
packages:
# Ubuntu 16+ does not install this dependency by default, so we need to install it ourselves
- libgconf-2-4
cache:
yarn: true
directories:
- ~/.cache/Cypress
after_success:
- npm run semantic-release
- yarn semantic-release
branches:
except:
- /^v\d+\.\d+\.\d+$/
@@ -1 +1,4 @@
{}
{
"defaultCommandTimeout": 10000,
"video": false
}
@@ -1,7 +1,7 @@
import {
typeCode,
assertFrameContains,
assertTextareaContains
assertCodePaneContains
} from '../support/utils';

describe('Smoke test', () => {
@@ -16,6 +16,6 @@ describe('Smoke test', () => {
it('autocompletes', () => {
typeCode('<F{enter} c{enter}={downarrow}{enter} />');
assertFrameContains('Foo');
assertTextareaContains('<Foo color="blue" />');
assertCodePaneContains('<Foo color="blue" />');
});
});
@@ -16,9 +16,6 @@ export const assertFrameContains = async text => {
.contains(text);
};

export const assertTextareaContains = async text => {
return cy
.get('textarea')
.first()
.contains(text);
export const assertCodePaneContains = async text => {
return cy.get('.react-codemirror2').contains(text);
};
@@ -7,7 +7,7 @@
"playroom": "bin/cli.js"
},
"scripts": {
"test": "npm run lint && npm run jest && npm run cypress",
"test": "yarn lint && yarn jest && yarn cypress",
"cypress": "start-server-and-test cypress:prepare http://localhost:9000 cypress:run",
"cypress:dev": "start-server-and-test cypress:prepare http://localhost:9000 cypress:open",
"cypress:prepare": "./bin/cli.js start --config cypress/projects/basic/playroom.config.js",
@@ -27,11 +27,11 @@
},
"lint-staged": {
"**/*.{js}": [
"npm run lint",
"yarn lint",
"git add"
],
"**/*.{js,md,less}": [
"npm run format",
"yarn format",
"git add"
]
},
@@ -61,7 +61,7 @@
"babel-plugin-transform-class-properties": "^6.24.1",
"base64-url": "^2.2.0",
"buble": "^0.19.3",
"codemirror": "^5.42.0",
"codemirror": "^5.48.2",
"command-line-args": "^5.0.2",
"command-line-usage": "^5.0.5",
"css-loader": "^1.0.0",
@@ -83,7 +83,7 @@
"query-string": "^6.1.0",
"re-resizable": "^4.9.3",
"react": "^16.8.6",
"react-codemirror": "^1.0.0",
"react-codemirror2": "^6.0.0",
"react-docgen-typescript": "^1.12.2",
"react-dom": "^16.8.6",
"read-pkg-up": "^5.0.0",
@@ -100,11 +100,11 @@
"babel-jest": "^23.6.0",
"commitizen": "^3.0.4",
"commitlint-config-seek": "^1.0.0",
"cypress": "^3.1.2",
"cypress": "^3.4.0",
"cz-conventional-changelog": "^2.1.0",
"eslint": "^5.8.0",
"eslint-config-seek": "^3.2.1",
"eslint-plugin-cypress": "^2.1.2",
"eslint-plugin-cypress": "^2.6.0",
"extract-text-webpack-plugin": "^3.0.2",
"husky": "^1.1.3",
"jest": "^23.6.0",
@@ -15,8 +15,7 @@ import WindowPortal from './WindowPortal';
import UndockSvg from '../assets/icons/NewWindowSvg';
import { formatCode } from '../utils/formatting';

import codeMirror from 'codemirror';
import ReactCodeMirror from 'react-codemirror';
import { Controlled as ReactCodeMirror } from 'react-codemirror2';
import 'codemirror/mode/jsx/jsx';
import 'codemirror/addon/edit/closetag';
import 'codemirror/addon/edit/closebrackets';
@@ -125,8 +124,8 @@ export default class Playroom extends Component {
window.removeEventListener('keydown', this.handleKeyPress);
}

storeCodeMirrorRef = cmRef => {
this.cmRef = cmRef;
storeCodeMirrorInstance = editorInstance => {
this.editorInstance = editorInstance;
};

setEditorUndocked = val => {
@@ -157,8 +156,7 @@ export default class Playroom extends Component {
};

validateCode = code => {
const cm = this.cmRef.codeMirror;
cm.clearGutter(styles.gutter);
this.editorInstance.clearGutter(styles.gutter);

try {
this.setState({ renderCode: compileJsx(code) });
@@ -180,7 +178,11 @@ export default class Playroom extends Component {
const marker = document.createElement('div');
marker.classList.add(styles.marker);
marker.setAttribute('title', err.message);
cm.setGutterMarker(lineNumber - 1, styles.gutter, marker);
this.editorInstance.setGutterMarker(
lineNumber - 1,
styles.gutter,
marker
);
}
};

@@ -195,14 +197,14 @@ export default class Playroom extends Component {

const { formattedCode, line, ch } = formatCode({
code,
cursor: this.cmRef.codeMirror.getCursor()
cursor: this.editorInstance.codeMirror.getCursor()
});

this.setState({ code: formattedCode });
this.updateCode(formattedCode);
this.cmRef.codeMirror.setValue(formattedCode);
this.cmRef.codeMirror.focus();
this.cmRef.codeMirror.setCursor({
this.editorInstance.setValue(formattedCode);
this.editorInstance.focus();
this.editorInstance.setCursor({
line,
ch
});
@@ -217,7 +219,7 @@ export default class Playroom extends Component {
};

updateCodeDebounced = debounce(this.updateCode, 500);
handleChange = code => {
handleChange = (editor, data, code) => {
this.setState({ code });
this.updateCodeDebounced(code);
};
@@ -237,7 +239,6 @@ export default class Playroom extends Component {
const {
themes,
components,
frameComponent,
codeReady,
code,
renderCode,
@@ -298,10 +299,9 @@ export default class Playroom extends Component {

const codeMirrorEl = (
<ReactCodeMirror
codeMirrorInstance={codeMirror}
ref={this.storeCodeMirrorRef}
editorDidMount={this.storeCodeMirrorInstance}
value={code}
onChange={this.handleChange}
onBeforeChange={this.handleChange}
options={{
mode: 'jsx',
autoCloseTags: true,
@@ -352,13 +352,7 @@ export default class Playroom extends Component {
className={styles.previewContainer}
style={{ bottom: this.state.height }}
>
<Preview
code={renderCode}
components={components}
themes={themes}
frames={frames}
frameComponent={frameComponent}
/>
<Preview code={renderCode} themes={themes} frames={frames} />
</div>
<Resizable
className={styles.editorContainer}
@@ -83,7 +83,7 @@
}

:global {
.ReactCodeMirror {
.react-codemirror2 {
height: 100%;
}

0 comments on commit fa28632

Please sign in to comment.
You can’t perform that action at this time.