Change of philosophy: we now support other frameworks beside React

Author: Ives van Hoorne

package.json

@@ -78,6 +78,7 @@
     "react-deep-force-update": "^2.0.1",
     "react-dnd": "^2.1.4",
     "react-dnd-html5-backend": "^2.1.2",
+    "react-docgen": "^2.13.0",
     "react-dom": "^15.4.1",
     "react-frame-component": "^1.0.2",
     "react-icons": "^2.2.2",

src/app/pages/SandboxView/Sandbox/Editor/Content/subviews/CodeEditor/index.js

@@ -1,29 +1,16 @@
 // @flow
 import React from 'react';
 import CodeMirror from 'codemirror';
-import styled, { injectGlobal, keyframes } from 'styled-components';
-
-import 'codemirror/lib/codemirror.css';
-import 'codemirror/addon/dialog/dialog.css';
-import 'codemirror/addon/hint/show-hint.css';
-import 'codemirror/addon/tern/tern.css';
-import 'codemirror/mode/jsx/jsx';
-import 'codemirror/keymap/sublime';
-import 'codemirror/addon/fold/xml-fold'; // Needed to match JSX
-import 'codemirror/addon/edit/matchtags';
-import 'codemirror/addon/edit/closebrackets';
-import 'codemirror/addon/comment/comment';
-import 'codemirror/addon/selection/active-line';
-import 'codemirror/addon/fold/foldcode';
-import 'codemirror/addon/fold/foldgutter';
-import 'codemirror/addon/fold/brace-fold';
+import styled from 'styled-components';
+
+import { getCodeMirror } from 'app/utils/codemirror';
+
 import 'codemirror/addon/dialog/dialog';
 import 'codemirror/addon/hint/show-hint';
 import 'codemirror/addon/tern/tern';
 
 import type { Preferences } from 'app/store/preferences/reducer';
 
-import theme from '../../../../../../../../common/theme';
 import Header from './Header';
 
 const documentCache = {};
@@ -45,15 +32,15 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 100%;
+  height: calc(100% - 3rem);
   overflow: auto;
 `;
 
 const CodeContainer = styled.div`
   flex: 1 1 auto;
   position: relative;
   overflow: auto;
-  height: 100%;
+  height: calc(100% - 6rem);
 `;
 
 const handleError = (cm, currentError, nextError, nextCode, nextId) => {
@@ -75,7 +62,7 @@ const handleError = (cm, currentError, nextError, nextCode, nextId) => {
       nextError.line !== 0 &&
       nextError.line <= code.split('\n').length
     ) {
-      cm.addLineClass(nextError.line, 'background', 'cm-line-error');
+      cm.addLineClass(nextError.line - 1, 'background', 'cm-line-error');
     }
   }
 };
@@ -119,7 +106,7 @@ export default class CodeEditor extends React.PureComponent {
     }
   }
 
-  updateCodeMirrorCode(code) {
+  updateCodeMirrorCode(code: string) {
     const pos = this.codemirror.getCursor();
     this.codemirror.setValue(code);
     this.codemirror.setCursor(pos);
@@ -139,20 +126,7 @@ export default class CodeEditor extends React.PureComponent {
 
     documentCache[id] = new CodeMirror.Doc(code || '', 'jsx');
 
-    this.codemirror = new CodeMirror(el, {
-      mode: 'jsx',
-      theme: 'oceanic',
-      keyMap: 'sublime',
-      indentUnit: 2,
-      autoCloseBrackets: true,
-      matchTags: { bothTags: true },
-      foldGutter: true,
-      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
-      value: documentCache[id],
-      lineNumbers: true,
-      lineWrapping: true,
-      styleActiveLine: true,
-    });
+    this.codemirror = getCodeMirror(el, documentCache[id]);
 
     this.codemirror.on('change', this.handleChange);
 
@@ -281,54 +255,3 @@ export default class CodeEditor extends React.PureComponent {
     );
   }
 }
-
-const fadeInAnimation = keyframes`
-  0%   { background-color: #374140; }
-  100% { background-color: #561011; }
-`;
-
-injectGlobal`
-  .cm-s-oceanic.CodeMirror {
-    font-family: 'Source Code Pro', monospace;
-    background: ${theme.background2()};
-    color: #e0e0e0;
-    height: 100%;
-    font-size: 14px;
-    font-weight: 500;
-  }
-  .cm-s-oceanic div.CodeMirror-selected { background: #343D46; }
-  .cm-s-oceanic .CodeMirror-line::selection, .cm-s-oceanic .CodeMirror-line > span::selection, .cm-s-oceanic .CodeMirror-line > span > span::selection { background: #65737E; }
-  .cm-s-oceanic .CodeMirror-line::-moz-selection, .cm-s-oceanic .CodeMirror-line > span::-moz-selection, .cm-s-oceanic .CodeMirror-line > span > span::-moz-selection { background: #65737E; }
-  .cm-s-oceanic .CodeMirror-gutters {
-    background: ${theme.background2()};
-    border-right: 0px;
-  }
-  .cm-s-oceanic .CodeMirror-guttermarker { color: #ac4142; }
-  .cm-s-oceanic .CodeMirror-guttermarker-subtle { color: #505050; }
-  .cm-s-oceanic .CodeMirror-linenumber { color: #505050; }
-  .cm-s-oceanic .CodeMirror-cursor { border-left: 1px solid #b0b0b0; }
-
-  .cm-s-oceanic span.cm-comment { color: #8f5536; }
-  .cm-s-oceanic span.cm-atom { color: #aa759f; }
-  .cm-s-oceanic span.cm-number { color: #aa759f; }
-
-  .cm-s-oceanic span.cm-property, .cm-s-oceanic span.cm-attribute { color: #D8DEE9; }
-  .cm-s-oceanic span.cm-keyword { color: #C594C5; }
-  .cm-s-oceanic span.cm-string { color: #99C794; }
-
-  .cm-s-oceanic span.cm-variable { color: #FAC863; }
-  .cm-s-oceanic span.cm-variable-2 { color: #6a9fb5; }
-  .cm-s-oceanic span.cm-def { color: #FAC863; }
-  .cm-s-oceanic span.cm-bracket { color: #e0e0e0; }
-  .cm-s-oceanic span.cm-tag { color: #EC5f67; }
-  .cm-s-oceanic span.cm-link { color: #aa759f; }
-  .cm-s-oceanic span.cm-error { background: #ac4142; color: #b0b0b0; }
-
-  .cm-s-oceanic .CodeMirror-activeline-background { background: #374140; }
-  .cm-s-oceanic .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }
-  .cm-s-oceanic span.CodeMirror-matchingtag { background-color: inherit; }
-  .cm-s-oceanic span.cm-tag.CodeMirror-matchingtag { text-decoration: underline; }
-  .cm-s-oceanic span.cm-tag.cm-bracket.CodeMirror-matchingtag { text-decoration: none; }
-
-  .cm-s-oceanic div.cm-line-error.CodeMirror-linebackground { animation: ${fadeInAnimation} 0.3s; background-color: #561011; }
-`;

src/app/pages/SandboxView/Sandbox/Editor/Content/subviews/Preview/Editor.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import styled from 'styled-components';
+import CodeMirror from 'codemirror';
+
+import { getCodeMirror } from 'app/utils/codemirror';
+
+const Container = styled.div`
+  text-align: left;
+  color: white;
+
+  .cm-s-oceanic.CodeMirror {
+    padding: 0.5rem;
+    margin: 1rem 0;
+    background: rgba(0, 0, 0, 0.7);
+    border: 1px solid rgba(0, 0, 0, 0.4);
+    border-radius: 2px;
+    font-size: 15px;
+  }
+  .cm-s-oceanic div.CodeMirror-selected {
+    background: ${props => props.readOnly ? 'inherit' : 'rgba(255, 255, 255, 0.1)'};
+  }
+  .cm-s-oceanic .CodeMirror-activeline-background {
+    background: ${props => props.readOnly ? 'inherit' : 'rgba(255, 255, 255, 0.1)'};
+  }
+`;
+
+type Props = {
+  name: string,
+  onChange: (code: string) => void,
+  readOnly: ?boolean,
+};
+
+export default class Editor extends React.PureComponent {
+  props: Props;
+
+  setUpCodeMirror = el => {
+    const { name, readOnly } = this.props;
+    const doc = new CodeMirror.Doc(
+      `ReactDOM.render(<${name || 'Component'} />, document.body);`,
+      'jsx'
+    );
+    this.codemirror = getCodeMirror(el, doc);
+    this.codemirror.setOption('lineNumbers', false);
+    this.codemirror.setOption('readOnly', readOnly);
+
+    this.codemirror.on('change', this.handleChange);
+  };
+
+  handleChange = (cm: any, change: any) => {
+    if (change.origin !== 'setValue' && this.props.onChange) {
+      this.props.onChange(cm.getValue());
+    }
+  };
+
+  render() {
+    const { readOnly } = this.props;
+    return (
+      <Container readOnly={readOnly}>
+        <div ref={this.setUpCodeMirror} />
+      </Container>
+    );
+  }
+}