Plugins

/**
 * Collection of loaded plugins
 */
readonly plugins: PluginCollection<Editor>;

interface PluginCollection<TEditor extends Editor> {
  /**
   * Get plugin instance by class or name
   */
  get<TPlugin extends PluginInterface>(
    PluginClassOrName: PluginClassConstructor<TPlugin> | string
  ): TPlugin;
  
  /**
   * Check if plugin is loaded
   */
  has(PluginClassOrName: PluginClassConstructor | string): boolean;
  
  /**
   * Iterate over loaded plugins
   */
  [Symbol.iterator](): Iterator<[PluginClassConstructor, Plugin]>;
  
  /**
   * Destroy all plugins
   */
  destroy(): Promise<void>;
}

interface Plugin {
  readonly editor: Editor;
  readonly isEnabled: boolean;
  
  init?(): void | Promise<void>;
  afterInit?(): void | Promise<void>;
  destroy?(): void | Promise<void>;
}

// Get specific plugins
const boldPlugin = editor.plugins.get('Bold');
const imagePlugin = editor.plugins.get('Image');
const tablePlugin = editor.plugins.get('Table');

// Check if plugin is loaded
if (editor.plugins.has('MediaEmbed')) {
  console.log('Media embed plugin is available');
}

// Access plugin functionality
const listPlugin = editor.plugins.get('List');
console.log('List plugin enabled:', listPlugin.isEnabled);

// Iterate through all plugins
for (const [PluginConstructor, pluginInstance] of editor.plugins) {
  console.log('Plugin:', PluginConstructor.pluginName);
}

/**
 * Text formatting plugins
 */
interface TextFormattingPlugins {
  'Bold': BoldPlugin;
  'Italic': ItalicPlugin;
  'Strikethrough': StrikethroughPlugin;
  'Superscript': SuperscriptPlugin;
  'Subscript': SubscriptPlugin;
  'Code': CodePlugin;
}

/**
 * Block element plugins
 */
interface BlockElementPlugins {
  'Paragraph': ParagraphPlugin;
  'Heading': HeadingPlugin;
  'BlockQuote': BlockQuotePlugin;
  'List': ListPlugin;
  'TodoList': TodoListPlugin;
  'Indent': IndentPlugin;
}

/**
 * Media plugins
 */
interface MediaPlugins {
  'Image': ImagePlugin;
  'ImageCaption': ImageCaptionPlugin;
  'ImageStyle': ImageStylePlugin;
  'ImageToolbar': ImageToolbarPlugin;
  'ImageUpload': ImageUploadPlugin;
  'ImageResize': ImageResizePlugin;
  'PictureEditing': PictureEditingPlugin;
  'MediaEmbed': MediaEmbedPlugin;
  'EasyImage': EasyImagePlugin;
}

/**
 * Table plugins
 */
interface TablePlugins {
  'Table': TablePlugin;
  'TableToolbar': TableToolbarPlugin;
  'TableSelection': TableSelectionPlugin;
  'TableClipboard': TableClipboardPlugin;
}

/**
 * Utility plugins  
 */
interface UtilityPlugins {
  'Link': LinkPlugin;
  'Autoformat': AutoformatPlugin;
  'TextTransformation': TextTransformationPlugin;
  'PasteFromOffice': PasteFromOfficePlugin;
  'CloudServices': CloudServicesPlugin;
  'CKFinder': CKFinderPlugin;
  'CKBox': CKBoxPlugin;
  'CKFinderUploadAdapter': CKFinderUploadAdapterPlugin;
  'Essentials': EssentialsPlugin;
}

// Access text formatting plugins
const boldPlugin = editor.plugins.get('Bold');
const italicPlugin = editor.plugins.get('Italic');

// Configure bold plugin behavior
boldPlugin.on('change:isEnabled', (evt, propertyName, newValue) => {
  console.log('Bold plugin enabled:', newValue);
});

// Access image plugin for custom operations
const imagePlugin = editor.plugins.get('Image');
imagePlugin.on('uploadComplete', (evt, data) => {
  console.log('Image uploaded:', data.file.name);
});

// Work with table plugin
const tablePlugin = editor.plugins.get('Table');
const tableUtils = tablePlugin.tableUtils;

// Get selected table cells
const selectedCells = tableUtils.getSelectedTableCells(editor.model.document.selection);
console.log('Selected cells:', selectedCells.length);

/**
 * Essentials plugin providing core editor features
 */
interface EssentialsPlugin extends Plugin {
  /**
   * Core plugins included in Essentials
   */
  static readonly requires: [
    'Clipboard',
    'Enter', 
    'SelectAll',
    'ShiftEnter',
    'Typing',
    'Undo',
    'AccessibilityHelp'
  ];
}

/**
 * Clipboard plugin for copy/paste operations
 */
interface ClipboardPlugin extends Plugin {
  /**
   * Handle clipboard events
   */
  on(eventName: 'inputTransformation', callback: Function): void;
  on(eventName: 'outputTransformation', callback: Function): void;
}

/**
 * Undo plugin for history management
 */
interface UndoPlugin extends Plugin {
  /**
   * Clear undo stack
   */
  clearStack(): void;
  
  /**
   * Get available undo steps
   */
  readonly undoStack: Array<any>;
  
  /**
   * Get available redo steps  
   */
  readonly redoStack: Array<any>;
}

// Access clipboard plugin
const clipboardPlugin = editor.plugins.get('Clipboard');

// Listen for paste events
clipboardPlugin.on('inputTransformation', (evt, data) => {
  console.log('Content pasted:', data.content);
});

// Access undo plugin
const undoPlugin = editor.plugins.get('Undo');

// Check undo history
console.log('Undo steps available:', undoPlugin.undoStack.length);
console.log('Redo steps available:', undoPlugin.redoStack.length);

// Clear undo history
undoPlugin.clearStack();

/**
 * Image plugin for basic image functionality
 */
interface ImagePlugin extends Plugin {
  /**
   * Insert image at current selection
   */
  insertImage(attributes: { src: string; alt?: string }): void;
}

/**
 * Image upload plugin for file uploads
 */
interface ImageUploadPlugin extends Plugin {
  /**
   * Upload adapter instance
   */
  readonly adapter: UploadAdapter;
  
  /**
   * Upload image file
   */
  upload(file: File): Promise<{ default: string }>;
}

/**
 * Image style plugin for image layouts
 */
interface ImageStylePlugin extends Plugin {
  /**
   * Available image styles
   */
  readonly styles: Map<string, ImageStyle>;
}

/**
 * Image resize plugin for resizing images
 */  
interface ImageResizePlugin extends Plugin {
  /**
   * Available resize options
   */
  readonly resizeOptions: Array<ResizeOption>;
}

// Insert image programmatically
const imagePlugin = editor.plugins.get('Image');
imagePlugin.insertImage({
  src: 'https://example.com/image.jpg',
  alt: 'Description of image'
});

// Handle image uploads
const imageUploadPlugin = editor.plugins.get('ImageUpload');
const fileInput = document.querySelector('input[type="file"]');

fileInput.addEventListener('change', async (event) => {
  const file = event.target.files[0];
  if (file && file.type.startsWith('image/')) {
    try {
      const uploadResult = await imageUploadPlugin.upload(file);
      console.log('Image uploaded to:', uploadResult.default);
    } catch (error) {
      console.error('Upload failed:', error);
    }
  }
});

// Work with image styles
const imageStylePlugin = editor.plugins.get('ImageStyle');
const availableStyles = imageStylePlugin.styles;

for (const [styleName, styleConfig] of availableStyles) {
  console.log(`Style: ${styleName}`, styleConfig);
}

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

/**
 * Table plugin for table operations
 */
interface TablePlugin extends Plugin {
  /**
   * Table utility functions
   */
  readonly tableUtils: TableUtils;
}

/**
 * Table utilities for advanced table operations
 */
interface TableUtils {
  /**
   * Get selected table cells
   */
  getSelectedTableCells(selection: Selection): Array<Element>;
  
  /**
   * Get table from element
   */
  getTable(element: Element): Element | null;
  
  /**
   * Create table structure
   */
  createTable(rows: number, columns: number): Element;
  
  /**
   * Insert table at position
   */
  insertTable(position: Position, rows: number, columns: number): void;
  
  /**
   * Get table dimensions
   */
  getTableDimensions(table: Element): { rows: number; columns: number };
}

/**
 * Table selection plugin for cell selection
 */
interface TableSelectionPlugin extends Plugin {
  /**
   * Get selected cells
   */
  getSelectedCells(): Array<Element>;
  
  /**
   * Select table cells
   */
  selectCells(startCell: Element, endCell: Element): void;
}

// Access table utilities
const tablePlugin = editor.plugins.get('Table');
const tableUtils = tablePlugin.tableUtils;

// Create and insert table
tableUtils.insertTable(
  editor.model.document.selection.getFirstPosition(),
  3, // rows
  4  // columns
);

// Get table information
const selection = editor.model.document.selection;
const selectedCells = tableUtils.getSelectedTableCells(selection);

if (selectedCells.length > 0) {
  const table = tableUtils.getTable(selectedCells[0]);
  const dimensions = tableUtils.getTableDimensions(table);
  console.log(`Table size: ${dimensions.rows}x${dimensions.columns}`);
}

// Work with table selection
const tableSelectionPlugin = editor.plugins.get('TableSelection');
const selectedCells = tableSelectionPlugin.getSelectedCells();

console.log('Currently selected cells:', selectedCells.length);

/**
 * Link plugin for hyperlink functionality
 */
interface LinkPlugin extends Plugin {
  /**
   * Link decorators for additional link attributes
   */
  readonly decorators: Map<string, LinkDecorator>;
  
  /**
   * Manual link decorators
   */
  readonly manualDecorators: Array<ManualLinkDecorator>;
  
  /**
   * Automatic link decorators
   */
  readonly automaticDecorators: Array<AutomaticLinkDecorator>;
}

/**
 * Link decorator definition
 */
interface LinkDecorator {
  /**
   * Decorator ID
   */
  readonly id: string;
  
  /**
   * Decorator label
   */
  readonly label: string;
  
  /**
   * Attributes to add to links
   */
  readonly attributes: Record<string, string>;
}

// Access link plugin
const linkPlugin = editor.plugins.get('Link');

// Get link decorators
const decorators = linkPlugin.decorators;
for (const [decoratorId, decorator] of decorators) {
  console.log(`Decorator: ${decoratorId}`, decorator.attributes);
}

// Create link with decorators
editor.execute('link', 'https://example.com', {
  linkIsExternal: true,
  linkIsDownloadable: false
});

// Access manual decorators
const manualDecorators = linkPlugin.manualDecorators;
manualDecorators.forEach(decorator => {
  console.log(`Manual decorator: ${decorator.id} - ${decorator.label}`);
});

/**
 * List plugin for bulleted and numbered lists
 */
interface ListPlugin extends Plugin {
  /**
   * Available list types
   */
  readonly listTypes: Array<'bulleted' | 'numbered' | 'todo'>;
  
  /**
   * Convert selection to list
   */
  createList(type: 'bulleted' | 'numbered'): void;
  
  /**
   * Remove list formatting
   */
  removeList(): void;
}

/**
 * Todo list plugin for checkable lists
 */
interface TodoListPlugin extends Plugin {
  /**
   * Toggle todo item state
   */
  toggleCheckbox(element: Element): void;
  
  /**
   * Check if element is todo item
   */
  isTodoListItem(element: Element): boolean;
}

// Work with lists
const listPlugin = editor.plugins.get('List');

// Create different list types
listPlugin.createList('bulleted');
listPlugin.createList('numbered');

// Access todo list functionality
const todoListPlugin = editor.plugins.get('TodoList');

// Check if current selection is a todo item
const selection = editor.model.document.selection;
const selectedElement = selection.getSelectedElement();

if (selectedElement && todoListPlugin.isTodoListItem(selectedElement)) {
  // Toggle the checkbox
  todoListPlugin.toggleCheckbox(selectedElement);
}

/**
 * Plugin-related events
 */
interface PluginEvents {
  'ready': (evt: EventInfo) => void;
  'destroy': (evt: EventInfo) => void;
  'change:isEnabled': (evt: EventInfo, propertyName: string, newValue: boolean, oldValue: boolean) => void;
}

// Listen for plugin readiness
const imagePlugin = editor.plugins.get('Image');
imagePlugin.on('ready', () => {
  console.log('Image plugin is ready');
});

// Monitor plugin state changes
imagePlugin.on('change:isEnabled', (evt, propertyName, newValue, oldValue) => {
  console.log(`Image plugin enabled: ${oldValue} -> ${newValue}`);
});

// Listen for plugin destruction
imagePlugin.on('destroy', () => {
  console.log('Image plugin destroyed');
});