Docs fixes for 0.50.0 (#3133)

* docs: typos

* docs: markdown inline code formatting

https://meta.stackexchange.com/questions/82718/how-do-i-escape-a-backtick-within-in-line-code-in-markdown

* docs: remove unused value, move comment, add deps to callback

* docs: add deps to renderMark callback

docs/walkthroughs/01-installing-slate.md

@@ -49,7 +49,7 @@ Of course we haven't rendered anything, so you won't see any changes.
 
 Next up is to render a `<Slate>` context provider.
 
-The provider component leeps track of your Slate editor, it's plugins, it's default value, and any changes that occur. It **must** be rendered above any `<Editable>` components. But it can also provide the editor state to other components like toolbars, menus, etc. using the `useSlate` hook.
+The provider component keeps track of your Slate editor, it's plugins, it's default value, and any changes that occur. It **must** be rendered above any `<Editable>` components. But it can also provide the editor state to other components like toolbars, menus, etc. using the `useSlate` hook.
 
 ```jsx
 const App = () => {
@@ -81,7 +81,7 @@ const App = () => {
 
 The `<Editable>` component acts like `contenteditable`. Anywhere you render it will render an editable rich-text document for the nearest editor context.
 
-There's only last step. So far we haven't defined what the default value of the editor is, so it's empty. Let's fix that by defining an initial value.
+There's only one last step. So far we haven't defined what the default value of the editor is, so it's empty. Let's fix that by defining an initial value.
 
 The value is just plain JSON. Here's one contains a single paragraph block with some text in it:
 
@@ -114,4 +114,4 @@ There you have it!
 
 That's the most basic example of Slate. If you render that onto the page, you should see a paragraph with the text `A line of text in a paragraph.`. And when you type, you should see the text change!
 
-You'll notice that there is no `onChange` handler defined. That's because the `<Slate>` context acts like an **un-controlled** component, with the changes automatically being propogated to any context consumers. However, just like with un-controlled components you can attach an `onChange` prop to listen for changes. We'll cover that later.
+You'll notice that there is no `onChange` handler defined. That's because the `<Slate>` context acts like an **un-controlled** component, with the changes automatically being propagated to any context consumers. However, just like with un-controlled components you can attach an `onChange` prop to listen for changes. We'll cover that later.

docs/walkthroughs/03-defining-custom-elements.md

@@ -101,7 +101,7 @@ const DefaultElement = props => {
 }
 ```
 
-Okay, but now we'll need a way for the user to actually turn a block into a code block. So let's change our `onKeyDown` function to add a `Ctrl-\`` shortcut that does just that:
+Okay, but now we'll need a way for the user to actually turn a block into a code block. So let's change our `onKeyDown` function to add a ``Ctrl-` `` shortcut that does just that:
 
 ```js
 // Import the `Editor` helpers from Slate.
@@ -148,9 +148,9 @@ const DefaultElement = props => {
 }
 ```
 
-Now, if you press `Ctrl-\`` the block your cursor is in should turn into a code block! Magic!
+Now, if you press ``Ctrl-` `` the block your cursor is in should turn into a code block! Magic!
 
-But we forgot one thing. When you hit `Ctrl-\`` again, it should change the code block back into a paragraph. To do that, we'll need to add a bit of logic to change the type we set based on whether any of the currently selected blocks are already a code block:
+But we forgot one thing. When you hit ``Ctrl-` `` again, it should change the code block back into a paragraph. To do that, we'll need to add a bit of logic to change the type we set based on whether any of the currently selected blocks are already a code block:
 
 ```js
 const App = () => {
@@ -192,4 +192,4 @@ const App = () => {
 }
 ```
 
-And there you have it! If you press `Ctrl-\`` while inside a code block, it should turn back into a paragraph!
+And there you have it! If you press ``Ctrl-` `` while inside a code block, it should turn back into a paragraph!

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

@@ -8,7 +8,6 @@ So we start with our app from earlier:
 
 ```js
 const App = () => {
-  const [value, setValue] = useState(initialValue)
   const editor = useMemo(() => withReact(createEditor()), [])
   const renderElement = useCallback(props => {
     switch (props.element.type) {
@@ -67,8 +66,8 @@ const App = () => {
             return
           }
 
-          // When "`" is pressed, keep our existing code block logic.
           switch (event.key) {
+            // When "`" is pressed, keep our existing code block logic.
             case '`': {
               event.preventDefault()
               const { selection } = editor
@@ -132,7 +131,7 @@ const App = () => {
         return <BoldMark {...props} />
       }
     }
-  })
+  }, [])
 
   return (
     <Slate editor={editor} defaultValue={defaultValue}>

docs/walkthroughs/05-executing-commands.md

@@ -28,7 +28,7 @@ const App = () => {
         return <BoldMark {...props} />
       }
     }
-  })
+  }, [])
 
   return (
     <Slate editor={editor} defaultValue={defaultValue}>
@@ -97,7 +97,7 @@ const App = () => {
         return <BoldMark {...props} />
       }
     }
-  })
+  }, [])
 
   return (
     <Slate editor={editor} defaultValue={defaultValue}>
@@ -213,7 +213,7 @@ const App = () => {
         return <BoldMark {...props} />
       }
     }
-  })
+  }, [])
 
   return (
     <Slate editor={editor} defaultValue={defaultValue}>
@@ -267,7 +267,7 @@ const App = () => {
         return <BoldMark {...props} />
       }
     }
-  })
+  }, [])
 
   return (
     // Add a  toolbar with buttons that call the same methods.