Previous:
Using Plugins


Saving to a Database

Now that you've learned the basics of how to add functionality to the Slate editor, you might be wondering how you'd go about saving the content you've been editing, such that you can come back to your app later and have it load.

In this guide, we'll show you how to add logic to save your Slate content to a database for storage and retrieval later.

Let's start with a basic, plain text rendering editor:

import { Editor, Plain } from 'slate'

const initialContent = 'The initial string of content!'

class App extends React.Component {

  state = {
    state: Plain.deserialize(initialContent)
  }

  onChange = (state) => {
    this.setState({ state })
  }

  render = () => {
    return (
      <Editor
        state={this.state.state}
        onChange={this.onChange}
      />
    )
  }

}

That will render a basic Slate editor on your page, and when you type things will change. But if you refresh the page, everything will be reverted back to its original stage.

What we need to do is save the changes you make somewhere. For this example, we'll just be using Local Storage, but it will give you an idea for where you'd need to add your own database hooks.

So, in our onChange handler, we need to save the state. But the state argument that onChange receives is an immutable object, so we can't just save it as-is. We need to serialize it to a format we understand first.

In this case, we're already using the Plain serializer to create our initial state, so let's use it to serialize our saved state as well, like so:

const initialContent = 'The initial string of content!'

class App extends React.Component {

  state = {
    state: Plain.deserialize(initialContent)
  }

  onChange = (state) => {
    this.setState({ state })

    // Save the state to Local Storage.
    const content = Plain.serialize(state)
    localStorage.setItem('content', content)
  }

  render = () => {
    return (
      <Editor
        state={this.state.state}
        onChange={this.onChange}
      />
    )
  }

}

Now whenever you edit the page, if you look in Local Storage, you should see the content string changing.

But... if you refresh the page, everything is still reset. That's because we need to make sure the initial state is pulled from that same Local Storage location, like so:

// Update the initial content to be pulled from Local Storage if it exists.
const initialContent = (
  localStorage.getItem('content') ||
  'The initial string of content!'
)

class App extends React.Component {

  state = {
    state: Plain.deserialize(initialContent)
  }

  onChange = (state) => {
    this.setState({ state })

    const content = Plain.serialize(state)
    localStorage.setItem('content', content)
  }

  render = () => {
    return (
      <Editor
        state={this.state.state}
        onChange={this.onChange}
      />
    )
  }

}

Now you should be able to save changes across refreshes!

However, if you inspect the change handler, you'll notice that it's actually saving the Local Storage value on every change to the editor, even when only the selection changes! This is because onChange is called for every change. For Local Storage this doesn't really matter, but if you're saving things to a database via HTTP request this would result in a lot of unnecessary requests.

Instead of using onChange, Slate's editor also accepts an onDocumentChange convenience handler that you can use to isolate saving logic to only happen when the document itself has changed, like so:

const initialContent = (
  localStorage.getItem('content') ||
  'The initial string of content!'
)
class App extends React.Component {

  state = {
    state: Plain.deserialize(initialContent)
  }

  onChange = (state) => {
    this.setState({ state })
  }

  // Pull the saving logic out into the `onDocumentChange` handler.
  onDocumentChange = (document, state) => {
    const content = Plain.serialize(state)
    localStorage.setItem('content', content)
  }

  render = () => {
    // Add the `onDocumentChange` handler to the editor.
    return (
      <Editor
        state={this.state.state}
        onChange={this.onChange}
        onDocumentChange={this.onDocumentChange}
      />
    )
  }

}

Now you're content will be saved only when the content itself changes!

Success. But we're only saving plain text strings here. If you're working with rich text, you'll need to serialize the state object differently. Instead, you can use the Raw serializer, and save things in Local Storage as JSON strings, like so:

const initialContent = (
  JSON.parse(localStorage.getItem('content')) ||
  {
    nodes: [
      {
        kind: 'block',
        type: 'paragraph'
      }
    ]
  }
)

class App extends React.Component {

  state = {
    state: Raw.deserialize(initialContent, {terse: true})
  }

  onChange = (state) => {
    this.setState({ state })
  }

  onDocumentChange = (document, state) => {
    // Switch to using the Raw serializer.
    const content = JSON.stringify(Raw.serialize(state))
    localStorage.setItem('content', content)
  }

  render = () => {
    return (
      <Editor
        state={this.state.state}
        onChange={this.onChange}
        onDocumentChange={this.onDocumentChange}
      />
    )
  }

}

That works! Now you can preserve any formatting that the user added.

However, sometimes you may not want to use the raw JSON representation that Slate understands, and you may want something slightly more standardized, like good old fashioned HTML. In that case, check out the next guide...


Next:
Saving and Loading HTML Content


results matching ""

    No results matching ""