Skip to content

Commit

Permalink
Merge branch 'master' of https://github.com/mui/material-ui into joy-…
Browse files Browse the repository at this point in the history
…pricing-page
  • Loading branch information
danilo-leal committed Jun 14, 2022
2 parents 9730c92 + 7ea4c8a commit 5ab1e55
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 31 deletions.
2 changes: 1 addition & 1 deletion docs/packages/markdown/parseMarkdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -291,7 +291,7 @@ function createRender(context) {

return `<div class="MuiCode-root"><pre><code class="language-${escape(lang, true)}">${
escaped ? code : escape(code, true)
}</code></pre><button data-ga-event-category="code" data-ga-event-action="copy-click" aria-label="Copy the code" class="MuiCode-copy">Copy <span class="MuiCode-copyKeypress"><span>or</span> $key + C</span></button></div>\n`;
}</code></pre><button data-ga-event-category="code" data-ga-event-action="copy-click" aria-label="Copy the code" class="MuiCode-copy">Copy <span class="MuiCode-copyKeypress"><span>(Or</span> $keyC<span>)</span></span></button></div>\n`;
};

const markedOptions = {
Expand Down
4 changes: 2 additions & 2 deletions docs/src/modules/components/HighlightedCode.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const HighlightedCode = React.forwardRef(function HighlightedCode(props, ref) {
return prism(code.trim(), language);
}, [code, language]);
const [copied, setCopied] = React.useState(false);
const [key, setKey] = React.useState('Ctrl');
const [key, setKey] = React.useState('Ctrl + ');
const handlers = useCodeCopy();
React.useEffect(() => {
if (typeof window !== 'undefined') {
Expand Down Expand Up @@ -64,7 +64,7 @@ const HighlightedCode = React.forwardRef(function HighlightedCode(props, ref) {
>
{copied ? 'Copied' : 'Copy'}&nbsp;
<span className="MuiCode-copyKeypress">
<span>or</span> {key} + C
<span>(Or</span> {key}C<span>)</span>
</span>
</button>
)}
Expand Down
81 changes: 53 additions & 28 deletions docs/src/modules/utils/CodeCopy.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const InitCodeCopy = () => {
const rootNode = React.useContext(CodeBlockContext);
const router = useRouter();
React.useEffect(() => {
let key = 'Ctrl';
let key = 'Ctrl + ';
if (typeof window !== 'undefined') {
const macOS = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0;
if (macOS) {
Expand All @@ -54,26 +54,60 @@ const InitCodeCopy = () => {
) as HTMLCollectionOf<HTMLDivElement>;

if (codeRoots !== null) {
const listeners: Array<() => void> = [];
Array.from(codeRoots).forEach((elm) => {
elm.addEventListener('mouseenter', () => {
const handleMouseEnter = () => {
rootNode.current = elm;
});
elm.addEventListener('mouseleave', () => {
};

elm.addEventListener('mouseenter', handleMouseEnter);
listeners.push(() => elm.removeEventListener('mouseenter', handleMouseEnter));

const handleMouseLeave = () => {
if (rootNode.current === elm) {
(rootNode.current.querySelector('.MuiCode-copy') as null | HTMLButtonElement)?.blur();
rootNode.current = null;
}
});
elm.addEventListener('focusin', () => {
};
elm.addEventListener('mouseleave', handleMouseLeave);
listeners.push(() => elm.removeEventListener('mouseleave', handleMouseLeave));

const handleFocusin = () => {
// use `focusin` because it bubbles from the copy button
rootNode.current = elm;
});
elm.addEventListener('focusout', () => {
};
elm.addEventListener('focusin', handleFocusin);
listeners.push(() => elm.removeEventListener('focusin', handleFocusin));

const handleFocusout = () => {
// use `focusout` because it bubbles from the copy button
if (rootNode.current === elm) {
rootNode.current = null;
}
});
};
elm.addEventListener('focusout', handleFocusout);
listeners.push(() => elm.removeEventListener('focusout', handleFocusout));

async function handleClick(event: MouseEvent) {
const trigger = event.currentTarget as HTMLButtonElement;
const pre = (event.currentTarget as Element)?.previousElementSibling as Element;
const textNode = trigger.childNodes[0];
textNode.nodeValue = textNode.textContent?.replace('Copy', 'Copied') || null;
trigger.dataset.copied = 'true';
setTimeout(() => {
if (trigger) {
textNode.nodeValue = textNode.textContent?.replace('Copied', 'Copy') || null;
delete trigger.dataset.copied;
}
}, 2000);
try {
if (pre.textContent) {
await copy(pre.textContent);
}
// eslint-disable-next-line no-empty
} catch (error) {}
}

const btn = elm.querySelector('.MuiCode-copy') as HTMLButtonElement | null;
if (btn) {
const keyNode = btn.childNodes[1]?.childNodes[1];
Expand All @@ -82,28 +116,19 @@ const InitCodeCopy = () => {
return;
}
keyNode.textContent = keyNode?.textContent?.replace('$key', key) || null;
btn.addEventListener('click', async function handleClick(event) {
const trigger = event.currentTarget as HTMLButtonElement;
const pre = (event.currentTarget as Element)?.previousElementSibling as Element;
const textNode = trigger.childNodes[0];
textNode.nodeValue = textNode.textContent?.replace('Copy', 'Copied') || null;
trigger.dataset.copied = 'true';
setTimeout(() => {
if (trigger) {
textNode.nodeValue = textNode.textContent?.replace('Copied', 'Copy') || null;
delete trigger.dataset.copied;
}
}, 2000);
try {
if (pre.textContent) {
await copy(pre.textContent);
}
// eslint-disable-next-line no-empty
} catch (error) {}
});
btn.addEventListener('click', handleClick);
listeners.push(() => btn.removeEventListener('click', handleClick));
}
});

return () => {
listeners.forEach((removeEventListener) => {
removeEventListener();
});
};
}

return undefined;
}, [rootNode, router.pathname]);
return null;
};
Expand Down

0 comments on commit 5ab1e55

Please sign in to comment.