From b0b3c3f9070817c0effc28e5473dfd843050deda Mon Sep 17 00:00:00 2001 From: Ian Storm Taylor Date: Fri, 8 Jul 2016 12:36:42 -0700 Subject: [PATCH] update docs --- docs/guides/adding-custom-formatting.md | 46 ++----------------------- 1 file changed, 2 insertions(+), 44 deletions(-) diff --git a/docs/guides/adding-custom-formatting.md b/docs/guides/adding-custom-formatting.md index 88f40bfa3..1a205087b 100644 --- a/docs/guides/adding-custom-formatting.md +++ b/docs/guides/adding-custom-formatting.md @@ -9,49 +9,7 @@ In the last guide we learned how to use Slate's event handlers to change its con In this guide, we'll show you how to add custom formatting options, like **bold**, _italic_, `code` or ~~strikethrough~~. -So we start with our app from earlier: - -```js -class App extends React.Component { - - constructor(props) { - super(props) - this.state = { - state: initialState - } - } - - render() { - return ( - this.onChange(state)} - onKeyDown={e, state => this.onKeyDown(e, state)} - /> - ) - } - - onChange(state) { - this.setState({ state }) - } - - onKeyDown(event, state) { - if (event.which != 55 || !event.shiftKey) return - - const newState = state - .transform() - .insertText('and') - .apply() - - return newState - } - -} -``` - -But we'll get rid of that useless `onKeyDown` handler logic, and we'll replace it with logic that will add a **bold** format to the currently selected text. - -Here's what that looks like: +So we start with our app from earlier, but we'll get rid of that useless `onKeyDown` handler logic, and we'll replace it with logic that will add a **bold** format to the currently selected text: ```js class App extends React.Component { @@ -104,7 +62,7 @@ So let's define our `bold` mark: ```js -// Define a simple dictionary of styles that make text bold. +// Define a set of styles that make text bold. const BOLD_MARK = { fontWeight: 'bold' }