Slate Cloud

Getting Started

This guide show you how to add slate-cloud to any Slate based rich text editor. This will enable these features:

• Image uploads to the cloud
• Image resizing with server side resizing for optimized image delivery
• Attachment uploads to the cloud

Installation

To install slate-cloud:

# install with yarn
yarn add slate-cloud

# install with npm
npm install --save slate-cloud

You'll also need these peer dependencies if you don't already have them:

# install with yarn
yarn add slate slate-react slate-history

# install with npm
npm install --save slate slate-react slate-history

Using

Using Slate Cloud with JavaScript

This is a minimal Slate Cloud integration in JavaScript.

JavaScript
import { useState } from "react"
import { createEditor } from "slate"
import { withHistory } from "slate-history"
import { Editable, Slate, withReact } from "slate-react"
import { withCloud } from "slate-cloud"
import { CloudComponents } from "slate-cloud/cloud-components"

// ✅ Add `CloudComponents.withRenderElement` plugin on `renderElement`
const renderElement = CloudComponents.withRenderElement((props) => {
  const { element } = props
  if (element.type === "paragraph") {
    return <p {...props.attributes}>{props.children}</p>
  }
  throw new Error(`Unhandled element type ${element.type}`)
})

export default function Page() {
  const [editor] = useState(() => {
    const basicEditor = withHistory(withReact(createEditor()))
    // ✅ Add `withCloud` plugin on `Editor` object to enable uploads
    const cloudEditor = withCloud(basicEditor, {
      apiKey: "MY_API_KEY",
    })
    // ✅ Add `CloudComponents.withEditor` plugin on `Editor` object
    CloudComponents.withEditor(cloudEditor)
    return cloudEditor
  })

  return (
    <Slate
      editor={editor}
      value={[{ type: "paragraph", children: [{ text: "Hello World" }] }]}
    >
      <Editable
        renderElement={renderElement}
        // ✅ Add `editor.cloud.handlePaste` to `Editable onPaste`
        onPaste={editor.cloud.handlePaste}
        // ✅ Add `editor.cloud.handleDrop` to `Editable onDrop`
        onDrop={editor.cloud.handleDrop}
      />
    </Slate>
  )
}

Using Slate Cloud with TypeScript

NOTE: To learn more about using TypeScript with Slate, read Slate's TypeScript Documentation.

To use Slate Cloud with TypeScript, configure Slate's CustomTypes to include Slate Cloud's extensions.

Here is the same code as above but with added TypeScript types.

TypeScript
import { useState } from "react"
import { BaseEditor, BaseText, createEditor } from "slate"
import { CloudEditor, withCloud } from "slate-cloud"
import {
  CloudComponents,
  CloudComponentsElementType,
} from "slate-cloud/cloud-components"
import { HistoryEditor, withHistory } from "slate-history"
import { Editable, ReactEditor, Slate, withReact } from "slate-react"

type ParagraphElement = {
  type: "paragraph"
  children: BaseText[]
}

declare module "slate" {
  interface CustomTypes {
    // ✅ Add `CloudEditor`
    Editor: BaseEditor & ReactEditor & HistoryEditor & CloudEditor
    // ✅ Add `CloudComponentsElementType`
    Element: ParagraphElement | CloudComponentsElementType
    Text: BaseText
  }
}

// ✅ Add `CloudComponents.withRenderElement` plugin on `renderElement`
const renderElement = CloudComponents.withRenderElement((props) => {
  const { element } = props
  if (element.type === "paragraph") {
    return <p {...props.attributes}>{props.children}</p>
  }
  throw new Error(`Unhandled element type ${element.type}`)
})

export default function Page() {
  const [editor] = useState(() => {
    const basicEditor = withHistory(withReact(createEditor()))
    // ✅ Add `withCloud` plugin on `Editor` object to enable uploads
    const cloudEditor = withCloud(basicEditor, {
      apiKey: "MY_API_KEY",
    })
    // ✅ Add `CloudComponents.withEditor` plugin on `Editor` object
    CloudComponents.withEditor(cloudEditor)
    return cloudEditor
  })

  return (
    <Slate
      editor={editor}
      value={[{ type: "paragraph", children: [{ text: "Hello World" }] }]}
    >
      <Editable
        renderElement={renderElement}
        // ✅ Add `editor.cloud.handlePaste` to `Editable onPaste`
        onPaste={editor.cloud.handlePaste}
        // ✅ Add `editor.cloud.handleDrop` to `Editable onDrop`
        onDrop={editor.cloud.handleDrop}
      />
    </Slate>
  )
}

What's Next

Next, learn how to save a document with Slate Cloud.