geoproject-app/src/composables/useKeyboardShortcuts.js

import { onMounted, onUnmounted } from 'vue';

/**
 * Composable for managing global keyboard shortcuts
 * Handles Cmd/Ctrl+S (save), Cmd/Ctrl+P (print), Escape (close popups), \ (toggle panel)
 */
export function useKeyboardShortcuts({
  stylesheetStore,
  elementPopup,
  pagePopup,
  activeTab,
  printPreview
}) {
  // Detect platform for keyboard shortcut display
  const isMac = typeof navigator !== 'undefined' && navigator.platform.toUpperCase().indexOf('MAC') >= 0;

  // Handle keyboard shortcuts
  const handleKeyboardShortcut = (event) => {
    // Escape key - close any open popup
    if (event.key === 'Escape') {
      if (elementPopup.value?.visible) {
        elementPopup.value.close();
        return;
      }
      if (pagePopup.value?.visible) {
        pagePopup.value.close();
        return;
      }
    }

    // Backslash key - toggle editor panel
    if (event.key === '\\') {
      event.preventDefault();
      // Toggle: if panel is closed, open to 'document' tab; if open, close it
      activeTab.value = activeTab.value.length > 0 ? '' : 'document';
      return;
    }

    // Cmd+P (Mac) or Ctrl+P (Windows/Linux) - print
    if ((event.metaKey || event.ctrlKey) && event.key === 'p') {
      event.preventDefault();
      printPreview();
      return;
    }

    // Cmd+S (Mac) or Ctrl+S (Windows/Linux) - save
    if ((event.metaKey || event.ctrlKey) && event.key === 's') {
      event.preventDefault();

      // Only save if there are changes and not currently saving
      if (stylesheetStore.isDirty && !stylesheetStore.isSaving) {
        stylesheetStore.saveCustomCss();
      }
    }
  };

  // Attach keyboard listener to iframe document
  const attachToIframe = (iframe) => {
    if (iframe && iframe.contentDocument) {
      iframe.contentDocument.addEventListener('keydown', handleKeyboardShortcut);
    }
  };

  // Setup keyboard listeners on mount
  onMounted(() => {
    // Add keyboard shortcut listener to document (for when focus is outside iframe)
    document.addEventListener('keydown', handleKeyboardShortcut);
  });

  // Cleanup on unmount
  onUnmounted(() => {
    // Clean up keyboard shortcut listener
    document.removeEventListener('keydown', handleKeyboardShortcut);
  });

  return {
    handleKeyboardShortcut,
    attachToIframe,
    isMac
  };
}