react-codemirror2 - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

index.js

@@ -6,8 +6,61 @@ import React from 'react';
 
+  constructor(props) {
+    super(props);
+
+    this.initHydration = false;
+  }
+
+  componentWillMount() {
+    if (this.props.editorWillMount) {
+      this.props.editorWillMount(codemirror);
+    }
+  }
+
   componentDidMount() {
 
     this.editor = codemirror(this.ref);
-    this.editor.on('change', () => this.props.onChange(this.editor.getValue()));
 
+    this.editor.on('change', () => {
+      if (this.props.onChange && this.initHydration) {
+        this.props.onChange(this.editor.getValue());
+      }
+    });
+
+    if (this.props.onCursorActivity) {
+      this.editor.on('cursorActivity', this.props.onCursorActivity);
+    }
+
+    if (this.props.onViewportChange) {
+      this.editor.on('viewportChange', (cm, start, end) => {
+        this.props.onViewportChange(cm, start, end);
+      });
+    }
+
+    if (this.props.onGutterClick) {
+      this.editor.on('gutterClick', (cm, lineNumber, event) => {
+        this.props.onGutterClick(cm, lineNumber, event);
+      });
+    }
+
+    if (this.props.onFocus) {
+      this.editor.on('focus', this.props.onFocus);
+    }
+
+    if (this.props.onBlur) {
+      this.editor.on('blur', this.props.onBlur);
+    }
+
+    if (this.props.onScroll) {
+      this.editor.on('scroll', this.props.onScroll);
+    }
+
+    if (this.props.onUpdate) {
+      this.editor.on('update', this.props.onUpdate);
+    }
+
     this.hydrate(this.props);
+
+    if (this.props.editorDidMount) {
+      this.props.editorDidMount(codemirror);
+    }
   }
@@ -20,6 +73,26 @@
 
+  componentWillUnmount() {
+
+    if (this.props.editorWillUnmount) {
+      this.props.editorWillUnmount(codemirror);
+    }
+  }
+
   hydrate(props) {
 
     Object.keys(props.options || {}).forEach(key => this.editor.setOption(key, props.options[key]));
-    this.editor.setValue(props.value || '');
+
+    if (this.props.editorDidConfigure) {
+      this.props.editorDidConfigure(codemirror);
+    }
+
+    if (this.props.defaultValue && !this.initHydration) {
+      this.editor.setValue(props.defaultValue);
+
+      if (this.props.onSetDefaultValue) {
+        this.props.onSetDefaultValue(this.editor.getValue());
+      }
+    }
+
+    this.initHydration = true;
   }
@@ -26,0 +99,0 @@

package.json

 {
   "name": "react-codemirror2",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "a tiny react codemirror component wrapper",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -0,1 +1,3 @@
+[![NPM Version](https://img.shields.io/npm/v/react-codemirror2.svg?style=flat-square)](https://www.npmjs.com/package/react-codemirror2)
+
 ### react-codemirror2
@@ -7,9 +9,33 @@
 <CodeMirror
-  value='foo'
-  options={{theme: 'material'}}
-  onChange={(value) => {
-    console.log(value);
-  }} />
+  defaultValue='react-codemirror2'
+  options={{theme: 'material', lineNumbers: true}}
+  editorWillMount={(cm) => {
+  }}
+  editorDidMount={(cm) => {
+  }}
+  editorDidConfigure={(cm) => {
+  }}
+  editorWillUnmount={(cm) => {
+  }}
+  onSetDefaultValue={(defaultValue) => {
+  }}
+  onChange={(internalValue) => {
+  }}
+  onCursorActivity={() => {
+  }}
+  onViewportChange={(cm, viewportStart, viewportEnd) => {
+  }}
+  onGutterClick={(cm, lineNumber, event) => {
+  }}
+  onFocus={() => {
+  }}
+  onBlur={() => {
+  }}
+  onScroll={() => {
+  }}
+  onUpdate={() => {
+  }}
+/>
 ```
 
-// TODO
+// better docs coming soon. all props are optional...

src/react-codemirror2.jsx

@@ -6,8 +6,61 @@ import React from 'react';
 
+  constructor(props) {
+    super(props);
+
+    this.initHydration = false;
+  }
+
+  componentWillMount() {
+    if (this.props.editorWillMount) {
+      this.props.editorWillMount(codemirror);
+    }
+  }
+
   componentDidMount() {
 
     this.editor = codemirror(this.ref);
-    this.editor.on('change', () => this.props.onChange(this.editor.getValue()));
 
+    this.editor.on('change', () => {
+      if (this.props.onChange && this.initHydration) {
+        this.props.onChange(this.editor.getValue());
+      }
+    });
+
+    if(this.props.onCursorActivity) {
+      this.editor.on('cursorActivity', this.props.onCursorActivity);
+    }
+
+    if(this.props.onViewportChange) {
+      this.editor.on('viewportChange', (cm, start, end) => {
+        this.props.onViewportChange(cm, start, end);
+      });
+    }
+
+    if(this.props.onGutterClick) {
+      this.editor.on('gutterClick', (cm, lineNumber, event) => {
+        this.props.onGutterClick(cm, lineNumber, event);
+      });
+    }
+
+    if(this.props.onFocus) {
+      this.editor.on('focus', this.props.onFocus);
+    }
+
+    if(this.props.onBlur) {
+      this.editor.on('blur', this.props.onBlur);
+    }
+
+    if(this.props.onScroll) {
+      this.editor.on('scroll', this.props.onScroll);
+    }
+
+    if(this.props.onUpdate) {
+      this.editor.on('update', this.props.onUpdate);
+    }
+
     this.hydrate(this.props);
+
+    if (this.props.editorDidMount) {
+      this.props.editorDidMount(codemirror);
+    }
   }
@@ -20,6 +73,26 @@
 
+  componentWillUnmount() {
+
+    if (this.props.editorWillUnmount) {
+      this.props.editorWillUnmount(codemirror);
+    }
+  }
+
   hydrate(props) {
 
     Object.keys(props.options || {}).forEach(key => this.editor.setOption(key, props.options[key]));
-    this.editor.setValue(props.value || '');
+
+    if (this.props.editorDidConfigure) {
+      this.props.editorDidConfigure(codemirror);
+    }
+
+    if (this.props.defaultValue && !this.initHydration) {
+      this.editor.setValue(props.defaultValue);
+
+      if (this.props.onSetDefaultValue) {
+        this.props.onSetDefaultValue(this.editor.getValue());
+      }
+    }
+
+    this.initHydration = true;
   }
@@ -26,0 +99,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

179568

increased by664.02%

Number of package files

13

increased by8.33%

Lines of code

4509

increased by8407.55%

Number of lines in readme file

40

increased by185.71%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes