refactor examples, upgrade dependencies

examples/index.css

@@ -86,27 +86,27 @@ input:focus {
  * App.
  */
 
-.topbar {
+.nav {
   padding: 10px 15px;
   color: #AAA;
   background: #000;
 }
 
-.topbar-title {
+.nav-title {
   margin-right: 0.5em;
 }
 
-.topbar-links {
+.nav-links {
   float: right;
 }
 
-.topbar-link {
+.nav-link {
   margin-left: 1em;
   color: #AAA;
   text-decoration: none;
 }
 
-.topbar-link:hover {
+.nav-link:hover {
   color: #FFF;
   text-decoration: underline;
 }

examples/index.js

@@ -1,11 +1,7 @@
 
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { Router, Route, Link, IndexRedirect, hashHistory } from 'react-router'
+import { HashRouter, NavLink, Route, Redirect, Switch } from 'react-router-dom'
-
-/**
- * Examples.
- */
 
 import CheckLists from './check-lists'
 import CodeHighlighting from './code-highlighting'
@@ -15,7 +11,6 @@ import FocusBlur from './focus-blur'
 import HoveringMenu from './hovering-menu'
 import Iframes from './iframes'
 import Images from './images'
-import LargeDocument from './large-document'
 import Links from './links'
 import MarkdownPreview from './markdown-preview'
 import MarkdownShortcuts from './markdown-shortcuts'
@@ -27,118 +22,84 @@ import ReadOnly from './read-only'
 import RichText from './rich-text'
 import Tables from './tables'
 
-import DevPerformancePlain from './development/performance-plain'
+import DevLargeDocument from './dev/large-document'
-import DevPerformanceRich from './development/performance-rich'
+import DevPerformancePlain from './dev/performance-plain'
+import DevPerformanceRich from './dev/performance-rich'
 
 /**
- * Perf.
+ * Environment.
+ *
+ * @type {String}
  */
 
-import Perf from 'react-addons-perf'
+const { NODE_ENV } = process.env
-
-window.Perf = Perf
 
 /**
- * Define our example app.
+ * Examples.
  *
- * @type {Component} App
+ * @type {Array}
+ */
+
+const EXAMPLES = [
+  ['Rich Text', RichText, '/rich-text'],
+  ['Plain Text', PlainText, '/plain-text'],
+  ['Hovering Menu', HoveringMenu, '/hovering-menu'],
+  ['Links', Links, '/links'],
+  ['Images', Images, '/images'],
+  ['Embeds', Embeds, '/embeds'],
+  ['Emojis', Emojis, '/emojis'],
+  ['Markdown Preview', MarkdownPreview, '/markdown-preview'],
+  ['Markdown Shortcuts', MarkdownShortcuts, '/markdown-shortcuts'],
+  ['Check Lists', CheckLists, '/check-lists'],
+  ['Code Highlighting', CodeHighlighting, '/code-highlighting'],
+  ['Tables', Tables, '/tables'],
+  ['Paste HTML', PasteHtml, '/paste-html'],
+  ['Read-only', ReadOnly, '/read-only'],
+  ['RTL', RTL, '/rtl'],
+  ['Plugins', Plugins, '/plugins'],
+  ['Iframes', Iframes, '/iframes'],
+  ['Focus & Blur', FocusBlur, '/focus-blur'],
+
+  ['DEV:Large', DevLargeDocument, '/dev-large', true],
+  ['DEV:Plain', DevPerformancePlain, '/dev-performance-plain', true],
+  ['DEV:Rich', DevPerformanceRich, '/dev-performance-rich', true],
+]
+
+/**
+ * App.
+ *
+ * @type {Component}
  */
 
 class App extends React.Component {
 
-  /**
-   * Render the example app.
-   *
-   * @return {Element} element
-   */
-
   render() {
     return (
       <div className="app">
-        {this.renderTopBar()}
+        <div className="nav">
-        {this.renderTabBar()}
+          <span className="nav-title">Slate Examples</span>
-        {this.renderExample()}
+          <div className="nav-links">
-      </div>
+            <a className="nav-link" href="https://github.com/ianstormtaylor/slate">GitHub</a>
-    )
+            <a className="nav-link" href="https://docs.slatejs.org/">Docs</a>
-  }
+          </div>
-
+        </div>
-  /**
+        <div className="tabs">
-   * Render the top bar.
+          {EXAMPLES.map(([ name, Component, path, isDev ]) => (
-   *
+            (NODE_ENV != 'production' || !isDev) && (
-   * @return {Element} element
+              <NavLink key={path} to={path} className="tab"activeClassName="active">
-   */
+                {name}
-
+              </NavLink>
-  renderTopBar() {
+            )
-    return (
+          ))}
-      <div className="topbar">
+        </div>
-        <span className="topbar-title">Slate Examples</span>
+        <div className="example">
-        <div className="topbar-links">
+          <Switch>
-          <a className="topbar-link" href="https://github.com/ianstormtaylor/slate">
+            {EXAMPLES.map(([ name, Component, path, isDev ]) => (
-            GitHub
+              <Route key={path} path={path} component={Component} />
-          </a>
+            ))}
-          <a className="topbar-link" href="https://docs.slatejs.org/">
+            <Redirect from="/" to="/rich-text" />
-            Docs
+          </Switch>
-          </a>
         </div>
-      </div>
-    )
-  }
-
-  /**
-   * Render the tab bar.
-   *
-   * @return {Element} element
-   */
-
-  renderTabBar() {
-    return (
-      <div className="tabs">
-        {this.renderTab('Rich Text', 'rich-text')}
-        {this.renderTab('Plain Text', 'plain-text')}
-        {this.renderTab('Hovering Menu', 'hovering-menu')}
-        {this.renderTab('Links', 'links')}
-        {this.renderTab('Images', 'images')}
-        {this.renderTab('Embeds', 'embeds')}
-        {this.renderTab('Emojis', 'emojis')}
-        {this.renderTab('Markdown Preview', 'markdown-preview')}
-        {this.renderTab('Markdown Shortcuts', 'markdown-shortcuts')}
-        {this.renderTab('Check Lists', 'check-lists')}
-        {this.renderTab('Code Highlighting', 'code-highlighting')}
-        {this.renderTab('Tables', 'tables')}
-        {this.renderTab('Paste HTML', 'paste-html')}
-        {this.renderTab('Read-only', 'read-only')}
-        {this.renderTab('RTL', 'rtl')}
-        {this.renderTab('Plugins', 'plugins')}
-        {this.renderTab('Iframes', 'iframes')}
-        {this.renderTab('Focus & Blur', 'focus-blur')}
-        {this.renderTab('Large Document', 'large')}
-      </div>
-    )
-  }
-
-  /**
-   * Render a tab with `name` and `slug`.
-   *
-   * @param {String} name
-   * @param {String} slug
-   */
-
-  renderTab(name, slug) {
-    return (
-      <Link className="tab" activeClassName="active" to={slug}>{name}</Link>
-    )
-  }
-
-  /**
-   * Render the example.
-   *
-   * @return {Element} element
-   */
-
-  renderExample() {
-    return (
-      <div className="example">
-        {this.props.children}
       </div>
     )
   }
@@ -151,36 +112,15 @@ class App extends React.Component {
  * @type {Element} router
  */
 
-const router = (
+const router = <HashRouter><App /></HashRouter>
-  <Router history={hashHistory}>
-    <Route path="/" component={App}>
-      <IndexRedirect to="rich-text" />
 
-      <Route path="check-lists" component={CheckLists} />
+/**
-      <Route path="code-highlighting" component={CodeHighlighting} />
+ * Attach `Perf` when not in production.
-      <Route path="embeds" component={Embeds} />
+ */
-      <Route path="emojis" component={Emojis} />
-      <Route path="focus-blur" component={FocusBlur} />
-      <Route path="hovering-menu" component={HoveringMenu} />
-      <Route path="iframes" component={Iframes} />
-      <Route path="images" component={Images} />
-      <Route path="large" component={LargeDocument} />
-      <Route path="links" component={Links} />
-      <Route path="markdown-preview" component={MarkdownPreview} />
-      <Route path="markdown-shortcuts" component={MarkdownShortcuts} />
-      <Route path="paste-html" component={PasteHtml} />
-      <Route path="plain-text" component={PlainText} />
-      <Route path="plugins" component={Plugins} />
-      <Route path="read-only" component={ReadOnly} />
-      <Route path="rich-text" component={RichText} />
-      <Route path="rtl" component={RTL} />
-      <Route path="tables" component={Tables} />
 
-      <Route path="dev-performance-plain" component={DevPerformancePlain} />
+if (NODE_ENV != 'production') {
-      <Route path="dev-performance-rich" component={DevPerformanceRich} />
+  window.Perf = require('react-addons-perf')
-    </Route>
+}
-  </Router>
-)
 
 /**
  * Mount the router.

package.json

@@ -18,7 +18,7 @@
     "is-window": "^1.0.2",
     "keycode": "^2.1.2",
     "prop-types": "^15.5.8",
-    "react-portal": "^3.0.0",
+    "react-portal": "^3.1.0",
     "selection-is-backward": "^1.0.0",
     "type-of": "^2.0.1"
   },
@@ -64,8 +64,9 @@
     "react-addons-perf": "^15.4.2",
     "react-dom": "^15.4.2",
     "react-frame-aware-selection-plugin": "^1.0.0",
-    "react-frame-component": "^0.6.2",
+    "react-frame-component": "^1.0.3",
     "react-router": "^2.5.1",
+    "react-router-dom": "^4.1.1",
     "read-metadata": "^1.0.0",
     "read-yaml-promise": "^1.0.2",
     "slate-auto-replace-text": "^0.3.0",

yarn.lock

@@ -2973,6 +2973,16 @@ history@^2.1.2:
     query-string "^3.0.0"
     warning "^2.0.0"
 
+history@^4.5.1, history@^4.6.0:
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.6.1.tgz#911cf8eb65728555a94f2b12780a0c531a14d2fd"
+  dependencies:
+    invariant "^2.2.1"
+    loose-envify "^1.2.0"
+    resolve-pathname "^2.0.0"
+    value-equal "^0.2.0"
+    warning "^3.0.0"
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -3177,7 +3187,7 @@ interpret@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.3.tgz#cbc35c62eeee73f19ab7b10a801511401afc0f90"
 
-invariant@^2.0.0, invariant@^2.2.0, invariant@^2.2.1:
+invariant@^2.0.0, invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
   dependencies:
@@ -4099,7 +4109,7 @@ longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
   dependencies:
@@ -4730,6 +4740,12 @@ path-platform@~0.11.15:
   version "0.11.15"
   resolved "https://registry.yarnpkg.com/path-platform/-/path-platform-0.11.15.tgz#e864217f74c36850f0852b78dc7bf7d4a5721bf2"
 
+path-to-regexp@^1.5.3:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
+  dependencies:
+    isarray "0.0.1"
+
 path-type@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
@@ -4845,7 +4861,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.7, prop-types@^15.5.8, prop-types@~15.5.7:
+prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@~15.5.7:
   version "15.5.8"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394"
   dependencies:
@@ -4964,15 +4980,24 @@ react-frame-aware-selection-plugin@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/react-frame-aware-selection-plugin/-/react-frame-aware-selection-plugin-1.0.0.tgz#6a0d40efd56721179160159709f10ec70469c2ec"
 
-react-frame-component@^0.6.2:
+react-frame-component@^1.0.3:
-  version "0.6.6"
+  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/react-frame-component/-/react-frame-component-0.6.6.tgz#f86ccab8d8c2feb4606cfda17ec65ca8ace84e36"
+  resolved "https://registry.yarnpkg.com/react-frame-component/-/react-frame-component-1.0.3.tgz#00a5deea81671927ea973954a0d8eb19ecc339de"
-  dependencies:
-    object-assign "^4.1.0"
 
-react-portal@^3.0.0:
+react-portal@^3.1.0:
-  version "3.0.0"
+  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-3.0.0.tgz#9304fce836e8a3216b22588f8dc91b447728f0ae"
+  resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-3.1.0.tgz#865c44fb72a1da106c649206936559ce891ee899"
+  dependencies:
+    prop-types "^15.5.8"
+
+react-router-dom@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.1.1.tgz#3021ade1f2c160af97cf94e25594c5f294583025"
+  dependencies:
+    history "^4.5.1"
+    loose-envify "^1.3.1"
+    prop-types "^15.5.4"
+    react-router "^4.1.1"
 
 react-router@^2.5.1:
   version "2.8.1"
@@ -4984,6 +5009,18 @@ react-router@^2.5.1:
     loose-envify "^1.2.0"
     warning "^3.0.0"
 
+react-router@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.1.1.tgz#d448f3b7c1b429a6fbb03395099949c606b1fe95"
+  dependencies:
+    history "^4.6.0"
+    hoist-non-react-statics "^1.2.0"
+    invariant "^2.2.2"
+    loose-envify "^1.3.1"
+    path-to-regexp "^1.5.3"
+    prop-types "^15.5.4"
+    warning "^3.0.0"
+
 react@^15.4.2:
   version "15.5.4"
   resolved "https://registry.yarnpkg.com/react/-/react-15.5.4.tgz#fa83eb01506ab237cdc1c8c3b1cea8de012bf047"
@@ -5271,6 +5308,10 @@ resolve-from@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
 
+resolve-pathname@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.1.0.tgz#e8358801b86b83b17560d4e3c382d7aef2100944"
+
 resolve@1.1.7, resolve@1.1.x:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
@@ -6073,6 +6114,10 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "~1.0.0"
     spdx-expression-parse "~1.0.0"
 
+value-equal@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.2.1.tgz#c220a304361fce6994dbbedaa3c7e1a1b895871d"
+
 verror@1.3.6:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/verror/-/verror-1.3.6.tgz#cff5df12946d297d2baaefaa2689e25be01c005c"