From d78ddeabadf4df0e4d379f389c208963c922f150 Mon Sep 17 00:00:00 2001
From: Ian Storm Taylor <ian@ianstormtaylor.com>
Date: Mon, 25 Jul 2016 14:45:37 -0700
Subject: [PATCH] update examples for terse raw

---
 examples/auto-markdown/index.js               | 22 +++++++++----------
 examples/code-highlighting/index.js           |  2 +-
 .../development/performance-rich/index.js     |  2 +-
 .../development/performance-rich/state.json   | 12 ++--------
 examples/hovering-menu/index.js               |  2 +-
 examples/images/index.js                      | 16 +++++---------
 examples/images/state.json                    |  8 +------
 examples/index.js                             | 12 ----------
 examples/links/index.js                       |  2 +-
 examples/paste-html/index.js                  |  2 +-
 examples/rich-text/index.js                   |  2 +-
 examples/rich-text/state.json                 | 12 ++--------
 examples/tables/index.js                      |  2 +-
 examples/tables/state.json                    | 14 +++---------
 14 files changed, 31 insertions(+), 79 deletions(-)

diff --git a/examples/auto-markdown/index.js b/examples/auto-markdown/index.js
index e68b7efef..afca9c65b 100644
--- a/examples/auto-markdown/index.js
+++ b/examples/auto-markdown/index.js
@@ -1,5 +1,5 @@
 
-import { Editor, Raw } from '../..'
+import { Editor, Raw, wrap } from '../..'
 import React from 'react'
 import keycode from 'keycode'
 import initialState from './state.json'
@@ -11,15 +11,15 @@ import initialState from './state.json'
  */
 
 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>,
-  '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>
+  '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>
 }
 
 /**
@@ -37,7 +37,7 @@ class AutoMarkdown extends React.Component {
    */
 
   state = {
-    state: Raw.deserialize(initialState)
+    state: Raw.deserialize(initialState, { terse: true })
   };
 
   /**
diff --git a/examples/code-highlighting/index.js b/examples/code-highlighting/index.js
index 8fafe2ba0..681377e52 100644
--- a/examples/code-highlighting/index.js
+++ b/examples/code-highlighting/index.js
@@ -48,7 +48,7 @@ class CodeHighlighting extends React.Component {
    */
 
   state = {
-    state: Raw.deserialize(initialState)
+    state: Raw.deserialize(initialState, { terse: true })
   };
 
   /**
diff --git a/examples/development/performance-rich/index.js b/examples/development/performance-rich/index.js
index 6bc09846a..bd3e95ab5 100644
--- a/examples/development/performance-rich/index.js
+++ b/examples/development/performance-rich/index.js
@@ -64,7 +64,7 @@ class RichText extends React.Component {
    */
 
   state = {
-    state: Raw.deserialize(initialState)
+    state: Raw.deserialize(initialState, { terse: true })
   };
 
   /**
diff --git a/examples/development/performance-rich/state.json b/examples/development/performance-rich/state.json
index e8b53a51c..8e7372be9 100644
--- a/examples/development/performance-rich/state.json
+++ b/examples/development/performance-rich/state.json
@@ -77,11 +77,7 @@
       "nodes": [
         {
           "kind": "text",
-          "ranges": [
-            {
-              "text": "A wise quote."
-            }
-          ]
+          "text": "A wise quote."
         }
       ]
     },
@@ -91,11 +87,7 @@
       "nodes": [
         {
           "kind": "text",
-          "ranges": [
-            {
-              "text": "Try it out for yourself!"
-            }
-          ]
+          "text": "Try it out for yourself!"
         }
       ]
     }
diff --git a/examples/hovering-menu/index.js b/examples/hovering-menu/index.js
index 2420d78e8..8145def22 100644
--- a/examples/hovering-menu/index.js
+++ b/examples/hovering-menu/index.js
@@ -44,7 +44,7 @@ class HoveringMenu extends React.Component {
    */
 
   state = {
-    state: Raw.deserialize(initialState)
+    state: Raw.deserialize(initialState, { terse: true })
   };
 
   /**
diff --git a/examples/images/index.js b/examples/images/index.js
index 7daa6cd24..0045032b0 100644
--- a/examples/images/index.js
+++ b/examples/images/index.js
@@ -1,5 +1,5 @@
 
-import { Editor, Draggable, Raw, Void } from '../..'
+import { Editor, Raw, wrap } from '../..'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import initialState from './state.json'
@@ -13,17 +13,11 @@ import isUrl from 'is-url'
  */
 
 const NODES = {
-  image: (props) => {
+  image: wrap()((props) => {
     const { node, state } = props
     const src = node.data.get('src')
-    return (
-      <Draggable {...props}>
-        <Void {...props} className="image-block">
-          <img {...props.attributes} src={src} />
-        </Void>
-      </Draggable>
-    )
-  }
+    return <img draggable src={src} />
+  })
 }
 
 /**
@@ -41,7 +35,7 @@ class Images extends React.Component {
    */
 
   state = {
-    state: Raw.deserialize(initialState)
+    state: Raw.deserialize(initialState, { terse: true })
   };
 
   /**
diff --git a/examples/images/state.json b/examples/images/state.json
index 02b4958a1..6923a7cdd 100644
--- a/examples/images/state.json
+++ b/examples/images/state.json
@@ -16,13 +16,7 @@
       "isVoid": true,
       "data": {
         "src": "https://img.washingtonpost.com/wp-apps/imrs.php?src=https://img.washingtonpost.com/news/speaking-of-science/wp-content/uploads/sites/36/2015/10/as12-49-7278-1024x1024.jpg&w=1484"
-      },
-      "nodes": [
-        {
-          "kind": "text",
-          "text": ""
-        }
-      ]
+      }
     },
     {
       "kind": "block",
diff --git a/examples/index.js b/examples/index.js
index b8144bb57..d08b70a74 100644
--- a/examples/index.js
+++ b/examples/index.js
@@ -112,19 +112,7 @@ class App extends React.Component {
 const router = (
   <Router history={hashHistory}>
     <Route path="/" component={App}>
-      <IndexRedirect to="rich-text" />
       <Route path="auto-markdown" component={AutoMarkdown} />
-      <Route path="code-highlighting" component={CodeHighlighting} />
-      <Route path="hovering-menu" component={HoveringMenu} />
-      <Route path="images" component={Images} />
-      <Route path="links" component={Links} />
-      <Route path="paste-html" component={PasteHtml} />
-      <Route path="plain-text" component={PlainText} />
-      <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>
 )
diff --git a/examples/links/index.js b/examples/links/index.js
index ed07601b9..6e251f4c9 100644
--- a/examples/links/index.js
+++ b/examples/links/index.js
@@ -36,7 +36,7 @@ class Links extends React.Component {
    */
 
   state = {
-    state: Raw.deserialize(initialState)
+    state: Raw.deserialize(initialState, { terse: true })
   };
 
   /**
diff --git a/examples/paste-html/index.js b/examples/paste-html/index.js
index a2f8ef85f..8b97fda29 100644
--- a/examples/paste-html/index.js
+++ b/examples/paste-html/index.js
@@ -171,7 +171,7 @@ class PasteHtml extends React.Component {
    */
 
   state = {
-    state: Raw.deserialize(initialState)
+    state: Raw.deserialize(initialState, { terse: true })
   };
 
   /**
diff --git a/examples/rich-text/index.js b/examples/rich-text/index.js
index 6a5f3b1aa..1a7783d1e 100644
--- a/examples/rich-text/index.js
+++ b/examples/rich-text/index.js
@@ -64,7 +64,7 @@ class RichText extends React.Component {
    */
 
   state = {
-    state: Raw.deserialize(initialState)
+    state: Raw.deserialize(initialState, { terse: true })
   };
 
   /**
diff --git a/examples/rich-text/state.json b/examples/rich-text/state.json
index e8b53a51c..8e7372be9 100644
--- a/examples/rich-text/state.json
+++ b/examples/rich-text/state.json
@@ -77,11 +77,7 @@
       "nodes": [
         {
           "kind": "text",
-          "ranges": [
-            {
-              "text": "A wise quote."
-            }
-          ]
+          "text": "A wise quote."
         }
       ]
     },
@@ -91,11 +87,7 @@
       "nodes": [
         {
           "kind": "text",
-          "ranges": [
-            {
-              "text": "Try it out for yourself!"
-            }
-          ]
+          "text": "Try it out for yourself!"
         }
       ]
     }
diff --git a/examples/tables/index.js b/examples/tables/index.js
index 2c8a27b41..96d08f996 100644
--- a/examples/tables/index.js
+++ b/examples/tables/index.js
@@ -43,7 +43,7 @@ class Tables extends React.Component {
    */
 
   state = {
-    state: Raw.deserialize(initialState)
+    state: Raw.deserialize(initialState, { terse: true })
   };
 
   /**
diff --git a/examples/tables/state.json b/examples/tables/state.json
index f0f86100f..1a2d31537 100644
--- a/examples/tables/state.json
+++ b/examples/tables/state.json
@@ -6,11 +6,7 @@
       "nodes": [
         {
           "kind": "text",
-          "ranges": [
-            {
-              "text": "Since the editor is based on a recursive tree model, similar to an HTML document, you can create complex nested structures, like tables:"
-            }
-          ]
+          "text": "Since the editor is based on a recursive tree model, similar to an HTML document, you can create complex nested structures, like tables:"
         }
       ]
     },
@@ -30,7 +26,7 @@
                   "kind": "text",
                   "ranges": [
                     {
-                      "text": "",
+                      "text": ""
                     }
                   ]
                 }
@@ -237,11 +233,7 @@
       "nodes": [
         {
           "kind": "text",
-          "ranges": [
-            {
-              "text": "This table is just a basic example, but you could augment it to add support for table headers, adding column and rows, or even formulas if you wanted to get really crazy..."
-            }
-          ]
+          "text": "This table is just a basic example, but you could augment it to add support for table headers, adding column and rows, or even formulas if you wanted to get really crazy..."
         }
       ]
     }