Fire onBlur event

packages/xpub-edit/src/components/Editor.js

@@ -28,8 +28,17 @@ class Editor extends React.Component {
       }),
       attributes: {
         class: classnames(baseClasses.ProseMirror, classes.ProseMirror)
+      },
+      handleDOMEvents: {
+        blur: this.props.onBlur ? view => {
+          this.props.onBlur(view.state.doc.content)
+        } : null
       }
     })
+
+    if (this.props.autoFocus) {
+      this.view.focus()
+    }
   }
 
   dispatchTransaction = transaction => {

packages/xpub-edit/src/components/HtmlEditor.js

@@ -26,7 +26,7 @@ const serializer = schema => {
 
 class HtmlEditor extends React.Component {
   componentWillMount () {
-    const { value, onChange, options } = this.props
+    const { value, onChange, onBlur, options } = this.props
     const { schema } = options
 
     const parse = parser(schema)
@@ -37,6 +37,10 @@ class HtmlEditor extends React.Component {
     this.onChange = debounce(value => {
       onChange(serialize(value))
     }, 1000, { maxWait: 5000 })
+
+    this.onBlur = value => {
+      onBlur(serialize(value))
+    }
   }
 
   render () {
@@ -50,6 +54,7 @@ class HtmlEditor extends React.Component {
         placeholderClassName={placeholderClassName}
         title={title}
         onChange={this.onChange}
+        onBlur={this.onBlur}
       />
     )
   }