diff --git a/docs/walkthroughs/installing-slate.md b/docs/walkthroughs/installing-slate.md index 55c588937..2c889b8f6 100644 --- a/docs/walkthroughs/installing-slate.md +++ b/docs/walkthroughs/installing-slate.md @@ -1,16 +1,16 @@ # Installing Slate -Slate is an npm module, so to install it you do: +Slate is a monorepo divided up into multi npm packages, so to install it you do: ``` -npm install slate +npm install slate slate-react ``` -You'll also need to be sure to install Slate's peer dependencies for React: +You'll also need to be sure to install Slate's peer dependencies: ``` -npm install react react-dom +npm install react react-dom immutable ``` _Note, if you'd rather use a pre-bundled version of Slate, you can `npm install slate` and retrieve the bundled `dist/slate.js` file! Check out the [Using the Bundled Source](./using-the-bundled-source.md) guide for more information._ @@ -21,14 +21,15 @@ Slate exposes a set of modules that you'll use to build your editor. The most im ```js // Import the Slate editor. -import { Editor } from 'slate' +import { Editor } from 'slate-react' ``` In addition to rendering the editor, you need to give Slate a "initial state" to render as content. We'll use the `State` model that ships with Slate to create a new initial state that just contains a single paragraph block with some text in it: ```js // Import the `State` model. -import { Editor, State } from 'slate' +import { Editor } from 'slate-react' +import { State } from 'slate' // Create our initial state... const initialState = State.fromJSON({ @@ -58,7 +59,8 @@ And now that we've our initial state, we define our `App` and pass it into Slate ```js // Import React! import React from 'react' -import { Editor, State } from 'slate' +import { Editor } from 'slate-react' +import { State } from 'slate' const initialState = State.fromJSON({ document: { diff --git a/docs/walkthroughs/saving-and-loading-html-content.md b/docs/walkthroughs/saving-and-loading-html-content.md index d8cef4434..f64b665e7 100644 --- a/docs/walkthroughs/saving-and-loading-html-content.md +++ b/docs/walkthroughs/saving-and-loading-html-content.md @@ -10,7 +10,7 @@ In the previous guide, we looked at how to serialize the Slate editor's content Let's start with a basic editor: ```js -import { Editor } from 'slate' +import { Editor } from 'slate-react' class App extends React.Component { @@ -200,7 +200,7 @@ const rules = [ Great, that's all of the rules we need! Now let's create a new `Html` serializer and pass in those rules: ```js -import { Html } from 'slate' +import Html from 'slate-html-serializer' // Create a new serializer instance with our `rules` from above. const html = new Html({ rules }) diff --git a/docs/walkthroughs/saving-to-a-database.md b/docs/walkthroughs/saving-to-a-database.md index 0561800ee..3a47cce86 100644 --- a/docs/walkthroughs/saving-to-a-database.md +++ b/docs/walkthroughs/saving-to-a-database.md @@ -12,7 +12,8 @@ In this guide, we'll show you how to add logic to save your Slate content to a d Let's start with a basic editor: ```js -import { Editor, State } from 'slate' +import { Editor } from 'slate-react' +import { State } from 'slate' const initialState = State.fromJSON({ document: { @@ -227,7 +228,8 @@ But what if you want something other than JSON? Well, you'd need to serialize yo ```js // Switch to using the Plain serializer. -import { Editor, Plain } from 'slate' +import { Editor } from 'slate-react' +import Plain from 'slate-plain-serializer' const existingState = localStorage.getItem('content') const initialState = Plain.deserialize(existingState || 'A string of plain text.')