Skip to main content

Cloud

Plate Cloud is the official Plate plugin and cloud service for image and attachment uploads, automatic server-side image resizing, and future Plate cloud services.

It supports:

  • Drag and drop uploading of images and attachments
  • Paste uploading of images and attachments
  • Using a file picker for uploading images and attachment
  • Drag resize of images with server-side image resizing which optimizes download speed
  • Automatically delivers high DPI images to high DPI devices and normal sized images to everyone else

Your usage of Plate Cloud supports the development of Plate.

You can start by getting a free Portive API key.

Installation#

npm install @udecode/plate
npm install @udecode/plate-cloud
npm install @udecode/plate-ui-cloud

Usage#

To use Plate Cloud, you will need to get a free Portive API key.

To get the value to save to your database, use editor.cloud.getSaveValue(). This is required for Plate Cloud because of the asynchronous nature of uploads.

import React from 'react';
import { Plate, PlateProvider } from '@udecode/plate';
import {
  createCloudAttachmentPlugin,
  createCloudImagePlugin,
  createCloudPlugin,
  ELEMENT_CLOUD_ATTACHMENT,
  ELEMENT_CLOUD_IMAGE,
} from '@udecode/plate-cloud';
import {
  CloudAttachmentElement,
  CloudImageElement,
} from '@udecode/plate-ui-cloud';
import { basicNodesPlugins } from './basic-nodes/basicNodesPlugins';
import { CloudToolbarButtons } from './cloud/CloudToolbarButtons';
import { cloudValue } from './cloud/cloudValue';
import { uploadStoreInitialValue } from './cloud/uploadStoreInitialValue';
import { editableProps } from './common/editableProps';
import { plateUI } from './common/plateUI';
import { Toolbar } from './toolbar/Toolbar';
import { createMyPlugins, MyValue } from './typescript/plateTypes';

const plugins = createMyPlugins(
  [
    ...basicNodesPlugins,
    createCloudPlugin({
      options: {
        /**
         * You can use either a Portive API Key `apiKey` or an Auth Token
         * `authToken` generated from the API Key.
         * https://www.portive.com/docs/auth/intro
         */
        // apiKey: 'PRTV_xxxx_xxxx'
        authToken:
          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InB1UFoyZTdlN0tUVzh0MjQifQ.eyJpYXQiOjE2Njg0NTUxMDksImV4cCI6MTcwMDAxMjcwOX0.xEznN3Wl6GqN57wsDGq0Z6giI4TvU32gvmMJUzcg2No',
        uploadStoreInitialValue, // don't need to specify this in actual app
      },
    }),
    createCloudAttachmentPlugin(),
    createCloudImagePlugin({
      options: {
        maxInitialWidth: 320,
        maxInitialHeight: 320,
        minResizeWidth: 100,
        maxResizeWidth: 720,
      },
    }),
  ],
  {
    components: {
      ...plateUI,
      [ELEMENT_CLOUD_ATTACHMENT]: CloudAttachmentElement,
      [ELEMENT_CLOUD_IMAGE]: CloudImageElement,
    },
  }
);

export default () => (
  <>
    <PlateProvider<MyValue> plugins={plugins} initialValue={cloudValue}>
      <Toolbar>
        <CloudToolbarButtons />
      </Toolbar>
      <Plate<MyValue> editableProps={editableProps} />
    </PlateProvider>
  </>

Options#

/**
* CloudPlugin options
*/
export type CloudPlugin = {
/**
* Options for connecting to the official Portive Cloud service
*
* Either `apiKey` or `authToken` must be provided
*/
apiKey?: string | () => string | () => Promise<string>;
authToken?: string | () => string | () => Promise<string>;
apiOrigin?: string;
/**
* Only used for testing to prepopulate the current state of uploads
*/
uploadStoreInitialValue?: Record<string, Upload>;
};
/**
* CloudAttachmentPlugin options (none at the moment)
*/
export type CloudAttachmentPlugin = {};
/**
* CloudImagePlugin options
*/
export type CloudImagePlugin = {
/**
* Choose a max width/height to display for when an image is first update.
* The image is always uploaded at full size so this is not about the
* stored resolution of the image.
*/
maxInitialWidth?: number;
maxInitialHeight?: number;
};

Source Code#

Edit this page