fix findNativePoint in empty blocks, add error reporting to examples

examples/index.css

@@ -145,13 +145,27 @@ input:focus {
  * Example.
  */
 
-.example {
+.example, .error {
   max-width: 42em;
-  margin: 0 auto;
+  margin: 0 auto 20px;
   padding: 20px;
+}
+
+.example {
   background: #fff;
 }
 
+.error {
+  background: #fffae0;
+}
+
+.error .info {
+  background: #fbf1bd;
+  white-space: pre;
+  overflow-x: scroll;
+  margin-bottom: 0;
+}
+
 .editor > * > * + * {
   margin-top: 1em;
 }

examples/index.js

@@ -61,6 +61,15 @@ const EXAMPLES = [
 
 class App extends React.Component {
 
+  state = {
+    error: null,
+    info: null,
+  }
+
+  componentDidCatch(error, info) {
+    this.setState({ error, info })
+  }
+
   render() {
     return (
       <div className="app">
@@ -78,14 +87,39 @@ class App extends React.Component {
             </NavLink>
           ))}
         </div>
-        <div className="example">
-          <Switch>
-            {EXAMPLES.map(([ name, Component, path ]) => (
-              <Route key={path} path={path} component={Component} />
-            ))}
-            <Redirect from="/" to="/rich-text" />
-          </Switch>
-        </div>
+        {this.state.error
+          ? this.renderError()
+          : this.renderExample()}
+      </div>
+    )
+  }
+
+  renderExample() {
+    return (
+      <div className="example">
+        <Switch>
+          {EXAMPLES.map(([ name, Component, path ]) => (
+            <Route key={path} path={path} component={Component} />
+          ))}
+          <Redirect from="/" to="/rich-text" />
+        </Switch>
+      </div>
+    )
+  }
+
+  renderError() {
+    return (
+      <div className="error">
+        <p>
+          An error was thrown by one of the example's React components!
+        </p>
+        <pre className="info">
+          <code>
+            {this.state.error.stack}
+            {'\n'}
+            {this.state.info.componentStack}
+          </code>
+        </pre>
       </div>
     )
   }

packages/slate-react/src/utils/find-native-point.js

@@ -33,6 +33,16 @@ function findNativePoint(key, offset) {
     start = end
   }
 
+  // COMPAT: For empty blocks with only a single empty text node, we will have
+  // rendered a `<br/>` instead of a text node.
+  if (
+    el.childNodes.length == 1 &&
+    el.childNodes[0].childNodes.length == 1 &&
+    el.childNodes[0].childNodes[0].tagName == 'BR'
+  ) {
+    return { node: el.childNodes[0], offset: 0 }
+  }
+
   return null
 }