Add codeMirrorInstance prop to editors

README.md

@@ -74,15 +74,16 @@ require('codemirror/mode/javascript/javascript');
 
 ## props
 
-| prop         | type *`default`*  | components                        | description                                                                                                           |
-|--------------|------------------------|-----------------------------------|-----------------------------------------------------------------------------------------------------------------------|
-| `autoCursor` | boolean *`true`*  | `Controlled` `UnControlled`  | should component cursor position correct when `value` changed                                                         |                                                                                   |
-| `autoScroll` | boolean *`true`*  | `Controlled` `UnControlled`  | should component scroll cursor position into view when `value` changed                                                |
-| `className`  | string                 | `Controlled` `UnControlled`  | pass through class *`class="react-codemirror2 className"`*                                                            |
-| `defineMode` | object                 | `Controlled` `UnControlled`  | pass a [custom mode](http://marijnhaverbeke.nl/blog/codemirror-mode-system.html) via `{name: 'custom', fn: myModeFn}` |
-| `detach`     | boolean                | `UnControlled`                    | should component ignore new props                                                                                     |
-| `options`    | object                 | `Controlled` `UnControlled`  | [codemirror configuration](https://codemirror.net/doc/manual.html#config)                                             |
-| `value`      | string                 | *`Controlled` `UnControlled` | * component value _**must be managed for controlled components**_                                                     |
+| prop                 | type *`default`*                   | components                        | description                                                                                                           |
+|----------------------|-----------------------------------------|-----------------------------------|-----------------------------------------------------------------------------------------------------------------------|
+| `autoCursor`         | boolean *`true`*                   | `Controlled` `UnControlled`  | should component cursor position correct when `value` changed                                                         |
+| `autoScroll`         | boolean *`true`*                   | `Controlled` `UnControlled`  | should component scroll cursor position into view when `value` changed                                                |
+| `className`          | string                                  | `Controlled` `UnControlled`  | pass through class *`class="react-codemirror2 className"`*                                                            |
+| `defineMode`         | object                                  | `Controlled` `UnControlled`  | pass a [custom mode](http://marijnhaverbeke.nl/blog/codemirror-mode-system.html) via `{name: 'custom', fn: myModeFn}` |
+| `codeMirrorInstance` | function *`require('codemirror')`* | `Controlled` `UnControlled`  | provides a specific CodeMirror instance                                                                               |
+| `detach`             | boolean                                 | `UnControlled`                    | should component ignore new props                                                                                     |
+| `options`            | object                                  | `Controlled` `UnControlled`  | [codemirror configuration](https://codemirror.net/doc/manual.html#config)                                             |
+| `value`              | string                                  | *`Controlled` `UnControlled` | * component value _**must be managed for controlled components**_                                                     |
 
 ## props cont. (wrapped codemirror [programming api](https://codemirror.net/doc/manual.html#api))
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-codemirror2",
-  "version": "7.2.1",
+  "version": "7.2.2",
   "description": "a tiny react codemirror component wrapper",
   "main": "index.js",
   "typings": "index.d.ts",

src/index.tsx

@@ -44,6 +44,7 @@ export interface ICodeMirror {
   className?: string;
   cursor?: codemirror.Position;
   defineMode?: IDefineModeOptions;
+  codeMirrorInstance?: typeof codemirror;
   editorDidConfigure?: (editor: codemirror.Editor) => void;
   editorDidMount?: (editor: codemirror.Editor, value: string, cb: () => void) => void;
   editorWillUnmount?: (lib: any) => void;
@@ -516,7 +517,9 @@ export class Controlled extends React.Component<IControlledCodeMirror, any> {
       }
     }
 
-    this.editor = cm(this.ref, this.props.options) as codemirror.Editor;
+    this.editor = this.props.codeMirrorInstance
+      ? this.props.codeMirrorInstance(this.ref, this.props.options)
+      : cm(this.ref, this.props.options) as codemirror.Editor;
 
     this.shared = new Shared(this.editor, this.props);
 
@@ -719,7 +722,9 @@ export class UnControlled extends React.Component<IUnControlledCodeMirror, any>
       }
     }
 
-    this.editor = cm(this.ref, this.props.options) as codemirror.Editor;
+    this.editor = this.props.codeMirrorInstance
+      ? this.props.codeMirrorInstance(this.ref, this.props.options)
+      : cm(this.ref, this.props.options) as codemirror.Editor;
 
     this.shared = new Shared(this.editor, this.props);
 

test/index.spec.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as Adapter from 'enzyme-adapter-react-16';
 import * as Enzyme from 'enzyme';
 import * as sinon from 'sinon';
+import * as codemirror from 'codemirror';
 
 import {Controlled, UnControlled} from '../src';
 
@@ -1024,4 +1025,42 @@ describe('Props', () => {
 
     wrapper.unmount();
   });
+
+  it('[UnControlled]: codeMirrorInstance | is used', done => {
+    const codeMirrorInstance = codemirror;
+    codeMirrorInstance.defineExtension("testExtensionForUncontrolled", () => {})
+
+    function editorDidMount(editor: codemirror.Editor) {
+      (editor as any).testExtensionForUncontrolled();
+      done();
+    }
+
+    let wrapper = Enzyme.mount(
+      <UnControlled
+        codeMirrorInstance={codeMirrorInstance}
+        editorDidMount={editorDidMount}
+        />
+    );
+
+    wrapper.unmount();
+  });
+
+  it('[Controlled]: codeMirrorInstance | is used', done => {
+    const codeMirrorInstance = codemirror;
+    codeMirrorInstance.defineExtension("testExtensionForControlled", () => {})
+
+    function editorDidMount(editor: codemirror.Editor) {
+      (editor as any).testExtensionForControlled();
+      done();
+    }
+
+    let wrapper = Enzyme.mount(
+      <UnControlled
+        codeMirrorInstance={codeMirrorInstance}
+        editorDidMount={editorDidMount}
+        />
+    );
+
+    wrapper.unmount();
+  });
 });