mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-13 18:53:59 +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
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 state: initialState
} }
render() { onChange = (state) => {
this.setState({ state })
}
render = () => {
return ( return (
<Editor <Editor
state={this.state.state} state={this.state.state}
onChange={state => this.setState({ state })} onChange={this.onChange}
/> />
) )
} }
@@ -40,22 +44,26 @@ class App extends React.Component {
state = { state = {
state: initialState state: initialState
} }
render() { onChange = (state) => {
return ( this.setState({ state })
<Editor
state={this.state.state}
onChange={state => this.setState({ state })}
onKeyDown={(e, data, state) => this.onKeyDown(e, data, state)}
/>
)
} }
// Define a new handler which prints the key code that was pressed. // Define a new handler which prints the key code that was pressed.
onKeyDown(event, data, state) { onKeyDown = (event, data, state) => {
console.log(event.which) 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 = {
state: initialState state: initialState
} }
render() { onChange = (state) => {
return ( this.setState({ state })
<Editor
state={this.state.state}
onChange={state => this.setState({ state })}
onKeyDown={(e, data, state) => this.onKeyDown(e, data, state)}
/>
)
} }
onKeyDown(event, data, state) { onKeyDown = (event, data, state) => {
// Return with no changes if it's not the "7" key with shift pressed. // Return with no changes if it's not the "7" key with shift pressed.
if (event.which != 55 || !event.shiftKey) return if (event.which != 55 || !event.shiftKey) return
@@ -96,6 +98,16 @@ class App extends React.Component {
return newState 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() { onChange = (state) => {
return ( this.setState({ state })
<Editor
state={this.state.state}
schema={this.state.schema}
onChange={state => this.setState({ state })}
onKeyDown={e, data, state => this.onKeyDown(e, data, state)}
/>
)
} }
onKeyDown(event, data, state) { onKeyDown = (event, data, state) => {
if (event.which != 192 || !event.metaKey) return if (event.which != 192 || !event.metaKey) return
const isCode = state.blocks.some(block => block.type == 'code') 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() { onChange = (state) => {
return ( this.setState({ state })
<Editor
schema={this.state.schema}
state={this.state.state}
onChange={state => this.setState({ state })}
onKeyDown={(e, data, state) => this.onKeyDown(e, data, state)}
/>
)
} }
onKeyDown(event, data, state) { onKeyDown = (event, data, state) => {
if (!event.metaKey) return if (!event.metaKey) return
// Decide what to do based on the key code... // 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. onChange = (state) => {
render() { this.setState({ state })
return (
<Editor
schema={this.state.schema}
state={this.state.state}
onChange={state => this.setState({ state })}
onKeyDown={(e, data, state) => this.onKeyDown(e, data, state)}
/>
)
} }
onKeyDown(event, data, state) { onKeyDown = (event, data, state) => {
if (!event.metaKey) return if (!event.metaKey) return
switch (event.which) { 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 = {
state: initialState state: initialState
} }
render() { onChange = (state) => {
return ( this.setState({ state })
<Editor
state={this.state.state}
onChange={state => this.setState({ state })}
onKeyDown={(e, data, state) => this.onKeyDown(e, data, state)}
/>
)
} }
onKeyDown(event, data, state) { onKeyDown = (event, data, state) => {
if (event.which != 55 || !event.shiftKey) return if (event.which != 55 || !event.shiftKey) return
const newState = state const newState = state
@@ -39,6 +33,16 @@ class App extends React.Component {
return newState 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() { onChange = (state) => {
return ( this.setState({ state })
// 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)}
/>
)
} }
onKeyDown(event, data, state) { onKeyDown = (event, data, state) => {
if (event.which != 55 || !event.shiftKey) return if (event.which != 55 || !event.shiftKey) return
const newState = state const newState = state
@@ -103,6 +99,18 @@ class App extends React.Component {
return newState 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() { onChange = (state) => {
return ( this.setState({ state })
<Editor
schema={this.state.schema}
state={this.state.state}
onChange={state => this.setState({ state })}
onKeyDown={(e, data, state) => this.onKeyDown(e, data, state)}
/>
)
} }
onKeyDown(event, data, state) { onKeyDown = (event, data, state) => {
// Return with no changes if it's not the "`" key with cmd/ctrl pressed. // Return with no changes if it's not the "`" key with cmd/ctrl pressed.
if (event.which != 192 || !event.metaKey) return if (event.which != 192 || !event.metaKey) return
@@ -144,7 +145,17 @@ class App extends React.Component {
.transform() .transform()
.setBlock('code') .setBlock('code')
.apply() .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() { onChange = (state) => {
return ( this.setState({ state })
<Editor
schema={this.state.schema}
state={this.state.state}
onChange={state => this.setState({ state })}
onKeyDown={(e, data, state) => this.onKeyDown(e, data, state)}
/>
)
} }
onKeyDown(event, data, state) { onKeyDown = (event, data, state) => {
if (event.which != 192 || !event.metaKey) return if (event.which != 192 || !event.metaKey) return
// Determine whether any of the currently selected blocks are code blocks. // 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. // On change, update the app's React state with the new editor state.
render() { onChange = (state) => {
this.setState({ state })
}
// Render the editor.
render = () => {
return ( return (
<Editor <Editor
state={this.state.state} 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('') state: Plain.deserialize('')
} }
render() { onChange(state) {
this.setState({ state })
}
render = () => {
return ( return (
<Editor <Editor
state={this.state.state} 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. // Add the `onDocumentChange` handler.
return ( return (
<Editor <Editor
schema={this.state.schema} schema={this.state.schema}
state={this.state.state} state={this.state.state}
onChange={state => this.onChange(state)} onChange={this.onChange}
onDocumentChange={(document, state) => this.onDocumentChange(document, state)} 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 = {
state: initialState state: initialState
} }
onChange = (state) => {
this.setState({ state })
}
render() { render = () => {
return ( return (
<Editor <Editor
state={this.state.state} 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 state: initialState
} }
render() { onChange = (state) => {
return (
<Editor
state={this.state.state}
onChange={state => this.onChange(state)}
/>
)
}
onChange(state) {
this.setState({ state }) this.setState({ state })
// Save the state to Local Storage. // Save the state to Local Storage.
@@ -72,6 +63,15 @@ class App extends React.Component {
localStorage.setItem('content', string) 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 state: initialState
} }
render() { onChange = (state) => {
return (
<Editor
state={this.state.state}
onChange={state => this.onChange(state)}
/>
)
}
onChange(state) {
this.setState({ state }) this.setState({ state })
const string = Plain.serialize(state) const string = Plain.serialize(state)
localStorage.setItem('content', string) 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 state: initialState
} }
render() { onChange = (state) => {
// 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) {
this.setState({ state }) this.setState({ state })
} }
// Pull the saving logic out into the `onDocumentChange` handler. // Pull the saving logic out into the `onDocumentChange` handler.
onDocumentChange(document, state) { onDocumentChange = (document, state) => {
const string = Plain.serialize(state) const string = Plain.serialize(state)
localStorage.setItem('content', string) 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 state: initialState
} }
render() { onChange = (state) => {
return (
<Editor
state={this.state.state}
onChange={state => this.onChange(state)}
onDocumentChange={(document, state) => this.onDocumentChange(document, state)}
/>
)
}
onChange(state) {
this.setState({ state }) this.setState({ state })
} }
onDocumentChange(document, state) { onDocumentChange = (document, state) => {
// Switch to using the Raw serializer. // Switch to using the Raw serializer.
localStorage.setItem('content', Raw.serialize(state)) 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() { onChange = (state) => {
return ( this.setState({ state })
<Editor
schema={this.state.schema}
state={this.state.state}
onChange={state => this.setState({ state })}
onKeyDown={(e, data, state) => this.onKeyDown(e, data, state)}
/>
)
} }
onKeyDown(event, data, state) { onKeyDown = (event, data, state) => {
if (!event.metaKey || event.which != 66) return if (!event.metaKey || event.which != 66) return
return state return state
.transform() .transform()
@@ -44,6 +37,17 @@ class App extends React.Component {
.apply() .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 ( return (
// Add the `plugins` property to the editor, and remove `onKeyDown`. // Add the `plugins` property to the editor, and remove `onKeyDown`.
<Editor <Editor
plugins={plugins} plugins={plugins}
schema={this.state.schema} schema={this.state.schema}
state={this.state.state} 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 ( return (
<Editor <Editor
plugins={plugins} plugins={plugins}
schema={this.state.schema} schema={this.state.schema}
state={this.state.state} 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 ( return (
<Editor <Editor
plugins={plugins} plugins={plugins}
schema={this.state.schema} schema={this.state.schema}
state={this.state.state} state={this.state.state}
onChange={state => this.setState({ state })} onChange={this.onChange}
/> />
) )
} }