Fix spell check bug (#1753)

* Fix spell check bug by add data-text:true

* Fix spell check bug by spell check add length to a leaf

* Fix tests to use data-text:true for marks

* Rename data-text to data-slate-leaf; Remove setRef; unlift attributes in leaf

* Update examples with data-*

* Add attributes to document

* Fix renderMark in all documents

* Prettier markdown

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)

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.

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>

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>