Image Resizing

/**
 * Main resizing plugin that combines editing functionality with handles and buttons
 */
class ImageResize {
  static pluginName: 'ImageResize';
  static requires: [ImageResizeEditing, ImageResizeHandles, ImageCustomResizeUI, ImageResizeButtons];
  static isOfficialPlugin: true;
}

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

ClassicEditor
  .create(document.querySelector('#editor'), {
    plugins: [ImageResize],
    image: {
      resizeUnit: '%',
      resizeOptions: [
        {
          name: 'resizeImage:original',
          value: null,
          icon: 'original'
        },
        {
          name: 'resizeImage:25',
          value: '25',
          icon: 'small'
        },
        {
          name: 'resizeImage:50',
          value: '50',
          icon: 'medium'
        },
        {
          name: 'resizeImage:75',
          value: '75',
          icon: 'large'
        }
      ]
    }
  });

/**
 * Core editing functionality for image resizing with schema and command registration
 */
class ImageResizeEditing {
  static pluginName: 'ImageResizeEditing';
  static requires: [ImageUtils];
  static isOfficialPlugin: true;
}

/**
 * Visual drag handles for interactive image resizing
 */
class ImageResizeHandles {
  static pluginName: 'ImageResizeHandles';
  static requires: [ImageResizeEditing, WidgetResize];
  static isOfficialPlugin: true;
}

/**
 * Preset size buttons for quick image resizing operations
 */
class ImageResizeButtons {
  static pluginName: 'ImageResizeButtons';
  static requires: [ImageResizeEditing];
  static isOfficialPlugin: true;
}

/**
 * Custom resize form UI allowing manual width/height input
 */
class ImageCustomResizeUI {
  static pluginName: 'ImageCustomResizeUI';
  static requires: [ImageResizeEditing];
  static isOfficialPlugin: true;
}

/**
 * Command for programmatic image resizing operations
 */
class ResizeImageCommand {
  constructor(editor: Editor);
  
  /**
   * Execute resize operation
   * @param options - Resize options
   */
  execute(options: { width: string | null }): void;
  
  /** Current resize value with width and height */
  readonly value: { width: string | null, height: string | null } | null;
}

// Resize to 50% width
editor.execute('resizeImage', { width: '50%' });

// Resize to 300px width
editor.execute('resizeImage', { width: '300px' });

// Reset to original size
editor.execute('resizeImage', { width: null });

// Check current size
const currentSize = editor.commands.get('resizeImage').value;
console.log('Current size:', currentSize);

interface ImageResizeOption {
  /** Unique name for the resize option */
  name: string;
  /** Size value - null for original size, string with unit for specific size */
  value: string | null;
  /** Icon name for the button */
  icon?: string; // 'small', 'medium', 'large', 'original'
  /** Display label for the option */
  label?: string;
}

interface ImageConfig {
  /** Available resize options */
  resizeOptions?: Array<ImageResizeOption>;
  /** Default unit for resizing operations */
  resizeUnit?: 'px' | '%'; // Default: '%'
}

// Pixel-based resizing with custom options
ClassicEditor
  .create(document.querySelector('#editor'), {
    image: {
      resizeUnit: 'px',
      resizeOptions: [
        {
          name: 'resizeImage:original',
          value: null,
          label: 'Original size',
          icon: 'original'
        },
        {
          name: 'resizeImage:200',
          value: '200',
          label: 'Small (200px)',
          icon: 'small'
        },
        {
          name: 'resizeImage:400',
          value: '400',
          label: 'Medium (400px)',
          icon: 'medium'
        }
      ]
    }
  });

// Percentage-based with fewer options
ClassicEditor
  .create(document.querySelector('#editor'), {
    image: {
      resizeUnit: '%',
      resizeOptions: [
        { name: 'resizeImage:original', value: null, icon: 'original' },
        { name: 'resizeImage:50', value: '50', icon: 'medium' }
      ]
    }
  });

/**
 * Possible resize range for selected image
 */
interface _PossibleResizeImageRange {
  unit: 'px' | '%';
  lower: number;
  upper: number;
}

/**
 * Image dimension with unit specification
 */
interface _ImageDimensionWithUnit {
  value: number;
  unit: 'px' | '%';
}

/**
 * Validator callback for custom resize form
 */
type _ImageCustomResizeFormValidatorCallback = (value: string) => string | undefined;

/**
 * Get image size value if specified in pixels
 * @param imageElement - Image model element
 * @returns Size value in pixels or null
 */
function _getImageSizeValueIfInPx(imageElement: any): string | null;

/**
 * Check if image has both width and height styles set
 * @param imageElement - Image view element
 * @returns True if both dimensions are styled
 */
function _checkIfImageWidthAndHeightStylesAreBothSet(imageElement: any): boolean;

/**
 * Get selected image width in specified units
 * @param imageElement - Image model element
 * @returns Width with unit information
 */
function _getSelectedImageWidthInUnits(imageElement: any): _ImageDimensionWithUnit | null;

/**
 * Parse image dimension string with unit
 * @param dimension - Dimension string (e.g., "50px", "25%")
 * @returns Parsed dimension with unit
 */
function _tryParseImageDimensionWithUnit(dimension: string): _ImageDimensionWithUnit | null;

/**
 * Convert image dimensions between units
 * @param dimensions - Current dimensions
 * @param targetUnit - Target unit for conversion
 * @param imageElement - Image element for context
 * @returns Converted dimensions
 */
function _tryCastImageDimensionsToUnit(
  dimensions: _ImageDimensionWithUnit,
  targetUnit: 'px' | '%',
  imageElement: any
): _ImageDimensionWithUnit | null;

/**
 * Form view for custom image resize input
 */
class _ImageCustomResizeFormView {
  constructor(locale: any, options: any);
  
  widthInputView: any;
  heightInputView: any;
  saveButtonView: any;
  cancelButtonView: any;
  
  render(): void;
  destroy(): void;
}