From 2f4c8726e0bb1e56204dffb8dab27fefb46f7996 Mon Sep 17 00:00:00 2001
From: Ian Storm Taylor <ian@ianstormtaylor.com>
Date: Mon, 11 Jul 2016 18:39:45 -0700
Subject: [PATCH] add attributes props in examples

---
 examples/auto-markdown/index.js     | 19 +++++++++----------
 examples/code-highlighting/index.js |  3 +--
 examples/hovering-menu/index.js     | 15 ---------------
 examples/images/index.js            |  3 +--
 examples/links/index.js             |  2 +-
 examples/paste-html/index.js        | 25 ++++++++++++-------------
 examples/tables/index.js            |  7 +++----
 7 files changed, 27 insertions(+), 47 deletions(-)

diff --git a/examples/auto-markdown/index.js b/examples/auto-markdown/index.js
index 5b338040b..4f54cc226 100644
--- a/examples/auto-markdown/index.js
+++ b/examples/auto-markdown/index.js
@@ -11,16 +11,15 @@ import initialState from './state.json'
  */
 
 const NODES = {
-  'block-quote': props => <blockquote>{props.children}</blockquote>,
-  'bulleted-list': props => <ul>{props.children}</ul>,
-  'heading-one': props => <h1>{props.children}</h1>,
-  'heading-two': props => <h2>{props.children}</h2>,
-  'heading-three': props => <h3>{props.children}</h3>,
-  'heading-four': props => <h4>{props.children}</h4>,
-  'heading-five': props => <h5>{props.children}</h5>,
-  'heading-six': props => <h6>{props.children}</h6>,
-  'list-item': props => <li>{props.children}</li>,
-  'paragraph': props => <p>{props.children}</p>
+  '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>,
+  'heading-three': props => <h3 {...props.attributes}>{props.children}</h3>,
+  'heading-four': props => <h4 {...props.attributes}>{props.children}</h4>,
+  'heading-five': props => <h5 {...props.attributes}>{props.children}</h5>,
+  'heading-six': props => <h6 {...props.attributes}>{props.children}</h6>,
+  'list-item': props => <li {...props.attributes}>{props.children}</li>
 }
 
 /**
diff --git a/examples/code-highlighting/index.js b/examples/code-highlighting/index.js
index f593c520d..c6db5d1aa 100644
--- a/examples/code-highlighting/index.js
+++ b/examples/code-highlighting/index.js
@@ -12,8 +12,7 @@ import initialState from './state.json'
  */
 
 const NODES = {
-  code: props => <pre><code>{props.children}</code></pre>,
-  paragraph: props => <p>{props.children}</p>
+  code: props => <pre><code {...props.attributes}>{props.children}</code></pre>
 }
 
 /**
diff --git a/examples/hovering-menu/index.js b/examples/hovering-menu/index.js
index 62c560bc8..910e9ddff 100644
--- a/examples/hovering-menu/index.js
+++ b/examples/hovering-menu/index.js
@@ -5,16 +5,6 @@ import React from 'react'
 import position from 'selection-position'
 import initialState from './state.json'
 
-/**
- * Node renderers.
- *
- * @type {Object}
- */
-
-const NODES = {
-  paragraph: props => <p>{props.children}</p>
-}
-
 /**
  * Mark renderers.
  *
@@ -99,7 +89,6 @@ class HoveringMenu extends React.Component {
       <div className="editor">
         <Editor
           state={this.state.state}
-          renderNode={this.renderNode}
           renderMark={this.renderMark}
           onChange={this.onChange}
         />
@@ -107,10 +96,6 @@ class HoveringMenu extends React.Component {
     )
   }
 
-  renderNode = (node) => {
-    return NODES[node.type]
-  }
-
   renderMark = (mark) => {
     return MARKS[mark.type]
   }
diff --git a/examples/images/index.js b/examples/images/index.js
index 163d4a32a..15f25debf 100644
--- a/examples/images/index.js
+++ b/examples/images/index.js
@@ -12,13 +12,12 @@ import { Map } from 'immutable'
  */
 
 const NODES = {
-  paragraph: props => <p>{props.children}</p>,
   image: (props) => {
     const { node, state } = props
     const { data } = node
     const isActive = state.isFocused && state.blocks.includes(node)
     const src = data.get('src')
-    return <img src={src} data-active={isActive} />
+    return <img {...props.attributes} src={src} data-active={isActive} />
   }
 }
 
diff --git a/examples/links/index.js b/examples/links/index.js
index 3eb96b434..e30dc0ad2 100644
--- a/examples/links/index.js
+++ b/examples/links/index.js
@@ -16,7 +16,7 @@ const NODES = {
   link: (props) => {
     const { data } = props.node
     const href = data.get('href')
-    return <a href={href}>{props.children}</a>
+    return <a {...props.attributes} href={href}>{props.children}</a>
   }
 }
 
diff --git a/examples/paste-html/index.js b/examples/paste-html/index.js
index ff1449105..bdcbd162f 100644
--- a/examples/paste-html/index.js
+++ b/examples/paste-html/index.js
@@ -10,22 +10,21 @@ import initialState from './state.json'
  */
 
 const NODES = {
-  'bulleted-list': props => <ul>{props.children}</ul>,
-  'code': props => <pre><code>{props.children}</code></pre>,
-  'heading-one': props => <h1>{props.children}</h1>,
-  'heading-two': props => <h2>{props.children}</h2>,
-  'heading-three': props => <h3>{props.children}</h3>,
-  'heading-four': props => <h4>{props.children}</h4>,
-  'heading-five': props => <h5>{props.children}</h5>,
-  'heading-six': props => <h6>{props.children}</h6>,
-  'list-item': props => <li>{props.children}</li>,
-  'numbered-list': props => <ol>{props.children}</ol>,
-  'paragraph': props => <p>{props.children}</p>,
-  'quote': props => <blockquote>{props.children}</blockquote>,
+  'bulleted-list': props => <ul {...props.attributes}>{props.children}</ul>,
+  'code': props => <pre><code {...props.attributes}>{props.children}</code></pre>,
+  'heading-one': props => <h1 {...props.attributes}>{props.children}</h1>,
+  'heading-two': props => <h2 {...props.attributes}>{props.children}</h2>,
+  'heading-three': props => <h3 {...props.attributes}>{props.children}</h3>,
+  'heading-four': props => <h4 {...props.attributes}>{props.children}</h4>,
+  'heading-five': props => <h5 {...props.attributes}>{props.children}</h5>,
+  'heading-six': props => <h6 {...props.attributes}>{props.children}</h6>,
+  'list-item': props => <li {...props.attributes}>{props.children}</li>,
+  'numbered-list': props => <ol {...props.attributes}>{props.children}</ol>,
+  'quote': props => <blockquote {...props.attributes}>{props.children}</blockquote>,
   'link': (props) => {
     const { data } = props.node
     const href = data.get('href')
-    return <a href={href}>{props.children}</a>
+    return <a href={href} {...props.attributes}>{props.children}</a>
   }
 }
 
diff --git a/examples/tables/index.js b/examples/tables/index.js
index 998efdb5b..0004474f4 100644
--- a/examples/tables/index.js
+++ b/examples/tables/index.js
@@ -11,10 +11,9 @@ import keycode from 'keycode'
  */
 
 const NODES = {
-  'paragraph': props => <p>{props.children}</p>,
-  'table': props => <table><tbody>{props.children}</tbody></table>,
-  'table-row': props => <tr>{props.children}</tr>,
-  'table-cell': props => <td>{props.children}</td>
+  'table': props => <table><tbody {...props.attributes}>{props.children}</tbody></table>,
+  'table-row': props => <tr {...props.attributes}>{props.children}</tr>,
+  'table-cell': props => <td {...props.attributes}>{props.children}</td>
 }
 
 /**