mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-01-18 05:59:13 +01:00
Code Issues Releases Wiki Activity

refactor examples

Browse Source
This commit is contained in:
Ian Storm Taylor 2016-06-24 10:22:48 -07:00
parent 69d2a55d33
commit 2743c3741d
21 changed files with 259 additions and 330 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
Makefile
View File

@ -24,52 +24,20 @@ clean:
@ rm -rf ./dist
# Build the source.
dist: $(shell find ./lib)
dist: $(shell find ./lib) package.json
@ $(babel) \
--out-dir \
./dist \
./lib
@ touch ./dist
# Build the auto-markdown example.
example-auto-markdown:
# Build the examples.
examples:
@ $(browserify) \
--debug \
--transform babelify \
--outfile ./examples/auto-markdown/build.js \
./examples/auto-markdown/index.js
# Build the links example.
example-links:
@ $(browserify) \
--debug \
--transform babelify \
--outfile ./examples/links/build.js \
./examples/links/index.js
# Build the plain-text example.
example-plain-text:
@ $(browserify) \
--debug \
--transform babelify \
--outfile ./examples/plain-text/build.js \
./examples/plain-text/index.js
# Build the rich-text example.
example-rich-text:
@ $(browserify) \
--debug \
--transform babelify \
--outfile ./examples/rich-text/build.js \
./examples/rich-text/index.js
# Build the table example.
example-table:
@ $(browserify) \
--debug \
--transform babelify \
--outfile ./examples/table/build.js \
./examples/table/index.js
--outfile ./examples/build.js \
./examples/index.js
# Install the dependencies.
install:
@ -107,25 +75,9 @@ test-server:
--fgrep "$(GREP)" \
./test/server.js
# Watch the auto-markdown example.
watch-example-auto-markdown:
@ $(MAKE) example-auto-markdown browserify=$(watchify)
# Watch the links example.
watch-example-links:
@ $(MAKE) example-links browserify=$(watchify)
# Watch the plain-text example.
watch-example-plain-text:
@ $(MAKE) example-plain-text browserify=$(watchify)
# Watch the rich-text example.
watch-example-rich-text:
@ $(MAKE) example-rich-text browserify=$(watchify)
# Watch the table example.
watch-example-table:
@ $(MAKE) example-table browserify=$(watchify)
# Watch the examples.
watch-examples:
@ $(MAKE) examples browserify=$(watchify)
# Phony targets.
.PHONY: examples

57
examples/auto-markdown/index.css
View File

@ -1,57 +0,0 @@
html {
background: #eee;
padding: 20px;
}
main {
background: #fff;
padding: 10px;
max-width: 40em;
margin: 0 auto;
}
p {
margin: 0;
}
blockquote {
border-left: 2px solid #ddd;
margin-left: 0;
padding-left: 10px;
color: #aaa;
font-style: italic;
}
.editor > * > * + * {
margin-top: 1em;
margin-bottom: 0;
}
.menu {
margin: 0 -10px;
padding: 1px 0 9px 8px;
border-bottom: 2px solid #eee;
margin-bottom: 10px;
}
.menu > * {
display: inline-block;
}
.menu > * + * {
margin-left: 10px;
}
.button {
color: #ccc;
cursor: pointer;
}
.button[data-active="true"] {
color: black;
}
.material-icons {
font-size: 18px;
}

12
examples/auto-markdown/index.html
View File

@ -1,12 +0,0 @@
<html>
<head>
<meta charset="utf-8" />
<title>Editor | Auto-markdown Example</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="index.css">
</head>
<body>
<main></main>
<script src="build.js"></script>
</body>
</html>

13
examples/auto-markdown/index.js
View File

@ -1,17 +1,16 @@
import Editor, { Raw } from '../..'
import React from 'react'
import ReactDOM from 'react-dom'
import keycode from 'keycode'
import state from './state.json'
/**
* Define our example app.
* The auto-markdown example.
*
* @type {Component} App
* @type {Component} AutoMarkdown
*/
class App extends React.Component {
class AutoMarkdown extends React.Component {
/**
* Deserialize the raw initial state.
@ -232,9 +231,7 @@ class App extends React.Component {
}
/**
* Mount the app.
* Export.
*/
const app = <App />
const root = document.body.querySelector('main')
ReactDOM.render(app, root)
export default AutoMarkdown

58
examples/table/index.css → examples/index.css
View File

@ -5,8 +5,6 @@ html {
}
main {
background: #fff;
padding: 10px;
max-width: 40em;
margin: 0 auto;
}
@ -15,6 +13,14 @@ p {
margin: 0;
}
blockquote {
border-left: 2px solid #ddd;
margin-left: 0;
padding-left: 10px;
color: #aaa;
font-style: italic;
}
table {
border-collapse: collapse;
}
@ -24,17 +30,49 @@ td {
border: 2px solid #ddd;
}
blockquote {
border-left: 2px solid #ddd;
margin-left: 0;
padding-left: 10px;
/**
* Icons.
*/
.material-icons {
font-size: 18px;
}
/**
* App.
*/
.tabs {
text-align: center;
margin-bottom: 30px;
}
.tab {
color: #aaa;
font-style: italic;
display: inline-block;
text-decoration: none;
}
.tab + .tab {
margin-left: 20px;
}
.tab.active {
color: black;
font-weight: bold;
}
/**
* Example.
*/
.example {
background: #fff;
padding: 10px;
}
.editor > * > * + * {
margin-top: 1em;
margin-bottom: 0;
}
.menu {
@ -60,7 +98,3 @@ blockquote {
.button[data-active="true"] {
color: black;
}
.material-icons {
font-size: 18px;
}

2
examples/table/index.html → examples/index.html
View File

@ -1,7 +1,7 @@
<html>
<head>
<meta charset="utf-8" />
<title>Editor | Table Example</title>
<title>Examples | Editor</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="index.css">
</head>

97
examples/index.js Normal file
View File

@ -0,0 +1,97 @@
import React from 'react'
import ReactDOM from 'react-dom'
import { Router, Route, Link, IndexRedirect, hashHistory } from 'react-router'
/**
* Examples.
*/
import AutoMarkdown from './auto-markdown'
import Links from './links'
import PlainText from './plain-text'
import RichText from './rich-text'
import Tables from './tables'
/**
* Define our example app.
*
* @type {Component} App
*/
class App extends React.Component {
/**
* Render the example app.
*
* @return {Element} element
*/
render() {
return (
<div class="app">
{this.renderTabBar()}
{this.renderExample()}
</div>
)
}
/**
* Render the tab bar.
*
* @return {Element} element
*/
renderTabBar() {
return (
<div className="tabs">
<Link className="tab" activeClassName="active" to="rich-text">Rich Text</Link>
<Link className="tab" activeClassName="active" to="plain-text">Plain Text</Link>
<Link className="tab" activeClassName="active" to="auto-markdown">Auto-markdown</Link>
<Link className="tab" activeClassName="active" to="links">Links</Link>
<Link className="tab" activeClassName="active" to="tables">Tables</Link>
</div>
)
}
/**
* Render the example.
*
* @return {Element} element
*/
renderExample() {
return (
<div className="example">
{this.props.children}
</div>
)
}
}
/**
* Router.
*
* @type {Element} router
*/
const router = (
<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRedirect to="rich-text" />
<Route path="auto-markdown" component={AutoMarkdown} />
<Route path="links" component={Links} />
<Route path="plain-text" component={PlainText} />
<Route path="rich-text" component={RichText} />
<Route path="tables" component={Tables} />
</Route>
</Router>
)
/**
* Mount the router.
*/
const root = document.body.querySelector('main')
ReactDOM.render(router, root)

48
examples/links/index.css
View File

@ -1,48 +0,0 @@
html {
background: #eee;
padding: 20px;
}
main {
background: #fff;
padding: 10px;
max-width: 40em;
margin: 0 auto;
}
p {
margin: 0;
}
.editor > * > * + * {
margin-top: 1em;
}
.menu {
margin: 0 -10px;
padding: 1px 0 9px 8px;
border-bottom: 2px solid #eee;
margin-bottom: 10px;
}
.menu > * {
display: inline-block;
}
.menu > * + * {
margin-left: 10px;
}
.button {
color: #ccc;
cursor: pointer;
}
.button[data-active="true"] {
color: black;
}
.material-icons {
font-size: 18px;
}

12
examples/links/index.html
View File

@ -1,12 +0,0 @@
<html>
<head>
<meta charset="utf-8" />
<title>Editor | Links Example</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="index.css">
</head>
<body>
<main></main>
<script src="build.js"></script>
</body>
</html>

20
examples/links/index.js
View File

@ -6,10 +6,12 @@ import state from './state.json'
import { Map } from 'immutable'
/**
* App.
* The links example.
*
* @type {Component} Links
*/
class App extends React.Component {
class Links extends React.Component {
state = {
state: Raw.deserialize(state)
@ -72,7 +74,7 @@ class App extends React.Component {
/**
* Render the app.
*
* @return {Component} component
* @return {Element} element
*/
render() {
@ -87,7 +89,7 @@ class App extends React.Component {
/**
* Render the toolbar.
*
* @return {Component} component
* @return {Element} element
*/
renderToolbar() {
@ -104,7 +106,7 @@ class App extends React.Component {
/**
* Render the editor.
*
* @return {Component} component
* @return {Element} element
*/
renderEditor() {
@ -130,7 +132,7 @@ class App extends React.Component {
* Render our custom `node`.
*
* @param {Node} node
* @return {Component} component
* @return {Element} element
*/
renderNode(node) {
@ -151,9 +153,7 @@ class App extends React.Component {
}
/**
* Attach.
* Export.
*/
const app = <App />
const root = document.body.querySelector('main')
ReactDOM.render(app, root)
export default Links

12
examples/plain-text/index.css
View File

@ -1,12 +0,0 @@
html {
background: #eee;
padding: 20px;
}
main {
background: #fff;
padding: 10px;
max-width: 40em;
margin: 0 auto;
}

11
examples/plain-text/index.html
View File

@ -1,11 +0,0 @@
<html>
<head>
<meta charset="utf-8" />
<title>Editor | Plain Text Example</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<main></main>
<script src="build.js"></script>
</body>
</html>

13
examples/plain-text/index.js
View File

@ -1,7 +1,6 @@
import Editor, { Character, Document, Block, State, Text } from '../..'
import React from 'react'
import ReactDOM from 'react-dom'
import state from './state.json'
/**
@ -41,12 +40,12 @@ function serialize(state) {
}
/**
* The example app.
* The plain text example.
*
* @type {Component} App
* @type {Component} PlainText
*/
class App extends React.Component {
class PlainText extends React.Component {
/**
* Deserialize the initial editor state.
@ -83,9 +82,7 @@ class App extends React.Component {
}
/**
* Mount the example app.
* Export.
*/
const app = <App />
const root = document.body.querySelector('main')
ReactDOM.render(app, root)
export default PlainText

56
examples/rich-text/index.css
View File

@ -1,56 +0,0 @@
html {
background: #eee;
padding: 20px;
}
main {
background: #fff;
padding: 10px;
max-width: 40em;
margin: 0 auto;
}
p {
margin: 0;
}
blockquote {
border-left: 2px solid #ddd;
margin-left: 0;
padding-left: 10px;
color: #aaa;
font-style: italic;
}
.editor > * > * + * {
margin-top: 1em;
}
.menu {
margin: 0 -10px;
padding: 1px 0 9px 8px;
border-bottom: 2px solid #eee;
margin-bottom: 10px;
}
.menu > * {
display: inline-block;
}
.menu > * + * {
margin-left: 10px;
}
.button {
color: #ccc;
cursor: pointer;
}
.button[data-active="true"] {
color: black;
}
.material-icons {
font-size: 18px;
}

12
examples/rich-text/index.html
View File

@ -1,12 +0,0 @@
<html>
<head>
<meta charset="utf-8" />
<title>Editor | Rich Text Example</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="index.css">
</head>
<body>
<main></main>
<script src="build.js"></script>
</body>
</html>

13
examples/rich-text/index.js
View File

@ -1,14 +1,15 @@
import Editor, { Mark, Raw } from '../..'
import React from 'react'
import ReactDOM from 'react-dom'
import state from './state.json'
/**
* App.
* The rich text example.
*
* @type {Component} RichText
*/
class App extends React.Component {
class RichText extends React.Component {
state = {
state: Raw.deserialize(state)
@ -177,9 +178,7 @@ class App extends React.Component {
}
/**
* Attach.
* Export.
*/
const app = <App />
const root = document.body.querySelector('main')
ReactDOM.render(app, root)
export default RichText

74
examples/state.json Normal file
View File

@ -0,0 +1,74 @@
{
"nodes": [
{
"kind": "block",
"type": "paragraph",
"nodes": [
{
"kind": "text",
"ranges": [
{
"text": "The editor gives you full control over the logic you can add. For example, it's fairly common to want to add markdown-like shortcuts to editors. So that, when you start a line with \"> \" you get a blockquote that looks like this:"
}
]
}
]
},
{
"kind": "block",
"type": "block-quote",
"nodes": [
{
"kind": "text",
"ranges": [
{
"text": "A wise quote."
}
]
}
]
},
{
"kind": "block",
"type": "paragraph",
"nodes": [
{
"kind": "text",
"ranges": [
{
"text": "Order when you start a line with \"## \" you get a level-two heading, like this:"
}
]
}
]
},
{
"kind": "block",
"type": "heading-two",
"nodes": [
{
"kind": "text",
"ranges": [
{
"text": "Try it out!"
}
]
}
]
},
{
"kind": "block",
"type": "paragraph",
"nodes": [
{
"kind": "text",
"ranges": [
{
"text": "Try it out for yourself! Try starting a new line with \">\", \"-\", or \"#\"s."
}
]
}
]
}
]
}

13
examples/table/index.js → examples/tables/index.js
View File

@ -1,17 +1,16 @@
import Editor, { Raw } from '../..'
import React from 'react'
import ReactDOM from 'react-dom'
import keycode from 'keycode'
import state from './state.json'
/**
* Define our example app.
* The tables example.
*
* @type {Component} App
* @type {Component} Tables
*/
class App extends React.Component {
class Tables extends React.Component {
/**
* Deserialize the raw initial state.
@ -154,9 +153,7 @@ class App extends React.Component {
}
/**
* Mount the app.
* Export.
*/
const app = <App />
const root = document.body.querySelector('main')
ReactDOM.render(app, root)
export default Tables

0
examples/table/state.json → examples/tables/state.json
View File

0
examples/test/index.html → examples/test.html
View File

2
package.json
View File

@ -24,10 +24,12 @@
"mocha": "^2.5.3",
"mocha-phantomjs": "^4.0.2",
"react-dom": "^15.1.0",
"react-router": "^2.5.1",
"read-metadata": "^1.0.0",
"source-map-support": "^0.4.0",
"standard": "^7.1.2",
"to-camel-case": "^1.0.0",
"to-title-case": "^1.0.0",
"watchify": "^3.7.0"
}
}