react-codemirror2 - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

.idea/workspace.xml

 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ChangeListManager">
-    <list default="true" id="c2351521-c981-4bd1-95c0-32047ede4dc2" name="Default" comment="" />
+    <list default="true" id="342c8b5b-72b5-451c-9947-c7b1c1d92e0f" name="Default" comment="" />
     <ignored path="$PROJECT_DIR$/.tmp/" />
@@ -18,7 +18,39 @@ <ignored path="$PROJECT_DIR$/temp/" />
     <leaf>
+      <file leaf-file-name="react-codemirror2.jsx" pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/react-codemirror2.jsx">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="119">
+              <caret line="7" column="0" lean-forward="true" selection-start-line="7" selection-start-column="0" selection-end-line="7" selection-end-column="0" />
+              <folding />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file leaf-file-name="index.jsx" pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/demo/index.jsx">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="323">
+              <caret line="19" column="6" lean-forward="true" selection-start-line="19" selection-start-column="6" selection-end-line="19" selection-end-column="6" />
+              <folding>
+                <element signature="e#0#26#0" expanded="true" />
+              </folding>
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file leaf-file-name="README.md" pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/README.md">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="493">
+              <caret line="29" column="4" lean-forward="true" selection-start-line="29" selection-start-column="4" selection-end-line="29" selection-end-column="4" />
+              <folding />
+            </state>
+          </provider>
+        </entry>
+      </file>
       <file leaf-file-name="package.json" pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/package.json">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="150">
-              <caret line="10" column="17" lean-forward="true" selection-start-line="10" selection-start-column="17" selection-end-line="10" selection-end-column="17" />
+            <state relative-caret-position="136">
+              <caret line="8" column="33" lean-forward="true" selection-start-line="8" selection-start-column="33" selection-end-line="8" selection-end-column="33" />
               <folding />
@@ -29,10 +61,18 @@ </state>
       </file>
+      <file leaf-file-name="index.js" pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/index.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="0">
+              <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
+              <folding />
+            </state>
+          </provider>
+        </entry>
+      </file>
     </leaf>
   </component>
-  <component name="FileTemplateManagerImpl">
-    <option name="RECENT_TEMPLATES">
-      <list>
-        <option value="JavaScript File" />
-      </list>
-    </option>
+  <component name="FindInProjectRecents">
+    <findStrings>
+      <find>this.props</find>
+    </findStrings>
   </component>
@@ -45,9 +85,6 @@ <component name="Git.Settings">
       <list>
-        <option value="$PROJECT_DIR$/index.jsx" />
-        <option value="$PROJECT_DIR$/demo/webpack.config.js" />
-        <option value="$PROJECT_DIR$/.gitignore" />
-        <option value="$PROJECT_DIR$/demo/server.js" />
+        <option value="$PROJECT_DIR$/src/react-codemirror2.jsx" />
+        <option value="$PROJECT_DIR$/package.json" />
         <option value="$PROJECT_DIR$/demo/index.jsx" />
-        <option value="$PROJECT_DIR$/scripts/build.js" />
-        <option value="$PROJECT_DIR$/package.json" />
+        <option value="$PROJECT_DIR$/README.md" />
       </list>
@@ -68,6 +105,6 @@ </option>
   <component name="ProjectFrameBounds">
-    <option name="x" value="-36" />
-    <option name="y" value="177" />
-    <option name="width" value="1656" />
-    <option name="height" value="893" />
+    <option name="x" value="-8" />
+    <option name="y" value="-8" />
+    <option name="width" value="1936" />
+    <option name="height" value="1176" />
   </component>
@@ -89,4 +126,4 @@ <component name="ProjectView">
     <panes>
+      <pane id="Scope" />
       <pane id="Scratches" />
-      <pane id="Scope" />
       <pane id="ProjectPane">
@@ -109,3 +146,2 @@ <subPane>
   <component name="PropertiesComponent">
-    <property name="settings.editor.selected.configurable" value="configurable.group.appearance" />
     <property name="WebServerToolWindowFactoryState" value="false" />
@@ -116,7 +152,2 @@ <property name="last_opened_file_path" value="$PROJECT_DIR$" />
   </component>
-  <component name="RecentsManager">
-    <key name="MoveFile.RECENT_KEYS">
-      <recent name="C:\Users\niro\Documents\GitHub\react-codemirror2\src" />
-    </key>
-  </component>
   <component name="RunDashboard">
@@ -141,39 +172,2 @@ <option name="ruleStates">
     </configuration>
-    <configuration default="true" type="ErlangApplicationRunConfiguration" factoryName="Erlang Application" show_console_on_std_err="false" show_console_on_std_out="false">
-      <option name="debugOptions">
-        <ErlangDebugOptions>
-          <option name="autoUpdateModulesNotToInterpret" value="true" />
-          <option name="modulesNotToInterpret">
-            <set />
-          </option>
-        </ErlangDebugOptions>
-      </option>
-      <option name="erlFlags" value="" />
-      <option name="moduleAndFunction" value="" />
-      <option name="params" value="" />
-      <option name="useTestCodePath" value="false" />
-      <option name="workDirectory" />
-      <module />
-      <method />
-    </configuration>
-    <configuration default="true" type="ErlangUnitRunConfigurationType" factoryName="Erlang Eunit" show_console_on_std_err="false" show_console_on_std_out="false">
-      <option name="debugOptions">
-        <ErlangDebugOptions>
-          <option name="autoUpdateModulesNotToInterpret" value="true" />
-          <option name="modulesNotToInterpret">
-            <set />
-          </option>
-        </ErlangDebugOptions>
-      </option>
-      <option name="workDirectory" />
-      <module />
-      <option name="functionNames">
-        <set />
-      </option>
-      <option name="kind" value="MODULE" />
-      <option name="moduleNames">
-        <set />
-      </option>
-      <method />
-    </configuration>
     <configuration default="true" type="JavaScriptTestRunnerJest" factoryName="Jest">
@@ -204,8 +198,2 @@ <node-interpreter value="project" />
     </configuration>
-    <configuration default="true" type="RebarEunitRunConfigurationType" factoryName="Erlang Rebar Eunit" show_console_on_std_err="false" show_console_on_std_out="false">
-      <option name="command" value="eunit" />
-      <option name="skipDependencies" value="true" />
-      <module />
-      <method />
-    </configuration>
     <configuration default="true" type="cucumber.js" factoryName="Cucumber.js">
@@ -246,8 +234,8 @@ <option name="cucumberJsArguments" value="" />
     <task active="true" id="Default" summary="Default task">
-      <changelist id="c2351521-c981-4bd1-95c0-32047ede4dc2" name="Default" comment="" />
-      <created>1496346338858</created>
+      <changelist id="342c8b5b-72b5-451c-9947-c7b1c1d92e0f" name="Default" comment="" />
+      <created>1496370524336</created>
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
-      <updated>1496346338858</updated>
-      <workItem from="1496346340180" duration="5104000" />
+      <updated>1496370524336</updated>
+      <workItem from="1496370525559" duration="4001000" />
     </task>
@@ -257,24 +245,24 @@ <servers />
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="5104000" />
+    <option name="totallyTimeSpent" value="4001000" />
   </component>
   <component name="ToolWindowManager">
-    <frame x="-36" y="177" width="1656" height="893" extended-state="0" />
+    <frame x="-8" y="-8" width="1936" height="1176" extended-state="6" />
     <editor active="true" />
     <layout>
-      <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.2601978" sideWeight="0.60310423" order="0" side_tool="false" content_ui="combo" />
+      <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.24973656" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
       <window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
-      <window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32917964" sideWeight="0.5" order="7" side_tool="true" content_ui="tabs" />
-      <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32555556" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
-      <window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="9" side_tool="false" content_ui="tabs" />
-      <window_info id="npm" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.2602428" sideWeight="0.3968958" order="2" side_tool="true" content_ui="tabs" />
+      <window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="true" content_ui="tabs" />
+      <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
+      <window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
+      <window_info id="npm" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="true" content_ui="tabs" />
       <window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
-      <window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="8" side_tool="false" content_ui="tabs" />
+      <window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
       <window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
-      <window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="3" side_tool="true" content_ui="tabs" />
+      <window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="true" content_ui="tabs" />
       <window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
+      <window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
       <window_info id="Message" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
       <window_info id="Commander" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
+      <window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
       <window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
-      <window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
-      <window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.50143814" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
       <window_info id="Ant Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
@@ -294,16 +282,8 @@ </layout>
   <component name="editorHistoryManager">
-    <entry file="file://$PROJECT_DIR$/.gitignore">
+    <entry file="file://$PROJECT_DIR$/demo/index.jsx">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="15">
-          <caret line="1" column="12" lean-forward="false" selection-start-line="1" selection-start-column="12" selection-end-line="1" selection-end-column="12" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/demo/webpack.config.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="165">
-          <caret line="11" column="30" lean-forward="false" selection-start-line="11" selection-start-column="30" selection-end-line="11" selection-end-column="30" />
+        <state relative-caret-position="323">
+          <caret line="19" column="6" lean-forward="true" selection-start-line="19" selection-start-column="6" selection-end-line="19" selection-end-column="6" />
           <folding>
-            <element signature="e#0#30#0" expanded="false" />
+            <element signature="e#0#26#0" expanded="true" />
           </folding>
@@ -313,16 +293,6 @@ </state>
     </entry>
-    <entry file="file://$PROJECT_DIR$/demo/server.js">
+    <entry file="file://$PROJECT_DIR$/README.md">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="60">
-          <caret line="4" column="24" lean-forward="true" selection-start-line="4" selection-start-column="24" selection-end-line="4" selection-end-column="24" />
-          <folding>
-            <element signature="e#0#30#0" expanded="false" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/react-codemirror2.jsx">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="360">
-          <caret line="24" column="12" lean-forward="false" selection-start-line="24" selection-start-column="12" selection-end-line="24" selection-end-column="12" />
+        <state relative-caret-position="493">
+          <caret line="29" column="4" lean-forward="true" selection-start-line="29" selection-start-column="4" selection-end-line="29" selection-end-column="4" />
           <folding />
@@ -332,16 +302,6 @@ </state>
     </entry>
-    <entry file="file://$PROJECT_DIR$/demo/index.jsx">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="90">
-          <caret line="6" column="7" lean-forward="true" selection-start-line="6" selection-start-column="7" selection-end-line="6" selection-end-column="7" />
-          <folding>
-            <element signature="e#0#26#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="375">
-          <caret line="25" column="72" lean-forward="true" selection-start-line="25" selection-start-column="72" selection-end-line="25" selection-end-column="72" />
+        <state relative-caret-position="0">
+          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
           <folding />
@@ -351,6 +311,6 @@ </state>
     </entry>
-    <entry file="file://$PROJECT_DIR$/scripts/build.js">
+    <entry file="file://$PROJECT_DIR$/src/react-codemirror2.jsx">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="15">
-          <caret line="1" column="36" lean-forward="false" selection-start-line="1" selection-start-column="36" selection-end-line="1" selection-end-column="36" />
+        <state relative-caret-position="119">
+          <caret line="7" column="0" lean-forward="true" selection-start-line="7" selection-start-column="0" selection-end-line="7" selection-end-column="0" />
           <folding />
@@ -362,4 +322,4 @@ </state>
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="150">
-          <caret line="10" column="17" lean-forward="true" selection-start-line="10" selection-start-column="17" selection-end-line="10" selection-end-column="17" />
+        <state relative-caret-position="136">
+          <caret line="8" column="33" lean-forward="true" selection-start-line="8" selection-start-column="33" selection-end-line="8" selection-end-column="33" />
           <folding />
@@ -366,0 +326,0 @@ </state>

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 @@

LICENSE

@@ -0,0 +0,0 @@ MIT License

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

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Fixed alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

179568

664.02%

Number of package files

13

8.33%

Lines of code

4509

8407.55%

Number of lines in readme file

40

185.71%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes