1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-27 00:54:22 +02:00

remove dev examples

This commit is contained in:
Ian Storm Taylor
2017-10-13 15:48:08 -07:00
parent f2550be53e
commit 70a008c178
8 changed files with 7 additions and 481 deletions

View File

@@ -36,8 +36,3 @@ yarn run watch
```
Now you can open up `http://localhost:8080/dev.html` in your browser and you'll see the examples site. Any changes you make to the source code will be immediately reflected when you refresh the page.
## Development Examples
There are also a set of examples that are for development only, for things like checking performance, in the `./dev` directory. You can safely ignore those!

View File

@@ -1,58 +0,0 @@
import { Editor } from 'slate-react'
import { Plain } from 'slate'
import React from 'react'
import initialState from './state.json'
/**
* The plain text example.
*
* @type {Component}
*/
class PlainText extends React.Component {
/**
* Deserialize the initial editor state.
*
* @type {Object}
*/
state = {
state: Plain.deserialize(initialState)
}
/**
* On change.
*
* @param {Change} change
*/
onChange = ({ state }) => {
this.setState({ state })
}
/**
* Render the editor.
*
* @return {Component} component
*/
render() {
return (
<Editor
placeholder={'Enter some plain text...'}
state={this.state.state}
onChange={this.onChange}
/>
)
}
}
/**
* Export.
*/
export default PlainText

File diff suppressed because one or more lines are too long

View File

@@ -1,289 +0,0 @@
import { Editor } from 'slate-react'
import { State } from 'slate'
import React from 'react'
import initialState from './state.json'
/**
* Define the default node type.
*/
const DEFAULT_NODE = 'paragraph'
/**
* Define a schema.
*
* @type {Object}
*/
const schema = {
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>,
'list-item': props => <li {...props.attributes}>{props.children}</li>,
'numbered-list': props => <ol {...props.attributes}>{props.children}</ol>
},
marks: {
bold: {
fontWeight: 'bold'
},
code: {
fontFamily: 'monospace',
backgroundColor: '#eee',
padding: '3px',
borderRadius: '4px'
},
italic: {
fontStyle: 'italic'
},
underlined: {
textDecoration: 'underline'
}
}
}
/**
* The rich text example.
*
* @type {Component}
*/
class RichText extends React.Component {
/**
* Deserialize the initial editor state.
*
* @type {Object}
*/
state = {
state: State.fromJSON(initialState)
}
/**
* Check if the current selection has a mark with `type` in it.
*
* @param {String} type
* @return {Boolean}
*/
hasMark = (type) => {
const { state } = this.state
return state.activeMarks.some(mark => mark.type == type)
}
/**
* Check if the any of the currently selected blocks are of `type`.
*
* @param {String} type
* @return {Boolean}
*/
hasBlock = (type) => {
const { state } = this.state
return state.blocks.some(node => node.type == type)
}
/**
* On change, save the new state.
*
* @param {Change} change
*/
onChange = ({ state }) => {
this.setState({ state })
}
/**
* On key down, if it's a formatting command toggle a mark.
*
* @param {Event} e
* @param {Object} data
* @param {Change} change
* @return {State}
*/
onKeyDown = (e, data, change) => {
if (!data.isMod) return
let mark
switch (data.key) {
case 'b':
mark = 'bold'
break
case 'i':
mark = 'italic'
break
case 'u':
mark = 'underlined'
break
case '`':
mark = 'code'
break
default:
return
}
change[this.hasMark(mark) ? 'removeMark' : 'addMark'](mark)
e.preventDefault()
return true
}
/**
* When a mark button is clicked, toggle the current mark.
*
* @param {Event} e
* @param {String} type
*/
onClickMark = (e, type) => {
e.preventDefault()
const isActive = this.hasMark(type)
const change = this.state.state
.change()
[isActive ? 'removeMark' : 'addMark'](type)
.apply()
this.onChange(change)
}
/**
* When a block button is clicked, toggle the block type.
*
* @param {Event} e
* @param {String} type
*/
onClickBlock = (e, type) => {
e.preventDefault()
const isActive = this.hasBlock(type)
const change = this.state.state
.change()
.setBlock(isActive ? 'paragraph' : type)
// Handle the extra wrapping required for list buttons.
if (type == 'bulleted-list' || type == 'numbered-list') {
if (this.hasBlock('list-item')) {
change
.setBlock(DEFAULT_NODE)
.unwrapBlock(type)
} else {
change
.setBlock('list-item')
.wrapBlock(type)
}
}
// Handle everything but list buttons.
else {
change.setBlock(isActive ? DEFAULT_NODE : type)
}
this.onChange(change)
}
/**
* Render.
*
* @return {Element}
*/
render() {
return (
<div>
{this.renderToolbar()}
{this.renderEditor()}
</div>
)
}
/**
* Render the toolbar.
*
* @return {Element}
*/
renderToolbar = () => {
return (
<div className="menu toolbar-menu">
{this.renderMarkButton('bold', 'format_bold')}
{this.renderMarkButton('italic', 'format_italic')}
{this.renderMarkButton('underlined', 'format_underlined')}
{this.renderMarkButton('code', 'code')}
{this.renderBlockButton('heading-one', 'looks_one')}
{this.renderBlockButton('heading-two', 'looks_two')}
{this.renderBlockButton('block-quote', 'format_quote')}
{this.renderBlockButton('numbered-list', 'format_list_numbered')}
{this.renderBlockButton('bulleted-list', 'format_list_bulleted')}
</div>
)
}
/**
* Render a mark-toggling toolbar button.
*
* @param {String} type
* @param {String} icon
* @return {Element}
*/
renderMarkButton = (type, icon) => {
const isActive = this.hasMark(type)
const onMouseDown = e => this.onClickMark(e, type)
return (
<span className="button" onMouseDown={onMouseDown} data-active={isActive}>
<span className="material-icons">{icon}</span>
</span>
)
}
/**
* Render a block-toggling toolbar button.
*
* @param {String} type
* @param {String} icon
* @return {Element}
*/
renderBlockButton = (type, icon) => {
const isActive = this.hasBlock(type)
const onMouseDown = e => this.onClickBlock(e, type)
return (
<span className="button" onMouseDown={onMouseDown} data-active={isActive}>
<span className="material-icons">{icon}</span>
</span>
)
}
/**
* Render the Slate editor.
*
* @return {Element}
*/
renderEditor = () => {
return (
<div className="editor">
<Editor
placeholder={'Enter some rich text...'}
schema={schema}
state={this.state.state}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
/>
</div>
)
}
}
/**
* Export.
*/
export default RichText

View File

@@ -1,105 +0,0 @@
{
"document": {
"nodes": [
{
"kind": "block",
"type": "paragraph",
"nodes": [
{
"kind": "text",
"ranges": [
{
"text": "This is editable "
},
{
"text": "rich",
"marks": [
{
"type": "bold"
}
]
},
{
"text": " text, "
},
{
"text": "much",
"marks": [
{
"type": "italic"
}
]
},
{
"text": " better than a "
},
{
"text": "<textarea>",
"marks": [
{
"type": "code"
}
]
},
{
"text": "!"
}
]
}
]
},
{
"kind": "block",
"type": "paragraph",
"nodes": [
{
"kind": "text",
"ranges": [
{
"text": "Since it's rich text, you can do things like turn a selection of text "
},
{
"text": "bold",
"marks": [
{
"type": "bold"
}
]
},{
"text": ", or add a semantically rendered block quote in the middle of the page, like this:"
}
]
}
]
},
{
"kind": "block",
"type": "block-quote",
"nodes": [
{
"kind": "text",
"ranges": [
{
"text": "A wise quote."
}
]
}
]
},
{
"kind": "block",
"type": "paragraph",
"nodes": [
{
"kind": "text",
"ranges": [
{
"text": "Try it out for yourself!"
}
]
}
]
}
]
}
}

View File

@@ -9,6 +9,7 @@ import Embeds from './embeds'
import Emojis from './emojis'
import ForcedLayout from './forced-layout'
import HoveringMenu from './hovering-menu'
import HugeDocument from './huge-document'
import Images from './images'
import Links from './links'
import MarkdownPreview from './markdown-preview'
@@ -22,18 +23,6 @@ import RichText from './rich-text'
import SearchHighlighting from './search-highlighting'
import Tables from './tables'
import DevHugeDocument from './dev/huge-document'
import DevPerformancePlain from './dev/performance-plain'
import DevPerformanceRich from './dev/performance-rich'
/**
* Environment.
*
* @type {String}
*/
const { NODE_ENV } = process.env
/**
* Examples.
*
@@ -59,10 +48,7 @@ const EXAMPLES = [
['RTL', RTL, '/rtl'],
['Plugins', Plugins, '/plugins'],
['Forced Layout', ForcedLayout, '/forced-layout'],
['DEV:Huge', DevHugeDocument, '/dev-huge', true],
['DEV:Plain', DevPerformancePlain, '/dev-performance-plain', true],
['DEV:Rich', DevPerformanceRich, '/dev-performance-rich', true],
['Huge', HugeDocument, '/huge-document'],
]
/**
@@ -84,17 +70,15 @@ class App extends React.Component {
</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>
)
{EXAMPLES.map(([ name, Component, path ]) => (
<NavLink key={path} to={path} className="tab"activeClassName="active">
{name}
</NavLink>
))}
</div>
<div className="example">
<Switch>
{EXAMPLES.map(([ name, Component, path, isDev ]) => (
{EXAMPLES.map(([ name, Component, path ]) => (
<Route key={path} path={path} component={Component} />
))}
<Redirect from="/" to="/rich-text" />