copy share link button

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 (
+    <div className="w-36">
+      <Button onClick={copy} wide>
+        {isCopied ? (
+          "Copied to clipboard!"
+        ) : (
+          <div className="flex items-center space-x-1">
+            <ClipboardCopyIcon className="w-4 h-4" />
+            <span>Copy share link</span>
+          </div>
+        )}
+      </Button>
+    </div>
+  );
+};
+
 type PlaygroundContextShape = {
   getLeftPanelElement: () => HTMLDivElement | undefined;
 };
@@ -220,6 +247,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
   onCodeChange,
   onSettingsChange,
   showEditor = true,
+  showShareButton = false,
 }) => {
   const [code, setCode] = useMaybeControlledValue({
     value: controlledCode,
@@ -370,6 +398,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
                 <StyledTab name="View Settings" icon={ChartSquareBarIcon} />
                 <StyledTab name="Input Variables" icon={CurrencyDollarIcon} />
               </StyledTab.List>
+              <div className="flex space-x-2 items-center">
                 <RunControls
                   autorunMode={autorunMode}
                   isStale={renderedCode !== code}
@@ -377,6 +406,8 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
                   isRunning={isRunning}
                   onAutorunModeChange={setAutorunMode}
                 />
+                {showShareButton && <ShareButton />}
+              </div>
             </div>
             {vars.showEditor ? withEditor : withoutEditor}
           </div>

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<Props> = ({ onClick, wide, children }) => {
+  return (
+    <button
+      className={clsx(
+        "rounded-md py-1.5 px-2 bg-slate-500 text-white text-xs font-semibold flex items-center justify-center space-x-1",
+        wide && "w-full"
+      )}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+};

packages/components/src/stories/SquigglePlayground.stories.mdx

@@ -21,3 +21,16 @@ including sampling settings, in squiggle.
     {Template.bind({})}
   </Story>
 </Canvas>
+
+<Canvas>
+  <Story
+    name="With share button"
+    args={{
+      defaultCode: "normal(5,2)",
+      height: 800,
+      showShareButton: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

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) => {