add default should component update (#124)

* add development performance testing examples

* refactor node map methods to be optimized

* fix updateDescendants return value

* remove console logs

* remove extra console log

examples/Readme.md

@@ -48,3 +48,8 @@ make watch-dist
 ```
 make watch-examples
 ```
+
+
+## Development Examples
+
+There are also a series of examples that are for development only, for things like checking performance, in the `./development` directory. You can safely ignore those!

examples/development/performance-plain/index.js

@@ -0,0 +1,56 @@
+
+import { Editor, Plain } from '../../..'
+import React from 'react'
+import initialState from './state.json'
+
+/**
+ * The plain text example.
+ *
+ * @type {Component}
+ */
+
+class PlainText extends React.Component {
+
+  /**
+   * Deserialize the initial editor state.
+   *
+   * @type {Object}
+   */
+
+  state = {
+    state: Plain.deserialize(initialState)
+  };
+
+  /**
+   * On change.
+   *
+   * @param {State} state
+   */
+
+  onChange = (state) => {
+    this.setState({ state })
+  }
+
+  /**
+   * Render the editor.
+   *
+   * @return {Component} component
+   */
+
+  render = () => {
+    return (
+      <Editor
+        placeholder={'Enter some plain text...'}
+        state={this.state.state}
+        onChange={this.onChange}
+      />
+    )
+  }
+
+}
+
+/**
+ * Export.
+ */
+
+export default PlainText

examples/development/performance-rich/index.js

@@ -0,0 +1,325 @@
+
+import { Editor, Mark, Raw, Utils } from '../../..'
+import React from 'react'
+import initialState from './state.json'
+import keycode from 'keycode'
+
+/**
+ * Define the default node type.
+ */
+
+const DEFAULT_NODE = 'paragraph'
+
+/**
+ * Define a set of node renderers.
+ *
+ * @type {Object}
+ */
+
+const NODES = {
+  'block-quote': props => <blockquote {...props.attributes}>{props.children}</blockquote>,
+  'bulleted-list': props => <ul {...props.attributes}>{props.children}</ul>,
+  'heading-one': props => <h1 {...props.attributes}>{props.children}</h1>,
+  'heading-two': props => <h2 {...props.attributes}>{props.children}</h2>,
+  'list-item': props => <li {...props.attributes}>{props.children}</li>,
+  'numbered-list': props => <ol {...props.attributes}>{props.children}</ol>
+}
+
+/**
+ * Define a set of mark renderers.
+ *
+ * @type {Object}
+ */
+
+const MARKS = {
+  bold: {
+    fontWeight: 'bold'
+  },
+  code: {
+    fontFamily: 'monospace',
+    backgroundColor: '#eee',
+    padding: '3px',
+    borderRadius: '4px'
+  },
+  italic: {
+    fontStyle: 'italic'
+  },
+  underlined: {
+    textDecoration: 'underline'
+  }
+}
+
+/**
+ * The rich text example.
+ *
+ * @type {Component}
+ */
+
+class RichText extends React.Component {
+
+  /**
+   * Deserialize the initial editor state.
+   *
+   * @type {Object}
+   */
+
+  state = {
+    state: Raw.deserialize(initialState)
+  };
+
+  /**
+   * Check if the current selection has a mark with `type` in it.
+   *
+   * @param {String} type
+   * @return {Boolean}
+   */
+
+  hasMark = (type) => {
+    const { state } = this.state
+    return state.marks.some(mark => mark.type == type)
+  }
+
+  /**
+   * Check if the any of the currently selected blocks are of `type`.
+   *
+   * @param {String} type
+   * @return {Boolean}
+   */
+
+  hasBlock = (type) => {
+    const { state } = this.state
+    return state.blocks.some(node => node.type == type)
+  }
+
+  /**
+   * On change, save the new state.
+   *
+   * @param {State} state
+   */
+
+  onChange = (state) => {
+    this.setState({ state })
+  }
+
+  /**
+   * On key down, if it's a formatting command toggle a mark.
+   *
+   * @param {Event} e
+   * @param {State} state
+   * @return {State}
+   */
+
+  onKeyDown = (e, state) => {
+    if (!Utils.Key.isCommand(e)) return
+    const key = keycode(e.which)
+    let mark
+
+    switch (key) {
+      case 'b':
+        mark = 'bold'
+        break
+      case 'i':
+        mark = 'italic'
+        break
+      case 'u':
+        mark = 'underlined'
+        break
+      case '`':
+        mark = 'code'
+        break
+      default:
+        return
+    }
+
+    state = state
+      .transform()
+      [this.hasMark(mark) ? 'removeMark' : 'addMark'](mark)
+      .apply()
+
+    e.preventDefault()
+    return state
+  }
+
+  /**
+   * When a mark button is clicked, toggle the current mark.
+   *
+   * @param {Event} e
+   * @param {String} type
+   */
+
+  onClickMark = (e, type) => {
+    e.preventDefault()
+    const isActive = this.hasMark(type)
+    let { state } = this.state
+
+    state = state
+      .transform()
+      [isActive ? 'removeMark' : 'addMark'](type)
+      .apply()
+
+    this.setState({ state })
+  }
+
+  /**
+   * When a block button is clicked, toggle the block type.
+   *
+   * @param {Event} e
+   * @param {String} type
+   */
+
+  onClickBlock = (e, type) => {
+    e.preventDefault()
+    const isActive = this.hasBlock(type)
+    let { state } = this.state
+
+    let transform = state
+      .transform()
+      .setBlock(isActive ? 'paragraph' : type)
+
+    // Handle the extra wrapping required for list buttons.
+    if (type == 'bulleted-list' || type == 'numbered-list') {
+      if (this.hasBlock('list-item')) {
+        transform = transform
+          .setBlock(DEFAULT_NODE)
+          .unwrapBlock(type)
+      } else {
+        transform = transform
+          .setBlock('list-item')
+          .wrapBlock(type)
+      }
+    }
+
+    // Handle everything but list buttons.
+    else {
+      transform = transform.setBlock(isActive ? DEFAULT_NODE : type)
+    }
+
+    state = transform.apply()
+    this.setState({ state })
+  }
+
+  /**
+   * Render.
+   *
+   * @return {Element}
+   */
+
+  render = () => {
+    return (
+      <div>
+        {this.renderToolbar()}
+        {this.renderEditor()}
+      </div>
+    )
+  }
+
+  /**
+   * Render the toolbar.
+   *
+   * @return {Element}
+   */
+
+  renderToolbar = () => {
+    return (
+      <div className="menu toolbar-menu">
+        {this.renderMarkButton('bold', 'format_bold')}
+        {this.renderMarkButton('italic', 'format_italic')}
+        {this.renderMarkButton('underlined', 'format_underlined')}
+        {this.renderMarkButton('code', 'code')}
+        {this.renderBlockButton('heading-one', 'looks_one')}
+        {this.renderBlockButton('heading-two', 'looks_two')}
+        {this.renderBlockButton('block-quote', 'format_quote')}
+        {this.renderBlockButton('numbered-list', 'format_list_numbered')}
+        {this.renderBlockButton('bulleted-list', 'format_list_bulleted')}
+      </div>
+    )
+  }
+
+  /**
+   * Render a mark-toggling toolbar button.
+   *
+   * @param {String} type
+   * @param {String} icon
+   * @return {Element}
+   */
+
+  renderMarkButton = (type, icon) => {
+    const isActive = this.hasMark(type)
+    const onMouseDown = e => this.onClickMark(e, type)
+
+    return (
+      <span className="button" onMouseDown={onMouseDown} data-active={isActive}>
+        <span className="material-icons">{icon}</span>
+      </span>
+    )
+  }
+
+  /**
+   * Render a block-toggling toolbar button.
+   *
+   * @param {String} type
+   * @param {String} icon
+   * @return {Element}
+   */
+
+  renderBlockButton = (type, icon) => {
+    const isActive = this.hasBlock(type)
+    const onMouseDown = e => this.onClickBlock(e, type)
+
+    return (
+      <span className="button" onMouseDown={onMouseDown} data-active={isActive}>
+        <span className="material-icons">{icon}</span>
+      </span>
+    )
+  }
+
+  /**
+   * Render the Slate editor.
+   *
+   * @return {Element}
+   */
+
+  renderEditor = () => {
+    return (
+      <div className="editor">
+        <Editor
+          placeholder={'Enter some rich text...'}
+          state={this.state.state}
+          renderNode={this.renderNode}
+          renderMark={this.renderMark}
+          onChange={this.onChange}
+          onKeyDown={this.onKeyDown}
+        />
+      </div>
+    )
+  }
+
+  /**
+   * Return a node renderer for a Slate `node`.
+   *
+   * @param {Node} node
+   * @return {Component or Void}
+   */
+
+  renderNode = (node) => {
+    return NODES[node.type]
+  }
+
+  /**
+   * Return a mark renderer for a Slate `mark`.
+   *
+   * @param {Mark} mark
+   * @return {Object or Void}
+   */
+
+  renderMark = (mark) => {
+    return MARKS[mark.type]
+  }
+
+}
+
+/**
+ * Export.
+ */
+
+export default RichText

examples/development/performance-rich/state.json

@@ -0,0 +1,103 @@
+{
+  "nodes": [
+    {
+      "kind": "block",
+      "type": "paragraph",
+      "nodes": [
+        {
+          "kind": "text",
+          "ranges": [
+            {
+              "text": "This is editable "
+            },
+            {
+              "text": "rich",
+              "marks": [
+                {
+                  "type": "bold"
+                }
+              ]
+            },
+            {
+              "text": " text, "
+            },
+            {
+              "text": "much",
+              "marks": [
+                {
+                  "type": "italic"
+                }
+              ]
+            },
+            {
+              "text": " better than a "
+            },
+            {
+              "text": "<textarea>",
+              "marks": [
+                {
+                  "type": "code"
+                }
+              ]
+            },
+            {
+              "text": "!"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "kind": "block",
+      "type": "paragraph",
+      "nodes": [
+        {
+          "kind": "text",
+          "ranges": [
+            {
+              "text": "Since it's rich text, you can do things like turn a selection of text "
+            },
+            {
+              "text": "bold",
+              "marks": [
+                {
+                  "type": "bold"
+                }
+              ]
+            },{
+              "text": ", or add a semantically rendered block quote in the middle of the page, like this:"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "kind": "block",
+      "type": "block-quote",
+      "nodes": [
+        {
+          "kind": "text",
+          "ranges": [
+            {
+              "text": "A wise quote."
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "kind": "block",
+      "type": "paragraph",
+      "nodes": [
+        {
+          "kind": "text",
+          "ranges": [
+            {
+              "text": "Try it out for yourself!"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

examples/index.js

@@ -17,6 +17,8 @@ import PlainText from './plain-text'
 import ReadOnly from './read-only'
 import RichText from './rich-text'
 import Tables from './tables'
+import DevPerformancePlain from './development/performance-plain'
+import DevPerformanceRich from './development/performance-rich'
 
 /**
  * Perf.
@@ -121,6 +123,8 @@ const router = (
       <Route path="read-only" component={ReadOnly} />
       <Route path="rich-text" component={RichText} />
       <Route path="tables" component={Tables} />
+      <Route path="dev-performance-plain" component={DevPerformancePlain} />
+      <Route path="dev-performance-rich" component={DevPerformanceRich} />
     </Route>
   </Router>
 )

examples/rich-text/index.js

@@ -17,7 +17,7 @@ const DEFAULT_NODE = 'paragraph'
  */
 
 const NODES = {
-  'block-quote': props => <blockquote {...props.attributes}>{props.children}</blockquote>,
+  'block-quote': (props) => <blockquote {...props.attributes}>{props.children}</blockquote>,
   'bulleted-list': props => <ul {...props.attributes}>{props.children}</ul>,
   'heading-one': props => <h1 {...props.attributes}>{props.children}</h1>,
   'heading-two': props => <h2 {...props.attributes}>{props.children}</h2>,

lib/models/node.js

@@ -824,16 +824,40 @@ const Node = {
   },
 
   /**
-   * Map all children nodes, updating them in their parents.
+   * Map all child nodes, updating them in their parents. This method is
+   * optimized to not return a new node if no changes are made.
+   *
+   * @param {Function} iterator
+   * @return {Node} node
+   */
+
+  mapChildren(iterator) {
+    let nodes = this.nodes
+
+    nodes.forEach((node, i) => {
+      let ret = iterator(node, i, this.nodes)
+      if (ret != node) nodes = nodes.set(ret.key, ret)
+    })
+
+    return this.merge({ nodes })
+  },
+
+  /**
+   * Map all descendant nodes, updating them in their parents. This method is
+   * optimized to not return a new node if no changes are made.
    *
    * @param {Function} iterator
    * @return {Node} node
    */
 
   mapDescendants(iterator) {
-    const nodes = this.nodes.map((node, i, original) => {
-      if (node.kind != 'text') node = node.mapDescendants(iterator)
-      return iterator(node, i, original)
+    let nodes = this.nodes
+
+    nodes.forEach((node, i) => {
+      let ret = node
+      if (ret.kind != 'text') ret = ret.mapDescendants(iterator)
+      ret = iterator(ret, i, this.nodes)
+      if (ret != node) nodes = nodes.set(ret.key, ret)
     })
 
     return this.merge({ nodes })
@@ -952,12 +976,7 @@ const Node = {
       return this.merge({ nodes })
     }
 
-    const nodes = this.nodes.map((node) => {
-      return node.kind == 'text'
-        ? node
-        : node.removeDescendant(key)
-    })
-
+    const nodes = this.mapChildren(n => n.kind == 'text' ? n : n.removeDescendant(key))
     return this.merge({ nodes })
   },
 
@@ -970,19 +989,7 @@ const Node = {
 
   updateDescendant(node) {
     this.assertHasDescendant(node)
-
-    if (this.hasChild(node)) {
-      const nodes = this.nodes.map(child => child.key == node.key ? node : child)
-      return this.merge({ nodes })
-    }
-
-    const nodes = this.nodes.map((child) => {
-      if (child.kind == 'text') return child
-      if (!child.hasDescendant(node)) return child
-      return child.updateDescendant(node)
-    })
-
-    return this.merge({ nodes })
+    return this.mapDescendants(d => d.key == node.key ? node : d)
   }
 
 }

lib/plugins/core.js

@@ -38,6 +38,13 @@ function Plugin(options = {}) {
       state: React.PropTypes.object.isRequired
     };
 
+    shouldComponentUpdate = (props, state) => {
+      return (
+        props.node != this.props.node ||
+        props.state.selection.hasEdgeIn(props.node)
+      )
+    }
+
     render = () => {
       const { attributes, children } = this.props
       return (
@@ -80,6 +87,13 @@ function Plugin(options = {}) {
       state: React.PropTypes.object.isRequired
     };
 
+    shouldComponentUpdate = (props, state) => {
+      return (
+        props.node != this.props.node ||
+        props.state.selection.hasEdgeIn(props.node)
+      )
+    }
+
     render = () => {
       const { attributes, children } = this.props
       return <span {...attributes}>{children}</span>