add attributes props in examples

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>
 }
 
 /**

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>
 }
 
 /**

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]
   }

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} />
   }
 }
 

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>
   }
 }
 

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>
   }
 }
 

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>
 }
 
 /**