Types for react-monaco-editor@0.8 (#16360)

types/react-monaco-editor/index.d.ts

@@ -0,0 +1,78 @@
+// Type definitions for react-monaco-editor 0.8
+// Project: https://github.com/superRaytin/react-monaco-editor
+// Definitions by: Joshua Netterfield <https://github.com/jnetterf>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.2
+
+/// <reference types="monaco-editor" />
+
+import * as React from "react";
+
+export interface ReactMonacoEditorProps {
+    /**
+     * Width of editor. Defaults to 100%.
+     */
+    width?: string | number;
+
+    /**
+     * Height of editor. Defaults to 500.
+     */
+    height?: string | number;
+
+    /**
+     * Value of the auto created model in the editor.
+     * If you specify value property, the component behaves in controlled mode. Otherwise, it behaves in uncontrolled mode.
+     */
+    value?: string;
+
+    /**
+     * The initial value of the auto created model in the editor.
+     */
+    defaultValue?: string;
+
+    /**
+     * The initial language of the auto created model in the editor.
+     */
+    language?: string;
+
+    /**
+     * Theme to be used for rendering.
+     * The current out-of-the-box available themes are: 'vs' (default), 'vs-dark', 'hc-black'.
+     * You can create custom themes via `monaco.editor.defineTheme`.
+     */
+    theme?: string;
+
+    /**
+     * Refer to Monaco interface IEditorOptions.
+     */
+    options?: monaco.editor.IEditorOptions;
+
+    /**
+     * An event emitted when the editor has been mounted (similar to componentDidMount of React).
+     */
+    editorDidMount?(editor: monaco.editor.ICodeEditor, monacoModule: typeof monaco): void;
+
+    /**
+     * An event emitted before the editor mounted (similar to componentWillMount of React).
+     */
+    editorWillMount?(monacoModule: typeof monaco): void;
+
+    /**
+     * An event emitted when the content of the current model has changed.
+     */
+    onChange?(val: string, ev: monaco.editor.IModelContentChangedEvent2): void;
+
+    /**
+     * Optional, allow to config loader url and relative path of module, refer to require.config.
+     */
+    requireConfig?: object;
+
+    /**
+     * Optional, allow to pass a different context then the global window onto which the monaco instance will be loaded. Useful if you want to load the editor in an iframe.
+     */
+    context?: object;
+}
+
+export default class ReactMonacoEditor extends React.Component<ReactMonacoEditorProps, void> {
+    editor: monaco.editor.ICodeEditor;
+}

types/react-monaco-editor/package.json

@@ -0,0 +1,5 @@
+{
+    "dependencies": {
+        "monaco-editor": "0.8.3"
+    }
+}

types/react-monaco-editor/react-monaco-editor-tests.tsx

@@ -0,0 +1,149 @@
+// Adapted from https://github.com/superRaytin/react-monaco-editor/blob/master/examples/index.js
+
+import * as React from 'react';
+import { render } from 'react-dom';
+import MonacoEditor from 'react-monaco-editor';
+
+interface CodeEditorState {
+    code?: string;
+}
+
+// Using with webpack
+class CodeEditor extends React.Component<object, CodeEditorState> {
+    constructor(props: object) {
+        super(props);
+        this.state = {
+            code: '// type your code... \n',
+        };
+    }
+    editor: monaco.editor.ICodeEditor;
+    editorDidMount = (editor: monaco.editor.ICodeEditor) => {
+        console.log('editorDidMount', editor, editor.getValue(), editor.getModel());
+        this.editor = editor;
+    }
+    onChange = (newValue: string, e: monaco.editor.IModelContentChangedEvent2) => {
+        console.log('onChange', newValue, e);
+        this.setState({
+            code: newValue,
+        });
+    }
+    changeEditorValue = () => {
+        if (this.editor) {
+            this.editor.setValue('// code changed! \n');
+        }
+    }
+    changeBySetState = () => {
+        this.setState({code: '// code changed by setState! \n'});
+    }
+    render() {
+        const code = this.state.code;
+        const options = {
+            selectOnLineNumbers: true,
+            roundedSelection: false,
+            readOnly: false,
+            theme: 'vs',
+            cursorStyle: 'line',
+            automaticLayout: false,
+        };
+        return (
+            <div>
+            <div>
+            <button onClick={this.changeEditorValue}>Change value</button>
+            <button onClick={this.changeBySetState}>Change by setState</button>
+            </div>
+            <hr />
+            <MonacoEditor
+            height="500"
+            language="javascript"
+            value={code}
+            options={options}
+            onChange={this.onChange}
+            editorDidMount={this.editorDidMount}
+            />
+            </div>
+        );
+    }
+}
+
+// Using with require.config
+class AnotherEditor extends React.Component<object, CodeEditorState> {
+    constructor(props: object) {
+        super(props);
+        const jsonCode = [
+            '{',
+            '    "$schema": "http://myserver/foo-schema.json"',
+            "}"
+        ].join('\n');
+        this.state = {
+            code: jsonCode,
+        };
+    }
+    editorWillMount = (monacoModule: typeof monaco) => {
+        monacoModule.languages.json.jsonDefaults.setDiagnosticsOptions({
+            schemas: [{
+                uri: "http://myserver/foo-schema.json",
+                schema: {
+                    type: "object",
+                    properties: {
+                        p1: {
+                            enum: [ "v1", "v2"]
+                        },
+                        p2: {
+                            $ref: "http://myserver/bar-schema.json"
+                        }
+                    }
+                }
+            }, {
+                uri: "http://myserver/bar-schema.json",
+                schema: {
+                    type: "object",
+                    properties: {
+                        q1: {
+                            enum: [ "x1", "x2"]
+                        }
+                    }
+                }
+            }]
+        });
+    }
+    render() {
+        const code = this.state.code;
+        const requireConfig = {
+            url: 'https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.1/require.min.js',
+            paths: {
+                vs: 'https://as.alipayobjects.com/g/cicada/monaco-editor-mirror/0.6.1/min/vs'
+            }
+        };
+        return (
+            <div>
+            <MonacoEditor
+            width="800"
+            height="600"
+            language="json"
+            defaultValue={code}
+            requireConfig={requireConfig}
+            editorWillMount={this.editorWillMount}
+            />
+            </div>
+        );
+    }
+}
+
+class App extends React.Component<any, any> {
+    render() {
+        return (
+            <div>
+            <h2>Monaco Editor Sample (controlled mode)</h2>
+            <CodeEditor />
+            <hr />
+            <h2>Another editor (uncontrolled mode)</h2>
+            <AnotherEditor />
+            </div>
+        );
+    }
+}
+
+render(
+    <App />,
+    document.getElementById('root')
+);

types/react-monaco-editor/tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react"
+    },
+    "files": [
+        "index.d.ts",
+        "react-monaco-editor-tests.tsx"
+    ]
+}

types/react-monaco-editor/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }