Event Handling and Hotkeys

/**
 * Hotkeys interface for key combination handling
 */
interface Hotkeys {
  /** Create a hotkey checker function */
  createHotkey(hotkey: string): (event: KeyboardEvent) => boolean;
  /** Check if event matches hotkey */
  isHotkey(hotkey: string, event: KeyboardEvent): boolean;
  /** Parse hotkey string into components */
  parseHotkey(hotkey: string): { key: string; modifiers: string[] };
}

/**
 * Global Hotkeys utility
 */
const Hotkeys: Hotkeys;

import { Hotkeys } from "@platejs/core";

// Create hotkey checker
const isBold = Hotkeys.createHotkey('mod+b');
const isUndo = Hotkeys.createHotkey('mod+z');

// Handle keyboard events
const handleKeyDown = (event: KeyboardEvent) => {
  if (isBold(event)) {
    // Apply bold formatting
    editor.addMark('bold', true);
    return;
  }
  
  if (isUndo(event)) {
    // Undo last operation
    editor.undo();
    return;
  }
};

// Direct hotkey checking
document.addEventListener('keydown', (event) => {
  if (Hotkeys.isHotkey('ctrl+s', event)) {
    // Save document
    event.preventDefault();
  }
});

/**
 * Keyboard event handler interface
 */
interface KeyboardHandler {
  /** Handle keydown events */
  onKeyDown?: (event: KeyboardEvent, editor: SlateEditor) => boolean | void;
  /** Handle keyup events */
  onKeyUp?: (event: KeyboardEvent, editor: SlateEditor) => boolean | void;
  /** Handle key press events */
  onKeyPress?: (event: KeyboardEvent, editor: SlateEditor) => boolean | void;
}

/**
 * Register global keyboard handler
 * @param handler - Keyboard event handler
 */
function registerKeyboardHandler(handler: KeyboardHandler): void;

import { registerKeyboardHandler } from "@platejs/core";

// Register custom keyboard handler
registerKeyboardHandler({
  onKeyDown: (event, editor) => {
    // Custom Tab handling
    if (event.key === 'Tab') {
      if (event.shiftKey) {
        // Shift+Tab - decrease indent
        editor.transforms.decreaseIndent();
      } else {
        // Tab - increase indent
        editor.transforms.increaseIndent();
      }
      event.preventDefault();
      return true; // Prevent default handling
    }
  }
});

/**
 * Plugin event handlers
 */
interface PluginEventHandlers {
  /** DOM event handlers */
  handlers?: {
    onKeyDown?: KeyboardHandler['onKeyDown'];
    onKeyUp?: KeyboardHandler['onKeyUp'];
    onClick?: (event: MouseEvent, editor: SlateEditor) => boolean | void;
    onFocus?: (event: FocusEvent, editor: SlateEditor) => boolean | void;
    onBlur?: (event: FocusEvent, editor: SlateEditor) => boolean | void;
  };
  /** Editor event handlers */
  onChange?: (editor: SlateEditor) => void;
  onSelectionChange?: (editor: SlateEditor) => void;
  onValueChange?: (editor: SlateEditor) => void;
}

import { createSlatePlugin } from "@platejs/core";

const MyPlugin = createSlatePlugin({
  key: 'myPlugin',
  handlers: {
    onKeyDown: (event, editor) => {
      if (event.key === 'Enter' && event.ctrlKey) {
        // Ctrl+Enter - insert specific block
        editor.insertNode({
          type: 'action-item',
          children: [{ text: '' }]
        });
        return true;
      }
    },
    onClick: (event, editor) => {
      // Handle custom click behavior
      console.log('Click handled by plugin');
    }
  },
  onChange: (editor) => {
    // React to editor changes
    console.log('Editor content changed');
  }
});

/**
 * Event pipeline configuration
 */
interface EventPipeline {
  /** Pipeline priority */
  priority?: number;
  /** Pipeline condition */
  condition?: (event: Event, editor: SlateEditor) => boolean;
  /** Pipeline handler */
  handler: (event: Event, editor: SlateEditor) => boolean | void;
}

/**
 * Register event pipeline
 * @param pipeline - Pipeline configuration
 */
function registerEventPipeline(pipeline: EventPipeline): void;

/**
 * Composition event handlers
 */
interface CompositionHandlers {
  /** Composition start */
  onCompositionStart?: (event: CompositionEvent, editor: SlateEditor) => void;
  /** Composition update */
  onCompositionUpdate?: (event: CompositionEvent, editor: SlateEditor) => void;
  /** Composition end */
  onCompositionEnd?: (event: CompositionEvent, editor: SlateEditor) => void;
}

/**
 * Custom editor event
 */
interface EditorEvent<T = any> {
  /** Event type */
  type: string;
  /** Event data */
  data: T;
  /** Event timestamp */
  timestamp: number;
  /** Event source */
  source: 'user' | 'api' | 'plugin';
}

/**
 * Dispatch custom editor event
 * @param editor - Editor instance
 * @param event - Event to dispatch
 */
function dispatchEditorEvent<T>(
  editor: SlateEditor, 
  event: EditorEvent<T>
): void;

/**
 * Listen for custom editor events
 * @param editor - Editor instance
 * @param eventType - Event type to listen for
 * @param handler - Event handler function
 */
function addEventListener<T>(
  editor: SlateEditor,
  eventType: string,
  handler: (event: EditorEvent<T>) => void
): void;

// Platform-specific modifiers
const HOTKEYS = {
  // Cross-platform (mod = Cmd on Mac, Ctrl elsewhere)
  BOLD: 'mod+b',
  ITALIC: 'mod+i',
  UNDERLINE: 'mod+u',
  UNDO: 'mod+z',
  REDO: 'mod+shift+z',
  SAVE: 'mod+s',
  
  // Specific platforms
  MAC_REDO: 'cmd+y',
  WIN_REDO: 'ctrl+y',
  
  // Function keys
  HELP: 'f1',
  RENAME: 'f2',
  
  // Special combinations
  SELECT_ALL: 'mod+a',
  FIND: 'mod+f',
  REPLACE: 'mod+h'
} as const;

import { Hotkeys } from "@platejs/core";

// Plugin with comprehensive hotkey support
const FormattingPlugin = createSlatePlugin({
  key: 'formatting',
  handlers: {
    onKeyDown: (event, editor) => {
      if (Hotkeys.isHotkey('mod+b', event)) {
        editor.toggleMark('bold');
        return true;
      }
      
      if (Hotkeys.isHotkey('mod+i', event)) {
        editor.toggleMark('italic');
        return true;
      }
      
      if (Hotkeys.isHotkey('mod+shift+x', event)) {
        editor.transforms.clearFormatting();
        return true;
      }
    }
  }
});