Add slate.js example (#4899)

examples/with-slate/README.md

@@ -0,0 +1,41 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-slate)
+
+# slate.js example
+
+## How to use
+
+### Using `create-next-app`
+
+Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-slate with-slate-app
+# or
+yarn create next-app --example with-slate with-slate-app
+```
+
+### Download manually
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-slate
+cd with-slate
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+This example shows how to use Next.js along with [Slate.js](https://www.slatejs.org/).

examples/with-slate/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "with-slate",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "immutable": "^3.8.2",
+    "next": "6.1.1",
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2",
+    "slate": "^0.37.0",
+    "slate-plain-serializer": "^0.5.27",
+    "slate-react": "^0.15.0"
+  }
+}

examples/with-slate/pages/index.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import Plain from 'slate-plain-serializer'
+import { Editor } from 'slate-react'
+import { KeyUtils } from 'slate'
+
+class Index extends React.Component {
+  constructor (props) {
+    super(props)
+
+    // In order to allow ssr we need to reset the key
+    // generating function to its initial state.
+    KeyUtils.resetGenerator()
+
+    // Deserialize the initial editor value.
+    this.state = {
+      value: Plain.deserialize(
+        'This is editable plain text, just like a <textarea>!'
+      )
+    }
+  }
+
+  render () {
+    return (
+      <Editor
+        placeholder='Enter some plain text...'
+        value={this.state.value}
+        onChange={this.onChange}
+      />
+    )
+  }
+
+  onChange = ({ value }) => {
+    this.setState({ value })
+  }
+}
+
+export default Index