Improve playground save flow (#1775)

* FIx appended `}` to generated url * Improve playground save flow
chakra-ui · Dec 6, 2023 · e35d01e · e35d01e · vercel · Dec 6, 2023
1 parent 04fd01f
commit e35d01e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/playground/src/components/Playground.tsx b/playground/src/components/Playground.tsx
@@ -29,6 +29,7 @@ export const Playground = (props: UsePlayGroundProps) => {
     setState,
     onShare,
     onShareDiff,
+    diffState,
     isSharing,
     isResponsive,
     setExample,
@@ -111,7 +112,12 @@ export const Playground = (props: UsePlayGroundProps) => {
             className={splitter()}
           >
             <SplitterPanel id="editor">
-              <Editor value={state} onChange={setState} artifacts={artifacts} diffState={props.diffState} />
+              <Editor
+                value={state}
+                onChange={setState}
+                artifacts={artifacts}
+                diffState={diffState ?? props.diffState}
+              />
             </SplitterPanel>
 
             <ArtifactsPanel panda={panda} />

diff --git a/playground/src/hooks/usePlayground.ts b/playground/src/hooks/usePlayground.ts
@@ -71,6 +71,7 @@ export const usePlayground = (props: UsePlayGroundProps) => {
   }
 
   const [state, setState] = useState(initialState ?? example)
+  const [diffState, setDiffState] = useState<State | null>(null)
 
   function copyCurrentURI() {
     const currentURI = window.location.href
@@ -128,6 +129,9 @@ export const usePlayground = (props: UsePlayGroundProps) => {
     share({
       onDone(id) {
         history.pushState({ id }, '', `${original}/${id}`)
+        if (!initialState) return
+        setDiffState(state)
+        setState(initialState)
       },
     })
   }
@@ -159,6 +163,7 @@ export const usePlayground = (props: UsePlayGroundProps) => {
     setExample,
     onShare,
     onShareDiff,
+    diffState,
     isSharing,
     isResponsive,
   }