Add example for a large document

examples/index.js

@@ -14,6 +14,7 @@ import Emojis from './emojis'
 import HoveringMenu from './hovering-menu'
 import Iframes from './iframes'
 import Images from './images'
+import LargeDocument from './large-document'
 import Links from './links'
 import PasteHtml from './paste-html'
 import PlainText from './plain-text'
@@ -70,6 +71,7 @@ class App extends React.Component {
         {this.renderTab('Plain Text', 'plain-text')}
         {this.renderTab('Auto-markdown', 'auto-markdown')}
         {this.renderTab('Hovering Menu', 'hovering-menu')}
+        {this.renderTab('Large Document', 'large')}
         {this.renderTab('Links', 'links')}
         {this.renderTab('Images', 'images')}
         {this.renderTab('Embeds', 'embeds')}
@@ -132,6 +134,7 @@ const router = (
       <Route path="hovering-menu" component={HoveringMenu} />
       <Route path="iframes" component={Iframes} />
       <Route path="images" component={Images} />
+      <Route path="large" component={LargeDocument} />
       <Route path="links" component={Links} />
       <Route path="paste-html" component={PasteHtml} />
       <Route path="plain-text" component={PlainText} />

examples/large-document/Readme.md

@@ -0,0 +1,6 @@
+
+# Large Text Example
+
+This example showcase performance of Slate when editing a large document.
+
+Check out the [Examples readme](..) to see how to run it!

examples/large-document/index.js

@@ -0,0 +1,95 @@
+/* eslint-disable no-console */
+
+import { Editor, Raw } from '../..'
+import React from 'react'
+import faker from 'faker'
+
+const HEADINGS = 100
+const PARAGRAPHS = 8 // Paragraphs per heading
+
+/**
+ * Define a schema.
+ *
+ * @type {Object}
+ */
+
+const schema = {
+  nodes: {
+    'heading': props => <h1 {...props.attributes}>{props.children}</h1>,
+    'paragraph': props => <p {...props.attributes} style={{ marginBottom: 20 }}>{props.children}</p>,
+  }
+}
+
+const nodes = []
+
+for (let h = 0; h < HEADINGS; h++) {
+  nodes.push({
+    kind: 'block',
+    type: 'heading',
+    nodes: [ { kind: 'text', text: faker.lorem.sentence() } ]
+  })
+
+  for (let p = 0; p < PARAGRAPHS; p++) {
+    nodes.push({
+      kind: 'block',
+      type: 'paragraph',
+      nodes: [ { kind: 'text', text: faker.lorem.paragraph() } ]
+    })
+  }
+}
+
+/**
+ * The large text example.
+ *
+ * @type {Component}
+ */
+
+class LargeDocument extends React.Component {
+
+  /**
+   * Deserialize the initial editor state.
+   *
+   * @type {Object}
+   */
+
+  constructor() {
+    super()
+    console.time('deserializeLargDocument')
+    this.state = { state: Raw.deserialize({ nodes }, { terse: true }) }
+    console.timeEnd('deserializeLargDocument')
+  }
+
+  /**
+   * On change.
+   *
+   * @param {State} state
+   */
+
+  onChange = (state) => {
+    this.setState({ state })
+  }
+
+  /**
+   * Render the editor.
+   *
+   * @return {Component} component
+   */
+
+  render = () => {
+    return (
+      <Editor
+        placeholder={'Enter some plain text...'}
+        schema={schema}
+        state={this.state.state}
+        onChange={this.onChange}
+      />
+    )
+  }
+
+}
+
+/**
+ * Export.
+ */
+
+export default LargeDocument

package.json

@@ -42,6 +42,7 @@
     "eslint": "^3.8.1",
     "eslint-plugin-import": "^2.0.1",
     "eslint-plugin-react": "^6.4.1",
+    "faker": "^3.1.0",
     "fbjs": "^0.8.3",
     "gh-pages": "^0.11.0",
     "http-server": "^0.9.0",