From 7f0bd35ae1d7a7ccb7d0744e0f2221bc7e6ee1fd Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 18 Feb 2024 17:14:16 +0100 Subject: [PATCH 1/3] [docs-infra] Simplify copy logic --- docs/src/modules/utils/CodeCopy.tsx | 34 ++++++++++++++++------------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/docs/src/modules/utils/CodeCopy.tsx b/docs/src/modules/utils/CodeCopy.tsx index de5f21450ef5cd..cd59cea2734a31 100644 --- a/docs/src/modules/utils/CodeCopy.tsx +++ b/docs/src/modules/utils/CodeCopy.tsx @@ -160,30 +160,34 @@ export function CodeCopyProvider({ children }: CodeCopyProviderProps) { const rootNode = React.useRef(null); React.useEffect(() => { document.addEventListener('keydown', (event) => { - if (hasNativeSelection(event.target as HTMLTextAreaElement)) { - // Skip if user is highlighting a text. + if (!rootNode.current) { return; } - // event.key === 'c' is not enough as alt+c can lead to ©, ç, or other characters on macOS. - // event.code === 'KeyC' is not enough as event.code assume a QWERTY keyboard layout which would - // be wrong with a Dvorak keyboard (as if pressing J). - const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey; - if (String.fromCharCode(event.keyCode) !== 'C' || !isModifierKeyPressed) { + + // Skip if user is highlighting a text. + if (hasNativeSelection(event.target as HTMLTextAreaElement)) { return; } - if (!rootNode.current) { + + // Skip if it's not a copy keyboard event + if ( + !( + (event.ctrlKey || event.metaKey) && + event.key.toLowerCase() === 'c' && + !event.shiftKey && + !event.altKey + ) + ) { return; } + const copyBtn = rootNode.current.querySelector('.MuiCode-copy') as HTMLButtonElement | null; - if (!copyBtn) { - return; - } - const initialEventAction = copyBtn.getAttribute('data-ga-event-action'); + const initialEventAction = copyBtn!.getAttribute('data-ga-event-action'); // update the 'data-ga-event-action' on the button to track keyboard interaction - copyBtn.dataset.gaEventAction = + copyBtn!.dataset.gaEventAction = initialEventAction?.replace('click', 'keyboard') || 'copy-keyboard'; - copyBtn.click(); // let the GA setup in GoogleAnalytics.js do the job - copyBtn.dataset.gaEventAction = initialEventAction!; // reset the 'data-ga-event-action' back to initial + copyBtn!.click(); // let the GA setup in GoogleAnalytics.js do the job + copyBtn!.dataset.gaEventAction = initialEventAction!; // reset the 'data-ga-event-action' back to initial }); }, []); return ( From 4bc1b4bc211ad1305decc9e589cda4f91bd7839b Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 20 Feb 2024 01:09:26 +0100 Subject: [PATCH 2/3] Flavien's review --- docs/src/modules/utils/CodeCopy.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/src/modules/utils/CodeCopy.tsx b/docs/src/modules/utils/CodeCopy.tsx index cd59cea2734a31..119dd3dc57fbee 100644 --- a/docs/src/modules/utils/CodeCopy.tsx +++ b/docs/src/modules/utils/CodeCopy.tsx @@ -181,13 +181,13 @@ export function CodeCopyProvider({ children }: CodeCopyProviderProps) { return; } - const copyBtn = rootNode.current.querySelector('.MuiCode-copy') as HTMLButtonElement | null; + const copyBtn = rootNode.current.querySelector('.MuiCode-copy') as HTMLButtonElement; const initialEventAction = copyBtn!.getAttribute('data-ga-event-action'); // update the 'data-ga-event-action' on the button to track keyboard interaction - copyBtn!.dataset.gaEventAction = + copyBtn.dataset.gaEventAction = initialEventAction?.replace('click', 'keyboard') || 'copy-keyboard'; - copyBtn!.click(); // let the GA setup in GoogleAnalytics.js do the job - copyBtn!.dataset.gaEventAction = initialEventAction!; // reset the 'data-ga-event-action' back to initial + copyBtn.click(); // let the GA setup in GoogleAnalytics.js do the job + copyBtn.dataset.gaEventAction = initialEventAction!; // reset the 'data-ga-event-action' back to initial }); }, []); return ( From 1cc1bfb8489e62f205ca240612d4c9e205b45f69 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 20 Feb 2024 13:31:28 +0100 Subject: [PATCH 3/3] dead logic Co-authored-by: Flavien DELANGLE Signed-off-by: Olivier Tassinari --- docs/src/modules/utils/CodeCopy.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/modules/utils/CodeCopy.tsx b/docs/src/modules/utils/CodeCopy.tsx index 119dd3dc57fbee..68bd9de869c65a 100644 --- a/docs/src/modules/utils/CodeCopy.tsx +++ b/docs/src/modules/utils/CodeCopy.tsx @@ -182,7 +182,7 @@ export function CodeCopyProvider({ children }: CodeCopyProviderProps) { } const copyBtn = rootNode.current.querySelector('.MuiCode-copy') as HTMLButtonElement; - const initialEventAction = copyBtn!.getAttribute('data-ga-event-action'); + const initialEventAction = copyBtn.getAttribute('data-ga-event-action'); // update the 'data-ga-event-action' on the button to track keyboard interaction copyBtn.dataset.gaEventAction = initialEventAction?.replace('click', 'keyboard') || 'copy-keyboard';