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.

—

Pending

Overview

Eval results

Files

Plugin Configuration

Name: tessl/npm-udecode--plate-image
Author: tessl

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

Capabilities

Create Image Plugin

Creates the main image plugin with configurable options for upload handling and behavior customization.

/**
 * Creates an image plugin for Plate editor with configurable options
 * @param options - Plugin configuration options
 * @returns Configured Plate plugin for image functionality
 */
function createImagePlugin(options?: {
  options?: ImagePlugin;
}): PlatePlugin<ImagePlugin>;

Usage Examples:

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

// Basic plugin setup
const imagePlugin = createImagePlugin();

// Plugin with custom upload function
const imagePluginWithUpload = createImagePlugin({
  options: {
    uploadImage: async (dataUrl) => {
      const formData = new FormData();
      formData.append('image', dataUrl);
      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData,
      });
      const result = await response.json();
      return result.url;
    }
  }
});

// Plugin with disabled features
const restrictedImagePlugin = createImagePlugin({
  options: {
    disableUploadInsert: true,
    disableEmbedInsert: false,
  }
});

Element Type Constant

The string constant used to identify image elements in the Plate editor.

/**
 * Element type constant for image elements ('img')
 * Used throughout the plugin system to identify image nodes
 */
const ELEMENT_IMAGE: string;

Usage Examples:

import { ELEMENT_IMAGE, getPluginType } from "@udecode/plate-image";
import { getBlockAbove } from "@udecode/plate-core";

// Check if current selection is an image
const entry = getBlockAbove(editor, {
  match: { type: getPluginType(editor, ELEMENT_IMAGE) },
});

// Use in plugin configuration
const customImagePlugin = {
  key: ELEMENT_IMAGE,
  isElement: true,
  isVoid: true,
  // ... other configuration
};

Plugin Options Interface

The plugin accepts an ImagePlugin configuration object with the following optional properties:

interface ImagePlugin {
  /**
   * Custom image upload function
   * Receives base64 dataUrl and should return uploaded image URL
   */
  uploadImage?: (
    dataUrl: string | ArrayBuffer
  ) => Promise<string | ArrayBuffer> | string | ArrayBuffer;

  /**
   * Disable automatic file upload on paste/drop
   * Default: false
   */
  disableUploadInsert?: boolean;

  /**
   * Disable automatic URL embedding
   * Default: false
   */
  disableEmbedInsert?: boolean;
}

Plugin Behavior

The image plugin provides several automatic behaviors when integrated:

HTML Deserialization: Automatically converts <img> tags to image elements when pasting HTML content
Keyboard Navigation: Handles down arrow key to focus caption from image element
Event Handling: Provides keyboard shortcuts and navigation between image and caption
Element Configuration: Sets up image elements as void (non-editable content) elements

Integration with Plate Core

The plugin integrates seamlessly with Plate's plugin system:

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

const editor = createPlateEditor({
  plugins: [
    // Other plugins...
    createImagePlugin({
      options: {
        uploadImage: async (dataUrl) => {
          // Your upload logic here
          return uploadedUrl;
        }
      }
    }),
    // More plugins...
  ]
});

Install with Tessl CLI

npx tessl i tessl/npm-udecode--plate-image

docs

editor-enhancements.md

hooks-state.md

index.md

plugin-configuration.md

react-components.md

transforms-utilities.md

types-interfaces.md

tile.json

tessl/npm-udecode--plate-image