Editor Core

/**
 * Creates a new Quill editor instance
 * @param container - DOM element or CSS selector for the editor container
 * @param options - Configuration options for the editor
 */
constructor(container: HTMLElement | string, options?: QuillOptions): Quill;

interface QuillOptions {
  /** Theme to use ('snow', 'bubble', or custom theme name) */
  theme?: string;
  /** Debug level for logging */
  debug?: DebugLevel | boolean;
  /** Custom registry for formats and modules */
  registry?: Parchment.Registry;
  /** Whether editing should be disabled */
  readOnly?: boolean;
  /** Placeholder text when editor is empty */
  placeholder?: string;
  /** Scrolling container for editor bounds */
  bounds?: HTMLElement | string | null;
  /** Module configuration */
  modules?: Record<string, unknown>;
  /** Allowed formats (null means all formats allowed) */
  formats?: string[] | null;
}

type DebugLevel = 'error' | 'warn' | 'log' | 'info';

import Quill from 'quill';

// Basic editor
const quill = new Quill('#editor');

// Editor with configuration
const quill = new Quill('#editor', {
  theme: 'snow',
  readOnly: false,
  placeholder: 'Start typing...',
  modules: {
    toolbar: [
      ['bold', 'italic'],
      ['link', 'image']
    ],
    history: {
      delay: 1000,
      maxStack: 100
    }
  },
  formats: ['bold', 'italic', 'link', 'image']
});

/**
 * Get editor contents as Delta
 * @param index - Starting index (default: 0)
 * @param length - Length to retrieve (default: all remaining)
 * @returns Delta representing the content
 */
getContents(index?: number, length?: number): Delta;

/**
 * Set editor contents, replacing all existing content
 * @param delta - Delta or array of operations to set
 * @param source - Source of the change
 * @returns Delta representing the change applied
 */
setContents(delta: Delta | Op[], source?: EmitterSource): Delta;

/**
 * Apply delta changes to current contents
 * @param delta - Delta operations to apply
 * @param source - Source of the change
 * @returns Delta representing the change applied
 */
updateContents(delta: Delta | Op[], source?: EmitterSource): Delta;

/**
 * Get plain text content
 * @param index - Starting index (default: 0)
 * @param length - Length to retrieve (default: all remaining)
 * @returns Plain text string
 */
getText(index?: number, length?: number): string;

/**
 * Set editor content to plain text, removing all formatting
 * @param text - Plain text to set
 * @param source - Source of the change
 * @returns Delta representing the change applied
 */
setText(text: string, source?: EmitterSource): Delta;

/**
 * Get semantic HTML representation of content
 * @param index - Starting index (default: 0)
 * @param length - Length to retrieve (default: all remaining)
 * @returns HTML string with semantic markup
 */
getSemanticHTML(index?: number, length?: number): string;

type EmitterSource = 'api' | 'user' | 'silent';

// Get current content
const content = quill.getContents();
console.log('Current content:', content);

// Set new content
const newContent = new Delta()
  .insert('Hello ')
  .insert('World', { bold: true })
  .insert('\n');
quill.setContents(newContent);

// Apply changes
const changes = new Delta()
  .retain(6) // Skip first 6 characters
  .insert('Beautiful ', { italic: true });
quill.updateContents(changes);

// Get plain text
const text = quill.getText();
console.log('Plain text:', text);

// Get HTML
const html = quill.getSemanticHTML();
console.log('HTML:', html);

/**
 * Get current selection range
 * @param focus - Whether to focus editor before getting selection
 * @returns Current selection range or null if no selection
 */
getSelection(focus?: boolean): Range | null;

/**
 * Set selection range
 * @param range - Range to select (null to remove selection)
 * @param source - Source of the change
 */
setSelection(range: Range | null, source?: EmitterSource): void;

/**
 * Set selection by index and length
 * @param index - Starting position
 * @param length - Length of selection (default: 0 for cursor)
 * @param source - Source of the change
 */
setSelection(index: number, length?: number, source?: EmitterSource): void;

/**
 * Get bounding box for a range or position
 * @param index - Position or range to get bounds for
 * @param length - Length if index is a number
 * @returns Bounds object with position and dimensions
 */
getBounds(index: number | Range, length?: number): Bounds | null;

interface Range {
  /** Starting position of selection */
  index: number;
  /** Length of selection (0 for cursor) */
  length: number;
}

interface Bounds {
  bottom: number;
  height: number;
  left: number;
  right: number;
  top: number;
  width: number;
}

// Get current selection
const selection = quill.getSelection();
if (selection) {
  console.log(`Selected text from ${selection.index} to ${selection.index + selection.length}`);
}

// Set cursor position
quill.setSelection(10);

// Select text range
quill.setSelection(5, 10); // Select 10 characters starting at position 5

// Get bounds for tooltip positioning
const bounds = quill.getBounds(selection);
if (bounds) {
  positionTooltip(bounds.left, bounds.top);
}

/**
 * Apply formatting to current selection
 * @param name - Format name
 * @param value - Format value
 * @param source - Source of the change
 * @returns Delta representing the change applied
 */
format(name: string, value: unknown, source?: EmitterSource): Delta;

/**
 * Format text in specified range
 * @param index - Starting position
 * @param length - Length to format
 * @param formats - Object with format names and values
 * @param source - Source of the change
 * @returns Delta representing the change applied
 */
formatText(index: number, length: number, formats: Record<string, unknown>, source?: EmitterSource): Delta;

/**
 * Format text in specified range with single format
 * @param index - Starting position
 * @param length - Length to format
 * @param name - Format name
 * @param value - Format value
 * @param source - Source of the change
 * @returns Delta representing the change applied
 */
formatText(index: number, length: number, name: string, value: unknown, source?: EmitterSource): Delta;

/**
 * Format lines in specified range
 * @param index - Starting position
 * @param length - Length to format
 * @param formats - Object with format names and values
 * @param source - Source of the change
 * @returns Delta representing the change applied
 */
formatLine(index: number, length: number, formats: Record<string, unknown>, source?: EmitterSource): Delta;

/**
 * Remove all formatting from specified range
 * @param index - Starting position
 * @param length - Length to clear formatting
 * @param source - Source of the change
 * @returns Delta representing the change applied
 */
removeFormat(index: number, length: number, source?: EmitterSource): Delta;

/**
 * Get formatting at specified range
 * @param index - Starting position (defaults to current selection)
 * @param length - Length to check (default: 0)
 * @returns Object with active formats and their values
 */
getFormat(index?: number, length?: number): { [format: string]: unknown };

// Format current selection
quill.format('bold', true);
quill.format('color', '#ff0000');

// Format specific range
quill.formatText(0, 5, { bold: true, italic: true });
quill.formatText(10, 3, 'underline', true);

// Format lines (for block formats)
quill.formatLine(0, 10, { header: 1 });
quill.formatLine(20, 15, { list: 'ordered' });

// Remove formatting
quill.removeFormat(0, 10);

// Check current formatting
const formats = quill.getFormat();
console.log('Active formats:', formats);

/**
 * Insert text at specified position
 * @param index - Position to insert at
 * @param text - Text to insert
 * @param source - Source of the change
 * @returns Delta representing the change applied
 */
insertText(index: number, text: string, source?: EmitterSource): Delta;

/**
 * Insert formatted text at specified position
 * @param index - Position to insert at
 * @param text - Text to insert
 * @param formats - Formatting to apply to inserted text
 * @param source - Source of the change
 * @returns Delta representing the change applied
 */
insertText(index: number, text: string, formats: Record<string, unknown>, source?: EmitterSource): Delta;

/**
 * Insert formatted text with single format
 * @param index - Position to insert at
 * @param text - Text to insert
 * @param name - Format name
 * @param value - Format value
 * @param source - Source of the change
 * @returns Delta representing the change applied
 */
insertText(index: number, text: string, name: string, value: unknown, source?: EmitterSource): Delta;

/**
 * Insert embed (image, video, etc.) at specified position
 * @param index - Position to insert at
 * @param embed - Embed type name
 * @param value - Embed value/configuration
 * @param source - Source of the change
 * @returns Delta representing the change applied
 */
insertEmbed(index: number, embed: string, value: unknown, source?: EmitterSource): Delta;

/**
 * Delete text in specified range
 * @param index - Starting position
 * @param length - Length to delete
 * @param source - Source of the change
 * @returns Delta representing the change applied
 */
deleteText(index: number, length: number, source?: EmitterSource): Delta;

// Insert plain text
quill.insertText(0, 'Hello World!');

// Insert formatted text
quill.insertText(0, 'Bold Text', { bold: true });
quill.insertText(10, 'Red Text', 'color', '#ff0000');

// Insert embed
quill.insertEmbed(5, 'image', 'https://example.com/image.jpg');
quill.insertEmbed(10, 'video', 'https://youtube.com/watch?v=abc123');

// Delete text
quill.deleteText(0, 5); // Delete first 5 characters

/**
 * Focus the editor
 * @param options - Focus options
 */
focus(options?: { preventScroll?: boolean }): void;

/**
 * Remove focus from editor
 */
blur(): void;

/**
 * Enable or disable editing
 * @param enabled - Whether editing should be enabled (default: true)
 */
enable(enabled?: boolean): void;

/**
 * Disable editing (shorthand for enable(false))
 */
disable(): void;

/**
 * Check if editing is enabled
 * @returns True if editing is enabled
 */
isEnabled(): boolean;

/**
 * Check if editor has focus
 * @returns True if editor is focused
 */
hasFocus(): boolean;

/**
 * Get total length of editor content
 * @returns Length including final newline
 */
getLength(): number;

/**
 * Get module instance
 * @param name - Module name
 * @returns Module instance or undefined
 */
getModule(name: string): Module | undefined;

/**
 * Scroll current selection into view
 */
scrollSelectionIntoView(): void;

/**
 * Update editor state
 * @param source - Source of the update
 * @returns Delta of any changes made during update
 */
update(source?: EmitterSource): Delta | undefined;

// Focus management
quill.focus();
quill.focus({ preventScroll: true });
quill.blur();

// Enable/disable editing
quill.disable(); // Make read-only
quill.enable();  // Re-enable editing

// State checking
if (quill.isEnabled()) {
  console.log('Editor is enabled');
}

if (quill.hasFocus()) {
  console.log('Editor has focus');
}

// Utility methods
const length = quill.getLength();
console.log(`Content length: ${length}`);

const toolbar = quill.getModule('toolbar');
if (toolbar) {
  toolbar.addHandler('custom', customHandler);
}

// Ensure selection is visible
quill.scrollSelectionIntoView();

/**
 * Add event listener
 * @param event - Event name
 * @param handler - Event handler function
 * @returns Emitter instance for chaining
 */
on(event: string, handler: (...args: any[]) => void): Emitter;

/**
 * Add text-change event listener
 * @param event - 'text-change' event name
 * @param handler - Handler receiving delta, old delta, and source
 * @returns Emitter instance
 */
on(event: 'text-change', handler: (delta: Delta, oldDelta: Delta, source: EmitterSource) => void): Emitter;

/**
 * Add selection-change event listener
 * @param event - 'selection-change' event name
 * @param handler - Handler receiving current and old ranges and source
 * @returns Emitter instance
 */
on(event: 'selection-change', handler: (range: Range, oldRange: Range, source: EmitterSource) => void): Emitter;

/**
 * Add editor-change event listener (fired for both text and selection changes)
 * @param event - 'editor-change' event name
 * @param handler - Handler receiving event type and event-specific arguments
 * @returns Emitter instance
 */
on(event: 'editor-change', handler: (eventType: string, ...args: any[]) => void): Emitter;

/**
 * Remove event listener
 * @param event - Event name
 * @param handler - Handler to remove (if omitted, removes all handlers)
 * @returns Emitter instance
 */
off(event: string, handler?: (...args: any[]) => void): Emitter;

/**
 * Add one-time event listener
 * @param event - Event name
 * @param handler - Event handler function
 * @returns Emitter instance
 */
once(event: string, handler: (...args: any[]) => void): Emitter;

// Listen for text changes
quill.on('text-change', (delta, oldDelta, source) => {
  if (source === 'user') {
    console.log('User changed text:', delta);
    saveContent(quill.getContents());
  }
});

// Listen for selection changes
quill.on('selection-change', (range, oldRange, source) => {
  if (range) {
    console.log(`Selection: ${range.index}-${range.index + range.length}`);
    updateToolbar(range);
  } else {
    console.log('Editor lost focus');
  }
});

// Listen for any editor changes
quill.on('editor-change', (eventType, ...args) => {
  if (eventType === 'text-change') {
    const [delta, oldDelta, source] = args;
    handleTextChange(delta, source);
  } else if (eventType === 'selection-change') {
    const [range, oldRange, source] = args;
    handleSelectionChange(range, source);
  }
});

// One-time listener
quill.once('text-change', () => {
  console.log('First change detected');
});

// Remove listeners
const handler = (delta) => console.log('Changed:', delta);
quill.on('text-change', handler);
quill.off('text-change', handler); // Remove specific handler
quill.off('text-change'); // Remove all text-change handlers