typescript-eslint · benmccann · May 31, 2025
diff --git a/knip.ts b/knip.ts
@@ -164,6 +164,7 @@ export default {
         '@docusaurus/useDocusaurusContext',
         '@docusaurus/useBaseUrl',
         '@docusaurus/BrowserOnly',
+        '@docusaurus/Translate',
         '@docusaurus/module-type-aliases',
         '@generated/docusaurus.config',
         '^@site/.*',

diff --git a/packages/website/package.json b/packages/website/package.json
@@ -28,16 +28,17 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.4",
-    "@docusaurus/core": "^3.2.1",
-    "@docusaurus/plugin-client-redirects": "^3.2.1",
-    "@docusaurus/plugin-pwa": "^3.2.1",
-    "@docusaurus/preset-classic": "^3.2.1",
-    "@docusaurus/remark-plugin-npm2yarn": "^3.2.1",
-    "@docusaurus/theme-common": "^3.2.1",
+    "@docusaurus/core": "^3.8.1",
+    "@docusaurus/plugin-client-redirects": "^3.8.1",
+    "@docusaurus/plugin-pwa": "^3.8.1",
+    "@docusaurus/preset-classic": "^3.8.1",
+    "@docusaurus/remark-plugin-npm2yarn": "^3.8.1",
+    "@docusaurus/theme-common": "^3.8.1",
     "@typescript-eslint/parser": "workspace:*",
     "@typescript-eslint/website-eslint": "workspace:*",
     "@uiw/react-shields": "2.0.1",
     "clsx": "^2.1.0",
+    "copy-text-to-clipboard": "^3.2.0",
     "docusaurus-plugin-typedoc": "^1.4.0",
     "eslint": "^9.15.0",
     "json5": "^2.2.3",
@@ -55,7 +56,7 @@
     "typescript": "*"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^3.2.1",
+    "@docusaurus/module-type-aliases": "^3.8.1",
     "@types/mdast": "^4.0.3",
     "@types/react": "*",
     "@types/unist": "^3.0.2",

diff --git a/packages/website/src/theme/CodeBlock/Buttons/Button/index.tsx b/packages/website/src/theme/CodeBlock/Buttons/Button/index.tsx
@@ -0,0 +1,12 @@
+import React, { type ReactNode } from 'react';
+import clsx from 'clsx';
+import type { Props } from '@theme/CodeBlock/Buttons/Button';
+
+export default function CodeBlockButton({
+  className,
+  ...props
+}: Props): ReactNode {
+  return (
+    <button type="button" {...props} className={clsx('clean-btn', className)} />
+  );
+}
diff --git a/packages/website/src/theme/CodeBlock/Buttons/CopyButton/index.tsx b/packages/website/src/theme/CodeBlock/Buttons/CopyButton/index.tsx
@@ -0,0 +1,81 @@
+import React, {
+  useCallback,
+  useState,
+  useRef,
+  useEffect,
+  type ReactNode,
+} from 'react';
+import clsx from 'clsx';
+import copy from 'copy-text-to-clipboard';
+import { translate } from '@docusaurus/Translate';
+import { useCodeBlockContext } from '@docusaurus/theme-common/internal';
+import Button from '@theme/CodeBlock/Buttons/Button';
+import type { Props } from '@theme/CodeBlock/Buttons/CopyButton';
+import IconCopy from '@theme/Icon/Copy';
+import IconSuccess from '@theme/Icon/Success';
+
+import styles from './styles.module.css';
+
+function title() {
+  return translate({
+    id: 'theme.CodeBlock.copy',
+    message: 'Copy',
+    description: 'The copy button label on code blocks',
+  });
+}
+
+function ariaLabel(isCopied: boolean) {
+  return isCopied
+    ? translate({
+        id: 'theme.CodeBlock.copied',
+        message: 'Copied',
+        description: 'The copied button label on code blocks',
+      })
+    : translate({
+        id: 'theme.CodeBlock.copyButtonAriaLabel',
+        message: 'Copy code to clipboard',
+        description: 'The ARIA label for copy code blocks button',
+      });
+}
+
+function useCopyButton() {
+  const {
+    metadata: { code },
+  } = useCodeBlockContext();
+  const [isCopied, setIsCopied] = useState(false);
+  const copyTimeout = useRef<number | undefined>(undefined);
+
+  const copyCode = useCallback(() => {
+    copy(code);
+    setIsCopied(true);
+    copyTimeout.current = window.setTimeout(() => {
+      setIsCopied(false);
+    }, 1000);
+  }, [code]);
+
+  useEffect(() => () => window.clearTimeout(copyTimeout.current), []);
+
+  return { copyCode, isCopied };
+}
+
+export default function CopyButton({ className }: Props): ReactNode {
+  const { copyCode, isCopied } = useCopyButton();
+
+  return (
+    <Button
+      aria-label={ariaLabel(isCopied)}
+      title={title()}
+      className={clsx(
+        className,
+        styles.copyButton,
+        isCopied && styles.copyButtonCopied,
+      )}
+      onClick={copyCode}
+    >
+      <span className={styles.copyButtonIcons} aria-hidden="true">
+        <IconCopy className={styles.copyButtonIcon} />
+        <IconSuccess className={styles.copyButtonSuccessIcon} />
+      </span>
+    </Button>
+  );
+}
diff --git a/packages/website/src/theme/CodeBlock/Buttons/CopyButton/styles.module.css b/packages/website/src/theme/CodeBlock/Buttons/CopyButton/styles.module.css
@@ -0,0 +1,40 @@
+:global(.theme-code-block:hover) .copyButtonCopied {
+  opacity: 1 !important;
+}
+
+.copyButtonIcons {
+  position: relative;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.copyButtonIcon,
+.copyButtonSuccessIcon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  fill: currentcolor;
+  opacity: inherit;
+  width: inherit;
+  height: inherit;
+  transition: all var(--ifm-transition-fast) ease;
+}
+
+.copyButtonSuccessIcon {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.33);
+  opacity: 0;
+  color: #00d600;
+}
+
+.copyButtonCopied .copyButtonIcon {
+  transform: scale(0.33);
+  opacity: 0;
+}
+
+.copyButtonCopied .copyButtonSuccessIcon {
+  transform: translate(-50%, -50%) scale(1);
+  opacity: 1;
+  transition-delay: 0.075s;
+}
diff --git a/packages/website/src/theme/CodeBlock/Buttons/TryInPlaygroundButton/index.tsx b/packages/website/src/theme/CodeBlock/Buttons/TryInPlaygroundButton/index.tsx
@@ -0,0 +1,103 @@
+import { type ReactNode } from 'react';
+import { TryInPlayground } from '../../../MDXComponents/TryInPlayground';
+import { usePrismTheme, useThemeConfig } from '@docusaurus/theme-common';
+import { parseLanguage, parseLines } from '@docusaurus/theme-common/internal';
+import type { Props } from '@theme/CodeBlock/Buttons/TryInPlaygroundButton';
+import Line from '@theme/CodeBlock/Line';
+import clsx from 'clsx';
+import * as lz from 'lz-string';
+import { Highlight } from 'prism-react-renderer';
+import styles from './styles.module.css';
+
+export default function TryInPlaygroundButton({
+  children,
+  className: blockClassName = '',
+  language: languageProp,
+  metastring,
+  showLineNumbers: showLineNumbersProp,
+}: Props): ReactNode {
+  const {
+    prism: { defaultLanguage, magicComments },
+  } = useThemeConfig();
+  const language =
+    languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage;
+  const prismTheme = usePrismTheme();
+
+  const { code, lineClassNames } = parseLines(children, {
+    language,
+    magicComments,
+    metastring,
+  });
+
+  const codeLines = code
+    .split('\n')
+    .filter(
+      (c, i) =>
+        !(lineClassNames[i] as string[] | undefined)?.includes(
+          'code-block-removed-line',
+        ),
+    );
+  const copiedCode = codeLines.join('\n');
+  const lastLineOfCodeLength = codeLines.at(-1)?.length ?? 0;
+  const needsMorePadding = lastLineOfCodeLength > 50;
+
+  const eslintrcHash = parseEslintrc(metastring);
+
+  <Highlight code={code} language={language ?? 'text'} theme={prismTheme}>
+    {({
+      className,
+      getLineProps,
+      getTokenProps,
+      tokens,
+    }): React.JSX.Element => (
+      <pre
+        className={clsx(className, styles.codeBlock, 'thin-scrollbar')}
+        ref={wordWrap.codeBlockRef}
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex={0}
+      >
+        <code
+          className={clsx(
+            styles.codeBlockLines,
+            eslintrcHash &&
+              needsMorePadding &&
+              styles.codeBlockLinesMorePadding,
+            showLineNumbers && styles.codeBlockLinesWithNumbering,
+          )}
+        >
+          {tokens.map((line, i) => (
+            <Line
+              classNames={lineClassNames[i]}
+              getLineProps={getLineProps}
+              getTokenProps={getTokenProps}
+              key={i}
+              line={line}
+              showLineNumbers={showLineNumbers}
+            />
+          ))}
+        </code>
+      </pre>
+    )}
+  </Highlight>;
+  {
+    eslintrcHash && (
+      <TryInPlayground
+        className={clsx(
+          'button button--primary button--outline',
+          styles.playgroundButton,
+        )}
+        codeHash={lz.compressToEncodedURIComponent(copiedCode)}
+        eslintrcHash={eslintrcHash}
+        language={language}
+      >
+        Open in Playground
+      </TryInPlayground>
+    );
+  }
+}
+
+const eslintrcHashRegex = /eslintrcHash=(?<quote>["'])(?<eslintrcHash>.*?)\1/;
+
+function parseEslintrc(metastring?: string): string {
+  return metastring?.match(eslintrcHashRegex)?.groups?.eslintrcHash ?? '';
+}
diff --git a/packages/website/src/theme/CodeBlock/Buttons/TryInPlaygroundButton/styles.module.css b/packages/website/src/theme/CodeBlock/Buttons/TryInPlaygroundButton/styles.module.css
@@ -0,0 +1,49 @@
+.codeBlock {
+  --ifm-pre-background: var(--prism-background-color);
+
+  margin: 0;
+  padding: 0;
+}
+
+.codeBlockLines {
+  font: inherit;
+
+  /* rtl:ignore */
+  float: left;
+  min-width: 100%;
+  padding: var(--ifm-pre-padding);
+}
+
+.codeBlockLinesMorePadding {
+  padding: var(--ifm-pre-padding) var(--ifm-pre-padding)
+    calc(var(--ifm-pre-padding) * 2.5);
+}
+
+.codeBlockLinesWithNumbering {
+  display: table;
+  padding: var(--ifm-pre-padding) 0;
+}
+
+@media print {
+  .codeBlockLines {
+    white-space: pre-wrap;
+  }
+}
+
+.playgroundButton {
+  position: absolute;
+  bottom: calc(var(--ifm-pre-padding) / 2);
+  right: calc(var(--ifm-pre-padding) / 2);
+}
+
+@media screen and (width <= 768px), screen and (996px <= width <= 1200px) {
+  .codeBlockContent {
+    min-height: auto;
+    overflow: auto;
+  }
+
+  .playgroundButton {
+    position: static;
+    margin: calc(var(--ifm-pre-padding) / 2);
+  }
+}
diff --git a/packages/website/src/theme/CodeBlock/Buttons/WordWrapButton/index.tsx b/packages/website/src/theme/CodeBlock/Buttons/WordWrapButton/index.tsx
@@ -0,0 +1,39 @@
+import React, { type ReactNode } from 'react';
+import clsx from 'clsx';
+import { translate } from '@docusaurus/Translate';
+import { useCodeBlockContext } from '@docusaurus/theme-common/internal';
+import Button from '@theme/CodeBlock/Buttons/Button';
+import type { Props } from '@theme/CodeBlock/Buttons/WordWrapButton';
+import IconWordWrap from '@theme/Icon/WordWrap';
+
+import styles from './styles.module.css';
+
+export default function WordWrapButton({ className }: Props): ReactNode {
+  const { wordWrap } = useCodeBlockContext();
+
+  const canShowButton = wordWrap.isEnabled || wordWrap.isCodeScrollable;
+  if (!canShowButton) {
+    return false;
+  }
+
+  const title = translate({
+    id: 'theme.CodeBlock.wordWrapToggle',
+    message: 'Toggle word wrap',
+    description:
+      'The title attribute for toggle word wrapping button of code block lines',
+  });
+
+  return (
+    <Button
+      onClick={() => wordWrap.toggle()}
+      className={clsx(
+        className,
+        wordWrap.isEnabled && styles.wordWrapButtonEnabled,
+      )}
+      aria-label={title}
+      title={title}
+    >
+      <IconWordWrap className={styles.wordWrapButtonIcon} aria-hidden="true" />
+    </Button>
+  );
+}
diff --git a/packages/website/src/theme/CodeBlock/Buttons/WordWrapButton/styles.module.css b/packages/website/src/theme/CodeBlock/Buttons/WordWrapButton/styles.module.css
@@ -0,0 +1,8 @@
+.wordWrapButtonIcon {
+  width: 1.2rem;
+  height: 1.2rem;
+}
+
+.wordWrapButtonEnabled .wordWrapButtonIcon {
+  color: var(--ifm-color-primary);
+}