CodeBlockControls() — supabase Function Reference

Source Code

apps/docs/features/ui/CodeBlock/CodeBlock.client.tsx lines 118–159

export function CodeBlockControls({ content }: { content: string }) {
  const [isWrapped, setIsWrapped] = useState(false)
  const wrapperRef = useRef<HTMLDivElement>(null)

  const toggleWrap = useCallback(() => {
    setIsWrapped((prev) => {
      const newValue = !prev
      // Find the parent code block and toggle the wrap data attribute
      const codeBlock = wrapperRef.current?.closest('.shiki')
      if (codeBlock) {
        if (newValue) {
          codeBlock.setAttribute('data-wrapped', 'true')
        } else {
          codeBlock.removeAttribute('data-wrapped')
        }
      }
      return newValue
    })
  }, [])

  return (
    <div ref={wrapperRef} className="hidden group-hover:flex absolute top-2 right-2 gap-1">
      <Tooltip>
        <TooltipTrigger asChild>
          <button
            onClick={toggleWrap}
            className={cn('border rounded-md p-1', 'hover:bg-selection transition')}
            aria-label={isWrapped ? 'Disable word wrap' : 'Enable word wrap'}
          >
            {isWrapped ? (
              <ArrowRightFromLine size={14} className="text-lighter" />
            ) : (
              <WrapText size={14} className="text-lighter" />
            )}
          </button>
        </TooltipTrigger>
        <TooltipContent>{isWrapped ? 'Disable word wrap' : 'Enable word wrap'}</TooltipContent>
      </Tooltip>
      <CodeCopyButton content={content} />
    </div>
  )
}