diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx index 837c4bed..626fc354 100644 --- a/packages/components/src/components/SquigglePlayground.tsx +++ b/packages/components/src/components/SquigglePlayground.tsx @@ -13,6 +13,7 @@ import { yupResolver } from "@hookform/resolvers/yup"; import { ChartSquareBarIcon, CheckCircleIcon, + ClipboardCopyIcon, CodeIcon, CogIcon, CurrencyDollarIcon, @@ -40,6 +41,7 @@ import { defaultColor, defaultTickFormat, } from "../lib/distributionSpecBuilder"; +import { Button } from "./ui/Button"; type PlaygroundProps = SquiggleChartProps & { /** The initial squiggle string to put in the playground */ @@ -49,6 +51,8 @@ type PlaygroundProps = SquiggleChartProps & { onSettingsChange?(settings: any): void; /** Should we show the editor? */ showEditor?: boolean; + /** Useful for playground on squiggle website, where we update the anchor link based on current code and settings */ + showShareButton?: boolean; }; const schema = yup @@ -197,6 +201,29 @@ const RunControls: React.FC<{ ); }; +const ShareButton: React.FC = () => { + const [isCopied, setIsCopied] = useState(false); + const copy = () => { + navigator.clipboard.writeText((window.top || window).location.href); + setIsCopied(true); + setTimeout(() => setIsCopied(false), 1000); + }; + return ( +
+ +
+ ); +}; + type PlaygroundContextShape = { getLeftPanelElement: () => HTMLDivElement | undefined; }; @@ -220,6 +247,7 @@ export const SquigglePlayground: FC = ({ onCodeChange, onSettingsChange, showEditor = true, + showShareButton = false, }) => { const [code, setCode] = useMaybeControlledValue({ value: controlledCode, @@ -370,13 +398,16 @@ export const SquigglePlayground: FC = ({ - +
+ + {showShareButton && } +
{vars.showEditor ? withEditor : withoutEditor} diff --git a/packages/components/src/components/ui/Button.tsx b/packages/components/src/components/ui/Button.tsx new file mode 100644 index 00000000..008b2084 --- /dev/null +++ b/packages/components/src/components/ui/Button.tsx @@ -0,0 +1,22 @@ +import clsx from "clsx"; +import React from "react"; + +type Props = { + onClick: () => void; + children: React.ReactNode; + wide?: boolean; // stretch the button horizontally +}; + +export const Button: React.FC = ({ onClick, wide, children }) => { + return ( + + ); +}; diff --git a/packages/components/src/stories/SquigglePlayground.stories.mdx b/packages/components/src/stories/SquigglePlayground.stories.mdx index 0c198f42..c9c7c3eb 100644 --- a/packages/components/src/stories/SquigglePlayground.stories.mdx +++ b/packages/components/src/stories/SquigglePlayground.stories.mdx @@ -21,3 +21,16 @@ including sampling settings, in squiggle. {Template.bind({})} + + + + {Template.bind({})} + + diff --git a/packages/website/src/pages/playground.js b/packages/website/src/pages/playground.js index 1f33d54d..4192f31a 100644 --- a/packages/website/src/pages/playground.js +++ b/packages/website/src/pages/playground.js @@ -44,6 +44,7 @@ export default function PlaygroundPage() { const playgroundProps = { defaultCode: "normal(0,1)", height: 700, + showShareButton: true, ...hashData, onCodeChange: (code) => setHashData({ initialSquiggleString: code }), onSettingsChange: (settings) => {