Show edit buttons while tabbing

Author: andrewbranch

src/components/InteractiveCodeBlock/InteractiveCodeBlock.tsx

@@ -232,7 +232,7 @@ export function InteractiveCodeBlock<
       </pre>
       {buttonIcon ? (
         <Button
-          css={{ opacity: buttonIcon === resetIcon ? 1 : 0}}
+          css={{ opacity: buttonIcon === resetIcon ? 1 : 0, 'html:not([data-hide-outlines]) &': { opacity: 1 } }}
           disabled={props.isLoading}
           onClick={isChanged
             ? () => setTimeout(() => setState(originalState), 50)

src/hooks/useOutlineStatus.ts

@@ -14,6 +14,7 @@ const onMouseDown = () => {
 export function useOutlineStatus() {
   useEffect(() => {
     if (!isSSR) {
+      onMouseDown();
       document.addEventListener('keydown', onKeyDown);
       document.addEventListener('mousedown', onMouseDown);
       return () => {