@stainless-api/docs 0.1.0-beta.0

package/plugin/components/SnippetCode.tsx

@@ -0,0 +1,212 @@
+import type {
+  SnippetCodeProps,
+  SnippetContainerProps,
+  SnippetRequestContainerProps,
+} from '@stainless-api/docs-ui/src/components';
+import { useHighlight, useLanguage } from '@stainless-api/docs-ui/src/contexts';
+import style from '@stainless-api/docs-ui/src/style';
+import * as cheerio from 'cheerio/slim';
+import { EXPERIMENTAL_COLLAPSIBLE_SNIPPETS } from 'virtual:stl-starlight-virtual-module';
+import clsx from 'clsx';
+/*
+ * This may be replaced by additional data from the sdk.
+ * Without information from the sdk, we use simple heuristics per language.
+ */
+function getCollapsedRanges(content: string, language: string, signature?: string): [number, number][] {
+  if (!signature) return [];
+  const raw = content.split(/\r?\n/);
+
+  const sigIdx = raw.findIndex((l) => l.includes(signature));
+  if (sigIdx < 0) return [];
+
+  let finalIndex = undefined;
+  if (language === 'kotlin' || language === 'java') {
+    finalIndex = raw.findIndex((l, i) => i > sigIdx && l.trim() === '}');
+  } else if (language === 'python') {
+    finalIndex = raw.findIndex((l, i) => i > sigIdx && l.trim().startsWith('print'));
+  } else if (language === 'go') {
+    finalIndex = raw.findIndex((l, i) => i > sigIdx && l.trim().startsWith('if err'));
+  } else {
+    // Fallback to empty line
+    finalIndex = raw.findIndex((l, i) => i > sigIdx && l.trim() === '');
+  }
+
+  if (finalIndex > 0) {
+    return [
+      [0, sigIdx],
+      [finalIndex, raw.length],
+    ];
+  }
+
+  return [[0, sigIdx]];
+}
+
+/*
+ * While collapsed, we may need to remove indentation.
+ * This function allows us to remove any level of indentation from a given line.
+ */
+function wrapFirstNSpaces($line: cheerio.Cheerio<any>, n: number) {
+  const $firstSpan = $line.children('span').first();
+  if ($firstSpan.length === 0) return;
+
+  const inner = $firstSpan.html() ?? '';
+  const m = inner.match(new RegExp(`^( {1,${n}})`));
+  if (!m) return;
+
+  const lead = m[1];
+  $firstSpan.html(`<span class="leading-ws">${lead}</span>${inner.slice(lead.length)}`);
+}
+
+/*
+ * This function calculates the counter offset for the given ranges.
+ * This only works when there is between 0 and 2 ranges. If we add support
+ * for more than 2 ranges, we will need to re-work how we calculate offsets.
+ * It may be that we will no longer be able to use css counters, and will need
+ * to find a different approach.
+ */
+function getCounterOffset(ranges: [number, number][]) {
+  let offset = 0;
+  const firstRange = ranges.length > 0 ? ranges[0] : null;
+  if (firstRange && firstRange[0] === 0) {
+    offset = firstRange[1];
+  }
+  return offset;
+}
+
+function condensedShikiHtmlFull(docHtml: string, language: string, ranges: [number, number][] = []) {
+  const $ = cheerio.load(docHtml, null, false);
+
+  const counterOffset = getCounterOffset(ranges);
+
+  $('.shiki').attr('style', `counter-reset: codeblock-line ${Math.max(counterOffset - 1, 0)}`);
+
+  const $code = $('pre code').first();
+  if ($code.length === 0) return docHtml;
+
+  const lines = $code.find('span.line').toArray();
+
+  const out: string[] = [];
+  let didPushEllipsis = false;
+
+  lines.forEach((lineEl, idx) => {
+    const $line = $(lineEl);
+    const existsInRange = ranges.some(([start, end]) => idx >= start && idx < end);
+    if (existsInRange) {
+      $line.addClass('hidden');
+    } else {
+      didPushEllipsis = false;
+    }
+
+    if (language === 'java') {
+      wrapFirstNSpaces($line, 8);
+    } else if (language === 'kotlin') {
+      wrapFirstNSpaces($line, 4);
+    } else if (language === 'go') {
+      wrapFirstNSpaces($line, 2);
+    }
+
+    $line.append('<span class="nl">\n</span>');
+    if (!didPushEllipsis && existsInRange) {
+      out.push('<span class="line ellipsis">…\n</span>');
+      didPushEllipsis = true;
+    }
+    out.push($.html(lineEl)!);
+  });
+
+  $code.html(out.join(''));
+  return $.html();
+}
+
+function useIsCollapsible({ signature }: { signature?: string }): boolean {
+  const language = useLanguage();
+
+  return Boolean(EXPERIMENTAL_COLLAPSIBLE_SNIPPETS && signature && language);
+}
+
+export function SnippetRequestContainer({ children, signature }: SnippetRequestContainerProps) {
+  const isCollapsible = useIsCollapsible({ signature });
+
+  return (
+    <div className="stl-snippet-request-container">
+      {children}
+      {signature && isCollapsible && (
+        <button
+          className={clsx(style.Button, style.ButtonSecondary, 'stl-snippet-expand-button')}
+          id="stl-snippet-expand-button"
+        >
+          Show more
+        </button>
+      )}
+    </div>
+  );
+}
+
+export function SnippetContainer({ children, signature }: SnippetContainerProps) {
+  const isCollapsible = useIsCollapsible({ signature });
+
+  return (
+    <div
+      className={clsx(
+        style.Snippet,
+        isCollapsible ? 'stl-snippet-collapsible' : 'stl-snippet-non-collapsible',
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function CondensibleSnippetCode({
+  content,
+  language,
+  signature,
+  highlighted,
+}: SnippetCodeProps & { signature: string; highlighted: string; language: string }) {
+  const ranges = getCollapsedRanges(content, language, signature);
+  const html = condensedShikiHtmlFull(highlighted, language, ranges);
+  const offset = getCounterOffset(ranges);
+
+  return (
+    <div
+      className={clsx(style.SnippetCode, 'stl-snippet-code-is-collapsed')}
+      data-snippet-expanded-offset={offset}
+    >
+      <pre className={style.SnippetCodeContent} data-stldocs-copy-content>
+        <code
+          className={language === 'json' ? 'snippet-json' : 'snippet'}
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      </pre>
+    </div>
+  );
+}
+
+export function SnippetCode({ content, signature, language: forcedLanguage }: SnippetCodeProps) {
+  const lang = useLanguage();
+  const language = forcedLanguage || lang;
+  let highlighted = useHighlight(content, language);
+
+  const isCollapsible = useIsCollapsible({ signature });
+
+  let offset = 0;
+
+  if (isCollapsible && language) {
+    const ranges = getCollapsedRanges(content, language, signature);
+    highlighted = condensedShikiHtmlFull(highlighted, language, ranges);
+    offset = getCounterOffset(ranges);
+  }
+
+  return (
+    <div
+      className={clsx(style.SnippetCode, isCollapsible && 'stl-snippet-code-is-collapsed')}
+      data-snippet-expanded-offset={offset}
+    >
+      <pre className={style.SnippetCodeContent} data-stldocs-copy-content>
+        <code
+          className={(language as string) === 'json' ? 'snippet-json' : 'snippet'}
+          dangerouslySetInnerHTML={{ __html: highlighted }}
+        />
+      </pre>
+    </div>
+  );
+}

package/plugin/components/search/Search.astro

@@ -0,0 +1,6 @@
+---
+import Default from '@astrojs/starlight/components/Search.astro';
+import AlgoliaSearch from './SearchAlgolia.astro';
+---
+
+{typeof import.meta.env['PUBLIC_ALGOLIA_APP_ID'] === 'string' ? <AlgoliaSearch /> : <Default />}

package/plugin/components/search/SearchAlgolia.astro

@@ -0,0 +1,87 @@
+---
+import { Icon } from '@astrojs/starlight/components';
+import { DocsSearch } from './SearchIsland';
+import { SEARCH } from 'virtual:stl-starlight-virtual-module';
+
+import '@stainless-api/docs-ui/src/styles/resets.css';
+import '@stainless-api/docs-ui/src/styles/primitives.css';
+import '@stainless-api/docs-ui/src/styles/main.css';
+import '@stainless-api/docs-ui/src/styles/snippets.css';
+import '@stainless-api/docs-ui/src/styles/search.css';
+import '../../../components/variables.css';
+---
+
+<site-search>
+  <button
+    popovertarget="stldocs-search"
+    data-open-modal
+    aria-label={Astro.locals.t('search.label')}
+    aria-keyshortcuts="Control+K"
+    class="stldocs-button stldocs-button-secondary"
+  >
+    <Icon name="magnifier" />
+    <span class="sl-hidden md:sl-block" aria-hidden="true">{Astro.locals.t('search.label')}</span>
+    <kbd class="sl-hidden md:sl-flex" style="display: none;">
+      <kbd>{Astro.locals.t('search.ctrlKey')}</kbd><kbd>K</kbd>
+    </kbd>
+  </button>
+
+  <DocsSearch
+    client:only="react"
+    currentPath={Astro.url.pathname}
+    settings={{
+      searchKey: import.meta.env['PUBLIC_ALGOLIA_SEARCH_KEY'],
+      indexName: import.meta.env['PUBLIC_ALGOLIA_INDEX'],
+      assistant: import.meta.env['PUBLIC_ALGOLIA_ASSISTANT'],
+      appId: import.meta.env['PUBLIC_ALGOLIA_APP_ID'],
+    }}
+  />
+</site-search>
+
+{
+  SEARCH?.enableAISearch === true && (
+    <button id="chat-button" popovertarget="stldocs-chat" data-open-modal>
+      <Icon name="comment" />
+    </button>
+  )
+}
+
+<style>
+  #chat-button {
+    background: var(--sl-color-bg-ui);
+    border: 1px solid var(--sl-color-hairline);
+    height: 2.25rem;
+    width: 2.25rem;
+
+    &:hover {
+      border: 1px solid rgb(64, 64, 64);
+    }
+  }
+</style>
+
+<script is:inline>
+  function setupShortcut() {
+    const openBtn = document.querySelector('button[data-open-modal]');
+    const shortcut = openBtn?.querySelector('kbd');
+
+    if (!openBtn || !(shortcut instanceof HTMLElement)) return;
+
+    const platformKey = shortcut.querySelector('kbd');
+    if (platformKey && /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
+      platformKey.textContent = '⌘';
+      openBtn.setAttribute('aria-keyshortcuts', 'Meta+K');
+    }
+
+    shortcut.style.display = '';
+  }
+  document.addEventListener('astro:page-load', setupShortcut);
+  setupShortcut();
+
+  // important: this fn should not be called inside astro:page-load
+  window.addEventListener('keydown', (e) => {
+    if ((e.metaKey === true || e.ctrlKey === true) && e.key === 'k') {
+      document.getElementById('stldocs-search')?.togglePopover();
+      e.preventDefault();
+    }
+  });
+</script>

package/plugin/components/search/SearchIsland.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { BASE_PATH, SEARCH } from 'virtual:stl-starlight-virtual-module';
+import { parseRoute, generateRoute } from '@stainless-api/docs-ui/src/routing';
+import { SearchModal } from '@stainless-api/docs-ui/src/search/index';
+import { ChatModal } from '@stainless-api/docs-ui/src/components/chat';
+import * as Markdoc from '@markdoc/markdoc';
+import { createHighlighter } from 'shiki';
+import type { BundledLanguage, BundledTheme, HighlighterGeneric } from 'shiki';
+
+import {
+  DocsProvider,
+  MarkdownProvider,
+  NavigationProvider,
+  SearchProvider,
+} from '@stainless-api/docs-ui/src/contexts';
+import type { SearchSettings } from '@stainless-api/docs-ui/src/search/types';
+
+let $$highlighter: HighlighterGeneric<BundledLanguage, BundledTheme> | null = null;
+async function getHighlighter() {
+  if ($$highlighter === null) {
+    $$highlighter = await createHighlighter({
+      themes: ['github-dark'],
+      langs: ['typescript', 'python', 'go', 'java', 'kotlin', 'ruby'],
+    });
+  }
+
+  return $$highlighter;
+}
+
+async function createMarkdownRenderer() {
+  const highlighter = await getHighlighter();
+  const markdocConfig: Markdoc.Config = {
+    nodes: {
+      document: { ...Markdoc.nodes.document, render: '' },
+      fence: {
+        ...Markdoc.nodes.fence,
+        transform(node, config) {
+          const attributes = node.transformAttributes(config);
+          const lang = node.attributes.language === 'node' ? 'typescript' : node.attributes.language;
+          const code = highlighter.codeToTokens(node.attributes.content, { lang, theme: 'github-dark' });
+
+          return new Markdoc.Tag(
+            'pre',
+            attributes,
+            code.tokens.map(
+              (line) =>
+                new Markdoc.Tag('span', { class: 'line' }, [
+                  ...line.map(
+                    (token) => new Markdoc.Tag('span', { style: `color:${token.color}` }, [token.content]),
+                  ),
+                  new Markdoc.Tag('span', { class: 'nl' }, ['\n']),
+                ]),
+            ),
+          );
+        },
+      },
+      link: {
+        ...Markdoc.nodes.link,
+        transform(node, config) {
+          const children = node.transformChildren(config);
+          const attrs = node.transformAttributes(config);
+          const href = attrs['href'].replace('docs://BASE_PATH', BASE_PATH);
+          return new Markdoc.Tag(this.render, { ...attrs, href }, children);
+        },
+      },
+    },
+  };
+
+  return (content: string) => {
+    const ast = Markdoc.parse(content);
+    const transformed = Markdoc.transform(ast, markdocConfig);
+    return Markdoc.renderers.html(transformed);
+  };
+}
+
+export function DocsSearch({ settings, currentPath }: { settings: SearchSettings; currentPath: string }) {
+  const renderMarkdown = React.use(createMarkdownRenderer());
+  const { stainlessPath, language } = parseRoute(BASE_PATH, currentPath);
+  const pageFind = import.meta.env.DEV ? undefined : '/pagefind/pagefind.js';
+
+  function handleSelect(path: string) {
+    const url = path.startsWith('/') ? path : generateRoute(BASE_PATH, language, path);
+    if (url) window.location.href = url;
+  }
+
+  return (
+    <DocsProvider spec={null} language={language}>
+      <NavigationProvider basePath="/" selectedPath={stainlessPath}>
+        <MarkdownProvider render={renderMarkdown}>
+          <SearchProvider onSelect={handleSelect} pageFind={pageFind} settings={settings}>
+            <div className="stldocs-root">
+              <SearchModal id="stldocs-search" />
+              {SEARCH?.enableAISearch === true && <ChatModal id="stldocs-chat" />}
+            </div>
+          </SearchProvider>
+        </MarkdownProvider>
+      </NavigationProvider>
+    </DocsProvider>
+  );
+}

package/plugin/generateAPIReferenceLink.ts

@@ -0,0 +1,71 @@
+// This is probably temporary, but it fills in functionality needed for Mintlify imports
+
+import type { StarlightRouteData } from '@astrojs/starlight/route-data';
+import type * as SDKJSON from '~/lib/json-spec-v2/types';
+import { walkTree } from '@stainless-api/docs-ui/src/routing';
+
+const INTERNAL_REFERENCE_ENTRY_MARKER = 'STL_STARLIGHT_API_REFERENCE_METHOD_LINK_PLACEHOLDER';
+
+type SidebarEntry = StarlightRouteData['sidebar'][number];
+
+type SidebarLink = Extract<SidebarEntry, { href: string }>;
+
+export function getMethodFromSDKJSON(spec: SDKJSON.Spec, endpoint: string) {
+  for (const entry of walkTree(spec)) {
+    if (entry.data.kind === 'http_method' && entry.data.endpoint === endpoint) {
+      return entry.data;
+    }
+  }
+  throw new Error(`Endpoint ${endpoint} not found in API`);
+}
+
+export function recursiveReplacePlaceholderItems(
+  sidebar: SidebarEntry[],
+  modifyFn: (entry: SidebarLink, props: { endpoint: string; label?: string }) => void,
+) {
+  for (const entry of sidebar) {
+    const endpoint = 'attrs' in entry && entry.attrs?.['data-stldocs-endpoint'];
+    if (
+      'attrs' in entry &&
+      entry.attrs?.about === INTERNAL_REFERENCE_ENTRY_MARKER &&
+      endpoint &&
+      typeof endpoint === 'string'
+    ) {
+      modifyFn(entry, {
+        endpoint,
+        label: entry.attrs?.['data-stldocs-label'],
+      });
+    }
+    if ('entries' in entry) {
+      recursiveReplacePlaceholderItems(entry.entries, modifyFn);
+    }
+  }
+}
+
+type GenerateProps = string | { label?: string; endpoint: string };
+
+function normalizeGenerateProps(generateProps: GenerateProps) {
+  if (typeof generateProps === 'string') {
+    return {
+      label: undefined,
+      endpoint: generateProps,
+    };
+  }
+  return {
+    endpoint: generateProps.endpoint,
+    label: generateProps.label,
+  };
+}
+
+export function generateAPILink(generateProps: GenerateProps) {
+  const { label, endpoint } = normalizeGenerateProps(generateProps);
+  return {
+    label: label ?? endpoint,
+    link: `/`,
+    attrs: {
+      about: INTERNAL_REFERENCE_ENTRY_MARKER,
+      'data-stldocs-endpoint': endpoint,
+      'data-stldocs-label': label,
+    },
+  };
+}

package/plugin/globalJs/ai-dropdown.ts

@@ -0,0 +1,57 @@
+export const copyCurrentPageAsMarkdown = async () => {
+  const currentUrl = new URL(window.location.href);
+  const markdownUrl = `${currentUrl.origin}${currentUrl.pathname}.md`;
+
+  try {
+    const response = await fetch(markdownUrl);
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    const markdown = await response.text();
+    await navigator.clipboard.writeText(markdown);
+    console.log('Markdown copied to clipboard');
+  } catch (error) {
+    console.error('There has been a problem with your fetch operation:', error);
+  }
+};
+
+export function onSelectAIOption(value: string, makeMarkdownLink: boolean = true) {
+  if (value === 'copy-markdown') {
+    copyCurrentPageAsMarkdown();
+  }
+  if (value === 'view-as-markdown') {
+    const currentUrl = new URL(window.location.href);
+    const markdownUrl = `${currentUrl.origin}${currentUrl.pathname}.md`;
+    window.open(markdownUrl, '_blank');
+  }
+
+  if (value === 'chat-gpt') {
+    const currentUrl = new URL(window.location.href);
+    const llmUrl = makeMarkdownLink ? `${currentUrl.origin}${currentUrl.pathname}.md` : currentUrl.href;
+
+    const prompt = `Read from ${llmUrl} so I can ask questions about it.`;
+
+    const chatGptUrl = `https://chatgpt.com/?hints=search&prompt=${encodeURIComponent(prompt)}`;
+    window.open(chatGptUrl, '_blank');
+  }
+
+  if (value === 'claude') {
+    const currentUrl = new URL(window.location.href);
+    const llmUrl = makeMarkdownLink ? `${currentUrl.origin}${currentUrl.pathname}.md` : currentUrl.href;
+
+    const prompt = `Read from ${llmUrl} so I can ask questions about it.`;
+
+    const claudeUrl = `https://claude.ai/new?q=${encodeURIComponent(prompt)}`;
+    window.open(claudeUrl, '_blank');
+  }
+
+  if (value === 'cursor') {
+    const currentUrl = new URL(window.location.href);
+    const llmUrl = makeMarkdownLink ? `${currentUrl.origin}${currentUrl.pathname}.md` : currentUrl.href;
+
+    const prompt = `Read from ${llmUrl} so I can ask questions about it.`;
+
+    const cursorUrl = `https://www.cursor.so/?prompt=${encodeURIComponent(prompt)}`;
+    window.open(cursorUrl, '_blank');
+  }
+}

package/plugin/globalJs/code-snippets.ts

@@ -0,0 +1,87 @@
+import { getPageLoadEvent } from '../helpers/getPageLoadEvent.ts';
+
+document.addEventListener(getPageLoadEvent(), () => {
+  document.querySelectorAll('.stldocs-snippet-response-tab-item').forEach((tab) => {
+    tab.addEventListener('click', () => {
+      document
+        .querySelectorAll('.stldocs-snippet-response-tab-item')
+        .forEach((t) => t.classList.remove('stldocs-snippet-response-tab-item-active'));
+      document
+        .querySelectorAll('.stldocs-snippet-response-pane')
+        .forEach((p) => p.classList.remove('stldocs-snippet-response-pane-active'));
+
+      const panelId = (tab as HTMLButtonElement).dataset.snippetResponseTabId;
+
+      if (!panelId) {
+        console.error(`No panel found for tab: ${tab}`);
+        return;
+      }
+      document
+        .querySelectorAll(`[data-snippet-response-pane-id="${panelId}"]`)
+        .forEach((p) => p.classList.add('stldocs-snippet-response-pane-active'));
+      document
+        .querySelectorAll(`[data-snippet-response-tab-id="${panelId}"]`)
+        .forEach((p) => p.classList.add('stldocs-snippet-response-tab-item-active'));
+    });
+  });
+
+  document.getElementById('stl-snippet-expand-button')?.addEventListener('click', (e) => {
+    const btn = e.currentTarget as HTMLButtonElement;
+
+    const collapsedDiv = document.querySelector('.stl-snippet-code-is-collapsed') as HTMLElement | null;
+    const expandedDiv = document.querySelector('.stl-snippet-code-is-expanded') as HTMLElement | null;
+
+    // We need to use javascript for height animations due to having dynamic heights based on snippet size.
+    const animateHeight = (el: HTMLElement, expand: boolean) => {
+      const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      if (prefersReduced) {
+        el.classList.toggle('stl-snippet-code-is-expanded', expand);
+        el.classList.toggle('stl-snippet-code-is-collapsed', !expand);
+        return;
+      }
+
+      // This is a bit funky, but it animates pretty smooth.
+      // 1. Toggle to new state so we can measure the target height
+      // 2. Reset to starting height to trigger transition
+      const startHeight = el.scrollHeight;
+      el.classList.toggle('stl-snippet-code-is-expanded', expand);
+      el.classList.toggle('stl-snippet-code-is-collapsed', !expand);
+
+      const endHeight = el.scrollHeight;
+
+      el.style.height = `${startHeight}px`;
+
+      requestAnimationFrame(() => {
+        el.style.height = `${endHeight}px`;
+      });
+
+      const onEnd = (e: TransitionEvent) => {
+        if (e.propertyName !== 'height') return;
+        el.style.height = '';
+        el.removeEventListener('transitionend', onEnd);
+      };
+      el.addEventListener('transitionend', onEnd);
+    };
+
+    if (collapsedDiv) {
+      if (collapsedDiv) {
+        collapsedDiv.querySelector('.shiki')?.setAttribute('style', `counter-reset: codeblock-line 0`);
+      }
+      animateHeight(collapsedDiv, true);
+      btn.textContent = 'Show less';
+      return;
+    }
+
+    if (expandedDiv) {
+      const dataSnippetExpandedOffset = expandedDiv?.dataset.snippetExpandedOffset;
+      if (dataSnippetExpandedOffset) {
+        const offset = parseInt(dataSnippetExpandedOffset, 10);
+        expandedDiv
+          .querySelector('.shiki')
+          ?.setAttribute('style', `counter-reset: codeblock-line ${Math.max(offset - 1, 0)}`);
+      }
+      animateHeight(expandedDiv, false);
+      btn.textContent = 'Show more';
+    }
+  });
+});

package/plugin/globalJs/copy.ts

@@ -0,0 +1,37 @@
+import { EXPERIMENTAL_COLLAPSIBLE_SNIPPETS } from 'virtual:stl-starlight-virtual-module';
+const copyIcon = `<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>`;
+const circleAlertIcon = `<circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/>`;
+const checkIcon = `<path d="M20 6 9 17l-5-5"/>`;
+
+addEventListener('click', async (event) => {
+  const copyButton = (event.target as HTMLElement).closest('[data-stldocs-snippet-copy]') as HTMLElement;
+  if (copyButton) {
+    const iconElement = copyButton.querySelector('.stldocs-icon') as SVGElement;
+    clearTimeout(copyButton.dataset.__stldocsCopyTimeout);
+    try {
+      const isContentCollapsed = !!document.querySelector(
+        '.stldocs-snippet-code.stl-snippet-code-is-collapsed',
+      );
+
+      const content = copyButton
+        .closest('[data-stldocs-copy-parent]')!
+        .querySelector('[data-stldocs-copy-content]')!;
+
+      const contentCopy = content.cloneNode(true) as HTMLElement;
+
+      contentCopy.querySelectorAll('.ellipsis').forEach((el) => el.remove());
+      if (EXPERIMENTAL_COLLAPSIBLE_SNIPPETS && isContentCollapsed) {
+        contentCopy.querySelectorAll('.hidden').forEach((el) => el.remove());
+        contentCopy.querySelectorAll('.leading-ws').forEach((el) => el.remove());
+      }
+      await navigator.clipboard.writeText(contentCopy.textContent!);
+      iconElement.innerHTML = checkIcon;
+    } catch {
+      iconElement.innerHTML = circleAlertIcon;
+    }
+    copyButton.dataset.__stldocsCopyTimeout =
+      setTimeout(() => {
+        iconElement.innerHTML = copyIcon;
+      }, 1000) + '';
+  }
+});