Merge branch 'master' into save-editorHidden-status

.changeset/four-peaches-attack.md

@@ -0,0 +1,8 @@
+---
+'playroom': patch
+---
+
+Disable snippet previews while the snippets panel is closing.
+
+Previously, snippet previews could be triggered while the snippet panel was closing, causing preview frames to enter an invalid state.
+Previewing a snippet will now only work when the snippet panel is open.

cypress/e2e/snippets.cy.ts

@@ -114,4 +114,26 @@ describe('Snippets', () => {
         </div>\n
       `);
   });
+
+  it('snippets preview code is disabled while snippet pane is closing', () => {
+    toggleSnippets();
+    toggleSnippets();
+
+    // Mouse over snippet while snippet panel is closing
+    mouseOverSnippet(0);
+
+    assertCodePaneContains(dedent`
+      <div>Initial <span>code</span></div>
+    `);
+
+    assertFirstFrameContains('Initial code');
+
+    typeCode('<div>test');
+
+    assertCodePaneContains(dedent`
+      <div>Initial <span>code<div>test</div></span></div>
+    `);
+
+    assertFirstFrameContains('Initial code\ntest');
+  });
 });

src/Playroom/Snippets/Snippets.tsx

@@ -13,6 +13,7 @@ import * as styles from './Snippets.css';
 type HighlightIndex = number | null;
 type ReturnedSnippet = Snippet | null;
 interface Props {
+  isOpen: boolean;
   snippets: PlayroomProps['snippets'];
   onHighlight?: (snippet: ReturnedSnippet) => void;
   onClose?: (snippet: ReturnedSnippet) => void;
@@ -33,7 +34,7 @@ const filterSnippetsForTerm = (snippets: Props['snippets'], term: string) =>
         .map(({ original, score }) => ({ ...original, score }))
     : snippets;
 
-export default ({ snippets, onHighlight, onClose }: Props) => {
+export default ({ isOpen, snippets, onHighlight, onClose }: Props) => {
   const [searchTerm, setSearchTerm] = useState<string>('');
   const [highlightedIndex, setHighlightedIndex] =
     useState<HighlightIndex>(null);
@@ -142,9 +143,15 @@ export default ({ snippets, onHighlight, onClose }: Props) => {
                 [styles.highlight]: isHighlighted,
               })}
               onMouseMove={
-                isHighlighted ? undefined : () => setHighlightedIndex(index)
+                isOpen && !isHighlighted
+                  ? () => {
+                      setHighlightedIndex(index);
+                    }
+                  : undefined
               }
-              onMouseDown={() => closeHandler(filteredSnippets[index])}
+              onMouseDown={() => {
+                closeHandler(filteredSnippets[index]);
+              }}
               title={getLabel(snippet)}
             >
               <Stack space="none">

src/Playroom/Toolbar/Toolbar.tsx

@@ -166,6 +166,7 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
           <div className={styles.panel} id="custom-id">
             {lastActivePanel === 'snippets' && (
               <Snippets
+                isOpen={isOpen}
                 snippets={snippets}
                 onHighlight={(snippet) => {
                   dispatch({