add saving to a database guide

Readme.md

@@ -106,7 +106,7 @@ If you're using Slate for the first time, check out the [Getting Started](./docs
   - [Defining Custom Block Nodes](./docs/guides/defining-custom-block-nodes.md)
   - [Applying Custom Formatting](./docs/guides/applying-custom-formatting.md)
   - [Using Plugins](./docs/guides/using-plugins.md)
-  - Saving to a Database
+  - [Saving to a Database](./docs/guides/saving-to-a-database.md)
   - Adding a Hovering Menu
   - Rendering Adjacent Elements in Components
   - Adding Images Using Void Nodes

docs/guides/Readme.md

@@ -8,5 +8,6 @@ These guides introduce you to the different parts of Slate in a step-by-step way
 - [Defining Custom Block Nodes](./defining-custom-block-nodes.md)
 - [Applying Custom Formatting](./applying-custom-formatting.md)
 - [Using Plugins](./using-plugins.md)
+- [Saving to a Database](./saving-to-a-database.md)
 
 _If you have an idea for a guide, or notice something that isn't clear, submit a pull request!_

docs/guides/saving-to-a-database.md

@@ -0,0 +1,115 @@
+
+<br/>
+<p align="center"><strong>Previous:</strong><br/><a href="./using-plugins.md">Using Plugins</a></p>
+<br/>
+
+# Saving to a Database
+
+Now that you've learned the basics of how to add functionality to the Slate editor, you might be wondering how you'd go about saving the content you've been editing, such that you can come back to your app later and have it load.
+
+In this guide, we'll show you how to add logic to save your Slate content to a database for storage and retrieval later.
+
+Let's start with a basic, plain text rendering editor:
+
+```js
+import { Editor, Plain } from 'slate'
+
+class App extends React.Component {
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      state: Plain.deserialize('A string of plain text.')
+    }
+  }
+
+  render() {
+    return (
+      <Editor
+        state={this.state.state}
+        onChange={state => this.onChange(state)}
+      />
+    )
+  }
+
+  onChange(state) {
+    this.setState({ state })
+  }
+
+}
+```
+
+That will render a basic Slate editor on your page, and when you type things will change. But if you refresh the page, everything will be reverted back to its original stage.
+
+What we need to do is save the changes you make somewhere. For this example, we'll just be using [Local Storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), but it will give you an idea for where you'd need to add your own database hooks.
+
+So, in our `onChange` handler, we need to save the `state`. But the `state` argument that `onChange` receives is an immutable object, so we can't just save it as-is. We need to serialize it to a format we understand first.
+
+In this case, we're already using the [`Plain`](../reference/serializers/plain.md) serializer to create our intial state, so let's use it to serialize our saved state as well, like so:
+
+```js
+class App extends React.Component {
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      state: Plain.deserialize('A string of plain text.')
+    }
+  }
+
+  render() {
+    return (
+      <Editor
+        state={this.state.state}
+        onChange={state => this.onChange(state)}
+      />
+    )
+  }
+
+  onChange(state) {
+    this.setState({ state })
+
+    // Save the state to Local Storage.
+    const string = Plain.serialize(state)
+    localStorage.setItem('content', string)
+  }
+
+}
+```
+
+Now whenever you edit the page, if you look in Local Storage, you should see the content string changing.
+
+But... if you refresh the page, everything is still reset. That's because we need to make sure the initial state is pulled from that same Local Storage location, like so:
+
+
+```js
+class App extends React.Component {
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      state: Plain.deserialize(localStorage.getItem('content'))
+    }
+  }
+
+  render() {
+    return (
+      <Editor
+        state={this.state.state}
+        onChange={state => this.onChange(state)}
+      />
+    )
+  }
+
+  onChange(state) {
+    this.setState({ state })
+
+    const string = Plain.serialize(state)
+    localStorage.setItem('content', string)
+  }
+
+}
+```
+
+Now you should be able to save changes across refreshes!
+

docs/guides/using-plugins.md

@@ -317,3 +317,8 @@ class App extends React.Component {
 ```
 
 That's why plugins are awesome. They let you get really expressive while also making your codebase easier to manage. And since Slate is built with plugins as a primary consideration, using them is dead simple!
+
+
+<br/>
+<p align="center"><strong>Next:</strong><br/><a href="./saving-to-a-database.md">Saving to a Database</a></p>
+<br/>