Add controller

examples/code-highlighting/index.js

@@ -188,8 +188,9 @@ class CodeHighlighting extends React.Component {
    * @return {Array}
    */
 
-  decorateNode = node => {
-    if (node.type != 'code') return
+  decorateNode = (node, next) => {
+    const others = next()
+    if (node.type != 'code') return others
 
     const language = node.data.get('language')
     const texts = node.getTexts().toArray()
@@ -245,7 +246,7 @@ class CodeHighlighting extends React.Component {
       start = end
     }
 
-    return decorations
+    return [...others, ...decorations]
   }
 }
 

examples/emojis/index.js

@@ -81,6 +81,16 @@ class Emojis extends React.Component {
     },
   }
 
+  /**
+   * Store a reference to the `editor`.
+   *
+   * @param {Editor} editor
+   */
+
+  ref = editor => {
+    this.editor = editor
+  }
+
   /**
    * Render the app.
    *
@@ -99,6 +109,7 @@ class Emojis extends React.Component {
         </Toolbar>
         <Editor
           placeholder="Write some 😍👋🎉..."
+          ref={this.ref}
           value={this.state.value}
           schema={this.schema}
           onChange={this.onChange}
@@ -156,18 +167,16 @@ class Emojis extends React.Component {
 
   onClickEmoji = (e, code) => {
     e.preventDefault()
-    const { value } = this.state
-    const change = value.change()
-
-    change
-      .insertInline({
-        type: 'emoji',
-        data: { code },
-      })
-      .moveToStartOfNextText()
-      .focus()
-
-    this.onChange(change)
+
+    this.editor.change(change => {
+      change
+        .insertInline({
+          type: 'emoji',
+          data: { code },
+        })
+        .moveToStartOfNextText()
+        .focus()
+    })
   }
 }
 

examples/history/index.js

@@ -22,6 +22,16 @@ class History extends React.Component {
     value: Value.fromJSON(initialValue),
   }
 
+  /**
+   * Store a reference to the `editor`.
+   *
+   * @param {Editor} editor
+   */
+
+  ref = editor => {
+    this.editor = editor
+  }
+
   /**
    * Render the editor.
    *
@@ -30,7 +40,9 @@ class History extends React.Component {
 
   render() {
     const { value } = this.state
-    const { history } = value
+    const { data } = value
+    const undos = data.get('undos')
+    const redos = data.get('redos')
     return (
       <div>
         <Toolbar>
@@ -40,11 +52,12 @@ class History extends React.Component {
           <Button onMouseDown={this.onClickRedo}>
             <Icon>redo</Icon>
           </Button>
-          <span>Undos: {history.undos.size}</span>
-          <span>Redos: {history.redos.size}</span>
+          <span>Undos: {undos ? undos.size : 0}</span>
+          <span>Redos: {redos ? redos.size : 0}</span>
         </Toolbar>
         <Editor
           placeholder="Enter some text..."
+          ref={this.ref}
           value={this.state.value}
           onChange={this.onChange}
         />
@@ -69,9 +82,7 @@ class History extends React.Component {
 
   onClickRedo = event => {
     event.preventDefault()
-    const { value } = this.state
-    const change = value.change().redo()
-    this.onChange(change)
+    this.editor.change(change => change.redo())
   }
 
   /**
@@ -81,9 +92,7 @@ class History extends React.Component {
 
   onClickUndo = event => {
     event.preventDefault()
-    const { value } = this.state
-    const change = value.change().undo()
-    this.onChange(change)
+    this.editor.change(change => change.undo())
   }
 }
 

examples/hovering-menu/index.js

@@ -63,7 +63,8 @@ class HoverMenu extends React.Component {
    */
 
   renderMarkButton(type, icon) {
-    const { value } = this.props
+    const { editor } = this.props
+    const { value } = editor
     const isActive = value.activeMarks.some(mark => mark.type == type)
     return (
       <Button
@@ -84,10 +85,9 @@ class HoverMenu extends React.Component {
    */
 
   onClickMark(event, type) {
-    const { value, onChange } = this.props
+    const { editor } = this.props
     event.preventDefault()
-    const change = value.change().toggleMark(type)
-    onChange(change)
+    editor.change(change => change.toggleMark(type))
   }
 }
 
@@ -157,21 +157,34 @@ class HoveringMenu extends React.Component {
   render() {
     return (
       <div>
-        <HoverMenu
-          innerRef={menu => (this.menu = menu)}
-          value={this.state.value}
-          onChange={this.onChange}
-        />
         <Editor
           placeholder="Enter some text..."
           value={this.state.value}
           onChange={this.onChange}
+          renderEditor={this.renderEditor}
           renderMark={this.renderMark}
         />
       </div>
     )
   }
 
+  /**
+   * Render the editor.
+   *
+   * @param {Object} props
+   * @param {Editor} editor
+   * @return {Element}
+   */
+
+  renderEditor = (props, editor) => {
+    return (
+      <React.Fragment>
+        {props.children}
+        <HoverMenu innerRef={menu => (this.menu = menu)} editor={editor} />
+      </React.Fragment>
+    )
+  }
+
   /**
    * Render a Slate mark.
    *

examples/images/index.js

@@ -93,6 +93,16 @@ class Images extends React.Component {
     value: Value.fromJSON(initialValue),
   }
 
+  /**
+   * Store a reference to the `editor`.
+   *
+   * @param {Editor} editor
+   */
+
+  ref = editor => {
+    this.editor = editor
+  }
+
   /**
    * Render the app.
    *
@@ -109,6 +119,7 @@ class Images extends React.Component {
         </Toolbar>
         <Editor
           placeholder="Enter some text..."
+          ref={this.ref}
           value={this.state.value}
           schema={schema}
           onChange={this.onChange}
@@ -158,21 +169,18 @@ class Images extends React.Component {
     event.preventDefault()
     const src = window.prompt('Enter the URL of the image:')
     if (!src) return
-
-    const change = this.state.value.change().call(insertImage, src)
-
-    this.onChange(change)
+    this.editor.change(insertImage, src)
   }
 
   /**
    * On drop, insert the image wherever it is dropped.
    *
    * @param {Event} event
    * @param {Change} change
-   * @param {Editor} editor
    */
 
-  onDropOrPaste = (event, change, editor) => {
+  onDropOrPaste = (event, change) => {
+    const { editor } = change
     const target = getEventRange(event, change.value)
     if (!target && event.type == 'drop') return
 

examples/input-tester/index.js

@@ -210,12 +210,17 @@ class InputTester extends React.Component {
     window.document.addEventListener('selectionchange', this.onEvent)
   }
 
+  ref = editor => {
+    this.editor = editor
+  }
+
   render() {
     return (
       <Wrapper innerRef={this.onRef}>
         <Editor
           spellCheck
           placeholder="Enter some text..."
+          ref={this.ref}
           value={this.state.value}
           onChange={this.onChange}
           renderNode={({ attributes, children, node }) => {
@@ -268,19 +273,20 @@ class InputTester extends React.Component {
   }
 
   recordEvent = event => {
-    const { value } = this.state
+    const { editor } = this
+    const { value } = editor
     let targetRange
 
     if (event.getTargetRanges) {
       const [nativeTargetRange] = event.getTargetRanges()
-      targetRange = nativeTargetRange && findRange(nativeTargetRange, value)
+      targetRange = nativeTargetRange && findRange(nativeTargetRange, editor)
     }
 
     const nativeSelection = window.getSelection()
     const nativeRange = nativeSelection.rangeCount
       ? nativeSelection.getRangeAt(0)
       : undefined
-    const selection = nativeRange && findRange(nativeRange, value)
+    const selection = nativeRange && findRange(nativeRange, editor)
 
     EventsValue.push({
       event,
@@ -291,12 +297,13 @@ class InputTester extends React.Component {
   }
 
   logEvent = event => {
-    const { value } = this.state
+    const { editor } = this
+    const { value } = editor
     const nativeSelection = window.getSelection()
     const nativeRange = nativeSelection.rangeCount
       ? nativeSelection.getRangeAt(0)
       : undefined
-    const selection = nativeRange && findRange(nativeRange, value)
+    const selection = nativeRange && findRange(nativeRange, editor)
 
     const {
       type,
@@ -323,7 +330,7 @@ class InputTester extends React.Component {
         style += '; background-color: lightskyblue'
         const [nativeTargetRange] = event.getTargetRanges()
         const targetRange =
-          nativeTargetRange && findRange(nativeTargetRange, value)
+          nativeTargetRange && findRange(nativeTargetRange, editor)
 
         details = {
           inputType,