remove marks, in favor of text properties (#3235)

* remove marks, in favor of text properties

* fix lint

* fix more examples

* update docs

docs/walkthroughs/04-applying-custom-formatting.md

@@ -41,7 +41,7 @@ const App = () => {
 }
 ```
 
-And now, we'll edit the `onKeyDown` handler to make it so that when you press `control-B`, it will add a "bold" mark to the currently selected text:
+And now, we'll edit the `onKeyDown` handler to make it so that when you press `control-B`, it will add a `bold` format to the currently selected text:
 
 ```js
 const App = () => {
@@ -78,10 +78,16 @@ const App = () => {
               break
             }
 
-            // When "B" is pressed, add a bold mark to the text.
+            // When "B" is pressed, bold the text in the selection.
             case 'b': {
               event.preventDefault()
-              Editor.addMarks(editor, { type: 'bold' })
+              Editor.setNodes(
+                editor,
+                { bold: true },
+                // Apply it to text nodes, and split the text node up if the
+                // selection is overlapping only part of it.
+                { match: 'text', split: true }
+              )
               break
             }
           }
@@ -94,18 +100,25 @@ const App = () => {
 
 Okay, so we've got the hotkey handler setup... but! If you happen to now try selecting text and hitting `Ctrl-B`, you won't notice any change. That's because we haven't told Slate how to render a "bold" mark.
 
-For every mark type you want to add to your schema, you need to give Slate a "renderer" for that mark, just like elements. So let's define our `bold` mark:
+For every format you want to add to your schema, Slate will break up the text content into "leaves", and you need to tell Slate how to read it, just like for elements. So let's define a `Leaf` component:
 
 ```js
-// Define a React component to render bold text with.
-const BoldMark = props => {
-  return <strong {...props.attributes}>{props.children}</strong>
+// Define a React component to render leaves with bold text.
+const Leaf = props => {
+  return (
+    <span
+      {...props.attributes}
+      style={{ fontWeight: leaf.bold ? 'bold' : 'normal' }}
+    >
+      {props.children}
+    </span>
+  )
 }
 ```
 
 Pretty familiar, right?
 
-And now, let's tell Slate about that mark. To do that, we'll pass in the `renderMark` prop to our editor. Also, let's allow our mark to be toggled by changing `addMark` to `toggleMark`.
+And now, let's tell Slate about that leaf. To do that, we'll pass in the `renderLeaf` prop to our editor. Also, let's allow our formatting to be toggled by adding active-checking logic.
 
 ```js
 const App = () => {
@@ -119,21 +132,17 @@ const App = () => {
     }
   }, [])
 
-  // Define a mark rendering function that is memoized with `useCallback`.
-  const renderMark = useCallback(props => {
-    switch (props.mark.type) {
-      case 'bold': {
-        return <BoldMark {...props} />
-      }
-    }
+  // Define a leaf rendering function that is memoized with `useCallback`.
+  const renderLeaf = useCallback(props => {
+    return <Leaf {...props} />
   }, [])
 
   return (
     <Slate editor={editor} defaultValue={defaultValue}>
       <Editable
         renderElement={renderElement}
-        // Pass in the `renderMark` function.
-        renderMark={renderMark}
+        // Pass in the `renderLeaf` function.
+        renderLeaf={renderLeaf}
         onKeyDown={event => {
           if (!event.ctrlKey) {
             return
@@ -154,7 +163,11 @@ const App = () => {
 
             case 'b': {
               event.preventDefault()
-              Editor.addMarks(editor, { type: 'bold' })
+              Editor.setNodes(
+                editor,
+                { bold: true },
+                { match: 'text', split: true }
+              )
               break
             }
           }
@@ -164,8 +177,15 @@ const App = () => {
   )
 }
 
-const BoldMark = props => {
-  return <strong {...props.attributes}>{props.children}</strong>
+const Leaf = props => {
+  return (
+    <span
+      {...props.attributes}
+      style={{ fontWeight: leaf.bold ? 'bold' : 'normal' }}
+    >
+      {props.children}
+    </span>
+  )
 }
 ```