Base Media Plugins

/**
 * Complete image plugin with upload, embed, and HTML parsing capabilities
 * Handles automatic image detection from URLs and file uploads
 */
const BaseImagePlugin: TSlatePlugin<ImageConfig>;

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

import { BaseImagePlugin } from "@udecode/plate-media";
import { createSlateEditor } from "@udecode/plate";

const editor = createSlateEditor({
  plugins: [
    BaseImagePlugin.configure({
      options: {
        disableEmbedInsert: false,
        disableUploadInsert: false,
        uploadImage: async (file) => {
          // Your upload logic
          const formData = new FormData();
          formData.append('file', file);
          const response = await fetch('/upload', {
            method: 'POST',
            body: formData
          });
          const data = await response.json();
          return data.url;
        }
      }
    })
  ]
});

/**
 * Base plugin for video elements with void node configuration
 * Supports width and height attributes for responsive sizing
 */
const BaseVideoPlugin: TSlatePlugin<VideoConfig>;

interface VideoConfig extends MediaPluginOptions {
  // Inherits standard media plugin options
}

/**
 * Base plugin for audio elements with void node configuration
 * Handles audio file embedding and playback controls
 */
const BaseAudioPlugin: TSlatePlugin<AudioConfig>;

interface AudioConfig extends MediaPluginOptions {
  // Inherits standard media plugin options
}

/**
 * Base plugin for generic file elements with void node configuration
 * Handles file attachments and download functionality
 */
const BaseFilePlugin: TSlatePlugin<FileConfig>;

interface FileConfig extends MediaPluginOptions {
  // Inherits standard media plugin options
}

/**
 * Automatically inserts images when pasting image URLs
 * Detects image URLs in clipboard content and converts to image elements
 */
function withImageEmbed(config: ImageConfig): EditorOverride<ImageConfig>;

import { withImageEmbed } from "@udecode/plate-media";

const editor = createSlateEditor({
  plugins: [
    BaseImagePlugin.configure({
      overrides: {
        insert: withImageEmbed
      }
    })
  ]
});

// Now pasting "https://example.com/image.jpg" will automatically create an image element

/**
 * Handles image uploads from clipboard and file drops
 * Processes files from drag & drop or paste operations
 */
function withImageUpload(config: ImageConfig): EditorOverride<ImageConfig>;

import { withImageUpload } from "@udecode/plate-media";

const editor = createSlateEditor({
  plugins: [
    BaseImagePlugin.configure({
      overrides: {
        insert: withImageUpload,
        drop: withImageUpload
      },
      options: {
        uploadImage: async (file) => {
          // Handle the file upload
          return uploadToServer(file);
        }
      }
    })
  ]
});

// Now drag & drop or paste of image files will trigger upload

interface MediaPluginOptions {
  /** Custom URL validation function */
  isUrl?: (text: string) => boolean;
  /** URL transformation function for processing URLs before embedding */
  transformUrl?: (url: string) => string;
}

const mediaOptions: MediaPluginOptions = {
  isUrl: (text) => {
    // Custom URL validation logic
    return /^https?:\/\/.+/.test(text);
  },
  transformUrl: (url) => {
    // Transform URLs (e.g., add query parameters)
    return url + '?editor=plate';
  }
};

enum KEYS {
  image = 'img',
  video = 'video', 
  audio = 'audio',
  file = 'file',
  mediaEmbed = 'media_embed',
  placeholder = 'placeholder'
}