markdown-converter/src/command-palette.js

class CommandPalette {
  constructor() {
    this.overlay = document.getElementById('command-palette-overlay');
    this.input = document.getElementById('command-palette-input');
    this.results = document.getElementById('command-palette-results');
    this.commands = [];
    this.selectedIndex = 0;
    this.filteredCommands = [];
    this.setupEventListeners();
  }

  register(label, shortcut, action) {
    this.commands.push({ label, shortcut, action });
  }

  open() {
    this.overlay.classList.remove('hidden');
    this.input.value = '';
    this.input.focus();
    this.selectedIndex = 0;
    this.renderResults('');
  }

  close() {
    this.overlay.classList.add('hidden');
  }

  isOpen() {
    return !this.overlay.classList.contains('hidden');
  }

  setupEventListeners() {
    this.input.addEventListener('input', () => {
      this.selectedIndex = 0;
      this.renderResults(this.input.value);
    });

    this.overlay.addEventListener('click', (e) => {
      if (e.target === this.overlay) this.close();
    });

    this.input.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') {
        e.preventDefault();
        this.close();
      } else if (e.key === 'Enter') {
        e.preventDefault();
        this.executeSelected();
      } else if (e.key === 'ArrowDown') {
        e.preventDefault();
        this.selectedIndex = Math.min(this.selectedIndex + 1, this.filteredCommands.length - 1);
        this.updateSelection();
      } else if (e.key === 'ArrowUp') {
        e.preventDefault();
        this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
        this.updateSelection();
      }
    });
  }

  renderResults(query) {
    this.filteredCommands = query
      ? this.commands.filter((cmd) => cmd.label.toLowerCase().includes(query.toLowerCase()))
      : [...this.commands];

    this.results.innerHTML = this.filteredCommands
      .map(
        (cmd, i) => `
            <div class="command-item ${i === this.selectedIndex ? 'selected' : ''}" data-index="${i}">
                <span class="command-label">${this.highlightMatch(cmd.label, query)}</span>
                ${cmd.shortcut ? `<span class="command-shortcut">${cmd.shortcut}</span>` : ''}
            </div>
        `
      )
      .join('');

    this.results.querySelectorAll('.command-item').forEach((el) => {
      el.addEventListener('click', () => {
        const idx = parseInt(el.dataset.index);
        this.filteredCommands[idx].action();
        this.close();
      });
      el.addEventListener('mouseenter', () => {
        this.selectedIndex = parseInt(el.dataset.index);
        this.updateSelection();
      });
    });
  }

  highlightMatch(text, query) {
    if (!query) return text;
    const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
    return text.replace(regex, '<strong>$1</strong>');
  }

  updateSelection() {
    this.results.querySelectorAll('.command-item').forEach((el, i) => {
      el.classList.toggle('selected', i === this.selectedIndex);
    });
    // Scroll selected into view
    const selected = this.results.querySelector('.command-item.selected');
    if (selected) selected.scrollIntoView({ block: 'nearest' });
  }

  executeSelected() {
    if (this.filteredCommands[this.selectedIndex]) {
      this.filteredCommands[this.selectedIndex].action();
      this.close();
    }
  }
}

module.exports = { CommandPalette };