mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-08-12 02:03:59 +02:00
add development performance testing examples
This commit is contained in:
Ian Storm Taylor
@@ -48,3 +48,8 @@ make watch-dist
|
||||
```
|
||||
make watch-examples
|
||||
```
|
||||
|
||||
|
||||
## Development Examples
|
||||
|
||||
There are also a series of examples that are for development only, for things like checking performance, in the `./development` directory. You can safely ignore those!
|
||||
|
||||
56
examples/development/performance-plain/index.js
Normal file
56
examples/development/performance-plain/index.js
Normal file
@@ -0,0 +1,56 @@
|
||||
|
||||
import { Editor, Plain } from '../../..'
|
||||
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 {State} state
|
||||
*/
|
||||
|
||||
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
|
||||
1
examples/development/performance-plain/state.json
Normal file
1
examples/development/performance-plain/state.json
Normal file
File diff suppressed because one or more lines are too long
325
examples/development/performance-rich/index.js
Normal file
325
examples/development/performance-rich/index.js
Normal file
@@ -0,0 +1,325 @@
|
||||
|
||||
import { Editor, Mark, Raw, Utils } from '../../..'
|
||||
import React from 'react'
|
||||
import initialState from './state.json'
|
||||
import keycode from 'keycode'
|
||||
|
||||
/**
|
||||
* Define the default node type.
|
||||
*/
|
||||
|
||||
const DEFAULT_NODE = 'paragraph'
|
||||
|
||||
/**
|
||||
* Define a set of node renderers.
|
||||
*
|
||||
* @type {Object}
|
||||
*/
|
||||
|
||||
const 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>
|
||||
}
|
||||
|
||||
/**
|
||||
* Define a set of mark renderers.
|
||||
*
|
||||
* @type {Object}
|
||||
*/
|
||||
|
||||
const 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: Raw.deserialize(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.marks.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 {State} state
|
||||
*/
|
||||
|
||||
onChange = (state) => {
|
||||
this.setState({ state })
|
||||
}
|
||||
|
||||
/**
|
||||
* On key down, if it's a formatting command toggle a mark.
|
||||
*
|
||||
* @param {Event} e
|
||||
* @param {State} state
|
||||
* @return {State}
|
||||
*/
|
||||
|
||||
onKeyDown = (e, state) => {
|
||||
if (!Utils.Key.isCommand(e)) return
|
||||
const key = keycode(e.which)
|
||||
let mark
|
||||
|
||||
switch (key) {
|
||||
case 'b':
|
||||
mark = 'bold'
|
||||
break
|
||||
case 'i':
|
||||
mark = 'italic'
|
||||
break
|
||||
case 'u':
|
||||
mark = 'underlined'
|
||||
break
|
||||
case '`':
|
||||
mark = 'code'
|
||||
break
|
||||
default:
|
||||
return
|
||||
}
|
||||
|
||||
state = state
|
||||
.transform()
|
||||
[this.hasMark(mark) ? 'removeMark' : 'addMark'](mark)
|
||||
.apply()
|
||||
|
||||
e.preventDefault()
|
||||
return state
|
||||
}
|
||||
|
||||
/**
|
||||
* 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)
|
||||
let { state } = this.state
|
||||
|
||||
state = state
|
||||
.transform()
|
||||
[isActive ? 'removeMark' : 'addMark'](type)
|
||||
.apply()
|
||||
|
||||
this.setState({ state })
|
||||
}
|
||||
|
||||
/**
|
||||
* 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)
|
||||
let { state } = this.state
|
||||
|
||||
let transform = state
|
||||
.transform()
|
||||
.setBlock(isActive ? 'paragraph' : type)
|
||||
|
||||
// Handle the extra wrapping required for list buttons.
|
||||
if (type == 'bulleted-list' || type == 'numbered-list') {
|
||||
if (this.hasBlock('list-item')) {
|
||||
transform = transform
|
||||
.setBlock(DEFAULT_NODE)
|
||||
.unwrapBlock(type)
|
||||
} else {
|
||||
transform = transform
|
||||
.setBlock('list-item')
|
||||
.wrapBlock(type)
|
||||
}
|
||||
}
|
||||
|
||||
// Handle everything but list buttons.
|
||||
else {
|
||||
transform = transform.setBlock(isActive ? DEFAULT_NODE : type)
|
||||
}
|
||||
|
||||
state = transform.apply()
|
||||
this.setState({ state })
|
||||
}
|
||||
|
||||
/**
|
||||
* 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...'}
|
||||
state={this.state.state}
|
||||
renderNode={this.renderNode}
|
||||
renderMark={this.renderMark}
|
||||
onChange={this.onChange}
|
||||
onKeyDown={this.onKeyDown}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Return a node renderer for a Slate `node`.
|
||||
*
|
||||
* @param {Node} node
|
||||
* @return {Component or Void}
|
||||
*/
|
||||
|
||||
renderNode = (node) => {
|
||||
return NODES[node.type]
|
||||
}
|
||||
|
||||
/**
|
||||
* Return a mark renderer for a Slate `mark`.
|
||||
*
|
||||
* @param {Mark} mark
|
||||
* @return {Object or Void}
|
||||
*/
|
||||
|
||||
renderMark = (mark) => {
|
||||
return MARKS[mark.type]
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Export.
|
||||
*/
|
||||
|
||||
export default RichText
|
||||
103
examples/development/performance-rich/state.json
Normal file
103
examples/development/performance-rich/state.json
Normal file
@@ -0,0 +1,103 @@
|
||||
{
|
||||
"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!"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -17,6 +17,8 @@ import PlainText from './plain-text'
|
||||
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'
|
||||
|
||||
/**
|
||||
* Perf.
|
||||
@@ -121,6 +123,8 @@ const router = (
|
||||
<Route path="read-only" component={ReadOnly} />
|
||||
<Route path="rich-text" component={RichText} />
|
||||
<Route path="tables" component={Tables} />
|
||||
<Route path="dev-performance-plain" component={DevPerformancePlain} />
|
||||
<Route path="dev-performance-rich" component={DevPerformanceRich} />
|
||||
</Route>
|
||||
</Router>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user