Add typings for react-codemirror (#9658)

codemirror/codemirror.d.ts

@@ -220,14 +220,7 @@ declare namespace CodeMirror {
 
         /** Get an { left , top , width , height , clientWidth , clientHeight } object that represents the current scroll position, the size of the scrollable area,
         and the size of the visible area(minus scrollbars). */
-        getScrollInfo(): {
-            left: any;
-            top: any;
-            width: any;
-            height: any;
-            clientWidth: any;
-            clientHeight: any;
-        }
+        getScrollInfo(): CodeMirror.ScrollInfo;
 
         /** Scrolls the given element into view. pos is a { line , ch } position, referring to a given character, null, to refer to the cursor.
         The margin parameter is optional. When given, it indicates the amount of pixels around the given area that should be made visible as well. */
@@ -609,6 +602,15 @@ declare namespace CodeMirror {
         text: string;
     }
 
+    interface ScrollInfo {
+        left: any;
+        top: any;
+        width: any;
+        height: any;
+        clientWidth: any;
+        clientHeight: any;
+    }
+
     interface TextMarker {
         /** Remove the mark. */
         clear(): void;

react-codemirror/react-codemirror-tests.tsx

@@ -0,0 +1,40 @@
+/// <reference path="../react/react.d.ts" />
+/// <reference path="../react/react-dom.d.ts" />
+/// <reference path="./react-codemirror.d.ts" />
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import * as Codemirror from "react-codemirror";
+
+class CodemirrorTest extends React.Component<React.Props<{}>, {}> {
+    private editorRef: ReactCodeMirror.ReactCodeMirror;
+
+    componentDidMount() {
+        this.editorRef.focus();
+        this.editorRef.getCodeMirror();
+    }
+
+    render() {
+        const options = {
+            lineNumbers: true,
+            readOnly: false,
+            mode: "markdown"
+        };
+        const onChange = (value: any) => console.log(value);
+        const onFocusChange = (focused: boolean) => console.log(focused);
+        const onScroll = (scrollInfo: CodeMirror.ScrollInfo) => console.log(scrollInfo.top);
+        const codeMirrorInstance = CodeMirror(document.body);
+
+        return <div>
+            <Codemirror className="test-codemirror"
+                        codeMirrorInstance={codeMirrorInstance}
+                        onChange={onChange}
+                        onFocusChange={onFocusChange}
+                        onScroll={onScroll}
+                        options={options}
+                        path="editor"
+                        ref={(r: ReactCodeMirror.ReactCodeMirror) => this.editorRef = r}
+                        value="foo bar" />
+        </div>;
+    }
+}

react-codemirror/react-codemirror.d.ts

@@ -0,0 +1,35 @@
+// Type definitions for React Codemirror v0.2.6
+// Project: https://github.com/JedWatson/react-codemirror
+// Definitions by: Vicky Lai <https://github.com/velveret>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+/// <reference path="../react/react.d.ts"/>
+/// <reference path="../codemirror/codemirror.d.ts"/>
+
+declare namespace ReactCodeMirror {
+    interface ReactCodeMirrorProps extends __React.Props<ReactCodeMirror> {
+        onChange?: (newValue: string) => any; // called when a change is made
+        onFocusChange?: (focused: boolean) => any; // called when the editor is focused or loses focus
+        onScroll?: (scrollInfo: CodeMirror.ScrollInfo) => any; // called when the editor is scrolled
+        options?: CodeMirror.EditorConfiguration; // options passed to the CodeMirror instance
+        path?: string; // the identifying name for the textarea
+        value?: string; // the editor value
+        className?: string; // CSS className for the outer element
+        codeMirrorInstance?: CodeMirror.Editor; // the CodeMirror instance
+    }
+
+    interface ReactCodeMirror extends __React.Component<ReactCodeMirrorProps, {}> {
+        /** Focuses the CodeMirror instance. */
+        focus(): void;
+
+        /** Returns the CodeMirror instance, if available. */
+        getCodeMirror(): CodeMirror.Editor;
+    }
+
+    interface ReactCodeMirrorClass extends __React.ComponentClass<ReactCodeMirrorProps> { }
+}
+
+declare module "react-codemirror" {
+    const RCM: ReactCodeMirror.ReactCodeMirrorClass;
+    export = RCM;
+}