forked from pmndrs/zustand
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(example/site): prism renderer, copy button (pmndrs#503)
* refactor(example): prism renderer, copy button added a more maintained prism renderer instead of react-prism and also a copy button in case someone wishes to clone the code instead of enabling pointer events on everything * fix(code-preview): wait on mount wait for the element to mount before showing the preview, fixes pmndrs#503 (comment) * fix(code-preview): replace with `pre` tag renderer depends on a pre tag, changed style and tags to match the same
- Loading branch information
1 parent
b941d44
commit d2f5af3
Showing
7 changed files
with
128 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import React from 'react' | ||
| import Highlight, { defaultProps } from 'prism-react-renderer' | ||
| import { CopyButton } from './CopyButton' | ||
| import 'prismjs' | ||
| import 'prismjs/components/prism-jsx.min' | ||
| import 'prismjs/themes/prism-okaidia.css' | ||
|
|
||
| function CodePreview({ code, ...props }) { | ||
| return ( | ||
| <Highlight {...defaultProps} className="language-jsx" code={code} language="jsx" theme={undefined}> | ||
| {({ className, style, tokens, getLineProps, getTokenProps }) => ( | ||
| // define how each line is to be rendered in the code block, | ||
| // position is set to relative so the copy button can align to bottom right | ||
| <pre className={className} style={{ ...style, position: 'relative' }}> | ||
| {tokens.map((line, i) => ( | ||
| <div {...getLineProps({ line, key: i })}> | ||
| {line.map((token, key) => ( | ||
| <span {...getTokenProps({ token, key })} /> | ||
| ))} | ||
| </div> | ||
| ))} | ||
| <CopyButton code={code} /> | ||
| </pre> | ||
| )} | ||
| </Highlight> | ||
| ) | ||
| } | ||
| export default CodePreview |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import React, { useState } from 'react' | ||
| import { copyToClipboard } from '../utils/copy-to-clipboard' | ||
|
|
||
| /* | ||
| Isolated logic for the entire copy functionality instead | ||
| of a separate button component and with the added utility | ||
| */ | ||
| export function CopyButton({ code, ...props }) { | ||
| const [isCopied, setIsCopied] = useState(false) | ||
|
|
||
| const handleCopy = () => { | ||
| copyToClipboard(code) | ||
| setIsCopied(true) | ||
| setTimeout(() => setIsCopied(false), 3000) | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <button className="copy-button" onClick={handleCopy} {...props}> | ||
| {isCopied ? ( | ||
| 'Copied!' | ||
| ) : ( | ||
| <> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width={16} | ||
| height={16} | ||
| viewBox="0 0 24 24" | ||
| fill="none" | ||
| stroke="currentColor" | ||
| strokeWidth={2} | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| {...props}> | ||
| <rect x={9} y={9} width={13} height={13} rx={2} ry={2} /> | ||
| <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" /> | ||
| </svg> | ||
| </> | ||
| )} | ||
| </button> | ||
| </> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| export const copyToClipboard = (str) => { | ||
| const el = document.createElement('textarea') | ||
| el.value = str | ||
| el.setAttribute('readonly', '') | ||
| el.style.position = 'absolute' | ||
| el.style.left = '-9999px' | ||
| document.body.appendChild(el) | ||
| el.select() | ||
| // FIXME: might need to update this with the clipboard API in the future | ||
| document.execCommand('copy') | ||
| document.body.removeChild(el) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8761,6 +8761,11 @@ pretty-format@^26.4.2: | |
| ansi-styles "^4.0.0" | ||
| react-is "^16.12.0" | ||
|
|
||
| prism-react-renderer@^1.2.1: | ||
| version "1.2.1" | ||
| resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.2.1.tgz#392460acf63540960e5e3caa699d851264e99b89" | ||
| integrity sha512-w23ch4f75V1Tnz8DajsYKvY5lF7H1+WvzvLUcF0paFxkTHSp42RS0H5CttdN2Q8RR3DRGZ9v5xD/h3n8C8kGmg== | ||
|
|
||
| [email protected]: | ||
| version "1.23.0" | ||
| resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.23.0.tgz#d3b3967f7d72440690497652a9d40ff046067f33" | ||
|
|
@@ -9063,11 +9068,6 @@ react-postprocessing@^1.1.4: | |
| postprocessing "^6.17.1" | ||
| react-merge-refs "^1.1.0" | ||
|
|
||
| react-prism@^4.3.2: | ||
| version "4.3.2" | ||
| resolved "https://registry.yarnpkg.com/react-prism/-/react-prism-4.3.2.tgz#5c07609539b3ba6f45eb33e7d6a3588df3270c21" | ||
| integrity sha512-Z8BzDfWxzhngDtnZFjYj4RgHo7uqiWB4cOCpp//GFEpWbtINbCqHLIpL+q/f8ah5Aokw/uXkBkoLgvYIGgtm4A== | ||
|
|
||
| react-promise-suspense@^0.3.2: | ||
| version "0.3.3" | ||
| resolved "https://registry.yarnpkg.com/react-promise-suspense/-/react-promise-suspense-0.3.3.tgz#b085c7e0ac22b85fd3d605b1c4f181cda4310bc9" | ||
|
|
||