diff --git a/docs/guides/rendering.md b/docs/guides/rendering.md
index 3a1da99e0..8d6210eae 100644
--- a/docs/guides/rendering.md
+++ b/docs/guides/rendering.md
@@ -69,22 +69,24 @@ Marks work the same way, except they invoke the `renderMark` function. Like so:
 
 ```js
 function renderMark(props) {
-  const { children, mark } = props
+  const { children, mark, attributes } = props
   switch (mark.type) {
     case 'bold':
-      return <strong>{children}</strong>
+      return <strong {...{ attributes }}>{children}</strong>
     case 'italic':
-      return <em>{children}</em>
+      return <em {...{ attributes }}>{children}</em>
     case 'code':
-      return <code>{children}</code>
+      return <code {...{ attributes }}>{children}</code>
     case 'underline':
-      return <u>{children}</u>
+      return <u {...{ attributes }}>{children}</u>
     case 'strikethrough':
-      return <strike>{children}</strike>
+      return <strike {...{ attributes }}>{children}</strike>
   }
 }
 ```
 
+Be sure to mix `props.attributes` in your `renderMark`. `attributes` provides `data-*` dom attributes for spell-check in non-IE browsers.
+
 That way, if you happen to have a global stylesheet that defines `strong`, `em`, etc. styles then your editor's content will already be formatted!
 
 > 🤖 Be aware though that marks aren't guaranteed to be "contiguous". Which means even though a **word** is bolded, it's not guaranteed to render as a single `<strong>` element. If some of its characters are also italic, it might be split up into multiple elements—one `<strong>wo</strong>` and one `<em><strong>rd</strong></em>`.
diff --git a/docs/walkthroughs/saving-and-loading-html-content.md b/docs/walkthroughs/saving-and-loading-html-content.md
index 34baadeed..2f1f8d91f 100644
--- a/docs/walkthroughs/saving-and-loading-html-content.md
+++ b/docs/walkthroughs/saving-and-loading-html-content.md
@@ -268,13 +268,14 @@ class App extends React.Component {
 
   // Add a `renderMark` method to render marks.
   renderMark = props => {
-    switch (props.mark.type) {
+    const { mark, attributes } = props
+    switch (mark.type) {
       case 'bold':
-        return <strong>{props.children}</strong>
+        return <strong {...{ attributes }}>{props.children}</strong>
       case 'italic':
-        return <em>{props.children}</em>
+        return <em {...{ attributes }}>{props.children}</em>
       case 'underline':
-        return <u>{props.children}</u>
+        return <u {...{ attributes }}>{props.children}</u>
     }
   }
 }
diff --git a/docs/walkthroughs/using-plugins.md b/docs/walkthroughs/using-plugins.md
index a43c3b096..b54f3dada 100644
--- a/docs/walkthroughs/using-plugins.md
+++ b/docs/walkthroughs/using-plugins.md
@@ -43,7 +43,7 @@ class App extends React.Component {
   renderMark = props => {
     switch (props.mark.type) {
       case 'bold':
-        return <strong>{props.children}</strong>
+        return <strong {...{props.attributes}}>{props.children}</strong>
     }
   }
 }
diff --git a/examples/code-highlighting/index.js b/examples/code-highlighting/index.js
index 64c8929bc..d24b50e00 100644
--- a/examples/code-highlighting/index.js
+++ b/examples/code-highlighting/index.js
@@ -136,16 +136,32 @@ class CodeHighlighting extends React.Component {
    */
 
   renderMark = props => {
-    const { children, mark } = props
+    const { children, mark, attributes } = props
     switch (mark.type) {
       case 'comment':
-        return <span style={{ opacity: '0.33' }}>{children}</span>
+        return (
+          <span {...attributes} style={{ opacity: '0.33' }}>
+            {children}
+          </span>
+        )
       case 'keyword':
-        return <span style={{ fontWeight: 'bold' }}>{children}</span>
+        return (
+          <span {...attributes} style={{ fontWeight: 'bold' }}>
+            {children}
+          </span>
+        )
       case 'tag':
-        return <span style={{ fontWeight: 'bold' }}>{children}</span>
+        return (
+          <span {...attributes} style={{ fontWeight: 'bold' }}>
+            {children}
+          </span>
+        )
       case 'punctuation':
-        return <span style={{ opacity: '0.75' }}>{children}</span>
+        return (
+          <span {...attributes} style={{ opacity: '0.75' }}>
+            {children}
+          </span>
+        )
     }
   }
 
diff --git a/examples/hovering-menu/index.js b/examples/hovering-menu/index.js
index fb5a50533..e659e6c43 100644
--- a/examples/hovering-menu/index.js
+++ b/examples/hovering-menu/index.js
@@ -187,16 +187,16 @@ class HoveringMenu extends React.Component {
    */
 
   renderMark = props => {
-    const { children, mark } = props
+    const { children, mark, attributes } = props
     switch (mark.type) {
       case 'bold':
-        return <strong>{children}</strong>
+        return <strong {...attributes}>{children}</strong>
       case 'code':
-        return <code>{children}</code>
+        return <code {...attributes}>{children}</code>
       case 'italic':
-        return <em>{children}</em>
+        return <em {...attributes}>{children}</em>
       case 'underlined':
-        return <u>{children}</u>
+        return <u {...attributes}>{children}</u>
     }
   }
 }
diff --git a/examples/huge-document/index.js b/examples/huge-document/index.js
index b4993f821..a0817da3b 100644
--- a/examples/huge-document/index.js
+++ b/examples/huge-document/index.js
@@ -110,16 +110,16 @@ class HugeDocument extends React.Component {
    */
 
   renderMark = props => {
-    const { children, mark } = props
+    const { children, mark, attributes } = props
     switch (mark.type) {
       case 'bold':
-        return <strong>{children}</strong>
+        return <strong {...attributes}>{children}</strong>
       case 'code':
-        return <code>{children}</code>
+        return <code {...attributes}>{children}</code>
       case 'italic':
-        return <em>{children}</em>
+        return <em {...attributes}>{children}</em>
       case 'underlined':
-        return <u>{children}</u>
+        return <u {...attributes}>{children}</u>
     }
   }
 }
diff --git a/examples/markdown-preview/index.js b/examples/markdown-preview/index.js
index 9bd7812a0..a86f14a91 100644
--- a/examples/markdown-preview/index.js
+++ b/examples/markdown-preview/index.js
@@ -69,19 +69,20 @@ class MarkdownPreview extends React.Component {
    */
 
   renderMark = props => {
-    const { children, mark } = props
+    const { children, mark, attributes } = props
     switch (mark.type) {
       case 'bold':
-        return <strong>{children}</strong>
+        return <strong {...attributes}>{children}</strong>
       case 'code':
-        return <code>{children}</code>
+        return <code {...attributes}>{children}</code>
       case 'italic':
-        return <em>{children}</em>
+        return <em {...attributes}>{children}</em>
       case 'underlined':
-        return <u>{children}</u>
+        return <u {...attributes}>{children}</u>
       case 'title': {
         return (
           <span
+            {...attributes}
             style={{
               fontWeight: 'bold',
               fontSize: '20px',
@@ -94,11 +95,16 @@ class MarkdownPreview extends React.Component {
         )
       }
       case 'punctuation': {
-        return <span style={{ opacity: 0.2 }}>{children}</span>
+        return (
+          <span {...attributes} style={{ opacity: 0.2 }}>
+            {children}
+          </span>
+        )
       }
       case 'list': {
         return (
           <span
+            {...attributes}
             style={{
               paddingLeft: '10px',
               lineHeight: '10px',
@@ -112,6 +118,7 @@ class MarkdownPreview extends React.Component {
       case 'hr': {
         return (
           <span
+            {...attributes}
             style={{
               borderBottom: '2px solid #000',
               display: 'block',
diff --git a/examples/paste-html/index.js b/examples/paste-html/index.js
index 6d45807e0..c3d08f359 100644
--- a/examples/paste-html/index.js
+++ b/examples/paste-html/index.js
@@ -257,16 +257,16 @@ class PasteHtml extends React.Component {
    */
 
   renderMark = props => {
-    const { children, mark } = props
+    const { children, mark, attributes } = props
     switch (mark.type) {
       case 'bold':
-        return <strong>{children}</strong>
+        return <strong {...attributes}>{children}</strong>
       case 'code':
-        return <code>{children}</code>
+        return <code {...attributes}>{children}</code>
       case 'italic':
-        return <em>{children}</em>
+        return <em {...attributes}>{children}</em>
       case 'underlined':
-        return <u>{children}</u>
+        return <u {...attributes}>{children}</u>
     }
   }
 }
diff --git a/examples/rich-text/index.js b/examples/rich-text/index.js
index c0a0c5f69..b158cab4d 100644
--- a/examples/rich-text/index.js
+++ b/examples/rich-text/index.js
@@ -302,16 +302,16 @@ class RichTextExample extends React.Component {
    */
 
   renderMark = props => {
-    const { children, mark } = props
+    const { children, mark, attributes } = props
     switch (mark.type) {
       case 'bold':
-        return <strong>{children}</strong>
+        return <strong {...attributes}>{children}</strong>
       case 'code':
-        return <code>{children}</code>
+        return <code {...attributes}>{children}</code>
       case 'italic':
-        return <em>{children}</em>
+        return <em {...attributes}>{children}</em>
       case 'underlined':
-        return <u>{children}</u>
+        return <u {...attributes}>{children}</u>
     }
   }
 }
diff --git a/examples/search-highlighting/index.js b/examples/search-highlighting/index.js
index 684da78b1..c7cf59a1a 100644
--- a/examples/search-highlighting/index.js
+++ b/examples/search-highlighting/index.js
@@ -140,10 +140,14 @@ class SearchHighlighting extends React.Component {
    */
 
   renderMark = props => {
-    const { children, mark } = props
+    const { children, mark, attributes } = props
     switch (mark.type) {
       case 'highlight':
-        return <span style={{ backgroundColor: '#ffeeba' }}>{children}</span>
+        return (
+          <span {...attributes} style={{ backgroundColor: '#ffeeba' }}>
+            {children}
+          </span>
+        )
     }
   }
 }
diff --git a/examples/syncing-operations/index.js b/examples/syncing-operations/index.js
index b7c7fd8c3..611eac221 100644
--- a/examples/syncing-operations/index.js
+++ b/examples/syncing-operations/index.js
@@ -197,16 +197,16 @@ class SyncingEditor extends React.Component {
    */
 
   renderMark = props => {
-    const { children, mark } = props
+    const { children, mark, attributes } = props
     switch (mark.type) {
       case 'bold':
-        return <strong>{children}</strong>
+        return <strong {...attributes}>{children}</strong>
       case 'code':
-        return <code>{children}</code>
+        return <code {...attributes}>{children}</code>
       case 'italic':
-        return <em>{children}</em>
+        return <em {...attributes}>{children}</em>
       case 'underlined':
-        return <u>{children}</u>
+        return <u {...attributes}>{children}</u>
     }
   }
 }
diff --git a/examples/tables/index.js b/examples/tables/index.js
index e8a61e7df..45145b3f4 100644
--- a/examples/tables/index.js
+++ b/examples/tables/index.js
@@ -160,10 +160,10 @@ class Tables extends React.Component {
    */
 
   renderMark = props => {
-    const { children, mark } = props
+    const { children, mark, attributes } = props
     switch (mark.type) {
       case 'bold':
-        return <strong>{children}</strong>
+        return <strong {...attributes}>{children}</strong>
     }
   }
 }
diff --git a/packages/slate-react/src/components/leaf.js b/packages/slate-react/src/components/leaf.js
index 339c9bb5c..e2b8e3f40 100644
--- a/packages/slate-react/src/components/leaf.js
+++ b/packages/slate-react/src/components/leaf.js
@@ -99,9 +99,21 @@ class Leaf extends React.Component {
     const { marks, node, offset, text, editor } = this.props
     const { stack } = editor
     const leaf = this.renderText()
+    const attributes = {
+      'data-slate-leaf': true,
+    }
 
     return marks.reduce((children, mark) => {
-      const props = { editor, mark, marks, node, offset, text, children }
+      const props = {
+        editor,
+        mark,
+        marks,
+        node,
+        offset,
+        text,
+        children,
+        attributes,
+      }
       const element = stack.find('renderMark', props)
       return element || children
     }, leaf)
diff --git a/packages/slate-react/src/plugins/after.js b/packages/slate-react/src/plugins/after.js
index 9524a4c03..2bb32c148 100644
--- a/packages/slate-react/src/plugins/after.js
+++ b/packages/slate-react/src/plugins/after.js
@@ -305,8 +305,8 @@ function AfterPlugin() {
 
     // Get the selection point.
     const native = window.getSelection()
-    const { anchorNode, anchorOffset } = native
-    const point = findPoint(anchorNode, anchorOffset, value)
+    const { anchorNode } = native
+    const point = findPoint(anchorNode, 0, value)
     if (!point) return
 
     // Get the text node and leaf in question.
@@ -323,7 +323,7 @@ function AfterPlugin() {
       leaves.find(r => {
         start = end
         end += r.text.length
-        if (end >= point.offset) return true
+        if (end > point.offset) return true
       }) || lastLeaf
 
     // Get the text information.
diff --git a/packages/slate-react/test/rendering/fixtures/custom-decorator.js b/packages/slate-react/test/rendering/fixtures/custom-decorator.js
index 39c003267..467eabae1 100644
--- a/packages/slate-react/test/rendering/fixtures/custom-decorator.js
+++ b/packages/slate-react/test/rendering/fixtures/custom-decorator.js
@@ -17,7 +17,7 @@ function decorateNode(block) {
 }
 
 function Bold(props) {
-  return React.createElement('strong', null, props.children)
+  return React.createElement('strong', { ...props.attributes }, props.children)
 }
 
 function renderMark(props) {
@@ -45,7 +45,7 @@ export const output = `
   <div style="position:relative">
     <span>
       <span>o</span>
-      <span><strong>n</strong></span>
+      <span><strong data-slate-leaf="true">n</strong></span>
       <span>e</span>
     </span>
   </div>
diff --git a/packages/slate-react/test/rendering/fixtures/custom-mark.js b/packages/slate-react/test/rendering/fixtures/custom-mark.js
index c76464a9c..7dca0c526 100644
--- a/packages/slate-react/test/rendering/fixtures/custom-mark.js
+++ b/packages/slate-react/test/rendering/fixtures/custom-mark.js
@@ -4,7 +4,7 @@ import React from 'react'
 import h from '../../helpers/h'
 
 function Bold(props) {
-  return React.createElement('strong', null, props.children)
+  return React.createElement('strong', { ...props.attributes }, props.children)
 }
 
 function renderMark(props) {
@@ -33,7 +33,7 @@ export const output = `
   <div style="position:relative">
     <span>
       <span>one</span>
-      <span><strong>two</strong></span>
+      <span><strong data-slate-leaf="true">two</strong></span>
       <span>three</span>
     </span>
   </div>