Configuration

interface CompletionConfig {
  /**
   * When enabled, autocompletion starts on typing (default: true)
   */
  activateOnTyping?: boolean;
  
  /**
   * Predicate to reactivate completion after picking an option
   */
  activateOnCompletion?: (completion: Completion) => boolean;
  
  /**
   * Delay in ms before querying sources on typing (default: 100)
   */
  activateOnTypingDelay?: number;
  
  /**
   * Whether first option is selected when completion opens (default: true)
   */
  selectOnOpen?: boolean;
  
  /**
   * Override completion sources (null uses language data)
   */
  override?: readonly CompletionSource[] | null;
  
  /**
   * Close completion when editor loses focus (default: true)
   */
  closeOnBlur?: boolean;
  
  /**
   * Maximum number of options to render (default: 100)
   */
  maxRenderedOptions?: number;
  
  /**
   * Enable default keymap bindings (default: true)
   */
  defaultKeymap?: boolean;
  
  /**
   * Show completions above cursor when possible (default: false)
   */
  aboveCursor?: boolean;
  
  /**
   * Function to add CSS class to completion dialog
   */
  tooltipClass?: (state: EditorState) => string;
  
  /**
   * Function to add CSS classes to completion options
   */
  optionClass?: (completion: Completion) => string;
  
  /**
   * Show type-based icons for completions (default: true)
   */
  icons?: boolean;
  
  /**
   * Additional content to inject into completion options
   */
  addToOptions?: {
    render: (completion: Completion, state: EditorState, view: EditorView) => Node | null;
    position: number;
  }[];
  
  /**
   * Custom positioning for info tooltips
   */
  positionInfo?: (view: EditorView, list: Rect, option: Rect, info: Rect, space: Rect) => {style?: string, class?: string};
  
  /**
   * Custom comparison function for sorting completions with same score
   */
  compareCompletions?: (a: Completion, b: Completion) => number;
  
  /**
   * Use strict prefix-only filtering instead of fuzzy matching (default: false)
   */
  filterStrict?: boolean;
  
  /**
   * Delay before completion commands take effect after opening (default: 75ms)
   */
  interactionDelay?: number;
  
  /**
   * Time to wait for slow async sources before showing faster results (default: 100ms)
   */
  updateSyncTime?: number;
}

import { autocompletion, CompletionConfig } from "@codemirror/autocomplete";

// Basic configuration
const basicConfig: CompletionConfig = {
  activateOnTyping: true,
  activateOnTypingDelay: 200,
  maxRenderedOptions: 50,
  closeOnBlur: false
};

// Advanced configuration with custom styling
const advancedConfig: CompletionConfig = {
  tooltipClass: (state) => "my-completion-tooltip",
  optionClass: (completion) => 
    completion.type === "keyword" ? "keyword-completion" : "",
  positionInfo: (view, list, option, info, space) => ({
    style: "max-width: 300px",
    class: "custom-info"
  }),
  compareCompletions: (a, b) => {
    // Prioritize functions over variables
    if (a.type === "function" && b.type !== "function") return -1;
    if (b.type === "function" && a.type !== "function") return 1;
    return a.label.localeCompare(b.label);
  }
};

// Apply configuration
const view = new EditorView({
  extensions: [
    autocompletion(advancedConfig)
  ]
});

const completionConfig: Facet<CompletionConfig, Required<CompletionConfig>>;

import { completionConfig } from "@codemirror/autocomplete";

// Access configuration in an extension
const myExtension = EditorView.updateListener.of((update) => {
  const config = update.state.facet(completionConfig);
  if (config.activateOnTyping) {
    // Handle typing-based activation
  }
});

import { autocompletion, completeFromList, completeAnyWord } from "@codemirror/autocomplete";

// Replace all sources with custom ones
const customSources = [
  completeFromList(["custom", "keywords", "only"]),
  completeAnyWord
];

const view = new EditorView({
  extensions: [
    autocompletion({
      override: customSources,
      activateOnTypingDelay: 50
    })
  ]
});

// Custom option rendering
const customOptionConfig: CompletionConfig = {
  addToOptions: [
    {
      render: (completion, state, view) => {
        const span = document.createElement("span");
        span.className = "completion-shortcut";
        span.textContent = "⌘K";
        return span;
      },
      position: 90 // After detail (80) but before end
    }
  ]
};

// Dynamic tooltip classes
const dynamicTooltipConfig: CompletionConfig = {
  tooltipClass: (state) => {
    const theme = state.facet(EditorView.darkTheme) ? "dark" : "light";
    return `completion-${theme}`;
  }
};

// Custom completion icons
const iconConfig: CompletionConfig = {
  icons: true, // Enable built-in icons
  optionClass: (completion) => {
    if (completion.type === "deprecated") return "deprecated-completion";
    if (completion.boost && completion.boost > 50) return "priority-completion";
    return "";
  }
};

// Strict prefix matching
const strictConfig: CompletionConfig = {
  filterStrict: true, // Only show completions that start with typed text
  compareCompletions: (a, b) => {
    // Custom sorting: prefer exact matches
    const aExact = a.label.toLowerCase() === getCurrentInput().toLowerCase();
    const bExact = b.label.toLowerCase() === getCurrentInput().toLowerCase();
    if (aExact && !bExact) return -1;
    if (bExact && !aExact) return 1;
    return a.label.localeCompare(b.label);
  }
};

// Performance-focused configuration
const performanceConfig: CompletionConfig = {
  maxRenderedOptions: 25, // Limit rendering for performance
  updateSyncTime: 50, // Show fast results quickly
  activateOnTypingDelay: 300 // Reduce query frequency
};

// Custom activation logic
const smartActivationConfig: CompletionConfig = {
  activateOnCompletion: (completion) => {
    // Reactivate after inserting functions or methods
    return completion.type === "function" || completion.type === "method";
  },
  activateOnTyping: true,
  activateOnTypingDelay: 150
};

// Manual-only completion
const manualConfig: CompletionConfig = {
  activateOnTyping: false, // Only activate explicitly
  selectOnOpen: false, // Don't auto-select first option
  defaultKeymap: true // Keep Ctrl+Space binding
};