mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-08-27 17:09:53 +02:00
remove dev examples
This commit is contained in:
Ian Storm Taylor
@@ -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.
|
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!
|
|
||||||
|
|||||||
@@ -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
@@ -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
|
|
||||||
@@ -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!"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -9,6 +9,7 @@ import Embeds from './embeds'
|
|||||||
import Emojis from './emojis'
|
import Emojis from './emojis'
|
||||||
import ForcedLayout from './forced-layout'
|
import ForcedLayout from './forced-layout'
|
||||||
import HoveringMenu from './hovering-menu'
|
import HoveringMenu from './hovering-menu'
|
||||||
|
import HugeDocument from './huge-document'
|
||||||
import Images from './images'
|
import Images from './images'
|
||||||
import Links from './links'
|
import Links from './links'
|
||||||
import MarkdownPreview from './markdown-preview'
|
import MarkdownPreview from './markdown-preview'
|
||||||
@@ -22,18 +23,6 @@ import RichText from './rich-text'
|
|||||||
import SearchHighlighting from './search-highlighting'
|
import SearchHighlighting from './search-highlighting'
|
||||||
import Tables from './tables'
|
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.
|
* Examples.
|
||||||
*
|
*
|
||||||
@@ -59,10 +48,7 @@ const EXAMPLES = [
|
|||||||
['RTL', RTL, '/rtl'],
|
['RTL', RTL, '/rtl'],
|
||||||
['Plugins', Plugins, '/plugins'],
|
['Plugins', Plugins, '/plugins'],
|
||||||
['Forced Layout', ForcedLayout, '/forced-layout'],
|
['Forced Layout', ForcedLayout, '/forced-layout'],
|
||||||
|
['Huge', HugeDocument, '/huge-document'],
|
||||||
['DEV:Huge', DevHugeDocument, '/dev-huge', true],
|
|
||||||
['DEV:Plain', DevPerformancePlain, '/dev-performance-plain', true],
|
|
||||||
['DEV:Rich', DevPerformanceRich, '/dev-performance-rich', true],
|
|
||||||
]
|
]
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -84,17 +70,15 @@ class App extends React.Component {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="tabs">
|
<div className="tabs">
|
||||||
{EXAMPLES.map(([ name, Component, path, isDev ]) => (
|
{EXAMPLES.map(([ name, Component, path ]) => (
|
||||||
(NODE_ENV != 'production' || !isDev) && (
|
<NavLink key={path} to={path} className="tab"activeClassName="active">
|
||||||
<NavLink key={path} to={path} className="tab"activeClassName="active">
|
{name}
|
||||||
{name}
|
</NavLink>
|
||||||
</NavLink>
|
|
||||||
)
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div className="example">
|
<div className="example">
|
||||||
<Switch>
|
<Switch>
|
||||||
{EXAMPLES.map(([ name, Component, path, isDev ]) => (
|
{EXAMPLES.map(([ name, Component, path ]) => (
|
||||||
<Route key={path} path={path} component={Component} />
|
<Route key={path} path={path} component={Component} />
|
||||||
))}
|
))}
|
||||||
<Redirect from="/" to="/rich-text" />
|
<Redirect from="/" to="/rich-text" />
|
||||||
|
|||||||
Reference in New Issue
Block a user