Function CodePlatter

packages/dev/s2-docs/src/CodePlatter.tsx:103–268

({children, type, showCoachMark}: CodePlatterProps)

}

export function CodePlatter({children, type, showCoachMark}: CodePlatterProps) {
  let codeRef = useRef<HTMLDivElement | null>(null);
  let [showShadcn, setShowShadcn] = useState(false);
  // let [showCodeSandbox, setShowCodeSandbox] = useState(false);
  let getText = () => getTextContent(codeRef.current!.querySelector('pre')!);
  let {library} = useContext(CodePlatterContext);
  if (!type) {
    if (library === 'react-aria') {
      // oxlint-disable-next-line react/react-compiler
      type = 'vanilla';
    } else if (library === 'react-spectrum') {
      type = 's2';
    }
  }

  let {files, deps = {}, urls = {}, entry} = useContext(FileProviderContext) ?? {};
  let shadcn = useContext(ShadcnContext);
  let shareUrl = useContext(ShareContext);

  return (
    <div className={platterStyle}>
      <Toolbar showCoachMark={showCoachMark}>
        <ActionButtonGroup orientation="vertical" isQuiet density="regular" size="S">
          <CopyButton ariaLabel="Copy code" tooltip="Copy code" getText={getText} />
          {(shareUrl || files || shadcn) && (
            <MenuTrigger align="end">
              <TooltipTrigger placement="end">
                <ActionButton aria-label="Open in…">
                  <OpenIn />
                </ActionButton>
                <Tooltip>Open in…</Tooltip>
              </TooltipTrigger>
              <Menu hideLinkOutIcon>
                {shareUrl && (
                  <MenuItem
                    onAction={() => {
                      // Find previous heading element to get hash.
                      let url = new URL(shareUrl, location.href);
                      let node: Element | null = codeRef.current;

                      // Search for the nearest heading by walking up the tree and checking previous siblings
                      while (node && node.tagName !== 'ARTICLE') {
                        // Check previous siblings
                        let sibling = node.previousElementSibling;
                        while (sibling) {
                          if (sibling instanceof HTMLHeadingElement) {
                            node = sibling;
                            break;
                          }
                          // Also check inside the sibling for headings
                          let headingInSibling = sibling.querySelector('h1, h2, h3, h4, h5, h6');
                          if (headingInSibling instanceof HTMLHeadingElement) {
                            node = headingInSibling;
                            break;
                          }
                          sibling = sibling.previousElementSibling;
                        }