Add blur via HOC provider (PR #147, ISSUE #145)

src/client/components/MarkdownInput/MarkdownInput.DOCUMENTATION.md

@@ -58,6 +58,7 @@ function (optional) that is called on when the user presses the button, the func
 <div style={{ height: '70vh' }}>
   <MarkdownInput
     onChange={_scope.handleValueChange}
+    onBlur={() => console.log('blur')}
     value={_scope.state.markdownExample}
     autoFocus={false}
     readOnly={false}

src/client/components/MarkdownInput/MarkdownInput.react.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import Types from 'prop-types';
 import PlainMarkdownInput from '../PlainMarkdownInput';
+import ProvideBlur from './ProvideBlur.react';
 
 class MarkdownInput extends React.Component {
   static propTypes = {
     value: Types.string,
     onChange: Types.func,
+    onBlur: Types.func,
     onFullScreen: Types.func,
     extensions: Types.array,
     additionalButtons: Types.array,
@@ -19,6 +21,7 @@ class MarkdownInput extends React.Component {
   static defaultProps = {
     value: '',
     onChange: () => {},
+    onBlur: () => {},
     onFullScreen: () => {},
     extensions: [],
     additionalButtons: [],
@@ -50,18 +53,21 @@ class MarkdownInput extends React.Component {
     } = this.props;
 
     return (
-      <PlainMarkdownInput
-        value={value}
-        onChange={this.handleChangeValue}
-        onFullScreen={this.handleFullScreen}
-        extensions={extensions}
-        additionalButtons={additionalButtons}
-        readOnly={readOnly}
-        showFullScreenButton={showFullScreenButton}
-        locale={locale}
-        autoFocus={autoFocus}
-        hideToolbar={hideToolbar}
-      />
+      <ProvideBlur onBlur={this.props.onBlur}>
+        <PlainMarkdownInput
+          ref={el => (this.selfDOMNode = el)}
+          value={value}
+          onChange={this.handleChangeValue}
+          onFullScreen={this.handleFullScreen}
+          extensions={extensions}
+          additionalButtons={additionalButtons}
+          readOnly={readOnly}
+          showFullScreenButton={showFullScreenButton}
+          locale={locale}
+          autoFocus={autoFocus}
+          hideToolbar={hideToolbar}
+        />
+      </ProvideBlur>
     );
   }
 }

src/client/components/MarkdownInput/ProvideBlur.react.js

@@ -0,0 +1,62 @@
+import { PureComponent } from 'react';
+import { findDOMNode } from 'react-dom';
+import PropTypes from 'prop-types';
+
+/**
+ * This setup is needed to create proper `blur` handler.
+ * Slate-react Editor has `onBlur` prop, but if we just supply it to Editor component,
+ * `blur` will fire when a user clicks buttons B, I etc. But we need `blur` to fire only when
+ * component loses focus, and not when we operate with internal elements of editor.
+ */
+export default class ProvideBlur extends PureComponent {
+  static propTypes = {
+    onBlur: PropTypes.func,
+    onFocus: PropTypes.func
+  }
+
+  static defaultProps = {
+    onBlur: () => {},
+    onFocus: () => {}
+  }
+
+  state = {
+    isFocused: false
+  }
+
+  componentDidMount() {
+    this.selfDOMNode = findDOMNode(this);
+    this.selfDOMNode.addEventListener('focusin', this.handleFocusIn);
+    this.selfDOMNode.addEventListener('focusout', this.handleFocusOut);
+  }
+
+  componentWillUnmount() {
+    this.selfDOMNode.removeEventListener('focusin', this.handleFocusIn)
+    this.selfDOMNode.removeEventListener('focusout', this.handleFocusOut)
+  }
+
+  handleFocusIn = _ => {
+    if (!this.state.isFocused) {
+      this.setState(
+        { isFocused: true },
+        (_ => this.props.onFocus())
+      );
+    }
+  };
+
+  handleFocusOut = _ => {
+    const data = { timeout: null };
+    const abortFocusOut = _ => clearTimeout(data.timeout);
+
+    data.timeout = setTimeout(_ => {
+      this.selfDOMNode.removeEventListener('focusin', abortFocusOut);
+      this.setState({ isFocused: false }, this.props.onBlur);
+    })
+
+    this.selfDOMNode.addEventListener('focusin', abortFocusOut)
+  }
+
+  render() {
+    const { children } = this.props;
+    return children instanceof Function ? children() : children;
+  }
+}