mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-07-31 04:20:26 +02:00
Code Issues Releases Wiki Activity

refactor examples, upgrade dependencies

Browse Source
This commit is contained in:
Ian Storm Taylor
2017-05-04 16:48:42 -07:00
parent a3f7f9bd02
commit 13a99a9b73
10 changed files with 135 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
examples/large-document/Readme.md → examples/dev/large-document/Readme.md
View File

0
examples/large-document/index.js → examples/dev/large-document/index.js
View File

0
examples/development/performance-plain/index.js → examples/dev/performance-plain/index.js
View File

0
examples/development/performance-plain/state.json → examples/dev/performance-plain/state.json
View File

0
examples/development/performance-rich/index.js → examples/dev/performance-rich/index.js
View File

0
examples/development/performance-rich/state.json → examples/dev/performance-rich/state.json
View File

10
examples/index.css
View File

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

202
examples/index.js
View File

@@ -1,11 +1,7 @@
import React from 'react'
import ReactDOM from 'react-dom'
import { Router, Route, Link, IndexRedirect, hashHistory } from 'react-router'
/**
* Examples.
*/
import { HashRouter, NavLink, Route, Redirect, Switch } from 'react-router-dom'
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 DevPerformanceRich from './development/performance-rich'
import DevLargeDocument from './dev/large-document'
import DevPerformancePlain from './dev/performance-plain'
import DevPerformanceRich from './dev/performance-rich'
/**
* Perf.
* Environment.
*
* @type {String}
*/
import Perf from 'react-addons-perf'
window.Perf = Perf
const { NODE_ENV } = process.env
/**
* 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()}
{this.renderTabBar()}
{this.renderExample()}
</div>
)
}
/**
* Render the top bar.
*
* @return {Element} element
*/
renderTopBar() {
return (
<div className="topbar">
<span className="topbar-title">Slate Examples</span>
<div className="topbar-links">
<a className="topbar-link" href="https://github.com/ianstormtaylor/slate">
GitHub
</a>
<a className="topbar-link" href="https://docs.slatejs.org/">
Docs
</a>
<div className="nav">
<span className="nav-title">Slate Examples</span>
<div className="nav-links">
<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">
{EXAMPLES.map(([ name, Component, path, isDev ]) => (
(NODE_ENV != 'production' || !isDev) && (
<NavLink key={path} to={path} className="tab"activeClassName="active">
{name}
</NavLink>
)
))}
</div>
<div className="example">
<Switch>
{EXAMPLES.map(([ name, Component, path, isDev ]) => (
<Route key={path} path={path} component={Component} />
))}
<Redirect from="/" to="/rich-text" />
</Switch>
</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 = (
<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRedirect to="rich-text" />
const router = <HashRouter><App /></HashRouter>
<Route path="check-lists" component={CheckLists} />
<Route path="code-highlighting" component={CodeHighlighting} />
<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} />
/**
* Attach `Perf` when not in production.
*/
<Route path="dev-performance-plain" component={DevPerformancePlain} />
<Route path="dev-performance-rich" component={DevPerformanceRich} />
</Route>
</Router>
)
if (NODE_ENV != 'production') {
window.Perf = require('react-addons-perf')
}
/**
* Mount the router.

5
package.json
View File

@@ -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",

67
yarn.lock
View File

@@ -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:
version "0.6.6"
resolved "https://registry.yarnpkg.com/react-frame-component/-/react-frame-component-0.6.6.tgz#f86ccab8d8c2feb4606cfda17ec65ca8ace84e36"
dependencies:
object-assign "^4.1.0"
react-frame-component@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/react-frame-component/-/react-frame-component-1.0.3.tgz#00a5deea81671927ea973954a0d8eb19ecc339de"
react-portal@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-3.0.0.tgz#9304fce836e8a3216b22588f8dc91b447728f0ae"
react-portal@^3.1.0:
version "3.1.0"
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"