Add defaultValue prop to Editor component (#2418)

* Add `defaultValue` prop to `Editor` component

* Use `defaultValue` prop in the `Read Only` example

* Use `defaultValue` prop in the `Check Lists` example

* Use `defaultValue` prop in the `Code Highlighting` example

* Use `defaultValue` prop in the `Embeds` example

* Use `defaultValue` prop in the `Emojis` example

* Use `defaultValue` prop in the `Forced Layout` example

* Use `defaultValue` prop in the `Huge Document` example

* Use `defaultValue` prop in the `Images` example

* Use `defaultValue` prop in the `Input Tester` example

* Use `defaultValue` prop in the `Markdown Preview` example

* Use `defaultValue` prop in the `Markdown Shortcuts` example

* Use `defaultValue` prop in the `Paste HTML` example

* Use `defaultValue` prop in the `Plain Text` example

* Use `defaultValue` prop in the `Plugins` example

* Use `defaultValue` prop in the `RTL` example

* Use `defaultValue` prop in the `Search Highlighting` example

* Use `defaultValue` prop in the `Tables` example

examples/check-lists/index.js

@@ -2,9 +2,17 @@ import { Editor } from 'slate-react'
 import { Value } from 'slate'
 
 import React from 'react'
-import initialValue from './value.json'
+import initialValueAsJson from './value.json'
 import styled from 'react-emotion'
 
+/**
+ * Deserialize the initial editor value.
+ *
+ * @type {Object}
+ */
+
+const initialValue = Value.fromJSON(initialValueAsJson)
+
 /**
  * Create a few styling components.
  *
@@ -88,16 +96,6 @@ class CheckListItem extends React.Component {
  */
 
 class CheckLists extends React.Component {
-  /**
-   * Deserialize the initial editor value.
-   *
-   * @type {Object}
-   */
-
-  state = {
-    value: Value.fromJSON(initialValue),
-  }
-
   /**
    * Render.
    *
@@ -109,8 +107,7 @@ class CheckLists extends React.Component {
       <Editor
         spellCheck
         placeholder="Get to work..."
-        value={this.state.value}
+        defaultValue={initialValue}
-        onChange={this.onChange}
         onKeyDown={this.onKeyDown}
         renderNode={this.renderNode}
       />
@@ -133,16 +130,6 @@ class CheckLists extends React.Component {
     }
   }
 
-  /**
-   * On change, save the new value.
-   *
-   * @param {Editor} editor
-   */
-
-  onChange = ({ value }) => {
-    this.setState({ value })
-  }
-
   /**
    * On key down...
    *

examples/code-highlighting/index.js

@@ -3,7 +3,15 @@ import { Value } from 'slate'
 
 import Prism from 'prismjs'
 import React from 'react'
-import initialValue from './value.json'
+import initialValueAsJson from './value.json'
+
+/**
+ * Deserialize the initial editor value.
+ *
+ * @type {Object}
+ */
+
+const initialValue = Value.fromJSON(initialValueAsJson)
 
 /**
  * Define our code components.
@@ -67,16 +75,6 @@ function getContent(token) {
  */
 
 class CodeHighlighting extends React.Component {
-  /**
-   * Deserialize the raw initial value.
-   *
-   * @type {Object}
-   */
-
-  state = {
-    value: Value.fromJSON(initialValue),
-  }
-
   /**
    * Render.
    *
@@ -87,8 +85,7 @@ class CodeHighlighting extends React.Component {
     return (
       <Editor
         placeholder="Write some code..."
-        value={this.state.value}
+        defaultValue={initialValue}
-        onChange={this.onChange}
         onKeyDown={this.onKeyDown}
         renderNode={this.renderNode}
         renderMark={this.renderMark}
@@ -155,16 +152,6 @@ class CodeHighlighting extends React.Component {
     }
   }
 
-  /**
-   * On change, save the new value.
-   *
-   * @param {Editor} editor
-   */
-
-  onChange = ({ value }) => {
-    this.setState({ value })
-  }
-
   /**
    * On key down inside code blocks, insert soft new lines.
    *

examples/embeds/index.js

@@ -3,7 +3,15 @@ import { Value } from 'slate'
 
 import React from 'react'
 import Video from './video'
-import initialValue from './value.json'
+import initialValueAsJson from './value.json'
+
+/**
+ * Deserialize the initial editor value.
+ *
+ * @type {Object}
+ */
+
+const initialValue = Value.fromJSON(initialValueAsJson)
 
 /**
  * The images example.
@@ -12,16 +20,6 @@ import initialValue from './value.json'
  */
 
 class Embeds extends React.Component {
-  /**
-   * Deserialize the raw initial value.
-   *
-   * @type {Object}
-   */
-
-  state = {
-    value: Value.fromJSON(initialValue),
-  }
-
   /**
    * The editor's schema.
    *
@@ -46,9 +44,8 @@ class Embeds extends React.Component {
     return (
       <Editor
         placeholder="Enter some text..."
-        value={this.state.value}
+        defaultValue={initialValue}
         schema={this.schema}
-        onChange={this.onChange}
         renderNode={this.renderNode}
       />
     )
@@ -70,16 +67,6 @@ class Embeds extends React.Component {
         return next()
     }
   }
-
-  /**
-   * On change.
-   *
-   * @param {Editor} editor
-   */
-
-  onChange = ({ value }) => {
-    this.setState({ value })
-  }
 }
 
 /**

examples/emojis/index.js

@@ -2,10 +2,18 @@ import { Editor } from 'slate-react'
 import { Value } from 'slate'
 
 import React from 'react'
-import initialValue from './value.json'
+import initialValueAsJson from './value.json'
 import styled from 'react-emotion'
 import { Button, Icon, Toolbar } from '../components'
 
+/**
+ * Deserialize the initial editor value.
+ *
+ * @type {Object}
+ */
+
+const initialValue = Value.fromJSON(initialValueAsJson)
+
 /**
  * A styled emoji inline component.
  *
@@ -57,16 +65,6 @@ const noop = e => e.preventDefault()
  */
 
 class Emojis extends React.Component {
-  /**
-   * Deserialize the raw initial value.
-   *
-   * @type {Object}
-   */
-
-  state = {
-    value: Value.fromJSON(initialValue),
-  }
-
   /**
    * The editor's schema.
    *
@@ -110,9 +108,8 @@ class Emojis extends React.Component {
         <Editor
           placeholder="Write some 😍👋🎉..."
           ref={this.ref}
-          value={this.state.value}
+          defaultValue={initialValue}
           schema={this.schema}
-          onChange={this.onChange}
           renderNode={this.renderNode}
         />
       </div>
@@ -156,16 +153,6 @@ class Emojis extends React.Component {
     }
   }
 
-  /**
-   * On change.
-   *
-   * @param {Editor} editor
-   */
-
-  onChange = ({ value }) => {
-    this.setState({ value })
-  }
-
   /**
    * When clicking a emoji, insert it
    *

examples/forced-layout/index.js

@@ -2,7 +2,15 @@ import { Editor } from 'slate-react'
 import { Block, Value } from 'slate'
 
 import React from 'react'
-import initialValue from './value.json'
+import initialValueAsJson from './value.json'
+
+/**
+ * Deserialize the initial editor value.
+ *
+ * @type {Object}
+ */
+
+const initialValue = Value.fromJSON(initialValueAsJson)
 
 /**
  * A simple schema to enforce the nodes in the Slate document.
@@ -38,16 +46,6 @@ const schema = {
  */
 
 class ForcedLayout extends React.Component {
-  /**
-   * Deserialize the initial editor value.
-   *
-   * @type {Object}
-   */
-
-  state = {
-    value: Value.fromJSON(initialValue),
-  }
-
   /**
    * Render the editor.
    *
@@ -58,9 +56,8 @@ class ForcedLayout extends React.Component {
     return (
       <Editor
         placeholder="Enter a title..."
-        value={this.state.value}
+        defaultValue={initialValue}
         schema={schema}
-        onChange={this.onChange}
         renderNode={this.renderNode}
       />
     )
@@ -87,16 +84,6 @@ class ForcedLayout extends React.Component {
         return next()
     }
   }
-
-  /**
-   * On change.
-   *
-   * @param {Editor} editor
-   */
-
-  onChange = ({ value }) => {
-    this.setState({ value })
-  }
 }
 
 /**

examples/huge-document/index.js

@@ -35,6 +35,14 @@ for (let h = 0; h < HEADINGS; h++) {
   }
 }
 
+/**
+ * Deserialize the initial editor value.
+ *
+ * @type {Object}
+ */
+
+const initialValue = Value.fromJSON(json, { normalize: false })
+
 /**
  * The huge document example.
  *
@@ -42,14 +50,6 @@ for (let h = 0; h < HEADINGS; h++) {
  */
 
 class HugeDocument extends React.Component {
-  /**
-   * Deserialize the initial editor value.
-   *
-   * @type {Object}
-   */
-
-  state = { value: Value.fromJSON(json, { normalize: false }) }
-
   /**
    * Render the editor.
    *
@@ -61,8 +61,7 @@ class HugeDocument extends React.Component {
       <Editor
         placeholder="Enter some text..."
         spellCheck={false}
-        value={this.state.value}
+        defaultValue={initialValue}
-        onChange={this.onChange}
         renderNode={this.renderNode}
         renderMark={this.renderMark}
       />
@@ -114,16 +113,6 @@ class HugeDocument extends React.Component {
         return next()
     }
   }
-
-  /**
-   * On change.
-   *
-   * @param {Editor} editor
-   */
-
-  onChange = ({ value }) => {
-    this.setState({ value })
-  }
 }
 
 /**

examples/images/index.js

@@ -2,12 +2,20 @@ import { Editor, getEventRange, getEventTransfer } from 'slate-react'
 import { Block, Value } from 'slate'
 
 import React from 'react'
-import initialValue from './value.json'
+import initialValueAsJson from './value.json'
 import imageExtensions from 'image-extensions'
 import isUrl from 'is-url'
 import styled from 'react-emotion'
 import { Button, Icon, Toolbar } from '../components'
 
+/**
+ * Deserialize the initial editor value.
+ *
+ * @type {Object}
+ */
+
+const initialValue = Value.fromJSON(initialValueAsJson)
+
 /**
  * A styled image block component.
  *
@@ -83,16 +91,6 @@ const schema = {
  */
 
 class Images extends React.Component {
-  /**
-   * Deserialize the raw initial value.
-   *
-   * @type {Object}
-   */
-
-  state = {
-    value: Value.fromJSON(initialValue),
-  }
-
   /**
    * Store a reference to the `editor`.
    *
@@ -120,9 +118,8 @@ class Images extends React.Component {
         <Editor
           placeholder="Enter some text..."
           ref={this.ref}
-          value={this.state.value}
+          defaultValue={initialValue}
           schema={schema}
-          onChange={this.onChange}
           onDrop={this.onDropOrPaste}
           onPaste={this.onDropOrPaste}
           renderNode={this.renderNode}
@@ -153,16 +150,6 @@ class Images extends React.Component {
     }
   }
 
-  /**
-   * On change.
-   *
-   * @param {Editor} editor
-   */
-
-  onChange = ({ value }) => {
-    this.setState({ value })
-  }
-
   /**
    * On clicking the image button, prompt for an image and insert it.
    *

examples/input-tester/index.js

@@ -3,10 +3,18 @@ import { Value } from 'slate'
 
 import React from 'react'
 import styled from 'react-emotion'
-import initialValue from './value.json'
+import initialValueAsJson from './value.json'
 import { Icon } from '../components'
 import { createArrayValue } from 'react-values'
 
+/**
+ * Deserialize the initial editor value.
+ *
+ * @type {Object}
+ */
+
+const initialValue = Value.fromJSON(initialValueAsJson)
+
 const EventsValue = createArrayValue()
 
 const Wrapper = styled('div')`
@@ -193,10 +201,6 @@ const Event = ({ event, targetRange, selection }) => {
 }
 
 class InputTester extends React.Component {
-  state = {
-    value: Value.fromJSON(initialValue),
-  }
-
   componentDidMount() {
     const editor = this.el.querySelector('[contenteditable="true"]')
     editor.addEventListener('keydown', this.onEvent)
@@ -221,7 +225,7 @@ class InputTester extends React.Component {
           spellCheck
           placeholder="Enter some text..."
           ref={this.ref}
-          value={this.state.value}
+          defaultValue={initialValue}
           onChange={this.onChange}
           renderNode={this.renderNode}
           renderMark={this.renderMark}

examples/markdown-preview/index.js

@@ -11,6 +11,16 @@ import React from 'react'
 // eslint-disable-next-line
 ;Prism.languages.markdown=Prism.languages.extend("markup",{}),Prism.languages.insertBefore("markdown","prolog",{blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},code:[{pattern:/^(?: {4}|\t).+/m,alias:"keyword"},{pattern:/``.+?``|`[^`\n]+`/,alias:"keyword"}],title:[{pattern:/\w+.*(?:\r?\n|\r)(?:==+|--+)/,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#+.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])([\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:/(^|[^\\])(\*\*|__)(?:(?:\r?\n|\r)(?!\r?\n|\r)|.)+?\2/,lookbehind:!0,inside:{punctuation:/^\*\*|^__|\*\*$|__$/}},italic:{pattern:/(^|[^\\])([*_])(?:(?:\r?\n|\r)(?!\r?\n|\r)|.)+?\2/,lookbehind:!0,inside:{punctuation:/^[*_]|[*_]$/}},url:{pattern:/!?\[[^\]]+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)| ?\[[^\]\n]*\])/,inside:{variable:{pattern:/(!?\[)[^\]]+(?=\]$)/,lookbehind:!0},string:{pattern:/"(?:\\.|[^"\\])*"(?=\)$)/}}}}),Prism.languages.markdown.bold.inside.url=Prism.util.clone(Prism.languages.markdown.url),Prism.languages.markdown.italic.inside.url=Prism.util.clone(Prism.languages.markdown.url),Prism.languages.markdown.bold.inside.italic=Prism.util.clone(Prism.languages.markdown.italic),Prism.languages.markdown.italic.inside.bold=Prism.util.clone(Prism.languages.markdown.bold); // prettier-ignore
 
+/**
+ * Deserialize the initial editor value.
+ *
+ * @type {Object}
+ */
+
+const initialValue = Plain.deserialize(
+  'Slate is flexible enough to add **decorations** that can format text based on its content. For example, this editor has **Markdown** preview decorations on it, to make it _dead_ simple to make an editor with built-in Markdown previewing.\n## Try it out!\nTry it out for yourself!'
+)
+
 /**
  * The markdown preview example.
  *
@@ -18,18 +28,6 @@ import React from 'react'
  */
 
 class MarkdownPreview extends React.Component {
-  /**
-   * Deserialize the initial editor value.
-   *
-   * @type {Object}
-   */
-
-  state = {
-    value: Plain.deserialize(
-      'Slate is flexible enough to add **decorations** that can format text based on its content. For example, this editor has **Markdown** preview decorations on it, to make it _dead_ simple to make an editor with built-in Markdown previewing.\n## Try it out!\nTry it out for yourself!'
-    ),
-  }
-
   /**
    *
    * Render the example.
@@ -41,8 +39,7 @@ class MarkdownPreview extends React.Component {
     return (
       <Editor
         placeholder="Write some markdown..."
-        value={this.state.value}
+        defaultValue={initialValue}
-        onChange={this.onChange}
         renderMark={this.renderMark}
         decorateNode={this.decorateNode}
       />
@@ -134,16 +131,6 @@ class MarkdownPreview extends React.Component {
     }
   }
 
-  /**
-   * On change.
-   *
-   * @param {Editor} editor
-   */
-
-  onChange = ({ value }) => {
-    this.setState({ value })
-  }
-
   /**
    * Define a decorator for markdown styles.
    *

examples/markdown-shortcuts/index.js

@@ -2,7 +2,15 @@ import { Editor } from 'slate-react'
 import { Value } from 'slate'
 
 import React from 'react'
-import initialValue from './value.json'
+import initialValueAsJson from './value.json'
+
+/**
+ * Deserialize the initial editor value.
+ *
+ * @type {Object}
+ */
+
+const initialValue = Value.fromJSON(initialValueAsJson)
 
 /**
  * The auto-markdown example.
@@ -11,16 +19,6 @@ import initialValue from './value.json'
  */
 
 class MarkdownShortcuts extends React.Component {
-  /**
-   * Deserialize the raw initial value.
-   *
-   * @type {Object}
-   */
-
-  state = {
-    value: Value.fromJSON(initialValue),
-  }
-
   /**
    * Get the block type for a series of auto-markdown shortcut `chars`.
    *
@@ -64,8 +62,7 @@ class MarkdownShortcuts extends React.Component {
     return (
       <Editor
         placeholder="Write some markdown..."
-        value={this.state.value}
+        defaultValue={initialValue}
-        onChange={this.onChange}
         onKeyDown={this.onKeyDown}
         renderNode={this.renderNode}
       />
@@ -108,16 +105,6 @@ class MarkdownShortcuts extends React.Component {
     }
   }
 
-  /**
-   * On change.
-   *
-   * @param {Editor} editor
-   */
-
-  onChange = ({ value }) => {
-    this.setState({ value })
-  }
-
   /**
    * On key down, check for our specific key shortcuts.
    *

examples/paste-html/index.js

@@ -3,9 +3,17 @@ import { Editor, getEventTransfer } from 'slate-react'
 import { Value } from 'slate'
 
 import React from 'react'
-import initialValue from './value.json'
+import initialValueAsJson from './value.json'
 import styled from 'react-emotion'
 
+/**
+ * Deserialize the initial editor value.
+ *
+ * @type {Object}
+ */
+
+const initialValue = Value.fromJSON(initialValueAsJson)
+
 /**
  * Tags to blocks.
  *
@@ -152,16 +160,6 @@ const serializer = new Html({ rules: RULES })
  */
 
 class PasteHtml extends React.Component {
-  /**
-   * Deserialize the raw initial value.
-   *
-   * @type {Object}
-   */
-
-  state = {
-    value: Value.fromJSON(initialValue),
-  }
-
   /**
    * The editor's schema.
    *
@@ -186,10 +184,9 @@ class PasteHtml extends React.Component {
     return (
       <Editor
         placeholder="Paste in some HTML..."
-        value={this.state.value}
+        defaultValue={initialValue}
         schema={this.schema}
         onPaste={this.onPaste}
-        onChange={this.onChange}
         renderNode={this.renderNode}
         renderMark={this.renderMark}
       />
@@ -277,16 +274,6 @@ class PasteHtml extends React.Component {
     }
   }
 
-  /**
-   * On change, save the new value.
-   *
-   * @param {Editor} editor
-   */
-
-  onChange = ({ value }) => {
-    this.setState({ value })
-  }
-
   /**
    * On paste, deserialize the HTML and then insert the fragment.
    *

examples/plain-text/index.js

@@ -3,6 +3,16 @@ import { Editor } from 'slate-react'
 
 import React from 'react'
 
+/**
+ * Deserialize the initial editor value.
+ *
+ * @type {Object}
+ */
+
+const initialValue = Plain.deserialize(
+  'This is editable plain text, just like a <textarea>!'
+)
+
 /**
  * The plain text example.
  *
@@ -10,18 +20,6 @@ import React from 'react'
  */
 
 class PlainText extends React.Component {
-  /**
-   * Deserialize the initial editor value.
-   *
-   * @type {Object}
-   */
-
-  state = {
-    value: Plain.deserialize(
-      'This is editable plain text, just like a <textarea>!'
-    ),
-  }
-
   /**
    * Render the editor.
    *
@@ -32,21 +30,10 @@ class PlainText extends React.Component {
     return (
       <Editor
         placeholder="Enter some plain text..."
-        value={this.state.value}
+        defaultValue={initialValue}
-        onChange={this.onChange}
       />
     )
   }
-
-  /**
-   * On change.
-   *
-   * @param {Editor} editor
-   */
-
-  onChange = ({ value }) => {
-    this.setState({ value })
-  }
 }
 
 /**

examples/plugins/index.js

@@ -6,6 +6,17 @@ import CollapseOnEscape from './collapse-on-escape'
 import SoftBreak from './soft-break'
 import WordCount from './word-count'
 
+/**
+ * Deserialize the initial editor value.
+ *
+ * @type {Object}
+ */
+
+const initialValue = Plain.deserialize(`This example shows how you can extend Slate with plugins! It uses four fairly simple plugins, but you can use any plugins you want, or write your own!
+The first is a simple plugin to collapse the selection whenever the escape key is pressed. Try selecting some text and pressing escape.
+The second is another simple plugin that inserts a "soft" break when enter is pressed instead of creating a new block. Try pressing enter!
+The third is an example of using the plugin.render property to create a higher-order-component.`)
+
 /**
  * Plugins.
  */
@@ -19,19 +30,6 @@ const plugins = [CollapseOnEscape(), SoftBreak(), WordCount()]
  */
 
 class Plugins extends React.Component {
-  /**
-   * Deserialize the initial editor value.
-   *
-   * @type {Object}
-   */
-
-  state = {
-    value: Plain.deserialize(`This example shows how you can extend Slate with plugins! It uses four fairly simple plugins, but you can use any plugins you want, or write your own!
-The first is a simple plugin to collapse the selection whenever the escape key is pressed. Try selecting some text and pressing escape.
-The second is another simple plugin that inserts a "soft" break when enter is pressed instead of creating a new block. Try pressing enter!
-The third is an example of using the plugin.render property to create a higher-order-component.`),
-  }
-
   /**
    * Render the editor.
    *
@@ -43,21 +41,10 @@ The third is an example of using the plugin.render property to create a higher-o
       <Editor
         placeholder="Enter some text..."
         plugins={plugins}
-        value={this.state.value}
+        defaultValue={initialValue}
-        onChange={this.onChange}
       />
     )
   }
-
-  /**
-   * On change.
-   *
-   * @param {Editor} editor
-   */
-
-  onChange = ({ value }) => {
-    this.setState({ value })
-  }
 }
 
 /**

examples/read-only/index.js

@@ -3,6 +3,16 @@ import { Editor } from 'slate-react'
 
 import React from 'react'
 
+/**
+ * Deserialize the read-only value.
+ *
+ * @type {Object}
+ */
+
+const value = Plain.deserialize(
+  'This is read-only text. You should not be able to edit it, which is useful for scenarios where you want to render via Slate, without giving the user editing permissions.'
+)
+
 /**
  * The read-only example.
  *
@@ -10,18 +20,6 @@ import React from 'react'
  */
 
 class ReadOnly extends React.Component {
-  /**
-   * Deserialize the initial editor value.
-   *
-   * @type {Object}
-   */
-
-  state = {
-    value: Plain.deserialize(
-      'This is read-only text. You should not be able to edit it, which is useful for scenarios where you want to render via Slate, without giving the user editing permissions.'
-    ),
-  }
-
   /**
    * Render the editor.
    *
@@ -29,24 +27,7 @@ class ReadOnly extends React.Component {
    */
 
   render() {
-    return (
+    return <Editor defaultValue={value} readOnly />
-      <Editor
-        readOnly
-        placeholder="Enter some text..."
-        value={this.state.value}
-        onChange={this.onChange}
-      />
-    )
-  }
-
-  /**
-   * On change.
-   *
-   * @param {Editor} editor
-   */
-
-  onChange = ({ value }) => {
-    this.setState({ value })
   }
 }
 

examples/rtl/index.js

@@ -2,7 +2,15 @@ import { Editor } from 'slate-react'
 import { Value } from 'slate'
 
 import React from 'react'
-import initialValue from './value.json'
+import initialValueAsJson from './value.json'
+
+/**
+ * Deserialize the initial editor value.
+ *
+ * @type {Object}
+ */
+
+const initialValue = Value.fromJSON(initialValueAsJson)
 
 /**
  * A right-to-left text example.
@@ -11,16 +19,6 @@ import initialValue from './value.json'
  */
 
 class RTL extends React.Component {
-  /**
-   * Deserialize the initial editor value.
-   *
-   * @type {Object}
-   */
-
-  state = {
-    value: Value.fromJSON(initialValue),
-  }
-
   /**
    * Render the editor.
    *
@@ -31,8 +29,7 @@ class RTL extends React.Component {
     return (
       <Editor
         placeholder="Enter some plain text..."
-        value={this.state.value}
+        defaultValue={initialValue}
-        onChange={this.onChange}
         onKeyDown={this.onKeyDown}
         renderNode={this.renderNode}
       />
@@ -57,16 +54,6 @@ class RTL extends React.Component {
     }
   }
 
-  /**
-   * On change.
-   *
-   * @param {Editor} editor
-   */
-
-  onChange = ({ value }) => {
-    this.setState({ value })
-  }
-
   /**
    * On key down, if it's <shift-enter> add a soft break.
    *

examples/search-highlighting/index.js

@@ -2,10 +2,18 @@ import { Editor } from 'slate-react'
 import { Value } from 'slate'
 
 import React from 'react'
-import initialValue from './value.json'
+import initialValueAsJson from './value.json'
 import styled from 'react-emotion'
 import { Icon, Toolbar } from '../components'
 
+/**
+ * Deserialize the initial editor value.
+ *
+ * @type {Object}
+ */
+
+const initialValue = Value.fromJSON(initialValueAsJson)
+
 /**
  * Some styled components for the search box.
  *
@@ -35,16 +43,6 @@ const SearchInput = styled('input')`
  */
 
 class SearchHighlighting extends React.Component {
-  /**
-   * Deserialize the initial editor value.
-   *
-   * @type {Object}
-   */
-
-  state = {
-    value: Value.fromJSON(initialValue),
-  }
-
   /**
    * The editor's schema.
    *
@@ -91,9 +89,8 @@ class SearchHighlighting extends React.Component {
         <Editor
           placeholder="Enter some rich text..."
           ref={this.ref}
-          value={this.state.value}
+          defaultValue={initialValue}
           schema={this.schema}
-          onChange={this.onChange}
           renderMark={this.renderMark}
           spellCheck
         />
@@ -123,16 +120,6 @@ class SearchHighlighting extends React.Component {
     }
   }
 
-  /**
-   * On change, save the new `value`.
-   *
-   * @param {Editor} editor
-   */
-
-  onChange = ({ value }) => {
-    this.setState({ value })
-  }
-
   /**
    * On input change, update the decorations.
    *

examples/tables/index.js

@@ -3,7 +3,15 @@ import { Editor, getEventTransfer } from 'slate-react'
 import { Value } from 'slate'
 
 import React from 'react'
-import initialValue from './value.json'
+import initialValueAsJson from './value.json'
+
+/**
+ * Deserialize the initial editor value.
+ *
+ * @type {Object}
+ */
+
+const initialValue = Value.fromJSON(initialValueAsJson)
 
 /**
  * The tables example.
@@ -12,16 +20,6 @@ import initialValue from './value.json'
  */
 
 class Tables extends React.Component {
-  /**
-   * Deserialize the raw initial value.
-   *
-   * @type {Object}
-   */
-
-  state = {
-    value: Value.fromJSON(initialValue),
-  }
-
   /**
    * Render the example.
    *
@@ -32,8 +30,7 @@ class Tables extends React.Component {
     return (
       <Editor
         placeholder="Enter some text..."
-        value={this.state.value}
+        defaultValue={initialValue}
-        onChange={this.onChange}
         onKeyDown={this.onKeyDown}
         onDrop={this.onDropOrPaste}
         onPaste={this.onDropOrPaste}
@@ -101,16 +98,6 @@ class Tables extends React.Component {
     event.preventDefault()
   }
 
-  /**
-   * On change.
-   *
-   * @param {Editor} editor
-   */
-
-  onChange = ({ value }) => {
-    this.setState({ value })
-  }
-
   /**
    * On delete, do nothing if at the end of a table cell.
    *

packages/slate-react/src/components/editor.js

@@ -35,6 +35,7 @@ class Editor extends React.Component {
     autoCorrect: Types.bool,
     autoFocus: Types.bool,
     className: Types.string,
+    defaultValue: SlateTypes.value,
     id: Types.string,
     onChange: Types.func,
     options: Types.object,
@@ -46,7 +47,7 @@ class Editor extends React.Component {
     spellCheck: Types.bool,
     style: Types.object,
     tabIndex: Types.number,
-    value: SlateTypes.value.isRequired,
+    value: SlateTypes.value,
     ...EVENT_HANDLERS.reduce((obj, handler) => {
       obj[handler] = Types.func
       return obj
@@ -77,7 +78,7 @@ class Editor extends React.Component {
    * @type {Object}
    */
 
-  state = {}
+  state = { value: this.props.defaultValue }
 
   /**
    * Temporary values.
@@ -105,7 +106,7 @@ class Editor extends React.Component {
     }
 
     if (this.tmp.change) {
-      this.props.onChange(this.tmp.change)
+      this.handleChange(this.tmp.change)
       this.tmp.change = null
     }
   }
@@ -118,7 +119,7 @@ class Editor extends React.Component {
     this.tmp.updates++
 
     if (this.tmp.change) {
-      this.props.onChange(this.tmp.change)
+      this.handleChange(this.tmp.change)
       this.tmp.change = null
     }
   }
@@ -146,12 +147,17 @@ class Editor extends React.Component {
     this.resolveController(plugins, schema, commands, queries, placeholder)
 
     // Set the current props on the controller.
-    const { options, readOnly, value } = props
+    const { options, readOnly, value: valueFromProps } = props
+    const { value: valueFromState } = this.state
+    const value = valueFromProps || valueFromState
     this.controller.setReadOnly(readOnly)
     this.controller.setValue(value, options)
 
     // Render the editor's children with the controller.
-    const children = this.controller.run('renderEditor', props)
+    const children = this.controller.run('renderEditor', {
+      ...props,
+      value,
+    })
     return children
   }
 
@@ -178,11 +184,14 @@ class Editor extends React.Component {
       )
 
       this.tmp.resolves++
-      const react = ReactPlugin(this.props)
+      const react = ReactPlugin({
+        ...this.props,
+        value: this.props.value || this.state.value,
+      })
 
       const onChange = change => {
         if (this.tmp.mounted) {
-          this.props.onChange(change)
+          this.handleChange(change)
         } else {
           this.tmp.change = change
         }
@@ -197,6 +206,18 @@ class Editor extends React.Component {
     }
   )
 
+  handleChange(change) {
+    const { onChange } = this.props
+    const { value } = this.state
+
+    if (value) {
+      // Syncing value inside this component since parent does not want control of it (defaultValue was used)
+      this.setState({ value: change.value })
+    }
+
+    onChange(change)
+  }
+
   /**
    * Mimic the API of the `Editor` controller, so that this component instance
    * can be passed in its place to plugins.