Commands

/**
 * Command for inserting images at current selection with various source types
 * Command name: 'insertImage' (alias: 'imageInsert')
 */
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;
  readonly isEnabled: boolean;
}

// 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',
    { src: 'image3.jpg', alt: 'Description' }
  ]
});

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

// Insert with block break
editor.execute('insertImage', { 
  source: 'https://example.com/image.jpg',
  breakBlock: true
});

// Check if insertion is possible
const command = editor.commands.get('insertImage');
console.log('Can insert image:', command.isEnabled);

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

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

// Get current image source
const command = editor.commands.get('replaceImageSource');
console.log('Current source:', command.value);
console.log('Can replace:', command.isEnabled);

// Listen for source changes
command.on('change:value', (evt, name, value, oldValue) => {
  console.log('Image source changed from:', oldValue, 'to:', value);
});

/**
 * Command for converting image to block type
 * Command name: 'imageTypeBlock'
 */
class ImageTypeCommand {
  constructor(editor: Editor, imageType: 'imageBlock' | 'imageInline');
  
  /**
   * Execute image type conversion
   */
  execute(): void;
  
  /** True if selected image is of this type */
  readonly value: boolean;
  readonly isEnabled: boolean;
}

// Convert selected image to block
editor.execute('imageTypeBlock');

// Convert selected image to inline
editor.execute('imageTypeInline');

// Check current image type
const blockCommand = editor.commands.get('imageTypeBlock');
const inlineCommand = editor.commands.get('imageTypeInline');

console.log('Is block image:', blockCommand.value);
console.log('Is inline image:', inlineCommand.value);

// Toggle between types
if (blockCommand.value) {
  editor.execute('imageTypeInline');
} else {
  editor.execute('imageTypeBlock');
}

/**
 * Command for resizing selected images with width specifications
 * Command name: 'resizeImage'
 */
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;
  readonly isEnabled: boolean;
}

// 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 });

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

// Listen for resize changes
command.on('change:value', (evt, name, value, oldValue) => {
  console.log('Image resized from:', oldValue, 'to:', value);
});

/**
 * Command for applying styles to selected images
 * Command name: 'imageStyle'
 */
class ImageStyleCommand {
  constructor(editor: Editor, styles: Array<any>);
  
  /**
   * Execute style application
   * @param options - Style options
   */
  execute(options: { value: string }): void;
  
  /** Currently applied style name or false if default */
  readonly value: string | false;
  readonly isEnabled: boolean;
}

// Apply specific style
editor.execute('imageStyle', { value: 'alignLeft' });

// Apply different style
editor.execute('imageStyle', { value: 'alignCenter' });

// Remove style (set to default)
editor.execute('imageStyle', { value: false });

// Get current style
const command = editor.commands.get('imageStyle');
console.log('Current style:', command.value);

// Check available styles
console.log('Available styles:', command.styles.map(s => s.name));

/**
 * Command for setting alt text on selected images
 * Command name: 'imageTextAlternative'
 */
class ImageTextAlternativeCommand {
  constructor(editor: Editor);
  
  /**
   * Execute alt text update
   * @param options - Alt text options
   */
  execute(options: { newValue: string }): void;
  
  /** Current alt text value or empty string */
  readonly value: string;
  readonly isEnabled: boolean;
}

// Set alt text
editor.execute('imageTextAlternative', { 
  newValue: 'A beautiful sunset over the mountains' 
});

// Clear alt text
editor.execute('imageTextAlternative', { newValue: '' });

// Get current alt text
const command = editor.commands.get('imageTextAlternative');
console.log('Current alt text:', command.value);

// Listen for alt text changes
command.on('change:value', (evt, name, value, oldValue) => {
  console.log('Alt text changed from:', oldValue, 'to:', value);
});

/**
 * Command for toggling caption visibility on selected images
 * Command name: 'toggleImageCaption'
 */
class ToggleImageCaptionCommand {
  constructor(editor: Editor);
  
  /**
   * Execute caption toggle
   */
  execute(): void;
  
  /** True if selected image has visible caption */
  readonly value: boolean;
  readonly isEnabled: boolean;
}

// Toggle caption on selected image
editor.execute('toggleImageCaption');

// Check if image has caption
const command = editor.commands.get('toggleImageCaption');
console.log('Has caption:', command.value);
console.log('Can toggle caption:', command.isEnabled);

// Show caption if not visible
if (!command.value && command.isEnabled) {
  editor.execute('toggleImageCaption');
}

// Listen for caption changes
command.on('change:value', (evt, name, value, oldValue) => {
  console.log('Caption', value ? 'shown' : 'hidden');
});

/**
 * Command for handling image file uploads
 * Command name: 'uploadImage' (alias: 'imageUpload')
 */
class UploadImageCommand {
  constructor(editor: Editor);
  
  /**
   * Execute file upload
   * @param options - Upload options
   */
  execute(options: {
    file: Array<File>;
    imageType?: 'imageBlock' | 'imageInline';
  }): void;
  
  readonly value: null;
  readonly isEnabled: boolean;
}

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

// Handle drag and drop
editor.editing.view.document.on('drop', (evt, data) => {
  const files = Array.from(data.dataTransfer.files).filter(
    file => file.type.startsWith('image/')
  );
  
  if (files.length > 0) {
    editor.execute('uploadImage', { file: files });
  }
});

// Check if upload is possible
const command = editor.commands.get('uploadImage');
console.log('Can upload images:', command.isEnabled);

// Insert image and then style it
editor.execute('insertImage', { 
  source: 'image.jpg',
  imageType: 'imageBlock'
});

// Wait for insertion to complete, then apply styles
editor.model.change(() => {
  editor.execute('imageStyle', { value: 'alignCenter' });
  editor.execute('resizeImage', { width: '75%' });
  editor.execute('imageTextAlternative', { 
    newValue: 'Centered image at 75% width' 
  });
});

// Monitor all image-related commands
const commands = [
  'insertImage', 'replaceImageSource', 'resizeImage',
  'imageStyle', 'imageTextAlternative', 'toggleImageCaption',
  'imageTypeBlock', 'imageTypeInline'
];

commands.forEach(commandName => {
  const command = editor.commands.get(commandName);
  
  command.on('change:isEnabled', (evt, name, value) => {
    console.log(`${commandName} enabled:`, value);
  });
  
  command.on('change:value', (evt, name, value) => {
    console.log(`${commandName} value:`, value);
  });
});

// Perform multiple operations atomically
editor.model.change(() => {
  // These all execute as a single undo step
  editor.execute('insertImage', { source: 'image.jpg' });
  editor.execute('imageStyle', { value: 'alignLeft' });
  editor.execute('resizeImage', { width: '50%' });
  editor.execute('imageTextAlternative', { newValue: 'Sample image' });
  editor.execute('toggleImageCaption');
});