Image Insertion

/**
 * Main insertion plugin that combines upload, URL insertion, and UI functionality
 */
class ImageInsert {
  static pluginName: 'ImageInsert';
  static requires: [ImageUpload, ImageInsertViaUrl, ImageInsertUI];
  static isOfficialPlugin: true;
}

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

ClassicEditor
  .create(document.querySelector('#editor'), {
    plugins: [ImageInsert],
    toolbar: ['insertImage'],
    image: {
      insert: {
        integrations: ['upload', 'assetManager', 'url'],
        type: 'block'
      }
    }
  });

/**
 * Image insertion via URL with validation and preview functionality
 */
class ImageInsertViaUrl {
  static pluginName: 'ImageInsertViaUrl';
  static requires: [ImageUtils];
  static isOfficialPlugin: true;
}

/**
 * User interface for image insertion dropdown with integration support
 */
class ImageInsertUI {
  static pluginName: 'ImageInsertUI';
  static isOfficialPlugin: true;
  
  /**
   * Register custom integration for image insertion dropdown
   * @param integration - Integration configuration
   */
  registerIntegration(integration: {
    name: string;
    observable: any;
    buttonViewCreator: (locale: any) => any;
    formViewCreator: (locale: any) => any;
    requiresForm?: boolean;
  }): void;
}

// Register custom integration
const imageInsertUI = editor.plugins.get('ImageInsertUI');

imageInsertUI.registerIntegration({
  name: 'customGallery',
  observable: () => true,
  buttonViewCreator: (locale) => {
    const button = new ButtonView(locale);
    button.set({
      label: 'Gallery',
      icon: galleryIcon,
      tooltip: true
    });
    return button;
  },
  formViewCreator: (locale) => {
    return new CustomGalleryFormView(locale);
  }
});

/**
 * URL insertion form UI for the image insertion dropdown
 */
class ImageInsertViaUrlUI {
  static pluginName: 'ImageInsertViaUrlUI';
  static requires: [ImageInsertUI];
  static isOfficialPlugin: true;
}

/**
 * Command for inserting images at current selection with various source types
 */
class InsertImageCommand {
  constructor(editor: Editor);
  
  /**
   * Execute image insertion
   * @param options - Insertion options
   */
  execute(options: {
    source: string | Array<string | object>;
    imageType?: 'imageBlock' | 'imageInline';
    breakBlock?: boolean;
  }): void;
  
  readonly value: null;
}

// Insert single image by URL
editor.execute('insertImage', { 
  source: 'https://example.com/image.jpg' 
});

// Insert multiple images
editor.execute('insertImage', { 
  source: [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg'
  ]
});

// Insert as inline image
editor.execute('insertImage', { 
  source: 'https://example.com/image.jpg',
  imageType: 'imageInline'
});

/**
 * Command for replacing the source of an existing selected image
 */
class ReplaceImageSourceCommand {
  constructor(editor: Editor);
  
  /**
   * Replace image source
   * @param options - Replacement options
   */
  execute(options: {
    source: string;
  }): void;
  
  readonly value: string | null;
}

// Replace selected image source
editor.execute('replaceImageSource', { 
  source: 'https://example.com/new-image.jpg' 
});

interface ImageInsertConfig {
  /** 
   * Available integrations for image insertion
   * Default: ['upload', 'assetManager', 'url']
   */
  integrations?: Array<string>;
  
  /** 
   * Default image type when inserting
   * Default: 'block'
   */
  type?: 'inline' | 'block' | 'auto';
}

// Enable only upload and URL insertion
ClassicEditor
  .create(document.querySelector('#editor'), {
    image: {
      insert: {
        integrations: ['upload', 'url'],
        type: 'auto' // Auto-detect based on context
      }
    }
  });

// Force inline images
ClassicEditor
  .create(document.querySelector('#editor'), {
    image: {
      insert: {
        type: 'inline'
      }
    }
  });

/**
 * Form view for URL-based image insertion
 */
class _ImageInsertFormView {
  constructor(locale: any);
  
  urlInputView: any;
  saveButtonView: any;
  cancelButtonView: any;
}

/**
 * URL input view for image insertion form
 */
class _ImageInsertUrlView {
  constructor(locale: any);
  
  fieldView: any;
  render(): void;
  focus(): void;
}