Add file.

.babelrc

@@ -0,0 +1,34 @@
+{
+  "presets": [
+    [
+      "env",
+      {
+        "targets": {
+          "browsers": [
+            "last 2 versions",
+            "ie >= 10"
+          ]
+        }
+      }
+    ],
+    "react"
+  ],
+  "plugins": [
+    "transform-object-rest-spread",
+    "syntax-dynamic-import",
+    "transform-async-to-generator",
+    "transform-class-properties",
+    [
+      "transform-runtime",
+      {
+        "helpers": false,
+        "polyfill": false,
+        "regenerator": true,
+        "moduleName": "babel-runtime"
+      }
+    ]
+  ],
+  "env": {
+    "production": {}
+  }
+}

.gitignore

@@ -0,0 +1,15 @@
+node_modules
+dist
+lib
+!src/lib
+npm-debug.log*
+.DS_Store
+.cache
+.rdoc-dist
+
+*.bak
+*.tem
+*.temp
+#.swp
+*.*~
+~*.*

.kktrc.js

@@ -0,0 +1,36 @@
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+const webpack = require('webpack');
+const path = require('path');
+const pkg = require('./package.json');
+const MonacoEditorSrc = path.join(__dirname, 'src');
+
+module.exports = function (webpackConf, ServerConf) {
+  if (webpackConf) {
+    // 获取版本信息
+    webpackConf.plugins.push(
+      new webpack.DefinePlugin({
+        VERSION: JSON.stringify(pkg.version),
+      })
+    );
+    webpackConf.plugins.push(new MonacoWebpackPlugin());
+    webpackConf.resolve = webpackConf.resolve || {};
+    webpackConf.resolve.extensions = ['.js', '.json'];
+    webpackConf.resolve.alias = { 'react-monacoeditor': MonacoEditorSrc };
+    // 更入口文件位置
+    webpackConf.entry = webpackConf.entry.map((item) => {
+      item = item.replace(/\/react-monacoeditor\/src\//, '/react-monacoeditor/example/');
+      console.log('item:', item);
+      return item;
+    })
+
+    if (webpackConf.mode === 'development') {
+      // 默认配置 devtool = 'source-map';
+      // 大型工程可以删除此配置，非常消耗编译速度
+      delete webpackConf.devtool;
+    }
+    if (webpackConf.mode === 'production') {
+      // 生产模式下更改的 webpack 配置
+    }
+    return webpackConf;
+  }
+};

README.md

@@ -0,0 +1,151 @@
+react-monacoeditor
+===
+
+[Monaco Editor](https://github.com/Microsoft/monaco-editor) component for React.
+
+<a href="https://jaywcjlove.github.io/react-monacoeditor/"><img src="https://raw.githubusercontent.com/jaywcjlove/react-monacoeditor/master/react-monacoeditor.png" /></a>
+
+## Installation
+
+```bash
+npm install react-monacoeditor --save
+```
+
+## Using
+
+```js
+import React from 'react';
+import MonacoEditor from 'react-monacoeditor';
+
+<MonacoEditor
+  language="html"
+  value="<h1>I ♥ react-codemirror2</h1>"
+  options={{
+    theme: 'vs-dark',
+  }}
+/>
+```
+
+## Using with Webpack
+
+```javascript
+import React from 'react';
+import { render } from 'react-dom';
+import MonacoEditor from 'react-monacoeditor';
+
+const code = `import React, { PureComponent } from 'react';
+import MonacoEditor from 'react-monacoeditor';
+
+export default class App extends PureComponent {
+  render() {
+    return (
+      <MonacoEditor
+        language="html"
+        value="<h1>I ♥ react-codemirror2</h1>"
+        options={{
+          selectOnLineNumbers: true,
+          roundedSelection: false,
+          cursorStyle: 'line',
+          automaticLayout: false,
+          theme: 'vs-dark',
+        }}
+      />
+    );
+  }
+}
+`;
+
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      code: '// type your code...',
+    }
+  }
+  editorDidMount(editor, monaco) {
+    console.log('editorDidMount', editor, monaco);
+    editor.focus();
+  }
+  onChange(newValue, e) {
+    console.log('onChange', newValue, e);
+  }
+  render() {
+    const options = {
+      selectOnLineNumbers: true,
+      roundedSelection: false,
+      readOnly: false,
+      cursorStyle: 'line',
+      automaticLayout: false,
+      theme: 'vs-dark',
+    };
+    return (
+      <MonacoEditor
+        height="500px"
+        language="javascript"
+        editorDidMount={this.editorDidMount.bind(this)}
+        onChange={this.onChange.bind(this)}
+        value={code}
+        options={options}
+        scrollbar={{
+          // Subtle shadows to the left & top. Defaults to true.
+          useShadows: false,
+          // Render vertical arrows. Defaults to false.
+          verticalHasArrows: true,
+          // Render horizontal arrows. Defaults to false.
+          horizontalHasArrows: true,
+          // Render vertical scrollbar.
+          // Accepted values: 'auto', 'visible', 'hidden'.
+          // Defaults to 'auto'
+          vertical: 'visible',
+          // Render horizontal scrollbar.
+          // Accepted values: 'auto', 'visible', 'hidden'.
+          // Defaults to 'auto'
+          horizontal: 'visible',
+          verticalScrollbarSize: 17,
+          horizontalScrollbarSize: 17,
+          arrowSize: 30,
+        }}
+      />
+    );
+  }
+}
+
+render(
+  <App />,
+  document.getElementById('root')
+);
+```
+
+Add the [Monaco Webpack plugin](https://github.com/Microsoft/monaco-editor-webpack-plugin) `monaco-editor-webpack-plugin` to your `webpack.config.js`:
+
+```js
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+module.exports = {
+  plugins: [
+    new MonacoWebpackPlugin()
+  ]
+};
+```
+
+## Properties
+
+If you specify `value` property, the component behaves in controlled mode.
+Otherwise, it behaves in uncontrolled mode.
+
+- `width` width of editor. Defaults to `100%`.
+- `height` height of editor. Defaults to `100%`.
+- `value` value of the auto created model in the editor.
+- `defaultValue` the initial value of the auto created model in the editor.
+- `language` the initial language of the auto created model in the editor.
+- `theme` the theme of the editor `vs`, `vs-dark`, `hc-black`
+- `options` refer to [Monaco interface IEditorConstructionOptions](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html).
+- `editorDidMount(editor, monaco)` an event emitted when the editor has been mounted (similar to `componentDidMount` of React).
+- `onChange(newValue, event)` an event emitted when the content of the current model has changed.
+
+## Events & Methods
+
+Refer to [Monaco interface IEditor](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditor.html).
+
+## License
+
+Licensed under the MIT License.

example/app/App.js

@@ -0,0 +1,134 @@
+import React, { PureComponent } from 'react';
+// eslint-disable-next-line import/no-unresolved, import/extensions
+import MonacoEditor from 'react-monacoeditor';
+import Markdown from './Markdown';
+import Select from './Select';
+import logo from './logo.svg';
+import styles from './App.less';
+import DocumentStr from '../../README.md';
+
+const languageData = [
+  'json', 'apl', 'brainfuck', 'clike', 'clojure', 'cmake', 'cobol', 'coffeescript', 'commonlisp', 'crystal', 'css',
+  'cypher', 'cython', 'd', 'dart', 'diff', 'dockerfile', 'dtd', 'dylan', 'ecl', 'eiffel', 'elm', 'erlang', 'factor',
+  'fcl', 'forth', 'fortran', 'gas', 'gherkin', 'go', 'groovy', 'haml', 'haskell', 'haskell-literate', 'haxe', 'htmlembedded',
+  'htmlmixed', 'http', 'idl', 'javascript', 'jinja2', 'jsx', 'less', 'julia', 'livescript', 'lua', 'mathematica', 'mbox', 'mirc',
+  'modelica', 'mscgen', 'mumps', 'nginx', 'nsis', 'ntriples', 'octave', 'oz', 'pascal', 'pegjs', 'perl', 'php', 'pig',
+  'powershell', 'properties', 'protobuf', 'pug', 'puppet', 'python', 'q', 'r', 'rpm', 'ruby', 'rust', 'sas', 'sass',
+  'scheme', 'shell', 'sieve', 'slim', 'smalltalk', 'smarty', 'solr', 'soy', 'sparql', 'spreadsheet', 'sql', 'stex',
+  'stylus', 'swift', 'tcl', 'textile', 'tiddlywiki', 'tiki', 'toml', 'tornado', 'troff', 'ttcn', 'ttcn-cfg',
+  'turtle', 'twig', 'typescript', 'vb', 'vbscript', 'velocity', 'verilog', 'vhdl', 'vue', 'webidl', 'xml', 'xquery', 'yacas', 'yaml',
+];
+
+class App extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      code: '',
+      mode: 'javascript',
+      hyperlink: [
+        {
+          href: 'https://github.com/uiw-react/react-codemirror',
+          label: 'View on GitHub',
+        },
+        {
+          href: 'https://www.npmjs.com/package/@uiw/react-codemirror',
+          label: 'View on NPM',
+        },
+        {
+          href: 'https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditoroptions.html#linenumbers',
+          label: 'Monaco Editor Options',
+        },
+      ],
+    };
+  }
+  componentDidMount() {
+    this.dynamicLoadable(this.state.mode).then((code) => {
+      this.setState({ mode: this.state.mode, code: code.default || '' });
+    });
+  }
+  editorDidMount(editor, monaco) {
+    console.log('editorDidMount', editor, monaco); // eslint-disable-line
+    editor.focus();
+  }
+  onChange() {
+    // console.log('onChange', newValue, e);  // eslint-disable-line
+  }
+  onSelectChange(e) {
+    e.persist();
+    const lang = e.target.value;
+    if (languageData.indexOf(lang) === -1) {
+      this.setState({ mode: lang });
+      return;
+    }
+    this.dynamicLoadable(lang).then((code) => {
+      console.log('code.default:', code.default);
+      this.setState({ mode: lang, code: code.default || '' });
+    });
+  }
+  dynamicLoadable(lang) {
+    return import(`code-example/lib/${lang}.js`);
+  }
+  render() {
+    const { hyperlink } = this.state;
+    const version = VERSION; // eslint-disable-line
+    const options = {
+      selectOnLineNumbers: true,
+      roundedSelection: false,
+      cursorStyle: 'line',
+      automaticLayout: false,
+      theme: 'vs-dark',
+    };
+    return (
+      <div className={styles.App}>
+        <header className={styles.AppHeader}>
+          <img src={logo} className={styles.AppLogo} alt="logo" />
+          <h1 className={styles.AppTitle}>React-MonacoEditor <sup>v{version}</sup></h1>
+          <p className={styles.content}>MonacoEditor component for React. </p>
+          <div className={styles.button}>
+            {hyperlink.map((item, idx) => {
+              return (
+                <a key={idx} target="_blank" rel="noopener noreferrer" href={item.href}>{item.label}</a>
+              );
+            })}
+          </div>
+        </header>
+        <div className={styles.editor}>
+          <MonacoEditor
+            ref={editor => this.editor = editor}
+            height="500px"
+            language={this.state.mode}
+            value={this.state.code}
+            editorDidMount={this.editorDidMount.bind(this)}
+            onChange={this.onChange.bind(this)}
+            options={options}
+            scrollbar={{
+              // Subtle shadows to the left & top. Defaults to true.
+              useShadows: false,
+              // Render vertical arrows. Defaults to false.
+              verticalHasArrows: true,
+              // Render horizontal arrows. Defaults to false.
+              horizontalHasArrows: true,
+              // Render vertical scrollbar.
+              // Accepted values: 'auto', 'visible', 'hidden'.
+              // Defaults to 'auto'
+              vertical: 'visible',
+              // Render horizontal scrollbar.
+              // Accepted values: 'auto', 'visible', 'hidden'.
+              // Defaults to 'auto'
+              horizontal: 'visible',
+              verticalScrollbarSize: 17,
+              horizontalScrollbarSize: 17,
+              arrowSize: 30,
+            }}
+          />
+        </div>
+        <div className={styles.options}>
+          <Select value={this.state.mode} options={languageData} onChange={this.onSelectChange.bind(this)} />
+        </div>
+        <Markdown source={DocumentStr} className={styles.markdown} />
+      </div>
+    );
+  }
+}
+
+export default App;