create TextEditor component

Author: ShMcK

lib/components/TextEditor/index.js

@@ -0,0 +1,34 @@
+"use strict";
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var React = require('react');
+var styles = {
+    editor: {
+        textAlign: 'left',
+        border: '2px solid red',
+        margin: '5px',
+        borderRadius: '3px',
+    },
+};
+var TextEditor = (function (_super) {
+    __extends(TextEditor, _super);
+    function TextEditor() {
+        _super.apply(this, arguments);
+    }
+    TextEditor.prototype.componentDidMount = function () {
+        var ed = atom.workspace.buildTextEditor();
+        ed.setGrammar(atom.grammars.grammarForScopeName('source.js'));
+        console.log(ed);
+        ed.setText('var a = 42;');
+        document.querySelector("#" + this.props.name).appendChild(ed.getElement());
+    };
+    TextEditor.prototype.render = function () {
+        return React.createElement("div", {id: this.props.name, style: styles.editor});
+    };
+    return TextEditor;
+}(React.Component));
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = TextEditor;

lib/components/index.js

@@ -16,6 +16,8 @@ var Start_1 = require('./Start');
 exports.Start = Start_1.default;
 var Tutorials_1 = require('./Tutorials');
 exports.Tutorials = Tutorials_1.default;
+var TextEditor_1 = require('./TextEditor');
+exports.TextEditor = TextEditor_1.default;
 var RouteButton_1 = require('./common/RouteButton');
 exports.RouteButton = RouteButton_1.default;
 var ContentCard_1 = require('./common/ContentCard');

src/components/Start/index.tsx

@@ -18,6 +18,7 @@ export default class Start extends React.Component<{
 }, {}> {
   render() {
     const {ready} = this.props;
+
     return (
       <section className='cr-start'>
         <div style={headerStyles}>

src/components/TextEditor/index.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+const styles = {
+  editor: {
+    textAlign: 'left',
+    border: '2px solid red',
+    margin: '5px',
+    borderRadius: '3px',
+  },
+};
+
+export default class TextEditor extends React.Component<{
+  name: string
+}, {}> {
+  componentDidMount() {
+    const ed = atom.workspace.buildTextEditor();
+    ed.setGrammar(
+      atom.grammars.grammarForScopeName('source.js')
+    );
+    console.log(ed);
+    // ed.style.textAlign = 'left';
+    ed.setText('var a = 42;');
+    document.querySelector(`#${this.props.name}`).appendChild(ed.getElement());
+  }
+  render() {
+    return <div id={this.props.name} style={styles.editor} />;
+  }
+}

src/components/index.ts

@@ -1,5 +1,5 @@
 export {
-  Alert, Markdown
+Alert, Markdown
 } from 'core-coderoad';
 
 export {default as AppMenu} from './AppMenu';
@@ -9,6 +9,7 @@ export {default as Progress} from './Progress';
 export {default as Routes} from './Routes';
 export {default as Start} from './Start';
 export {default as Tutorials} from './Tutorials';
+export {default as TextEditor} from './TextEditor';
 
 export {default as RouteButton} from './common/RouteButton';
 export {default as ContentCard} from './common/ContentCard';

tsconfig.json

@@ -120,6 +120,7 @@
         "src/components/Start/Checks/VerifyButton.tsx",
         "src/components/Start/index.tsx",
         "src/components/Start/Welcome/index.tsx",
+        "src/components/TextEditor/index.tsx",
         "src/components/Tutorials/index.tsx",
         "src/components/Tutorials/LoadTutorials/index.tsx",
         "src/components/Tutorials/SelectTutorial/index.tsx",