Fix code copy

Author: Brijesh Bittu

docs/src/components/CodeBlock.pigment.ts

@@ -2,7 +2,7 @@ import { t } from '@pigment-css/theme';
 import { css, styled } from '@pigment-css/react-new';
 import { applyText } from 'docs/utils/theme';
 
-export const Root = styled.div({
+export const Root = styled.figure({
   backgroundColor: '$color.content',
   border: `1px solid ${t('$color.gray.200')}`,
   borderRadius: t('$radius.md'),

docs/src/components/CodeBlock.tsx

@@ -6,9 +6,9 @@ import { CheckIcon } from 'docs/icons/CheckIcon';
 import { CopyIcon } from 'docs/icons/CopyIcon';
 
 import * as CodeBlock from './CodeBlock.pigment';
-import * as ScrollArea from './ScrollArea';
-import { GhostButton } from './GhostButton.pigment';
 import { preContainer } from './CodeBlock.pigment';
+import * as ScrollArea from './ScrollArea';
+import { GhostButton } from './GhostButton';
 
 const CodeBlockContext = React.createContext({ codeId: '', titleId: '' });
 
@@ -27,25 +27,27 @@ export function Panel({ className, children, ...props }: React.ComponentPropsWit
   const { codeId, titleId } = React.useContext(CodeBlockContext);
   const [copyTimeout, setCopyTimeout] = React.useState<number>(0);
 
+  const handleCopy = React.useCallback(async () => {
+    const code = document.getElementById(codeId)?.textContent;
+
+    if (code) {
+      await copy(code);
+      const newTimeout = window.setTimeout(() => {
+        window.clearTimeout(newTimeout);
+        setCopyTimeout(0);
+      }, 2000);
+      window.clearTimeout(copyTimeout);
+      setCopyTimeout(newTimeout);
+    }
+  }, []);
+
   return (
     <CodeBlock.Panel className={className} {...props}>
       <CodeBlock.PanelTitle id={titleId}>{children}</CodeBlock.PanelTitle>
       <GhostButton
         className={CodeBlock.ghostButtonStyle().className}
         aria-label="Copy code"
-        onClick={async () => {
-          const code = document.getElementById(codeId)?.textContent;
-
-          if (code) {
-            await copy(code);
-            const newTimeout = window.setTimeout(() => {
-              window.clearTimeout(newTimeout);
-              setCopyTimeout(0);
-            }, 2000);
-            window.clearTimeout(copyTimeout);
-            setCopyTimeout(newTimeout);
-          }
-        }}
+        onClick={handleCopy}
       >
         Copy
         <CodeBlock.CopyLabel>{copyTimeout ? <CheckIcon /> : <CopyIcon />}</CodeBlock.CopyLabel>

docs/src/components/GhostButton.tsx

@@ -0,0 +1,19 @@
+import clsx from 'clsx';
+import * as React from 'react';
+
+import * as Styled from './GhostButton.pigment';
+
+interface GhostButtonProps extends React.ComponentProps<'button'> {
+  layout?: 'text' | 'icon';
+}
+
+export function GhostButton({ className, layout = 'text', ...props }: GhostButtonProps) {
+  return (
+    <Styled.GhostButton
+      data-layout={layout}
+      type="button"
+      className={clsx('GhostButton', className)}
+      {...props}
+    />
+  );
+}

docs/src/components/Link.pigment.ts

@@ -14,6 +14,10 @@ export const linkStyle = css`
     border-radius: var(--radius-sm);
   }
 
+  &[data-autolink] {
+    display: inline;
+  }
+
   @media (hover: hover) {
     &:hover {
       text-decoration-color: ${t('$color.blue')};

docs/src/content/overview/quick-start.mdx

@@ -59,7 +59,7 @@ export default defineConfig({
 
 ### Non React usage
 
-```jsx
+```ts title="App.ts"
 import { css } from '@pigment-css/react';
 
 const visuallyHidden = css({
@@ -87,9 +87,8 @@ const visuallyHidden2 = css`
   width: 1px;
 `;
 
-function App() {
-  return <div {...visuallyHidden()}>I am invisible</div>;
-}
+const element = document.getElemenyById('app');
+element.className = visuallyHidden().className;
 ```
 
 Which API signature to use is totally on the requirements. Somethings are easier with the tagged-template literal signature like copy-pasting css from other source (Figma for example) but it requires editor integration. For example, [vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components) extension needs to be installed to get completions and syntax highlighting in VSCode.

docs/src/icons/LinkIcon.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+export function LinkIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg viewBox="0 0 16 16" aria-hidden {...props}>
+      <path
+        stroke="currentColor"
+        d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"
+      />
+    </svg>
+  );
+}

docs/src/mdx-components.pigment.ts

@@ -1,13 +1,28 @@
 import { t } from '@pigment-css/theme';
 import { styled } from '@pigment-css/react-new';
 
-import * as CodeBlockBase from './components/CodeBlock.pigment';
+import * as CodeBlockBase from './components/CodeBlock';
 import { Code as CodeBase } from './components/Code.pigment';
 import { Subtitle as SubtitleBase } from './components/Subtitle.pigment';
 import { applyText, spacing } from './utils/theme';
+import { linkStyle } from './components/Link.pigment';
 
 export const Heading = styled('h1')(({ theme }) => ({
+  position: 'relative',
   textWrap: 'balance',
+  [`.${linkStyle}`]: {
+    position: 'absolute',
+    visibility: 'hidden',
+    left: -25,
+    top: '50%',
+    transform: 'translateY(-50%)',
+    color: '$color.foreground',
+  },
+  '&:hover': {
+    [`.${linkStyle}`]: {
+      visibility: 'visible',
+    },
+  },
   variants: {
     lvl: {
       one: {

docs/src/mdx-components.tsx

@@ -6,6 +6,7 @@ import * as Styled from './mdx-components.pigment';
 import { Link } from './components/Link';
 import { getChildrenText } from './utils/getChildrenText';
 import { Changelog } from './components/Changelog';
+import { LinkIcon } from './icons/LinkIcon';
 
 export const mdxComponents: MDXComponents = {
   a: (props) => <Link {...props} />,
@@ -57,6 +58,10 @@ export const mdxComponents: MDXComponents = {
     return <meta {...props} />;
   },
   Changelog,
+  LinkIcon: (props) => {
+    console.log(props);
+    return <LinkIcon width={16} />;
+  },
 };
 
 export const inlineMdxComponents: MDXComponents = {

docs/src/utils/mdx.ts renamed to docs/src/utils/mdx.tsx

@@ -15,7 +15,7 @@ import { rehypeSubtitle } from './rehype/rehypeSubtitle';
 import { rehypeInlineCode } from './rehype/rehypeInlineCode';
 
 const theme: Theme = {
-  name: 'base-ui',
+  name: 'pigment-css',
   bg: 'var(--color-content)',
   fg: 'var(--syntax-default)',
   settings: [
@@ -331,16 +331,18 @@ const theme: Theme = {
   ],
 };
 
-const highlighter = createHighlighter({
+// @ts-expect-error Set highlighter on globalThis
+globalThis.highlighter ??= createHighlighter({
   themes: [theme],
   langs: ['tsx', 'jsx', 'css'],
 });
 
 export async function renderMdx(mdxSource: string) {
   const prettyCodeOptions = {
-    getHighlighter: async () => await highlighter,
+    // @ts-expect-error Set highlighter on globalThis
+    getHighlighter: async () => await globalThis.highlighter,
     grid: false,
-    theme: 'base-ui',
+    theme: 'pigment-css',
     defaultLang: 'tsx',
   };
   const { default: MDXContent } = await evaluate(mdxSource, {
@@ -349,7 +351,17 @@ export async function renderMdx(mdxSource: string) {
     rehypePlugins: [
       [rehypePrettyCode, prettyCodeOptions],
       rehypeSlug,
-      rehyeAutolinkHeading,
+      [
+        rehyeAutolinkHeading,
+        {
+          properties: {
+            'data-autolink': '',
+            tabindex: -1,
+            'aria-hidden': 'true',
+          },
+        },
+      ],
+      // rehypeAutoLinkContent,
       rehypeExtractToc,
       rehypeSubtitle,
       rehypeInlineCode,

docs/src/utils/rehype/rehypeAutoLinkContent.ts

@@ -0,0 +1,32 @@
+import { visitParents } from 'unist-util-visit-parents';
+import type { evaluate } from '@mdx-js/mdx';
+
+export type Pluggable = Exclude<
+  Parameters<typeof evaluate>[1]['rehypePlugins'],
+  undefined | null
+>[number];
+
+/**
+ * Unwrap potential paragraphs inside `<Subtitle>`
+ */
+export const rehypeAutoLinkContent: Pluggable = () => {
+  return (tree) => {
+    visitParents(tree, (node) => {
+      if (
+        node.tagName === 'a' &&
+        node.type === 'element' &&
+        node.properties &&
+        'data-autolink' in node.properties
+      ) {
+        node.children = [
+          {
+            type: 'mdxJsxFlowElement',
+            name: 'LinkIcon',
+            data: { _mdxExplicitJsx: true },
+            children: [],
+          },
+        ];
+      }
+    });
+  };
+};