Image Upload

/**
 * Main upload plugin that combines editing, UI, and progress functionality
 */
class ImageUpload {
  static pluginName: 'ImageUpload';
  static requires: [ImageUploadEditing, ImageUploadUI, ImageUploadProgress];
  static isOfficialPlugin: true;
}

import { ImageUpload } from '@ckeditor/ckeditor5-image';
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';

ClassicEditor
  .create(document.querySelector('#editor'), {
    plugins: [ImageUpload],
    toolbar: ['imageUpload'],
    image: {
      upload: {
        types: ['jpeg', 'png', 'gif', 'bmp', 'webp', 'tiff']
      }
    }
  });

/**
 * Core upload editing functionality with file handling and progress tracking
 */
class ImageUploadEditing {
  static pluginName: 'ImageUploadEditing';
  static requires: [FileRepository, Notification, Clipboard, ImageUtils];
  static isOfficialPlugin: true;
}

interface ImageUploadCompleteEvent {
  name: 'uploadComplete';
}

interface ImageUploadCompleteData {
  imageElement: ModelElement;
}

/**
 * User interface for image upload functionality with button and integration support
 */
class ImageUploadUI {
  static pluginName: 'ImageUploadUI';
  static requires: [FileDialogButtonView, ImageInsertUI];
  static isOfficialPlugin: true;
}

/**
 * Visual progress indication during image upload with placeholder and progress bar
 */
class ImageUploadProgress {
  static pluginName: 'ImageUploadProgress';
  static requires: [FileRepository, Notification];
  static isOfficialPlugin: true;
}

/**
 * Command for programmatic image file uploads
 * @param options - Upload options including files and image type
 */
class UploadImageCommand {
  constructor(editor: Editor);
  
  execute(options: {
    file: Array<File>;
    imageType?: 'imageBlock' | 'imageInline';
  }): void;
  
  readonly value: null;
}

// Upload files programmatically
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (event) => {
  const files = Array.from(event.target.files);
  editor.execute('uploadImage', { file: files });
});

interface ImageUploadConfig {
  /** 
   * Supported image file types 
   * Default: ['jpeg', 'png', 'gif', 'bmp', 'webp', 'tiff']
   */
  types: Array<string>;
}

ClassicEditor
  .create(document.querySelector('#editor'), {
    image: {
      upload: {
        types: ['jpeg', 'png', 'webp'] // Restrict to specific formats
      }
    }
  });

/**
 * Creates RegExp for image MIME type validation
 * @param types - Array of image type extensions
 * @returns RegExp for validating image MIME types
 */
function createImageTypeRegExp(types: Array<string>): RegExp;

/**
 * Checks if clipboard contains HTML content
 * @param dataTransfer - DataTransfer object from clipboard
 * @returns True if HTML content is detected
 */
function isHtmlInDataTransfer(dataTransfer: DataTransfer): boolean;