be7bb66e70
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 14s
Extracted complex logic from App.vue into focused, reusable composables: New composables: - useKeyboardShortcuts.js (~80 lines): Keyboard shortcuts (Cmd/Ctrl+S, P, Escape, \) - useIframeInteractions.js (~370 lines): Page/element hover, labels, clicks, popups - usePreviewRenderer.js (~160 lines): Double buffering, transitions, scroll persistence - usePrintPreview.js (~70 lines): Print dialog and style collection Benefits: - 70% reduction in App.vue size (532 lines extracted) - Better separation of concerns - Improved maintainability and testability - Clearer code organization Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
81 lines
2.3 KiB
JavaScript
81 lines
2.3 KiB
JavaScript
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
|
|
};
|
|
}
|