copy button in html23

feat: use local state invalidate
pmndrs · May 17, 2024 · 465c14a · 465c14a
1 parent 5332032
commit 465c14a
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 25 deletions.
diff --git a/apps/html23/src/components/output-code.tsx b/apps/html23/src/components/output-code.tsx
@@ -10,7 +10,7 @@ import { ResizableHandle, ResizablePanel } from './ui/resizable.js'
 import { useIsInSessionMode } from '@coconut-xr/natuerlich/react'
 import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js'
 import { Button } from './ui/button.js'
-import { ChevronDown, ChevronUp } from 'lucide-react'
+import { ChevronDown, ChevronUp, Copy } from 'lucide-react'
 
 async function tryparsedHtmlToCode(element: ConversionNode, classes: Map<string, any>): Promise<string> {
   try {
@@ -90,7 +90,7 @@ export function OutputCode({ fullscreen }: { fullscreen: boolean }) {
           <TooltipContent side="top">Hide the Output Code</TooltipContent>
         </Tooltip>
       </ResizableHandle>
-      <ResizablePanel minSize={20} id="bottom" order={2} className={cn(fullscreen && 'hidden')}>
+      <ResizablePanel minSize={20} id="bottom" order={2} className={cn(fullscreen && 'hidden', 'relative')}>
         <Suspense fallback={null}>
           <ConvertAndHighlightCode />
         </Suspense>
@@ -171,20 +171,30 @@ function ConvertAndHighlightCode() {
   }
   const result = suspend(tryparsedHtmlToCode, [parsed.element, parsed.classes, cacheSymbol])
   return (
-    <div className="relative h-full w-full justify-stretch basis-0 items-stretch p-4 overflow-auto">
-      <Highlight theme={theme} code={result} language="jsx">
-        {({ className, style, tokens, getLineProps, getTokenProps }) => (
-          <pre style={style}>
-            {tokens.map((line, i) => (
-              <div key={i} {...getLineProps({ line })}>
-                {line.map((token, key) => (
-                  <span key={key} {...getTokenProps({ token })} />
-                ))}
-              </div>
-            ))}
-          </pre>
-        )}
-      </Highlight>
-    </div>
+    <>
+      <Button
+        onClick={() => navigator.clipboard.writeText(result)}
+        className="absolute bottom-5 z-40 right-5 text-sm gap-2"
+        variant="outline"
+        size="sm"
+      >
+        <Copy className="w-3 h-3" /> Copy Code
+      </Button>
+      <div className="relative h-full w-full justify-stretch basis-0 items-stretch p-4 overflow-auto">
+        <Highlight theme={theme} code={result} language="jsx">
+          {({ className, style, tokens, getLineProps, getTokenProps }) => (
+            <pre style={style}>
+              {tokens.map((line, i) => (
+                <div key={i} {...getLineProps({ line })}>
+                  {line.map((token, key) => (
+                    <span key={key} {...getTokenProps({ token })} />
+                  ))}
+                </div>
+              ))}
+            </pre>
+          )}
+        </Highlight>
+      </div>
+    </>
   )
 }
diff --git a/packages/react/src/root.tsx b/packages/react/src/root.tsx
@@ -1,4 +1,4 @@
-import { addAfterEffect, addEffect, invalidate, useFrame, useStore, useThree } from '@react-three/fiber'
+import { useFrame, useStore, useThree } from '@react-three/fiber'
 import { EventHandlers } from '@react-three/fiber/dist/declarations/src/core/events'
 import { forwardRef, ReactNode, RefAttributes, useEffect, useMemo, useRef } from 'react'
 import { ParentProvider } from './context.js'
@@ -23,11 +23,6 @@ export type RootProperties = BaseRootProperties &
     children?: ReactNode
   } & EventHandlers
 
-let isRendering = false
-
-addEffect(() => (isRendering = true))
-addAfterEffect(() => (isRendering = false))
-
 export const Root: (props: RootProperties & RefAttributes<ComponentInternals<RootProperties>>) => ReactNode =
   forwardRef((properties, ref) => {
     const renderer = useThree((state) => state.gl)
@@ -39,6 +34,8 @@ export const Root: (props: RootProperties & RefAttributes<ComponentInternals<Roo
     pixelSizeSignal.value = properties.pixelSize
     const propertySignals = usePropertySignals(properties)
     const onFrameSet = useMemo(() => new Set<(delta: number) => void>(), [])
+    const whileOnFrameRef = useRef(false)
+    const invalidate = useThree((s) => s.invalidate)
     const internals = useMemo(
       () =>
         createRoot(
@@ -52,7 +49,7 @@ export const Root: (props: RootProperties & RefAttributes<ComponentInternals<Roo
           renderer,
           onFrameSet,
           () => {
-            if (isRendering) {
+            if (whileOnFrameRef.current) {
               //request render unnecassary -> already rendering
               return
             }
@@ -63,7 +60,7 @@ export const Root: (props: RootProperties & RefAttributes<ComponentInternals<Roo
           invalidate,
         ),
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [],
+      [invalidate],
     )
     useEffect(() => {
       const subscriptions: Subscriptions = []
@@ -72,9 +69,11 @@ export const Root: (props: RootProperties & RefAttributes<ComponentInternals<Roo
     }, [internals])
 
     useFrame((_, delta) => {
+      whileOnFrameRef.current = true
       for (const onFrame of onFrameSet) {
         onFrame(delta)
       }
+      whileOnFrameRef.current = false
     })
 
     useComponentInternals(ref, internals.root.pixelSize, propertySignals.style, internals, internals.interactionPanel)