Image Styling

/**
 * Main styling plugin that combines editing and UI functionality
 */
class ImageStyle {
  static pluginName: 'ImageStyle';
  static requires: [ImageStyleEditing, ImageStyleUI];
  static isOfficialPlugin: true;
}

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

ClassicEditor
  .create(document.querySelector('#editor'), {
    plugins: [ImageStyle],
    image: {
      styles: {
        options: [
          'inline', 'alignLeft', 'alignRight', 
          'alignCenter', 'alignBlockLeft', 'alignBlockRight',
          'block', 'sideImage'
        ]
      },
      toolbar: [
        'imageStyle:inline', 'imageStyle:wrapText', 'imageStyle:breakText',
        '|',
        'imageStyle:alignLeft', 'imageStyle:alignRight', 'imageStyle:alignCenter'
      ]
    }
  });

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

/**
 * User interface for image styling with buttons and dropdown support
 */
class ImageStyleUI {
  static pluginName: 'ImageStyleUI';
  static requires: [ImageStyleEditing];
  static isOfficialPlugin: true;
}

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

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

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

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

interface ImageStyleConfig {
  /** Available style options */
  options?: Array<string | ImageStyleOptionDefinition>;
}

interface ImageStyleOptionDefinition {
  /** Unique name for the style */
  name: string;
  /** Whether this is the default style */
  isDefault?: boolean;
  /** Icon name for UI button */
  icon: string;
  /** Display title for the style */
  title: string;
  /** CSS class name to apply */
  className?: string;
  /** Supported model elements */
  modelElements: Array<string>; // ['imageBlock'], ['imageInline'], or both
}

interface ImageStyleDropdownDefinition {
  /** Dropdown name */
  name: string;
  /** Dropdown title */
  title: string;
  /** Items in the dropdown */
  items: Array<string>;
  /** Default selected item */
  defaultItem?: string;
}

// Pre-defined style names that can be used in configuration
const builtInStyles = [
  'inline',           // Inline image
  'alignLeft',        // Align left with text wrapping
  'alignRight',       // Align right with text wrapping  
  'alignCenter',      // Center aligned
  'alignBlockLeft',   // Block left alignment
  'alignBlockRight',  // Block right alignment
  'block',            // Block image (default)
  'sideImage'         // Side image with text wrapping
];

// Using built-in styles
ClassicEditor
  .create(document.querySelector('#editor'), {
    image: {
      styles: {
        options: ['inline', 'alignLeft', 'alignRight', 'alignCenter']
      }
    }
  });

// Custom style definitions
ClassicEditor
  .create(document.querySelector('#editor'), {
    image: {
      styles: {
        options: [
          'inline',
          'alignLeft',
          {
            name: 'rounded',
            icon: 'image-rounded',
            title: 'Rounded image',
            className: 'image-rounded',
            modelElements: ['imageBlock', 'imageInline']
          },
          {
            name: 'shadow',
            icon: 'image-shadow',
            title: 'Image with shadow',
            className: 'image-shadow',
            modelElements: ['imageBlock']
          }
        ]
      }
    }
  });

// Using dropdown for style selection
ClassicEditor
  .create(document.querySelector('#editor'), {
    image: {
      toolbar: [
        {
          name: 'imageStyle:alignments',
          title: 'Image alignments',
          items: ['imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight'],
          defaultItem: 'imageStyle:alignCenter'
        }
      ]
    }
  });

/** Default image style options with their configurations */
const _IMAGE_DEFAULT_OPTIONS = {
  inline: {
    name: 'inline',
    title: 'In line',
    icon: 'image-inline',
    modelElements: ['imageInline'],
    isDefault: true
  },
  alignLeft: {
    name: 'alignLeft',
    title: 'Left aligned image',
    icon: 'image-left',
    className: 'image-align-left',
    modelElements: ['imageBlock']
  },
  alignRight: {
    name: 'alignRight', 
    title: 'Right aligned image',
    icon: 'image-right',
    className: 'image-align-right',
    modelElements: ['imageBlock']
  },
  alignCenter: {
    name: 'alignCenter',
    title: 'Centered image',
    icon: 'image-center',
    className: 'image-align-center',
    modelElements: ['imageBlock']
  },
  alignBlockLeft: {
    name: 'alignBlockLeft',
    title: 'Left aligned image',
    icon: 'image-left',
    className: 'image-align-block-left',
    modelElements: ['imageBlock']
  },
  alignBlockRight: {
    name: 'alignBlockRight',
    title: 'Right aligned image', 
    icon: 'image-right',
    className: 'image-align-block-right',
    modelElements: ['imageBlock']
  },
  block: {
    name: 'block',
    title: 'Centered image',
    icon: 'image-center', 
    modelElements: ['imageBlock'],
    isDefault: true
  },
  sideImage: {
    name: 'sideImage',
    title: 'Side image',
    icon: 'image-side',
    className: 'image-side',
    modelElements: ['imageBlock']
  }
};

/**
 * Convert model style attribute to view representation
 * @param modelAttributeValue - Model attribute value
 * @param styles - Available style definitions
 * @returns View attribute value
 */
function _modelToViewImageStyleAttribute(
  modelAttributeValue: string,
  styles: Array<any>
): { class?: string } | null;

/**
 * Convert view style attribute to model representation
 * @param viewElement - View element
 * @param styles - Available style definitions
 * @returns Model attribute value
 */
function _viewToModelImageStyleAttribute(
  viewElement: any,
  styles: Array<any>
): string | null;

/**
 * Utility class for image style operations
 */
class _ImageStyleUtils {
  /**
   * Get style definition by name
   * @param styles - Available styles
   * @param name - Style name to find
   * @returns Style definition or undefined
   */
  static getStyleByName(styles: Array<any>, name: string): any | undefined;

  /**
   * Get default style for model element
   * @param styles - Available styles
   * @param modelElement - Model element name
   * @returns Default style or null
   */
  static getDefaultStyleByModelElement(styles: Array<any>, modelElement: string): any | null;

  /**
   * Check if style applies to model element
   * @param style - Style definition
   * @param modelElement - Model element name
   * @returns True if style applies
   */
  static styleAppliesToModelElement(style: any, modelElement: string): boolean;
}