mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-11 09:43:58 +02: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
Download Patch File Download Diff File Expand all files Collapse all files

64
Makefile
View File

@@ -24,52 +24,20 @@ clean:
@ rm -rf ./dist @ rm -rf ./dist
# Build the source. # Build the source.
dist: $(shell find ./lib) dist: $(shell find ./lib) package.json
@ $(babel) \ @ $(babel) \
--out-dir \ --out-dir \
./dist \ ./dist \
./lib ./lib
@ touch ./dist @ touch ./dist
# Build the auto-markdown example. # Build the examples.
example-auto-markdown: examples:
@ $(browserify) \ @ $(browserify) \
--debug \ --debug \
--transform babelify \ --transform babelify \
--outfile ./examples/auto-markdown/build.js \ --outfile ./examples/build.js \
./examples/auto-markdown/index.js ./examples/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
# Install the dependencies. # Install the dependencies.
install: install:
@@ -107,25 +75,9 @@ test-server:
--fgrep "$(GREP)" \ --fgrep "$(GREP)" \
./test/server.js ./test/server.js
# Watch the auto-markdown example. # Watch the examples.
watch-example-auto-markdown: watch-examples:
@ $(MAKE) example-auto-markdown browserify=$(watchify) @ $(MAKE) examples 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)
# Phony targets. # Phony targets.
.PHONY: examples .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 Editor, { Raw } from '../..'
import React from 'react' import React from 'react'
import ReactDOM from 'react-dom'
import keycode from 'keycode' import keycode from 'keycode'
import state from './state.json' 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. * Deserialize the raw initial state.
@@ -232,9 +231,7 @@ class App extends React.Component {
} }
/** /**
* Mount the app. * Export.
*/ */
const app = <App /> export default AutoMarkdown
const root = document.body.querySelector('main')
ReactDOM.render(app, root)

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

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

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

@@ -1,7 +1,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8" /> <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="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
</head> </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' import { Map } from 'immutable'
/** /**
* App. * The links example.
*
* @type {Component} Links
*/ */
class App extends React.Component { class Links extends React.Component {
state = { state = {
state: Raw.deserialize(state) state: Raw.deserialize(state)
@@ -72,7 +74,7 @@ class App extends React.Component {
/** /**
* Render the app. * Render the app.
* *
* @return {Component} component * @return {Element} element
*/ */
render() { render() {
@@ -87,7 +89,7 @@ class App extends React.Component {
/** /**
* Render the toolbar. * Render the toolbar.
* *
* @return {Component} component * @return {Element} element
*/ */
renderToolbar() { renderToolbar() {
@@ -104,7 +106,7 @@ class App extends React.Component {
/** /**
* Render the editor. * Render the editor.
* *
* @return {Component} component * @return {Element} element
*/ */
renderEditor() { renderEditor() {
@@ -130,7 +132,7 @@ class App extends React.Component {
* Render our custom `node`. * Render our custom `node`.
* *
* @param {Node} node * @param {Node} node
* @return {Component} component * @return {Element} element
*/ */
renderNode(node) { renderNode(node) {
@@ -151,9 +153,7 @@ class App extends React.Component {
} }
/** /**
* Attach. * Export.
*/ */
const app = <App /> export default Links
const root = document.body.querySelector('main')
ReactDOM.render(app, root)

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 Editor, { Character, Document, Block, State, Text } from '../..'
import React from 'react' import React from 'react'
import ReactDOM from 'react-dom'
import state from './state.json' 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. * Deserialize the initial editor state.
@@ -83,9 +82,7 @@ class App extends React.Component {
} }
/** /**
* Mount the example app. * Export.
*/ */
const app = <App /> export default PlainText
const root = document.body.querySelector('main')
ReactDOM.render(app, root)

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

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 Editor, { Raw } from '../..'
import React from 'react' import React from 'react'
import ReactDOM from 'react-dom'
import keycode from 'keycode' import keycode from 'keycode'
import state from './state.json' 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. * Deserialize the raw initial state.
@@ -154,9 +153,7 @@ class App extends React.Component {
} }
/** /**
* Mount the app. * Export.
*/ */
const app = <App /> export default Tables
const root = document.body.querySelector('main')
ReactDOM.render(app, root)

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": "^2.5.3",
"mocha-phantomjs": "^4.0.2", "mocha-phantomjs": "^4.0.2",
"react-dom": "^15.1.0", "react-dom": "^15.1.0",
"react-router": "^2.5.1",
"read-metadata": "^1.0.0", "read-metadata": "^1.0.0",
"source-map-support": "^0.4.0", "source-map-support": "^0.4.0",
"standard": "^7.1.2", "standard": "^7.1.2",
"to-camel-case": "^1.0.0", "to-camel-case": "^1.0.0",
"to-title-case": "^1.0.0",
"watchify": "^3.7.0" "watchify": "^3.7.0"
} }
} }