mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-04-15 10:52:34 +02:00
Code Issues Releases Wiki Activity

update walkthroughs to remove function creation from render, closes #394

Browse Source
This commit is contained in:
Ian Storm Taylor 2016-11-17 18:56:09 -08:00
parent 6f67ac70c9
commit 6591f248bb
7 changed files with 248 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
docs/walkthroughs/adding-event-handlers.md
View File

@ -20,11 +20,15 @@ class App extends React.Component {
state: initialState
}
render() {
onChange = (state) => {
this.setState({ state })
}
render = () => {
return (
<Editor
state={this.state.state}
onChange={state => this.setState({ state })}
onChange={this.onChange}
/>
)
}
@ -40,22 +44,26 @@ class App extends React.Component {
state = {
state: initialState
}
render() {
return (
<Editor
state={this.state.state}
onChange={state => this.setState({ state })}
onKeyDown={(e, data, state) => this.onKeyDown(e, data, state)}
/>
)
onChange = (state) => {
this.setState({ state })
}
// Define a new handler which prints the key code that was pressed.
onKeyDown(event, data, state) {
onKeyDown = (event, data, state) => {
console.log(event.which)
}
render = () => {
return (
<Editor
state={this.state.state}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
/>
)
}
}
```
@ -71,18 +79,12 @@ class App extends React.Component {
state = {
state: initialState
}
render() {
return (
<Editor
state={this.state.state}
onChange={state => this.setState({ state })}
onKeyDown={(e, data, state) => this.onKeyDown(e, data, state)}
/>
)
onChange = (state) => {
this.setState({ state })
}
onKeyDown(event, data, state) {
onKeyDown = (event, data, state) => {
// Return with no changes if it's not the "7" key with shift pressed.
if (event.which != 55 || !event.shiftKey) return
@ -96,6 +98,16 @@ class App extends React.Component {
return newState
}
render = () => {
return (
<Editor
state={this.state.state}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
/>
)
}
}
```

79
docs/walkthroughs/applying-custom-formatting.md
View File

@ -22,19 +22,12 @@ class App extends React.Component {
}
}
}
render() {
return (
<Editor
state={this.state.state}
schema={this.state.schema}
onChange={state => this.setState({ state })}
onKeyDown={e, data, state => this.onKeyDown(e, data, state)}
/>
)
onChange = (state) => {
this.setState({ state })
}
onKeyDown(event, data, state) {
onKeyDown = (event, data, state) => {
if (event.which != 192 || !event.metaKey) return
const isCode = state.blocks.some(block => block.type == 'code')
@ -45,6 +38,17 @@ class App extends React.Component {
}
}
render = () => {
return (
<Editor
state={this.state.state}
schema={this.state.schema}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
/>
)
}
}
```
@ -61,19 +65,12 @@ class App extends React.Component {
}
}
}
render() {
return (
<Editor
schema={this.state.schema}
state={this.state.state}
onChange={state => this.setState({ state })}
onKeyDown={(e, data, state) => this.onKeyDown(e, data, state)}
/>
)
onChange = (state) => {
this.setState({ state })
}
onKeyDown(event, data, state) {
onKeyDown = (event, data, state) => {
if (!event.metaKey) return
// Decide what to do based on the key code...
@ -96,6 +93,17 @@ class App extends React.Component {
}
}
render = () => {
return (
<Editor
schema={this.state.schema}
state={this.state.state}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
/>
)
}
}
```
@ -133,20 +141,12 @@ class App extends React.Component {
}
}
}
// Add the `renderMark` handler to the editor.
render() {
return (
<Editor
schema={this.state.schema}
state={this.state.state}
onChange={state => this.setState({ state })}
onKeyDown={(e, data, state) => this.onKeyDown(e, data, state)}
/>
)
onChange = (state) => {
this.setState({ state })
}
onKeyDown(event, data, state) {
onKeyDown = (event, data, state) => {
if (!event.metaKey) return
switch (event.which) {
@ -166,6 +166,17 @@ class App extends React.Component {
}
}
render = () => {
return (
<Editor
schema={this.state.schema}
state={this.state.state}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
/>
)
}
}
```

105
docs/walkthroughs/defining-custom-block-nodes.md
View File

@ -17,18 +17,12 @@ class App extends React.Component {
state = {
state: initialState
}
render() {
return (
<Editor
state={this.state.state}
onChange={state => this.setState({ state })}
onKeyDown={(e, data, state) => this.onKeyDown(e, data, state)}
/>
)
onChange = (state) => {
this.setState({ state })
}
onKeyDown(event, data, state) {
onKeyDown = (event, data, state) => {
if (event.which != 55 || !event.shiftKey) return
const newState = state
@ -39,6 +33,16 @@ class App extends React.Component {
return newState
}
render = () => {
return (
<Editor
state={this.state.state}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
/>
)
}
}
```
@ -79,20 +83,12 @@ class App extends React.Component {
}
}
}
render() {
return (
// Pass in the `schema` property...
<Editor
schema={this.state.schema}
state={this.state.state}
onChange={state => this.setState({ state })}
onKeyDown={(e, data, state) => this.onKeyDown(e, data, state)}
/>
)
onChange = (state) => {
this.setState({ state })
}
onKeyDown(event, data, state) {
onKeyDown = (event, data, state) => {
if (event.which != 55 || !event.shiftKey) return
const newState = state
@ -103,6 +99,18 @@ class App extends React.Component {
return newState
}
render = () => {
return (
// Pass in the `schema` property...
<Editor
schema={this.state.schema}
state={this.state.state}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
/>
)
}
}
```
@ -123,19 +131,12 @@ class App extends React.Component {
}
}
}
render() {
return (
<Editor
schema={this.state.schema}
state={this.state.state}
onChange={state => this.setState({ state })}
onKeyDown={(e, data, state) => this.onKeyDown(e, data, state)}
/>
)
onChange = (state) => {
this.setState({ state })
}
onKeyDown(event, data, state) {
onKeyDown = (event, data, state) => {
// Return with no changes if it's not the "`" key with cmd/ctrl pressed.
if (event.which != 192 || !event.metaKey) return
@ -144,7 +145,17 @@ class App extends React.Component {
.transform()
.setBlock('code')
.apply()
}
render = () => {
return (
<Editor
schema={this.state.schema}
state={this.state.state}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
/>
)
}
}
@ -169,19 +180,12 @@ class App extends React.Component {
}
}
}
render() {
return (
<Editor
schema={this.state.schema}
state={this.state.state}
onChange={state => this.setState({ state })}
onKeyDown={(e, data, state) => this.onKeyDown(e, data, state)}
/>
)
onChange = (state) => {
this.setState({ state })
}
onKeyDown(event, data, state) {
onKeyDown = (event, data, state) => {
if (event.which != 192 || !event.metaKey) return
// Determine whether any of the currently selected blocks are code blocks.
@ -195,6 +199,17 @@ class App extends React.Component {
}
render = () => {
return (
<Editor
schema={this.state.schema}
state={this.state.state}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
/>
)
}
}
```

9
docs/walkthroughs/installing-slate.md
View File

@ -82,11 +82,16 @@ class App extends React.Component {
}
// On change, update the app's React state with the new editor state.
render() {
onChange = (state) => {
this.setState({ state })
}
// Render the editor.
render = () => {
return (
<Editor
state={this.state.state}
onChange={state => this.setState({ state })}
onChange={this.onChange}
/>
)
}

38
docs/walkthroughs/saving-and-loading-html-content.md
View File

@ -20,19 +20,19 @@ class App extends React.Component {
state: Plain.deserialize('')
}
render() {
onChange(state) {
this.setState({ state })
}
render = () => {
return (
<Editor
state={this.state.state}
onChange={state => this.onChange(state)}
onChange={this.onChange}
/>
)
}
onChange(state) {
this.setState({ state })
}
}
```
@ -236,28 +236,28 @@ class App extends React.Component {
}
}
render() {
onChange = (state) => {
this.setState({ state })
}
// When the document changes, save the serialized HTML to Local Storage.
onDocumentChange = (document, state) => {
const string = html.serialize(state)
localStorage.set('content', string)
}
render = () => {
// Add the `onDocumentChange` handler.
return (
<Editor
schema={this.state.schema}
state={this.state.state}
onChange={state => this.onChange(state)}
onDocumentChange={(document, state) => this.onDocumentChange(document, state)}
onChange={this.onChange}
onDocumentChange={this.onDocumentChange}
/>
)
}
onChange(state) {
this.setState({ state })
}
// When the document changes, save the serialized HTML to Local Storage.
onDocumentChange(document, state) {
const string = html.serialize(state)
localStorage.set('content', string)
}
}
```

102
docs/walkthroughs/saving-to-a-database.md
View File

@ -21,20 +21,20 @@ class App extends React.Component {
state = {
state: initialState
}
onChange = (state) => {
this.setState({ state })
}
render() {
render = () => {
return (
<Editor
state={this.state.state}
onChange={state => this.onChange(state)}
onChange={this.onChange}
/>
)
}
onChange(state) {
this.setState({ state })
}
}
```
@ -55,16 +55,7 @@ class App extends React.Component {
state: initialState
}
render() {
return (
<Editor
state={this.state.state}
onChange={state => this.onChange(state)}
/>
)
}
onChange(state) {
onChange = (state) => {
this.setState({ state })
// Save the state to Local Storage.
@ -72,6 +63,15 @@ class App extends React.Component {
localStorage.setItem('content', string)
}
render = () => {
return (
<Editor
state={this.state.state}
onChange={this.onChange}
/>
)
}
}
```
@ -92,22 +92,22 @@ class App extends React.Component {
state: initialState
}
render() {
return (
<Editor
state={this.state.state}
onChange={state => this.onChange(state)}
/>
)
}
onChange(state) {
onChange = (state) => {
this.setState({ state })
const string = Plain.serialize(state)
localStorage.setItem('content', string)
}
render = () => {
return (
<Editor
state={this.state.state}
onChange={this.onChange}
/>
)
}
}
```
@ -129,27 +129,27 @@ class App extends React.Component {
state: initialState
}
render() {
// Add the `onDocumentChange` handler to the editor.
return (
<Editor
state={this.state.state}
onChange={state => this.onChange(state)}
onDocumentChange={(document, state) => this.onDocumentChange(document, state)}
/>
)
}
onChange(state) {
onChange = (state) => {
this.setState({ state })
}
// Pull the saving logic out into the `onDocumentChange` handler.
onDocumentChange(document, state) {
onDocumentChange = (document, state) => {
const string = Plain.serialize(state)
localStorage.setItem('content', string)
}
render = () => {
// Add the `onDocumentChange` handler to the editor.
return (
<Editor
state={this.state.state}
onChange={this.onChange}
onDocumentChange={this.onDocumentChange}
/>
)
}
}
```
@ -177,25 +177,25 @@ class App extends React.Component {
state: initialState
}
render() {
return (
<Editor
state={this.state.state}
onChange={state => this.onChange(state)}
onDocumentChange={(document, state) => this.onDocumentChange(document, state)}
/>
)
}
onChange(state) {
onChange = (state) => {
this.setState({ state })
}
onDocumentChange(document, state) {
onDocumentChange = (document, state) => {
// Switch to using the Raw serializer.
localStorage.setItem('content', Raw.serialize(state))
}
render = () => {
return (
<Editor
state={this.state.state}
onChange={this.onChange}
onDocumentChange={this.onDocumentChange}
/>
)
}
}
```

48
docs/walkthroughs/using-plugins.md
View File

@ -25,18 +25,11 @@ class App extends React.Component {
}
}
render() {
return (
<Editor
schema={this.state.schema}
state={this.state.state}
onChange={state => this.setState({ state })}
onKeyDown={(e, data, state) => this.onKeyDown(e, data, state)}
/>
)
onChange = (state) => {
this.setState({ state })
}
onKeyDown(event, data, state) {
onKeyDown = (event, data, state) => {
if (!event.metaKey || event.which != 66) return
return state
.transform()
@ -44,6 +37,17 @@ class App extends React.Component {
.apply()
}
render = () => {
return (
<Editor
schema={this.state.schema}
state={this.state.state}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
/>
)
}
}
```
@ -112,15 +116,19 @@ class App extends React.Component {
}
}
}
onChange = (state) => {
this.setState({ state })
}
render() {
render = () => {
return (
// Add the `plugins` property to the editor, and remove `onKeyDown`.
<Editor
plugins={plugins}
schema={this.state.schema}
state={this.state.state}
onChange={state => this.setState({ state })}
onChange={this.onChange}
/>
)
}
@ -157,14 +165,18 @@ class App extends React.Component {
}
}
}
onChange = (state) => {
this.setState({ state })
}
render() {
render = () => {
return (
<Editor
plugins={plugins}
schema={this.state.schema}
state={this.state.state}
onChange={state => this.setState({ state })}
onChange={this.onChange}
/>
)
}
@ -237,14 +249,18 @@ class App extends React.Component {
}
}
}
onChange = (state) => {
this.setState({ state })
}
render() {
render = () => {
return (
<Editor
plugins={plugins}
schema={this.state.schema}
state={this.state.state}
onChange={state => this.setState({ state })}
onChange={this.onChange}
/>
)
}