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({})}
+
+
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) => {