or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

editor-enhancements.mdhooks-state.mdindex.mdplugin-configuration.mdreact-components.mdtransforms-utilities.mdtypes-interfaces.md
tile.json

tessl/npm-udecode--plate-image

Image plugin for Plate rich text editor that enables embedding, uploading, and managing images with advanced features like drag-and-drop, resizing, and captions.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@udecode/plate-image@15.0.x

To install, run

npx @tessl/cli install tessl/npm-udecode--plate-image@15.0.0

index.mddocs/

@udecode/plate-image

The @udecode/plate-image package provides a comprehensive image plugin for the Plate rich text editor framework, built on top of Slate.js. It enables developers to embed, upload, and manage images within rich text documents with advanced features including drag-and-drop support, resizing capabilities, clipboard paste functionality, and automatic image upload handling.

Package Information

  • Package Name: @udecode/plate-image
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @udecode/plate-image

Core Imports

import { createImagePlugin, ELEMENT_IMAGE, TImageElement } from "@udecode/plate-image";

For individual components and utilities:

import { 
  Image, 
  insertImage, 
  useImageElement, 
  useImageCaptionString,
  isImageUrl,
  withImage,
  withImageUpload,
  withImageEmbed
} from "@udecode/plate-image";

For component hooks and store management:

import { 
  useImageCaption,
  useImageCaptionState,
  useImageResizable,
  imageStore,
  useImageStore,
  imageGlobalStore
} from "@udecode/plate-image";

For all types and interfaces:

import { 
  TImageElement,
  ImagePlugin,
  ImageCaptionProps,
  ImageResizableProps,
  ImageCaptionTextareaProps
} from "@udecode/plate-image";

Basic Usage

import { createImagePlugin, ELEMENT_IMAGE } from "@udecode/plate-image";
import { createPlateEditor } from "@udecode/plate-core";

// Create editor with image plugin
const editor = createPlateEditor({
  plugins: [
    createImagePlugin({
      options: {
        uploadImage: async (dataUrl) => {
          // Custom upload logic
          const response = await fetch('/api/upload', {
            method: 'POST',
            body: JSON.stringify({ image: dataUrl }),
          });
          return response.json().url;
        }
      }
    })
  ]
});

// Insert an image programmatically
import { insertImage } from "@udecode/plate-image";
insertImage(editor, "https://example.com/image.jpg");

Architecture

The @udecode/plate-image plugin is built around several key components:

  • Plugin Factory: createImagePlugin provides the main plugin configuration and behavior
  • Editor Enhancements: Higher-order functions (withImage, withImageUpload, withImageEmbed) that extend editor functionality
  • React Components: Complete set of UI components for rendering and interacting with images
  • Transforms: Functions for programmatically manipulating image elements
  • Hooks: React hooks for accessing image state and functionality
  • Type System: Full TypeScript integration with proper type definitions
  • Store Management: Centralized state management for image-specific behavior

Capabilities

Plugin Configuration

Core plugin factory and configuration options for integrating image functionality into Plate editors.

function createImagePlugin<ImagePlugin>(options?: {
  key?: string;
  isElement?: boolean;
  isVoid?: boolean;
  options?: ImagePlugin;
}): PlatePlugin<ImagePlugin>;

const ELEMENT_IMAGE: string;

Plugin Configuration

Image Types and Interfaces

TypeScript interfaces and types for image elements and plugin configuration.

interface TImageElement extends TElement {
  url: string;
  width?: number;
  caption?: TDescendant[];
}

interface ImagePlugin {
  uploadImage?: (dataUrl: string | ArrayBuffer) => Promise<string | ArrayBuffer> | string | ArrayBuffer;
  disableUploadInsert?: boolean;
  disableEmbedInsert?: boolean;
}

Types and Interfaces

Editor Enhancements

Higher-order functions that enhance the Plate editor with image-specific functionality including upload handling and URL embedding.

function withImage<V extends Value = Value, E extends PlateEditor<V> = PlateEditor<V>>(
  editor: E,
  plugin: WithPlatePlugin<ImagePlugin, V, E>
): E;

function withImageUpload<V extends Value = Value, E extends PlateEditor<V> = PlateEditor<V>>(
  editor: E,
  plugin: WithPlatePlugin<ImagePlugin, V, E>
): E;

function withImageEmbed<V extends Value = Value, E extends PlateEditor<V> = PlateEditor<V>>(
  editor: E,
  plugin: WithPlatePlugin<ImagePlugin, V, E>
): E;

Editor Enhancements

React Components

Complete set of React components for rendering images with captions, resizing handles, and interactive features.

const Image: {
  Root: React.ComponentType<any>;
  Caption: React.ComponentType<ImageCaptionProps>;
  Img: React.ComponentType<any>;
  Resizable: React.ComponentType<ImageResizableProps>;
  CaptionTextarea: React.ComponentType<ImageCaptionTextareaProps>;
};

interface ImageCaptionProps extends HTMLPropsAs<'figcaption'> {
  readOnly?: boolean;
}

interface ImageResizableProps extends Omit<ResizableProps, 'as'>, AsProps<'div'> {
  align?: 'left' | 'center' | 'right';
  readOnly?: boolean;
}

React Components

Hooks and State Management

React hooks for accessing image element data, managing captions, and integrating with the image store system.

function useImageElement(): TImageElement;
function useImageCaptionString(): string;

Hooks and State

Transforms and Utilities

Functions for programmatically inserting images and utility functions for image URL validation.

function insertImage<V extends Value>(
  editor: PlateEditor<V>,
  url: string | ArrayBuffer
): void;

function isImageUrl(url: string): boolean;

Transforms and Utilities

Type Definitions

// Core Plate framework types (from @udecode/plate-core)
interface TElement {
  type: string;
  children: TDescendant[];
}

interface TDescendant {
  [key: string]: any;
}

interface PlateEditor<V extends Value = Value> {
  [key: string]: any;
}

interface Value {
  [key: string]: any;
}

interface WithPlatePlugin<T, V extends Value, E extends PlateEditor<V>> {
  options: T;
  [key: string]: any;
}

// HTML and component prop types
interface HTMLPropsAs<T extends keyof JSX.IntrinsicElements> {
  [key: string]: any;
}

interface AsProps<T extends keyof JSX.IntrinsicElements> {
  as?: T;
}

// External library types
interface ResizableProps {
  [key: string]: any;
}