Code Block Components

Copyexport interface CodeBlockProps extends ComponentProps<'figure'> {
  icon?: ReactNode;
  allowCopy?: boolean;
  keepBackground?: boolean;
  viewportProps?: HTMLAttributes<HTMLElement>;
  'data-line-numbers'?: boolean;
  'data-line-numbers-start'?: number;
  Actions?: (props: { className?: string; children?: ReactNode }) => ReactNode;
}

Copyexport function Pre(props: ComponentProps<'pre'>) {
  return (
    <pre {...props} className={cn('min-w-full w-max *:flex *:flex-col', props.className)}>
      {props.children}
    </pre>
  );
}

Copy  const [checked, onClick] = useCopyButton(() => {
    const pre = containerRef.current?.getElementsByTagName('pre').item(0);
    if (!pre) return;
 
    const clone = pre.cloneNode(true) as HTMLElement;
    clone.querySelectorAll('.nd-copy-ignore').forEach((node) => {
      node.replaceWith('\n');
    });
 
    void navigator.clipboard.writeText(clone.textContent ?? '');
  });

Copyconst TabsContext = createContext<{
  containerRef: RefObject<HTMLDivElement | null>;
  nested: boolean;
} | null>(null);

Copyexport type ServerCodeBlockProps = HighlightOptions & {
  code: string;
 
  /**
   * Extra props for the underlying `<CodeBlock />` component.
   *
   * Ignored if you defined your own `pre` component in `components`.
   */
  codeblock?: CodeBlockProps;
};

Copyexport async function ServerCodeBlock({ code, codeblock, ...options }: ServerCodeBlockProps) {
  return await highlight(code, {
    defaultColor: false,
    ...options,
    components: {
      pre: (props) => (
        <CodeBlock
          {...props}
          {...codeblock}
          className={cn('my-0', props.className, codeblock?.className)}
        >
          <Pre>{props.children}</Pre>
        </CodeBlock>
      ),
      ...options.components,
    },
  });

Copyexport interface DynamicCodeblockProps {
  highlighter: HighlighterCore | (() => HighlighterCore | PromiseLike<HighlighterCore>);
  lang: string;
  code: string;
  /**
   * Extra props for the underlying `<CodeBlock />` component.
   *
   * Ignored if you defined your own `pre` component in `options.components`.
   */
  codeblock?: CodeBlockProps;
  /**
   * Wrap in React `<Suspense />` and provide a fallback.
   *
   * @defaultValue true
   */
  wrapInSuspense?: boolean;
  options: DistributiveOmit<UseShikiOptions, 'lang'>;
}

Copyfunction DefaultPre(props: ComponentProps<'pre'>) {
  const extraProps = use(PropsContext);
 
  return (
    <CodeBlock
      {...props}
      {...extraProps}
      className={cn('my-0', props.className, extraProps?.className)}
    >
      <Pre>{props.children}</Pre>
    </CodeBlock>
  );
}

Copyfunction Placeholder({
  code,
  components = {},
}: {
  code: string;
  components: UseShikiOptions['components'];
}) {
  const { pre: Pre = 'pre', code: Code = 'code' } = components as Record<string, FC>;
 
  return (
    <Pre>
      <Code>
        {code.split('\n').map((line, i) => (
          <span key={i} className="line">
            {line}
          </span>
        ))}
      </Code>
    </Pre>
  );

Copyexport function DynamicCodeBlock(props: DynamicCodeblockProps) {
  return (
    <Base.DynamicCodeBlock
      highlighter={() => defaultShikiFactory.getOrInit()}
      options={{ themes: { light: 'github-light', dark: 'github-dark' } }}
      {...props}
    />
  );
}

Copyexport function remarkCodeTab(
  this: Processor,
  options: RemarkCodeTabOptions = {},
): Transformer<Root, Root> {
  const { parseMdx = false, Tabs = 'CodeBlockTabs' } = options;
 
  return (tree) => {
    visit(tree, (node) => {
      if (!('children' in node) || node.data?._code_tab_visited) return 'skip';
      let localTabs: TabType = Tabs;
      let localParseMdx = parseMdx;
      let withParent = true;
 
      if (node.type === 'mdxJsxFlowElement' && node.name && node.name in Types) {
        withParent = false;
        localTabs = node.name as TabType;
 
        // for `Tabs` in simple mode, it doesn't support MDX tab names
        if (node.name === 'Tabs' && localParseMdx) {
          localParseMdx = node.attributes.every(
            (attribute) => attribute.type !== 'mdxJsxAttribute' || attribute.name !== 'items',
          );
        }
      }
 
      let start = -1;
      let end = 0;
      const close = () => {
        if (start === -1 || start === end) return;
        const replacement = Types[localTabs](
          this,
          node.children.slice(start, end) as Code[],
          localParseMdx,
          withParent,
        );
 
        for (const element of replacement) {
          element.data ??= {};
          element.data._code_tab_visited = true;
        }
 
        node.children.splice(start, end - start, ...replacement);
        end = start;
        start = -1;
      };
 
      for (; end < node.children.length; end++) {
        const child = node.children[end];
        if (child.type !== 'code' || !child.meta) {
          close();
          continue;
        }
 
        const meta = parseCodeBlockAttributes(child.meta, ['tab', 'tab-group']);
        if (!meta.attributes.tab) {
          close();
          continue;
        }
 
        if (start === -1) start = end;
        child.meta = meta.rest;
        child.data ??= {};
        child.data.tab = meta.attributes.tab;
        if (meta.attributes['tab-group']) {
          child.data.tabGroup = meta.attributes['tab-group'];
        }
      }
 
      close();
    });
  };
}

Copyexport interface CodeBlockAttributes<Name extends string = string> {
  attributes: Partial<Record<Name, string | null>>;
  rest: string;
}
 
const AttributeRegex = /(?<=^|\s)(?<name>[a-zA-Z0-9_-]+)(?:=(?:"([^"]*)"|'([^']*)'))?/g;
 
/**
 * Parse Fumadocs-style code block attributes from meta string, like `title="hello world"`
 */
export function parseCodeBlockAttributes<Name extends string = string>(
  meta: string,
  allowedNames?: Name[],
): CodeBlockAttributes<Name> {
  const attributes: CodeBlockAttributes['attributes'] = {};
  const rest = meta.replaceAll(AttributeRegex, (match, name, value_1, value_2) => {
    if (allowedNames && !allowedNames.includes(name)) return match;
 
    attributes[name] = value_1 ?? value_2 ?? null;
    return '';
  });
 
  return {
    rest,
    attributes,
  };
}

Copyconst Types: Record<TabType, TabHandler> = {
  CodeBlockTabs(processor, nodes, withMdx, withParent) {
    const tabs = processTabValue(nodes);
    let isFirstTab = true;
    const options: CodeBlockTabsOptions = {
      triggers: [],
      tabs: [],
    };
 
    for (const [value, list] of tabs) {
      if (isFirstTab) {
        const tagGroup = list[0].data?.tabGroup;
        options.defaultValue = value;
 
        if (tagGroup) options.persist = { id: tagGroup };
        isFirstTab = false;
      }
 
      options.triggers.push({
        value,
        children: withMdx
          ? (mdxToAst(processor, value).children as BlockContent[])
          : [
              {
                type: 'text',
                value,
              },
            ],
      });
      options.tabs.push({
        value,
        children: list,
      });
    }
 
    const node = generateCodeBlockTabs(options);
    if (!withParent) return node.children;
    return [node];
  },

Copyexport interface CodeBlockTabsOptions {
  attributes?: MdxJsxAttribute[];
  defaultValue?: string;
  persist?:
    | {
        id: string;
      }
    | false;
  triggers: {
    value: string;
    children: (BlockContent | Text)[];
  }[];
  tabs: {
    value: string;
    children: BlockContent[];
  }[];
}

Copyconst items = useMemo(
  () =>
    getExampleMessages({ message }).filter(
      (item) => item.payload !== undefined || item.headers !== undefined || item.description,
    ),
  [message],
);

Copyconst items: { label: string; value: string; content: ReactNode }[] = [];
if (headers)
  items.push({
    label: t('Headers'),
    value: 'headers',
    content: <ClientCodeBlock lang="json" code={headers} />,
  });
if (payload)
  items.push({
    label: t('Payload'),
    value: 'payload',
    content: <ClientCodeBlock lang="json" code={payload} />,
  });
 

Copy<CodeBlockTabs defaultValue={items[0].value}>
  <CodeBlockTabsList>
    {items.map((item) => (
      <CodeBlockTabsTrigger key={item.value} value={item.value}>
        {item.label}
      </CodeBlockTabsTrigger>
    ))}
  </CodeBlockTabsList>
  {items.map((item) => (
    <CodeBlockTab key={item.value} value={item.value}>
      {item.content}
    </CodeBlockTab>
  ))}
</CodeBlockTabs>

Copyexport function PyFunction(props: { name: string; type: string; children?: ReactNode }) {
  return (
    <figure className={cn(cardVariants())}>
      <div className="flex gap-2 items-center font-mono flex-wrap mb-4">
        <code className={cn(badgeVariants({ color: 'func' }))}>func</code>
        {props.name}
        <InlineCode
          lang="python"
          className="not-prose text-xs text-fd-muted-foreground"
          code={props.type}
        />
      </div>
      <div className="text-fd-muted-foreground prose-no-margin">{props.children}</div>
    </figure>
  );
}

Copyasync function InlineCode({
  lang,
  code,
  ...rest
}: ComponentProps<'span'> & {
  lang: string;
  code: string;
}) {
  return highlight(code, {
    lang,
    components: {
      pre: (props) => <span {...props} {...rest} className={cn(rest.className, props.className)} />,
    },
  });
}