mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-27 00:54:22 +02:00
Code Issues Releases Wiki Activity

Update walkthrough docs to use change object instead of state (#1062)

Browse Source
This commit is contained in:
David Gertmenian-Wong
2017-09-06 17:51:40 -07:00
committed by Ian Storm Taylor
parent c0b4a30ce6
commit a75899f57a
6 changed files with 89 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,7 +20,7 @@ class App extends React.Component {
state: initialState
}
onChange = (state) => {
onChange = ({ state }) => {
this.setState({ state })
}
@@ -45,12 +45,12 @@ class App extends React.Component {
state: initialState
}
onChange = (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, change) => {
console.log(event.which)
}
@@ -80,11 +80,11 @@ class App extends React.Component {
state: initialState
}
onChange = (state) => {
onChange = ({ state }) => {
this.setState({ state })
}
onKeyDown = (event, data, state) => {
onKeyDown = (event, data, change) => {
// Return with no changes if it's not the "7" key with shift pressed.
if (event.which != 55 || !event.shiftKey) return
@@ -92,13 +92,8 @@ class App extends React.Component {
event.preventDefault()
// Change the state by inserting "and" at the cursor's position.
const newState = state
.change()
.insertText('and')
.apply()
// Return the new state, which will cause the editor to update it.
return newState
change.insertText('and')
return true
}
render() {

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

@@ -23,19 +23,17 @@ class App extends React.Component {
}
}
onChange = (state) => {
onChange = ({ state }) => {
this.setState({ state })
}
onKeyDown = (event, data, state) => {
onKeyDown = (event, data, change) => {
if (event.which != 67 || !event.metaKey || !event.altKey) return
event.preventDefault()
const isCode = state.blocks.some(block => block.type == 'code')
const isCode = change.state.blocks.some(block => block.type == 'code')
return state
.change()
.setBlock(isCode ? 'paragraph' : 'code')
.apply()
change.setBlock(isCode ? 'paragraph' : 'code')
return true
}
render() {
@@ -66,11 +64,11 @@ class App extends React.Component {
}
}
onChange = (state) => {
onChange = ({ state }) => {
this.setState({ state })
}
onKeyDown = (event, data, state) => {
onKeyDown = (event, data, change) => {
if (!event.metaKey) return
// Decide what to do based on the key code...
@@ -78,20 +76,16 @@ class App extends React.Component {
// When "B" is pressed, add a "bold" mark to the text.
case 66: {
event.preventDefault()
return state
.change()
.addMark('bold')
.apply()
change.addMark('bold')
return true
}
// When "`" is pressed, keep our existing code block logic.
case 67: {
if (!event.altKey) return
const isCode = state.blocks.some(block => block.type == 'code')
const isCode = change.state.blocks.some(block => block.type == 'code')
event.preventDefault()
return state
.change()
.setBlock(isCode ? 'paragraph' : 'code')
.apply()
change.setBlock(isCode ? 'paragraph' : 'code')
return true
}
}
}
@@ -147,29 +141,25 @@ class App extends React.Component {
}
}
onChange = (state) => {
onChange = ({ state }) => {
this.setState({ state })
}
onKeyDown = (event, data, state) => {
onKeyDown = (event, data, change) => {
if (!event.metaKey) return
switch (event.which) {
case 66: {
event.preventDefault()
return state
.change()
.toggleMark('bold')
.apply()
change.toggleMark('bold')
return true
}
case 67: {
if (!event.altKey) return
const isCode = state.blocks.some(block => block.type == 'code')
const isCode = change.state.blocks.some(block => block.type == 'code')
event.preventDefault()
return state
.change()
.setBlock(isCode ? 'paragraph' : 'code')
.apply()
state.setBlock(isCode ? 'paragraph' : 'code')
return true
}
}
}

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

@@ -18,21 +18,17 @@ class App extends React.Component {
state: initialState
}
onChange = (state) => {
onChange = ({ state }) => {
this.setState({ state })
}
onKeyDown = (event, data, state) => {
onKeyDown = (event, data, change) => {
if (event.which != 55 || !event.shiftKey) return
event.preventDefault()
const newState = state
.change()
.insertText('and')
.apply()
return newState
change.insertText('and');
return true
}
render() {
@@ -86,21 +82,17 @@ class App extends React.Component {
}
}
onChange = (state) => {
onChange = ({ state }) => {
this.setState({ state })
}
onKeyDown = (event, data, state) => {
onKeyDown = (event, data, change) => {
if (event.which != 55 || !event.shiftKey) return
event.preventDefault()
const newState = state
.change()
.insertText('and')
.apply()
return newState
change.insertText('and')
return true
}
render() {
@@ -136,11 +128,11 @@ class App extends React.Component {
}
}
onChange = (state) => {
onChange = ({ state }) => {
this.setState({ state })
}
onKeyDown = (event, data, state) => {
onKeyDown = (event, data, change) => {
// Return with no changes if it's not the "`" key with cmd/ctrl pressed.
if (event.which != 67 || !event.metaKey || !event.altKey) return
@@ -148,10 +140,8 @@ class App extends React.Component {
event.preventDefault()
// Otherwise, set the currently selected blocks type to "code".
return state
.change()
.setBlock('code')
.apply()
change.setBlock('code')
return true
}
render() {
@@ -188,24 +178,21 @@ class App extends React.Component {
}
}
onChange = (state) => {
onChange = ({ state }) => {
this.setState({ state })
}
onKeyDown = (event, data, state) => {
onKeyDown = (event, data, change) => {
if (event.which != 67 || !event.metaKey || !event.altKey) return
event.preventDefault()
// Determine whether any of the currently selected blocks are code blocks.
const isCode = state.blocks.some(block => block.type == 'code')
const isCode = change.state.blocks.some(block => block.type == 'code')
// Toggle the block type depending on `isCode`.
return state
.change()
.setBlock(isCode ? 'paragraph' : 'code')
.apply()
change.setBlock(isCode ? 'paragraph' : 'code')
return true
}
render() {

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

@@ -20,7 +20,7 @@ class App extends React.Component {
state: Plain.deserialize('')
}
onChange(state) {
onChange({ state }) {
this.setState({ state })
}
@@ -238,12 +238,12 @@ class App extends React.Component {
}
}
onChange = (state) => {
onChange = ({ state }) => {
this.setState({ state })
}
// When the document changes, save the serialized HTML to Local Storage.
onDocumentChange = (document, state) => {
onDocumentChange = (document, { state }) => {
const string = html.serialize(state)
localStorage.setItem('content', string)
}

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

@@ -22,7 +22,7 @@ class App extends React.Component {
state: Plain.deserialize(initialContent)
}
onChange = (state) => {
onChange = ({ state }) => {
this.setState({ state })
}
@@ -55,7 +55,7 @@ class App extends React.Component {
state: Plain.deserialize(initialContent)
}
onChange = (state) => {
onChange = ({ state }) => {
this.setState({ state })
// Save the state to Local Storage.
@@ -92,7 +92,7 @@ class App extends React.Component {
state: Plain.deserialize(initialContent)
}
onChange = (state) => {
onChange = ({ state }) => {
this.setState({ state })
const content = Plain.serialize(state)
@@ -128,12 +128,12 @@ class App extends React.Component {
state: Plain.deserialize(initialContent)
}
onChange = (state) => {
onChange = ({ state }) => {
this.setState({ state })
}
// Pull the saving logic out into the `onDocumentChange` handler.
onDocumentChange = (document, state) => {
onDocumentChange = (document, { state }) => {
const content = Plain.serialize(state)
localStorage.setItem('content', content)
}
@@ -176,11 +176,11 @@ class App extends React.Component {
state: Raw.deserialize(initialContent, {terse: true})
}
onChange = (state) => {
onChange = ({ state }) => {
this.setState({ state })
}
onDocumentChange = (document, state) => {
onDocumentChange = (document, { state }) => {
// Switch to using the Raw serializer.
const content = JSON.stringify(Raw.serialize(state))
localStorage.setItem('content', content)

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

@@ -25,17 +25,15 @@ class App extends React.Component {
}
}
onChange = (state) => {
onChange = ({ state }) => {
this.setState({ state })
}
onKeyDown = (event, data, state) => {
onKeyDown = (event, data, change) => {
if (!event.metaKey || event.which != 66) return
event.preventDefault()
return state
.change()
.toggleMark('bold')
.apply()
change.toggleMark('bold')
return true
}
render() {
@@ -73,7 +71,7 @@ function MarkHotkey(options) {
// Return our "plugin" object, containing the `onKeyDown` handler.
return {
onKeyDown(event, data, state) {
onKeyDown(event, data, change) {
// Check that the key pressed matches our `code` option.
if (!event.metaKey || event.which != code || event.altKey != isAltKey) return
@@ -81,10 +79,8 @@ function MarkHotkey(options) {
event.preventDefault()
// Toggle the mark `type`.
return state
.change()
.toggleMark(type)
.apply()
change.toggleMark(type)
return true
}
}
}
@@ -121,7 +117,7 @@ class App extends React.Component {
}
}
onChange = (state) => {
onChange = ({ state }) => {
this.setState({ state })
}
@@ -170,7 +166,7 @@ class App extends React.Component {
}
}
onChange = (state) => {
onChange = ({ state }) => {
this.setState({ state })
}
@@ -215,14 +211,12 @@ function MarkHotkey(options) {
const { type, key, isAltKey = false } = options
return {
onKeyDown(event, data, state) {
onKeyDown(event, data, change) {
// Change the comparison to use the key name.
if (!event.metaKey || keycode(event.which) != key || event.altKey != isAltKey) return
event.preventDefault()
return state
.change()
.toggleMark(type)
.apply()
change.toggleMark(type)
return true
}
}
}
@@ -255,7 +249,7 @@ class App extends React.Component {
}
}
onChange = (state) => {
onChange = ({ state }) => {
this.setState({ state })
}