mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-25 16:20:49 +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

29
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 })
}
@@ -44,13 +44,13 @@ class App extends React.Component {
state = {
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)
}
@@ -67,9 +67,9 @@ class App extends React.Component {
}
```
Okay cool, so now when you press a key in the editor, you'll see the key's code printed to the console. Not very useful, but at least we know it's working.
Okay cool, so now when you press a key in the editor, you'll see the key's code printed to the console. Not very useful, but at least we know it's working.
Now we want to make it actually change the content. For the purposes of our example, let's say we want to make it so that whenever a user types `&` we actually add `and` to the content.
Now we want to make it actually change the content. For the purposes of our example, let's say we want to make it so that whenever a user types `&` we actually add `and` to the content.
Our `onKeyDown` handler might look like this:
@@ -79,26 +79,21 @@ class App extends React.Component {
state = {
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
// Prevent the ampersand character from being inserted.
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() {

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

@@ -22,20 +22,18 @@ 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() {
@@ -65,12 +63,12 @@ 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
}
}
}
@@ -146,30 +140,26 @@ 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
}
}
}

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

@@ -7,7 +7,7 @@
In our previous example, we started with a paragraph, but we never actually told Slate anything about the `paragraph` block type. We just let it use its internal default renderer, which uses a plain old `<div>`.
But that's not all you can do. Slate lets you define any type of custom blocks you want, like block quotes, code blocks, list items, etc.
But that's not all you can do. Slate lets you define any type of custom blocks you want, like block quotes, code blocks, list items, etc.
We'll show you how. Let's start with our app from earlier:
@@ -17,22 +17,18 @@ class App extends React.Component {
state = {
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() {
@@ -61,7 +57,7 @@ function CodeNode(props) {
}
```
Pretty simple.
Pretty simple.
See the `props.attributes` reference? Slate passes attributes that should be rendered on the top-most element of your blocks, so that you don't have to build them up yourself. You **must** mix the attributes into your component.
@@ -85,22 +81,18 @@ 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() {
@@ -135,23 +127,21 @@ 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
// Prevent the "`" from being inserted by default.
event.preventDefault()
// Otherwise, set the currently selected blocks type to "code".
return state
.change()
.setBlock('code')
.apply()
change.setBlock('code')
return true
}
render() {
@@ -187,25 +177,22 @@ 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)
}

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

@@ -21,8 +21,8 @@ class App extends React.Component {
state = {
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)

40
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
}
}
}
@@ -101,7 +97,7 @@ function BoldMark(props) {
// Initialize our bold-mark-adding plugin.
const boldPlugin = MarkHotkey({
type: 'bold',
type: 'bold',
code: 66
})
@@ -120,8 +116,8 @@ class App extends React.Component {
}
}
}
onChange = (state) => {
onChange = ({ state }) => {
this.setState({ state })
}
@@ -169,8 +165,8 @@ 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
}
}
}
@@ -254,8 +248,8 @@ class App extends React.Component {
}
}
}
onChange = (state) => {
onChange = ({ state }) => {
this.setState({ state })
}