Reinstall custom event handlers when component updates (#158)

Author: Johennes

demo/src/Demo.js

@@ -42,6 +42,12 @@ class Demo extends React.Component {
   };
 
   render() {
+    let events = {
+      'focus': () => console.log('focus')
+    };
+    if (counter % 2 === 0) {
+      events['blur'] = () => console.log('blur')
+    }
     return (
       <div className="container container-narrow">
         <div className="page-header">
@@ -68,6 +74,7 @@ class Demo extends React.Component {
           label="Markdown Editor"
           value={this.state.textValue1}
           onChange={this.handleChange1}
+          events={events}
         />
         <hr />
         <SimpleMDEReact

src/index.tsx

@@ -49,6 +49,7 @@ export default class SimpleMDEEditor extends React.PureComponent<
   private elementWrapperRef: HTMLDivElement | null;
   private setElementWrapperRef: (element: HTMLDivElement) => void;
   private keyChange = false;
+  private customEventCallbacks: SimpleMdeToCodemirror = {}
 
   static defaultProps = {
     events: {},
@@ -92,6 +93,8 @@ export default class SimpleMDEEditor extends React.PureComponent<
       this.simpleMde!.value(this.props.value || "");
     }
     this.keyChange = false;
+
+    this.updateCustomEvents(this.props.events, prevProps.events);
   }
 
   componentWillUnmount() {
@@ -156,22 +159,37 @@ export default class SimpleMDEEditor extends React.PureComponent<
       this.simpleMde.codemirror.on("change", this.eventWrapper);
       this.simpleMde.codemirror.on("cursorActivity", this.getCursor);
 
-      const { events } = this.props;
-
-      // Handle custom events
-      events &&
-        Object.entries(events).forEach(([eventName, callback]) => {
-          if (eventName && callback) {
-            this.simpleMde &&
-              this.simpleMde.codemirror.on(
-                eventName as DOMEvent,
-                callback as any
-              );
-          }
-        });
+      this.updateCustomEvents(this.props.events)
     }
   };
 
+  updateCustomEvents = (events: SimpleMdeToCodemirror | undefined, prevEvents?: SimpleMdeToCodemirror | undefined) => {
+    prevEvents &&
+      Object.entries(prevEvents).forEach(([eventName, callback]) => {
+        if (eventName && callback && !events?.[eventName as CodemirrorEvents | DOMEvent]) {
+          this.simpleMde &&
+            this.simpleMde.codemirror.off(
+              eventName as DOMEvent,
+              this.customEventCallbacks[eventName as CodemirrorEvents | DOMEvent] as any
+            );
+        }
+      });
+    events &&
+      Object.entries(events).forEach(([eventName, callback]) => {
+        if (eventName && callback && !prevEvents?.[eventName as CodemirrorEvents | DOMEvent]) {
+          if (this.simpleMde) {
+            this.customEventCallbacks[eventName as CodemirrorEvents | DOMEvent] = (instance: any) => {
+              (this.props.events?.[eventName as CodemirrorEvents | DOMEvent] as any)?.(instance);
+            }
+            this.simpleMde.codemirror.on(
+              eventName as DOMEvent,
+              this.customEventCallbacks[eventName as CodemirrorEvents | DOMEvent] as any
+            );
+          }
+        }
+      });
+  };
+
   getCursor = () => {
     // https://codemirror.net/doc/manual.html#api_selection
     if (this.props.getLineAndCursor) {