Component selection shortcut (#1139)
This PR introduces a new keyboard shortcut to improve the efficiency of
selecting components in the app. Users can now quickly select components
using Meta + Shift + C for Mac and Ctrl + Shift + C for Other devices
(Windows/Linux)
<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Add a shortcut to quickly activate the component selector from the
preview. Use Meta+Shift+C on macOS and Ctrl+Shift+C on Windows/Linux.
- **New Features**
- Added useShortcut hook to handle key combos and prevent default on
match.
- Wired shortcut in PreviewIframe with OS detection for Meta vs Ctrl.
- Forwarded keydown events from the iframe to the parent via postMessage
(dyad-shortcut-triggered) so the shortcut works inside preview content.
<!-- End of auto-generated description by cubic. -->
This commit is contained in:
committed by
GitHub
parent
207f3fc397
commit
6ee1a93187
@@ -2,6 +2,9 @@
|
||||
const OVERLAY_ID = "__dyad_overlay__";
|
||||
let overlay, label;
|
||||
|
||||
//detect if the user is using Mac
|
||||
const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
|
||||
|
||||
// The possible states are:
|
||||
// { type: 'inactive' }
|
||||
// { type: 'inspecting', element: ?HTMLElement }
|
||||
@@ -146,6 +149,31 @@
|
||||
);
|
||||
}
|
||||
|
||||
function onKeyDown(e) {
|
||||
// Ignore keystrokes if the user is typing in an input field, textarea, or editable element
|
||||
if (
|
||||
e.target.tagName === "INPUT" ||
|
||||
e.target.tagName === "TEXTAREA" ||
|
||||
e.target.isContentEditable
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Forward shortcuts to parent window
|
||||
const key = e.key.toLowerCase();
|
||||
const hasShift = e.shiftKey;
|
||||
const hasCtrlOrMeta = isMac ? e.metaKey : e.ctrlKey;
|
||||
if (key === "c" && hasShift && hasCtrlOrMeta) {
|
||||
e.preventDefault();
|
||||
window.parent.postMessage(
|
||||
{
|
||||
type: "dyad-select-component-shortcut",
|
||||
},
|
||||
"*",
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- activation / deactivation --------------------------------- */
|
||||
function activate() {
|
||||
if (state.type === "inactive") {
|
||||
@@ -178,6 +206,9 @@
|
||||
if (e.data.type === "deactivate-dyad-component-selector") deactivate();
|
||||
});
|
||||
|
||||
// Always listen for keyboard shortcuts
|
||||
window.addEventListener("keydown", onKeyDown, true);
|
||||
|
||||
function initializeComponentSelector() {
|
||||
if (!document.body) {
|
||||
console.error(
|
||||
|
||||
Reference in New Issue
Block a user